rn-profile-screen

rn-profile-screen A customizable profile screen component for React Native projects. Use this open source library in your fresh React Native project for instant startup.

Table of Contents

Installation

To use rn-profile-screen in your React Native project, simply install it using npm or yarn:

npm install rn-profile-screen
or
yarn add rn-profile-screen

Usage

To use the profile screen component in your app, import it from the rn-profile-screen package and render it as the second component in your app after splash screen. You can customize the appearance and behavior of the profile screen by passing in props.

How to use

import ProfileScreen from "rn-profile-screen";

function App() {
  return (
    <ProfileScreen
      source={require("./src/assets/back.png")}
      source1={require("./src/assets/pencil.png")}
      profileSource={require("./src/assets/profile.png")}
      phoneSource={require("./src/assets/phone.png")}
      emailSource={require("./src/assets/email.png")}
      HeadingText={"Emma Phillips"}
      HeadingText1={"Fashion Modal"}
      phoneNumberText={"(581)-307-6902"}
      emailText={"[e-mail]"}
      WalletPrice={"$140.00"}
      WalletText={"Wallet"}
      OrderPrice={"12"}
      OrderText={"Orders"}
      TabItem={6}
      texts={[
        {
          text: "Your Favorites",
          onPress: () => console.log("Your Favorites pressed"),
        },
        { text: "Payment", onPress: () => console.log("Payment pressed") },
        {
          text: "Tell Your Friend",
          onPress: () => console.log("Tell Your Friend pressed"),
        },
        {
          text: "Promotions",
          onPress: () => console.log("Promotions pressed"),
        },
        { text: "Settings", onPress: () => console.log("Settings pressed") },
        { text: "Log Out", onPress: () => console.log("Log Out pressed") },
      ]}
      TabImages={[
        require("./src/assets/like.png"),
        require("./src/assets/wallet.png"),
        require("./src/assets/add-friend.png"),
        require("./src/assets/promotion.png"),
        require("./src/assets/setting.png"),
        require("./src/assets/turn-off.png"),
        "https://images.unsplash.com/photo-1503023345310-bd7c1de61c7d?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxzZWFyY2h8Mnx8aHVtYW58ZW58MHx8MHx8&w=1000&q=80",
        "https://media.istockphoto.com/id/517188688/photo/mountain-landscape.jpg?s=612x612&w=0&k=20&c=A63koPKaCyIwQWOTFBRWXj_PwCrR4cEoOw2S9Q7yVl8=",
        "https://images.unsplash.com/photo-1503023345310-bd7c1de61c7d?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxzZWFyY2h8Mnx8aHVtYW58ZW58MHx8MHx8&w=1000&q=80",
        "https://images.unsplash.com/photo-1503023345310-bd7c1de61c7d?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxzZWFyY2h8Mnx8aHVtYW58ZW58MHx8MHx8&w=1000&q=80",
        "https://media.istockphoto.com/id/517188688/photo/mountain-landscape.jpg?s=612x612&w=0&k=20&c=A63koPKaCyIwQWOTFBRWXj_PwCrR4cEoOw2S9Q7yVl8=",
        "https://media.istockphoto.com/id/517188688/photo/mountain-landscape.jpg?s=612x612&w=0&k=20&c=A63koPKaCyIwQWOTFBRWXj_PwCrR4cEoOw2S9Q7yVl8=",
      ]}
      usePhoneLogo={true}
      useEmailLogo={true}
    />
  );
}

Props

The ProfileScreen component accepts the following props:

Prop Name	Data Type	Description
HeadingText	any	main heading
---------	---------	-----------
HeadingText1	any	main heading
---------	---------	-----------
source	specified path(req)	Image source
---------	---------	-----------
source1	specified path(req)	Image source
---------	---------	-----------
profileSource	specified path(req)	Profile Image source
---------	---------	-----------
emailSource	specified path(req)	Profile Image source
---------	---------	-----------
phoneNumberText	any	Your phoneNumberText Text
---------	---------	-----------
emailText	any	Your Email Text
---------	---------	-----------
loginPress	any	onPress for login
---------	---------	-----------
SignUpPress	any	onPress for signUp
---------	---------	-----------
WalletPrice	any	Your Wallet Price
---------	---------	-----------
WalletText	any	Your Order Price
---------	---------	-----------
OrderText	any	Your Order Text
---------	---------	-----------
TabItem	any	Your Tab Item
---------	---------	-----------
usePhoneLogo	bool	Using Phone Logo or not
---------	---------	-----------
useEmailLogo	bool	Using Email Logo or not
---------	---------	-----------
texts	any	Your Tab Texts
---------	---------	-----------
TabImages	specified path(req)	TabImages Source
---------	---------	-----------
WalletPriceStyle	any	Wallet Price Style
---------	---------	-----------
WalletTextStyle	any	Wallet Text Style
---------	---------	-----------
OrderPriceStyle	any	Order Price Style
---------	---------	-----------
OrderTextStyle	any	Order Text Style
---------	---------	-----------
phoneNumberTextStyle	any	PhoneNumber Text Style
---------	---------	-----------
EmailTextStyle	any	Email Text Style
---------	---------	-----------
imageMailStyle	any	Image Mail Style
---------	---------	-----------
imagePhoneStyle	any	Image Phone Style
---------	---------	-----------
profileImageStyle	any	Profile Image Style
---------	---------	-----------
imagePencileStyle	any	Image Pencile Style
---------	---------	-----------
imageStyle	any	Image Style
---------	---------	-----------
HeadingTextStyle	any	Heading Text Style
---------	---------	-----------
HeadingTextStyle1	any	Heading Text Style1
---------	---------	-----------
imageTabStyle	any	Image Tab Style
---------	---------	-----------
viewStyle	any	View Style
---------	---------	-----------
onPress	any	onPress for Tabs

Contributors

We would like to thank the following developers for their contributions to this project:

To all our contributors, thank you for your hard work and dedication!

License

This package is released under the MIT License.