3 more dependencies are removed. Library is more clear now

Author: kuraydev

README.md

@@ -28,9 +28,6 @@ npm i react-native-login-screen
 
 ```js
 "react-native-spinkit": ">= 1.5.0",
-"react-native-vector-icons": ">= 6.6.0",
-"@freakycoder/react-native-helpers": "0.1.0",
-"react-native-dynamic-vector-icons": ">= 0.2.1",
 "react-native-material-textfield": "https://github.com/WrathChaos/react-native-material-textfield.git"
 ```
 
@@ -142,6 +139,7 @@ Pretty advanced and fully customizable example of login screen
 | disableSignupButton    |  boolean  |         false          | disable the signup 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                         |
+| settingsIconComponent  | component |        default         | set any component instead of settings icon component                         |
 | usernameTextInputValue |   value   |        default         | set username's text input value                                              |
 | passwordTextInputValue |   value   |        default         | set password's text input value                                              |
 | usernamePlaceholder    |  string   |        Username        | change the username text input's placeholder                                 |

assets/Screenshots/RN-Login-Screen.gif

@@ -42,11 +42,16 @@ const App = () => {
         }}
         signupStyle={{
           color: "#fdfdfd",
+          fontSize: 16,
           fontFamily: "Now-Bold",
         }}
-        usernameOnChangeText={(username) => console.log("Username: ", username)}
+        usernameOnChangeText={(username: string) =>
+          console.log("Username: ", username)
+        }
         onPressSettings={() => alert("Settings Button is pressed")}
