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={"[email protected]"}
      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.