rn-signup-screen A customizable signup 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-signup-screen in your React Native project, simply install it using npm or yarn:

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

Usage

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

How to use

import SignUpScreen from "rn-signup-screen";

function App() {
  return (
    <SignUpScreen
      placeholderFN={"Fast Name"}
      placeholderLN={"LastName"}
      placeholderMail={"Email"}
      placeholderPass={"Password"}
      placeholderConfPass={"Confirm Password"}
      backgroundColor={"#000"}
      bgSource={require("./src/assets/black1.jpg")}
      useLogo={true}
      useBg={true}
      Logo={"center"}
      source={require("./src/assets/cropped.png")}
      position={"center"}
      keyboardType
    />
  );
}

Props

The SignUpScreen component accepts the following props:

| Prop Name | Data Type | Description | | ------------------- | ------------------- | ----------------------------------------------------------------------------- | | placeholderFN | any | Your First Name | | -------- | -------------- | ------------------------- | | placeholderLN | any | Your Last Name | | ----------------- | --------------- | ------------------------------ | | placeholderMail | any | Your Email | | --------- | --------- | ----------- | | placeholderPass | any | Your Password | | --------- | --------- | ----------- | | placeholderConfPass | any | Your Confirm Password | | --------- | --------- | ----------- | | placeholderColor | any | TextInput color | | --------- | --------- | ----------- | | backgroundColor | any | Your Background | | --------- | --------- | ----------- | | RegisterSubmitText | any | Your Signup Button text | | --------- | --------- | ----------- | | bgSource | specified path(req) | Your background image | | --------- | --------- | ----------- | | useLogo | bool | Using Logo or not | | --------- | --------- | ----------- | | useBg | bool | Using Background Image or not if not using then backgroundColor will not work | | --------- | --------- | ----------- | | Logo | specified values | Logo position | | --------- | --------- | ----------- | | source | specified path(req) | Logo source | | --------- | --------- | ----------- | | HeadingText | any | main heading | | --------- | --------- | ----------- | | HeadingTextStyle | specified path(req) | style to heading | | --------- | --------- | ----------- | | inputStyle | any | style to input | | --------- | --------- | ----------- | | LoginText | any | Your Login Text | | --------- | --------- | ----------- | | SubHeading | any | Your SubHeading Text | | --------- | --------- | ----------- | | imageStyle | any | Style to Logo | | --------- | --------- | ----------- | | position | specified values | Box alignment | | --------- | --------- | ----------- | | loginPress | any | onPress for login | | --------- | --------- | ----------- | | SignUpPress | any | onPress for signUp | | --------- | --------- | ----------- | | onBlur | any | onBlur | | --------- | --------- | ----------- | | onFocus | any | onFocus | | --------- | --------- | ----------- | | onKeyPress | any | onKeyPress | | --------- | --------- | ----------- | | keyboardType | any | keyboardType |

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.