README is updated

WrathChaos · Jan 9, 2020 · cab800e · cab800e
1 parent 616f3af
commit cab800e
Show file tree

Hide file tree

Showing 3 changed files with 43 additions and 11 deletions.
diff --git a/README.md b/README.md
@@ -59,24 +59,25 @@ Fully Customizable & Ready to Use Login Screen. You can customize anything on th
   <img alt="React Native Login Screen" src="assets/Screenshots/custom-example.png" />
 </p>
 
+# Advanced Usage with Custom Children
+
 ```jsx
 <LoginScreen
   source={{
     uri: bgImage
   }}
   onPressLogin={() => alert("Login Button is pressed")}
   onPressSettings={() => alert("Settings Button is pressed")}
-  switchValue={switchValue} 
+  switchValue={switchValue}
+  onSwitchValueChange={switchValue => setSwitchValue(switchValue) }
   usernameOnChangeText={username => setUsername(username)}
   passwordOnChangeText={password => alert("Password: ", password)}
   loginButtonBackgroundColor="#a2a5a9"  // Optional
-  logoComponent={your-logo-component}   // Optional 
+  logoComponent={your-logo-component}   // Optional
   IconComponent={your-icon-component}   // Optional
   passwordIconComponent={your-icon-component-for-password} // Optional
   usernameIconComponent={your-icon-component-for-username} // Optional
-  onSwitchValueChange={switchValue => {
-    setSwitchValue(switchValue);
-  }}
+
 >
   <View
     style={{
@@ -92,7 +93,36 @@ Fully Customizable & Ready to Use Login Screen. You can customize anything on th
 
 ### Configuration - Props
 
-#### Coming Soon !
+#### Fundamentals
+
+| Property                   |   Type    |    Default     | Description                                                           |
+| -------------------------- | :-------: | :------------: | --------------------------------------------------------------------- |
+| source                     | local/uri | unsplash image | change the background image with local or uri prop                    |
+| onPressLogin               | function  |   undefined    | set your own functional logic for `login button` is pressed           |
+| onPressSettings            | function  |   undefined    | set your own functional logic for `settings button` is pressed        |
+| switchValue                |  boolean  |     false      | set the `remember me` switch's value                                  |
+| onSwitchValueChange        | function  |   undefined    | set your own functional logic for `remember me` switch onChange value |
+| usernameOnChangeText       | function  |   undefined    | set your own functional logic for `username` onChange value           |
+| passwordOnChangeText       | function  |   undefined    | set your own functional logic for `password` onChange value           |
+| loginButtonBackgroundColor |   color   |    #282828     | change the login button's background color                            |
+| loginText                  |  string   |     LOGIN      | change the login button's text                                        |
+| loginButtonTextStyle       |   style   |    default     | set your own style for the login button's text style                  |
+| logoText                   |  string   |     GITHUB     | change the logo's text                                                |
+| logoComponent              | component |      Icon      | set your own logo component instead of default Icon                   |
+
+#### Bottom Container Props
+
+| Property               |   Type    |        Default         | Description                                                    |
+| ---------------------- | :-------: | :--------------------: | -------------------------------------------------------------- |
+| switchText             |  string   |      Remember me       | change the `remember me` switch text                           |
+| IconComponent          | component |          Icon          | set your own component instead of vector-icons' Icon component |
+| backgroundColor        |   color   | rgba(255,255,255,0.45) | change the bottom container's background color                 |
+| switchTextStyle        |   style   |        default         | set your own style instead of switch's text style              |
+| disableSettings        |  boolean  |         false          | disable the settings button if you do not want it              |
+| usernameIconComponent  | component |        default         | set any component instead of username icon component           |
+| passwordIconComponent  | component |        default         | set any component instead of password icon component           |
+| usernameTextInputValue |   value   |        default         | set username's text input value                                |
+| passwordTextInputValue |   value   |        default         | set password's text input value                                |
 
 # Change Log
 

diff --git a/lib/src/LoginScreen.js b/lib/src/LoginScreen.js
@@ -40,10 +40,10 @@ const LoginScreen = props => {
     >
       <View style={container(loginButtonBackgroundColor)}>
         <ImageBackground
+          source={source}
           borderRadius={24}
           resizeMode="cover"
           style={styles.imagebackgroundStyle}
-          source={source}
         >
           <View style={styles.blackoverlay}>
             <SafeAreaView style={styles.safeAreaViewStyle}>

diff --git a/lib/src/components/BottomContainer/BottomContainer.js b/lib/src/components/BottomContainer/BottomContainer.js
@@ -19,14 +19,14 @@ const BottomContainer = props => {
     passwordOnChangeText,
     usernameIconComponent,
     passwordIconComponent,
-    usernameTextinputValue,
-    passwordTextinputValue
+    usernameTextInputValue,
+    passwordTextInputValue
   } = props;
   return (
     <View style={container(backgroundColor)}>
       <View style={styles.containerGlue}>
         <Card
-          value={usernameTextinputValue}
+          value={usernameTextInputValue}
           onChangeText={usernameOnChangeText}
           iconComponent={usernameIconComponent}
           {...props}
@@ -36,7 +36,7 @@ const BottomContainer = props => {
           secureTextEntry
           title="Password"
           type="FontAwesome"
-          value={passwordTextinputValue}
+          value={passwordTextInputValue}
           placeholder="Your Password"
           onChangeText={text => passwordOnChangeText(text)}
           iconComponent={passwordIconComponent}
@@ -74,11 +74,13 @@ const BottomContainer = props => {
 
 BottomContainer.propTypes = {
   switchText: PropTypes.string,
+  disableSettings: PropTypes.bool,
   backgroundColor: PropTypes.string
 };
 
 BottomContainer.defaultProps = {
   IconComponent: Icon,
+  disableSettings: false,
   switchText: "Remember me",
   backgroundColor: "rgba(255,255,255,0.45)"
 };