feat: breaking changes with new props

WrathChaos · Jun 5, 2022 · 771e5c0 · 771e5c0
1 parent c8d52d2
commit 771e5c0
Show file tree

Hide file tree

Showing 21 changed files with 48 additions and 44 deletions.
diff --git a/README.md b/README.md
@@ -57,7 +57,7 @@ import LoginScreen from "react-native-login-screen";
 <LoginScreen
   logoImageSource={require("./assets/logo-example.png")}
   onLoginPress={() => {}}
-  onHaveAccountPress={() => {}}
+  onSignupPress={() => {}}
   onEmailChange={(email: string) => {}}
   onPasswordChange={(password: string) => {}}
 />
@@ -73,7 +73,7 @@ import LoginScreen, { SocialButton } from "react-native-login-screen";
 <LoginScreen
   logoImageSource={require("./assets/logo-example.png")}
   onLoginPress={() => {}}
-  onHaveAccountPress={() => {}}
+  onSignupPress={() => {}}
   onEmailChange={(email: string) => {}}
   onPasswordChange={(password: string) => {}}
 >
@@ -95,29 +95,30 @@ import LoginScreen, { SocialButton } from "react-native-login-screen";
 
 ### Fundamentals
 
-| Property           |   Type   |  Default  | Description                                                        |
-| ------------------ | :------: | :-------: | ------------------------------------------------------------------ |
-| onLoginPress       | function | undefined | set your own function when the `login button` is pressed           |
-| onHaveAccountPress | function | undefined | set your own function when the `have an account button` is pressed |
-| onEmailChange      | function | undefined | set your own function when `email` textinput has a change          |
-| onPasswordChange   | function | undefined | set your own function when `password` textinput has a change       |
-| logoImageSource    |  source  | undefined | set your own logo                                                  |
+| Property         |   Type   |  Default  | Description                                                   |
+| ---------------- | :------: | :-------: | ------------------------------------------------------------- |
+| onLoginPress     | function | undefined | set your own function when the `login button` is pressed      |
+| onSignupPress    | function | undefined | set your own function when the `Create an account` is pressed |
+| onEmailChange    | function | undefined | set your own function when `email` textinput has a change     |
+| onPasswordChange | function | undefined | set your own function when `password` textinput has a change  |
+| logoImageSource  |  source  | undefined | set your own logo                                             |
 
 ### Customizations (Optional)
 
-| Property                |    Type    |          Default           | Description                                         |
-| ----------------------- | :--------: | :------------------------: | --------------------------------------------------- |
-| haveAccountText         |   string   | "Already have an account?" | change the have account text                        |
-| disableDivider          |  boolean   |           false            | disable the divider if you do not want to use it    |
-| disableSocialButtons    |  boolean   |           false            | disable the all social buttons                      |
-| style                   | ViewStyle  |          default           | set/override the default style for the container    |
-| dividerStyle            | ViewStyle  |          default           | set/override the default divider style              |
-| logoImageStyle          | ImageStyle |          default           | set/override the default image style                |
-| textInputContainerStyle | ViewStyle  |          default           | set/override the default text input container style |
-| loginButtonStyle        | ViewStyle  |          default           | set/override the default login button style         |
-| loginTextStyle          | TextStyle  |          default           | set/override the default login text style           |
-| haveAccountButtonStyle  | ViewStyle  |          default           | set/override the default have account button style  |
-| haveAccountTextStyle    | TextStyle  |          default           | set/override the default have account text style    |
+| Property                |    Type    |       Default       | Description                                         |
+| ----------------------- | :--------: | :-----------------: | --------------------------------------------------- |
+| signupText              |   string   | "Create an account" | change the sign up text                             |
+| disableSignup           |  boolean   |        false        | disable the signup if you do not want to use it     |
+| disableDivider          |  boolean   |        false        | disable the divider if you do not want to use it    |
+| disableSocialButtons    |  boolean   |        false        | disable the all social buttons                      |
+| style                   | ViewStyle  |       default       | set/override the default style for the container    |
+| dividerStyle            | ViewStyle  |       default       | set/override the default divider style              |
+| logoImageStyle          | ImageStyle |       default       | set/override the default image style                |
+| textInputContainerStyle | ViewStyle  |       default       | set/override the default text input container style |
+| loginButtonStyle        | ViewStyle  |       default       | set/override the default login button style         |
+| loginTextStyle          | TextStyle  |       default       | set/override the default login text style           |
+| signupStyle             | ViewStyle  |       default       | set/override the default signup button style        |
+| signupTextStyle         | TextStyle  |       default       | set/override the default signup text style          |
 
 ### Default Social Login Buttons (Optional)
 