-        passwordOnChangeText={(password) => console.log("Password: ", password)}
+        passwordOnChangeText={(password: string) =>
+          console.log("Password: ", password)
+        }
         onPressLogin={() => {
           setSpinnerVisibility(true);
           setTimeout(() => {

assets/Screenshots/RN-Login-Screen.png

@@ -11,12 +11,18 @@ import Spinner from "react-native-spinkit";
 /**
  * ? Local Imports
  */
-import Logo from "./components/Logo/Logo";
+import Logo, { ILogoProps } from "./components/Logo/Logo";
 import styles, { container } from "./LoginScreen.style";
-import BottomContainer from "./components/BottomContainer/BottomContainer";
+import BottomContainer, {
+  IBottomContainerProps,
+} from "./components/BottomContainer/BottomContainer";
+import { ICardProps } from "./components/Card/Card";
 
-export interface ILoginProps {
-  source: any;
+export interface ILoginProps
+  extends IBottomContainerProps,
+    ILogoProps,
+    ICardProps {
+  source?: any;
   loginText?: string;
   spinnerStyle?: any;
   signupText: string;

example/App.tsx

@@ -1,4 +1,10 @@
-import { ViewStyle, TextStyle, StyleSheet, Dimensions } from "react-native";
+import {
+  ViewStyle,
+  TextStyle,
+  StyleSheet,
+  Dimensions,
+  ImageStyle,
+} from "react-native";
 const { width, height } = Dimensions.get("window");
 
 interface Style {
@@ -7,9 +13,18 @@ interface Style {
   signupContainer: ViewStyle;
   signupTextStyle: TextStyle;
   signupButtonStyle: TextStyle;
+  signupButtonRightArrowContainer: ViewStyle;
+  signupButtonRightArrowImageStyle: ImageStyle;
+  settingsIconContainer: ViewStyle;
+  settingsIconImageStyle: ImageStyle;
+  passwordIconImageStyle: ImageStyle;
+  userIconImageStyle: ImageStyle;
 }
 
-export const container = (backgroundColor: string, cardState: boolean) => {
+export const container = (
+  backgroundColor: string = "rgba(255,255,255,0.45)",
+  cardState: boolean = false,
+): ViewStyle => {
   return {
     backgroundColor,
     borderRadius: 24,
@@ -40,12 +55,41 @@ export default StyleSheet.create<Style>({
     fontWeight: "700",
   },
   signupButtonStyle: {
-    padding: 12,
+    padding: 10,
     minHeight: 30,
     borderRadius: 16,
     marginLeft: "auto",
+    flexDirection: "row",
     alignItems: "center",
     justifyContent: "center",
     backgroundColor: "rgba(0,0,0,0.45)",
   },
+  signupButtonRightArrowContainer: {
+    marginLeft: 5,
+  },
+  signupButtonRightArrowImageStyle: {
+    width: 15,
+    height: 15,
+  },
+  settingsIconContainer: {
+    shadowRadius: 3,
+    shadowOpacity: 0.7,
+    shadowColor: "#757575",
+    shadowOffset: {
+      width: 0,
+      height: 3,
+    },
+  },
+  settingsIconImageStyle: {
+    width: 35,
+    height: 35,
+  },
+  passwordIconImageStyle: {
+    width: 30,
+    height: 30,
+  },
+  userIconImageStyle: {
+    width: 30,
+    height: 30,
+  },
 });

lib/LoginScreen.tsx

@@ -1,18 +1,16 @@
 import * as React from "react";
-import { Text, View, TouchableOpacity } from "react-native";
-import Icon from "react-native-dynamic-vector-icons";
+import { Text, View, Image, TouchableOpacity } from "react-native";
 /**
  * ? Local Imports
  */
 import Card from "../Card/Card";
 import styles, { container } from "./BottomContainer.style";
 
-interface IBottomContainerProps {
+export interface IBottomContainerProps {
   signupStyle?: any;
   signupText?: string;
   emailTitle?: string;
   cardState?: boolean;
-  IconComponent?: any;
   usernameTitle?: string;
   passwordTitle?: string;
   contentComponent?: any;
@@ -33,6 +31,7 @@ interface IBottomContainerProps {
   usernameTextInputValue?: string;
   passwordTextInputValue?: string;
   repasswordTextInputValue?: string;
+  settingsIconComponent?: React.ReactNode;
   onSignUpPress?: () => void;
   onPressSettings?: () => void;
   emailOnChangeText?: (text: string) => void;
@@ -45,7 +44,6 @@ const BottomContainer = (props: IBottomContainerProps) => {
   const {
     cardState,
     onSignUpPress,
-    IconComponent,
     backgroundColor,
     onPressSettings,
     disableSettings,
@@ -58,39 +56,59 @@ const BottomContainer = (props: IBottomContainerProps) => {
     passwordIconComponent,
     usernameTextInputValue,
     passwordTextInputValue,
+    settingsIconComponent,
     signupText,
     signupStyle,
     disableSignupButton,
     loginButtonText,
-    emailTitle,
     emailPlaceholder,
     emailOnChangeText,
     emailIconComponent,
     emailTextInputValue,
-    repasswordTitle,
     repasswordTextInputValue,
     repasswordPlaceholder,
     repasswordOnChangeText,
     repasswordIconComponent,
   } = props;
 
+  const renderUserIcon = () => (
+    <Image
+      source={require("../../local-assets/user.png")}
+      style={styles.userIconImageStyle}
+    />
+  );
+
+  const renderPasswordIcon = () => (
+    <Image
+      source={require("../../local-assets/password.png")}
+      style={styles.passwordIconImageStyle}
+    />
+  );
+
+  const renderSettingsIcon = () => (
+    <View style={styles.settingsIconContainer}>
+      <Image
+        source={require("../../local-assets/settings.png")}
+        style={styles.settingsIconImageStyle}
+      />
+    </View>
+  );
+
   const renderLoginCards = () => {
     return (
       <View>
         <Card
           value={usernameTextInputValue}
           placeholder={usernamePlaceholder}
           onChangeText={usernameOnChangeText}
-          iconComponent={usernameIconComponent}
+          iconComponent={usernameIconComponent || renderUserIcon()}
           {...props}
         />
         <Card
-          name="key"
           secureTextEntry
-          type="FontAwesome"
           value={passwordTextInputValue}
           placeholder={passwordPlaceholder}
-          iconComponent={passwordIconComponent}
+          iconComponent={passwordIconComponent || renderPasswordIcon()}
           onChangeText={(text: string) =>
             passwordOnChangeText && passwordOnChangeText(text)
           }
@@ -107,27 +125,23 @@ const BottomContainer = (props: IBottomContainerProps) => {
           value={emailTextInputValue}
           placeholder={emailPlaceholder}
           onChangeText={emailOnChangeText}
-          iconComponent={emailIconComponent}
+          iconComponent={emailIconComponent || renderUserIcon()}
           {...props}
         />
         <Card
           secureTextEntry
           value={passwordTextInputValue}
           placeholder={passwordPlaceholder}
           onChangeText={passwordOnChangeText}
-          iconComponent={passwordIconComponent}
-          name="key"
-          type="FontAwesome"
+          iconComponent={passwordIconComponent || renderPasswordIcon()}
           {...props}
         />
         <Card
           secureTextEntry
           value={repasswordTextInputValue}
           placeholder={repasswordPlaceholder}
           onChangeText={repasswordOnChangeText}
-          iconComponent={repasswordIconComponent}
-          name="key"
-          type="FontAwesome"
+          iconComponent={repasswordIconComponent || renderPasswordIcon()}
           {...props}
         />
       </View>
@@ -146,15 +160,9 @@ const BottomContainer = (props: IBottomContainerProps) => {
         {!disableSettings && (
           <TouchableOpacity
             onPress={onPressSettings}
-            style={{ marginRight: "auto" }}
+            style={{ marginRight: "auto", marginLeft: 12 }}
           >
-            <IconComponent
-              size={35}
-              type="Ionicons"
-              name="ios-settings"
-              color="rgba(255,255,255, 0.9)"
-              {...props}
-            />
+            {settingsIconComponent || renderSettingsIcon()}
           </TouchableOpacity>
         )}
         {!disableSignupButton && (
@@ -165,6 +173,12 @@ const BottomContainer = (props: IBottomContainerProps) => {
             <Text style={signupStyle || styles.signupTextStyle}>
               {cardState ? signupText : loginButtonText}
             </Text>
+            <View style={styles.signupButtonRightArrowContainer}>
+              <Image
+                source={require("../../local-assets/right-arrow.png")}
+                style={styles.signupButtonRightArrowImageStyle}
+              />
+            </View>
           </TouchableOpacity>
         )}
       </View>
@@ -173,7 +187,6 @@ const BottomContainer = (props: IBottomContainerProps) => {
 };
 
 BottomContainer.defaultProps = {
-  IconComponent: Icon,
   loginButtonText: "Already Have Account",
   disableSwitch: false,
   disableSettings: false,
@@ -184,7 +197,6 @@ BottomContainer.defaultProps = {
   usernamePlaceholder: "Username",
   passwordPlaceholder: "Password",
   repasswordPlaceholder: "Re-password",
-  backgroundColor: "rgba(255,255,255,0.45)",
 };
 
 export default BottomContainer;

lib/components/BottomContainer/BottomContainer.style.ts

@@ -1,39 +1,38 @@
 import * as React from "react";
 import { View } from "react-native";
-import Icon from "react-native-dynamic-vector-icons";
 import { TextField } from "react-native-material-textfield";
 /**
  * ? Local Imports
  */
 import styles, { _textStyle, _textInputStyle } from "./Card.style";
 
 export interface ICardProps {
+  value?: string;
   iconComponent?: any;
   placeholder?: string;
+  secureTextEntry?: boolean;
   onChangeText?: (text: string) => void;
 }
 
 const Card = (props: ICardProps) => {
-  const { placeholder, onChangeText, iconComponent } = props;
+  const {
+    value,
+    placeholder,
+    onChangeText,
+    secureTextEntry,
+    iconComponent,
+  } = props;
   return (
     <View style={styles.container}>
       <View style={styles.containerGlue}>
-        <View style={styles.iconContainer}>
-          {iconComponent || (
-            <Icon
-              size={30}
-              name="user-o"
-              color="black"
-              type="FontAwesome"
-              {...props}
-            />
-          )}
-        </View>
+        <View style={styles.iconContainer}>{iconComponent}</View>
         <View style={styles.textContainer}>
           <TextField
             {...props}
+            value={value}
             label={placeholder}
             onChangeText={onChangeText}
+            secureTextEntry={secureTextEntry}
           />
         </View>
       </View>
@@ -42,7 +41,7 @@ const Card = (props: ICardProps) => {
 };
 
 Card.defaultProps = {
-  placeholder: "John Doe",
+  placeholder: "Username",
 };
 
 export default Card;