Rn-signup-screen NPM

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