diff --git a/assets/Screenshots/react-native-login-screen-v2.gif b/assets/Screenshots/react-native-login-screen-v2.gif
diff --git a/assets/Screenshots/react-native-login-screen.gif b/assets/Screenshots/react-native-login-screen.gif
diff --git a/example/App.tsx b/example/App.tsx
@@ -1,6 +1,6 @@
 import React, {useState} from 'react';
 import {View, StatusBar} from 'react-native';
-import {LoginScreen, SocialButton} from 'react-native-login-screen';
+import LoginScreen, {SocialButton} from './build/dist/index';
 
 const App = () => {
   const [username, setUsername] = useState(null);
@@ -13,7 +13,7 @@ const App = () => {
       <LoginScreen
         logoImageSource={require('./assets/logo-example.png')}
         onLoginPress={() => {}}
-        onHaveAccountPress={() => {}}
+        onSignupPress={() => {}}
         onEmailChange={(email: string) => {}}
         onPasswordChange={(password: string) => {}}
       />

diff --git a/example/assets/fonts/Now-Black.otf b/example/assets/fonts/Now-Black.otf
diff --git a/example/assets/fonts/Now-Bold.otf b/example/assets/fonts/Now-Bold.otf
diff --git a/example/assets/fonts/Now-Light.otf b/example/assets/fonts/Now-Light.otf
diff --git a/example/assets/fonts/Now-Medium.otf b/example/assets/fonts/Now-Medium.otf
diff --git a/example/assets/fonts/Now-Regular.otf b/example/assets/fonts/Now-Regular.otf
diff --git a/example/assets/fonts/Now-Thin.otf b/example/assets/fonts/Now-Thin.otf
diff --git a/example/assets/fonts/NowAlt-Black.otf b/example/assets/fonts/NowAlt-Black.otf
diff --git a/example/assets/fonts/NowAlt-Bold.otf b/example/assets/fonts/NowAlt-Bold.otf
diff --git a/example/assets/fonts/NowAlt-Light.otf b/example/assets/fonts/NowAlt-Light.otf
diff --git a/example/assets/fonts/NowAlt-Medium.otf b/example/assets/fonts/NowAlt-Medium.otf
diff --git a/example/assets/fonts/NowAlt-Regular.otf b/example/assets/fonts/NowAlt-Regular.otf
diff --git a/example/assets/fonts/NowAlt-Thin.otf b/example/assets/fonts/NowAlt-Thin.otf
diff --git a/example/assets/logo-example.png b/example/assets/logo-example.png
diff --git a/lib/LoginScreen.style.ts b/lib/LoginScreen.style.ts
@@ -14,8 +14,8 @@ interface Style {
   passwordTextInputContainer: ViewStyle;
   loginButtonStyle: ViewStyle;
   loginTextStyle: TextStyle;
-  haveAccountButtonStyle: ViewStyle;
-  haveAccountTextStyle: TextStyle;
+  signupStyle: ViewStyle;
+  signupTextStyle: TextStyle;
   dividerStyle: ViewStyle;
   socialLoginContainer: ViewStyle;
   facebookSocialButtonTextStyle: TextStyle;
@@ -65,12 +65,12 @@ export default StyleSheet.create<Style>({
     fontSize: 16,
     fontWeight: "bold",
   },
-  haveAccountButtonStyle: {
+  signupStyle: {
     marginTop: 32,
     alignItems: "center",
     justifyContent: "center",
   },
-  haveAccountTextStyle: {
+  signupTextStyle: {
     color: "#acabb0",
   },
   dividerStyle: {

diff --git a/lib/LoginScreen.tsx b/lib/LoginScreen.tsx
@@ -26,23 +26,24 @@ type CustomTextStyleProp = StyleProp<TextStyle> | Array<StyleProp<TextStyle>>;
 
 const dummyFunction = () => {};
 export interface ILoginScreenProps {
-  haveAccountText?: string;
+  signupText?: string;
   disableDivider?: boolean;
   logoImageSource: any;
   disableSocialButtons?: boolean;
   emailPlaceholder?: string;
   passwordPlaceholer?: string;
+  disableSignup?: boolean;
   style?: CustomStyleProp;
   dividerStyle?: CustomStyleProp;
   logoImageStyle?: CustomImageStyleProp;
   textInputContainerStyle?: CustomStyleProp;
   loginButtonStyle?: CustomStyleProp;
   loginTextStyle?: CustomTextStyleProp;
-  haveAccountButtonStyle?: CustomStyleProp;
-  haveAccountTextStyle?: CustomTextStyleProp;
+  signupStyle?: CustomStyleProp;
+  signupTextStyle?: CustomTextStyleProp;
   children?: any;
   onLoginPress: () => void;
-  onHaveAccountPress: () => void;
+  onSignupPress: () => void;
   onEmailChange: (email: string) => void;
   onPasswordChange: (password: string) => void;
   onFacebookPress?: () => void;
@@ -57,15 +58,15 @@ const LoginScreen: React.FC<ILoginScreenProps> = ({
   logoImageStyle,
   loginTextStyle,
   loginButtonStyle,
-  haveAccountTextStyle,
-  haveAccountButtonStyle,
+  signupTextStyle,
+  signupStyle,
   textInputContainerStyle,
-  haveAccountText = "Already have an account?",
+  signupText = "Create an account",
   disableDivider,
   logoImageSource,
   onLoginPress,
   disableSocialButtons,
-  onHaveAccountPress,
+  onSignupPress,
   onEmailChange,
   onPasswordChange,
   onFacebookPress = dummyFunction,
@@ -74,6 +75,7 @@ const LoginScreen: React.FC<ILoginScreenProps> = ({
   onDiscordPress = dummyFunction,
   emailPlaceholder = "Email",
   passwordPlaceholer = "Password",
+  disableSignup = false,
   children,
 }) => {
   const Logo = () => (
@@ -106,13 +108,13 @@ const LoginScreen: React.FC<ILoginScreenProps> = ({
     </TouchableOpacity>
   );
 
-  const AlreadyHaveAccount = () => (
+  const SignUp = () => (
     <TouchableOpacity
-      style={[styles.haveAccountButtonStyle, haveAccountButtonStyle]}
-      onPress={onHaveAccountPress}
+      style={[styles.signupStyle, signupStyle]}
+      onPress={onSignupPress}
     >
-      <Text style={[styles.haveAccountTextStyle, haveAccountTextStyle]}>
-        {haveAccountText}
+      <Text style={[styles.signupTextStyle, signupTextStyle]}>
+        {signupText}
       </Text>
     </TouchableOpacity>
   );
@@ -156,7 +158,7 @@ const LoginScreen: React.FC<ILoginScreenProps> = ({
       <Logo />
       <TextInputContainer />
       <LoginButton />
-      <AlreadyHaveAccount />
+      {!disableSignup && <SignUp />}
       {!disableDivider && <Divider />}
       <View style={styles.socialLoginContainer}>
         {children || <DefaultSocialLoginButtons />}

diff --git a/lib/index.ts b/lib/index.ts
@@ -1,4 +1,5 @@
 import LoginScreen from "./LoginScreen";
 import SocialLogin from "./components/social-button/SocialButton";
 
-export { LoginScreen, SocialLogin };
+export default LoginScreen;
+export { SocialLogin };
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-native-login-screen",
-  "version": "3.0.2",
+  "version": "3.1.0",
   "description": "Fully Customizable & Ready to use Login Screen for React Native",
   "keywords": [
     "login",