wrathchaos/react-native-login-screen

🚀 Fully Customizable Beautiful React Native Login Screen

react-native-login-screen's Issues

onPressSignup breaks the card swap functionality

Hi, thank you for this lib, I cannot understand well how do you set the callback for the signup flow?
Do you have a working example?

thanks

Doesn't work with Web

I am using Expo Snack and while developing I want to look at the 'web' tab. Except the login form isn't working as expected:

Live Expo Snack

Enhancement Feature : Email Validation

After clicking submit button, email validation should be available in the package.

I cant hide one of the social button.

In this component i wan to hide one of the button like i want to hide the continue to discord how i can hide this button

Cannot Use SocialButton component

When trying to import SocialButton as:
import { SocialButton } from "react-native-login-screen"';

I am getting the following error:
Module '"react-native-login-screen"' has no exported member 'SocialButton'. Did you mean to use 'import SocialButton from "react-native-login-screen"' instead?

Importing in the manner the error message suggests (removing the curly braces around SocialButton) results in another error:
Type '{ text: string; imageSource: any; onPress: () => void; }' is not assignable to type 'IntrinsicAttributes & ILoginScreenProps & { children?: ReactNode; }'.
Property 'text' does not exist on type 'IntrinsicAttributes & ILoginScreenProps & { children?: ReactNode; }'.ts

Any idea what needs to be fixed?

More Customizable Props

Hello 👋 , Thank you for this awesome library.
Is there any props to disable the switch component if not needed same as settings(disableSettings) ?

Issue with docs - SocialButton

Hi, just letting you know that the docs say to use SocialButton but SocialLogin is actually being exported from the library!

Add value props for the email and password fields to allow use of state vars.

react-native-login-screen doesn't accept values for the email and password fields to be set by its enclosing component. It initializes and maintains internal vars for these fields.

As a result, any time an enclosing component is re-rendered by the React Native system the LoginScreen is reloaded and re-rendered as well, resetting the email and password input components to empty fields.

In addition, I notice if a user enters text into the password field, then selects the email field, and re-selects the password field and enters additional text, the previous contents of the password field will be deleted.

I suggest the addition of props to set the initial values of the email and password fields, which will allow LoginScreen to be used in components which require there use of state vars. This will also permit the password field to retain its value between selections, and the enclosing component to save a user's credentials between app openings.

Change 'have account' text to 'create account' text

When logging in, you use a email and password, which is there. It doesn't make sense to have a button for already having an account, because they are already logging in. It would make more sense if the button said 'I don't have an account' or 'Sign Up'.

Icons not working

I Really like your Login Screen! im trying to init a new App and after installing your library and dependencies screen is working except fot the icons

package.json

  "dependencies": {
    "@freakycoder/react-native-helpers": "^0.1.3",
    "react": "16.11.0",
    "react-native": "0.62.2",
    "react-native-dynamic-vector-icons": "^0.1.1",
    "react-native-improved-text-input": "^0.0.1",
    "react-native-login-screen": "^0.3.7",
    "react-native-spinkit": "^1.5.0",
    "react-native-vector-icons": "^6.6.0"
  },
  "devDependencies": {
    "@babel/core": "^7.6.2",
    "@babel/runtime": "^7.6.2",
    "@react-native-community/eslint-config": "^0.0.5",
    "babel-jest": "^24.9.0",
    "eslint": "^6.5.1",
    "jest": "^24.9.0",
    "metro-react-native-babel-preset": "^0.58.0",
    "react-test-renderer": "16.11.0"
  },
  "jest": {
    "preset": "react-native"
  }
}

Screenshot

Login button too down on Android

On startup, the login button touch the bottom

When you enter one of the two inputs and flip the login button it places perfectly

Does anyone know how to fix this? Thank you very much.

Optional Email Validation

There should be an option to validate the value entered conforms to the email standards (RFCs 6531/6532), and provide visual feedback (eg, red text) to the user if it does not.

It should be optional (eg, a "validateEmail" prop) so the app author could use it to support usernames as well.

If the option is chosen, the "Login" button should be disabled until the email address has been validated.

Login screen is not scrollable vertically

Wrapping with ScrollView can do the work. Thanks @WrathChaos for the tip.

Get an error about font family "Monterrat-black" not being found

Get an error about font family "Monterrat-black" not being found.

What ive done: Installed all the packages as mentioned in the instructions, and closed metro and relaunched.

Dependency installing Error

I tried to run your code, but unfortunately it does not work... can you please let me know how to configure and run it and get the desired output, for me to customise! When I try to add the dependency the following error comes?

Icons don't show up

I hope this is not a silly question as i am currently new to react-native. After following your instruction, the application ran smoothly on my device. I can change the background, etc. The problem is that the github, user, password, and settings icons don't show up. Instead i got some chinese like letters. FYI i already installed react-native-dynamic-vector-icons and react-native-vector-icons. What could be the problem? What possibly i missed?

Building locally fails on "Error: Cannot find module 'babel-runtime/core-js/array/from'"

1. Cloned repository
2. Ran "npm install"
3. Ran "npm run build"
4. Got the error:

> [email protected] build
> cd lib && tsc && npm run copy:assets && npm run copy:package


> [email protected] copy:assets
> cpx 'lib/local-assets/**' './build/dist/local-assets'

node:internal/modules/cjs/loader:1063
  throw err;
  ^

Error: Cannot find module 'babel-runtime/core-js/array/from'
Require stack:
- /Users/omerhochman/dev/contributions/react-native-login-screen/node_modules/cpx/bin/index.js
    at Module._resolveFilename (node:internal/modules/cjs/loader:1060:15)
    at Module._load (node:internal/modules/cjs/loader:905:27)
    at Module.require (node:internal/modules/cjs/loader:1127:19)
    at require (node:internal/modules/helpers:112:18)
    at Object.<anonymous> (/Users/omerhochman/dev/contributions/react-native-login-screen/node_modules/cpx/bin/index.js:13:13)
    at Module._compile (node:internal/modules/cjs/loader:1246:14)
    at Module._extensions..js (node:internal/modules/cjs/loader:1300:10)
    at Module.load (node:internal/modules/cjs/loader:1103:32)
    at Module._load (node:internal/modules/cjs/loader:942:12)
    at Function.executeUserEntryPoint [as runMain] (node:internal/modules/run_main:83:12) {
  code: 'MODULE_NOT_FOUND',
  requireStack: [
    '/Users/omerhochman/dev/contributions/react-native-login-screen/node_modules/cpx/bin/index.js'
  ]
}

Node.js v19.6.0

I tried adding babel-runtime different versions to both devDependencies and globally and had the same issue.
I tried to do the same for other babel related packages suggested in stack overflow and the issue remained.

I tried getting rid of cpx, and replace "cpx" with "cp -r" in the package.json scripts.
Then the build worked.
But then when trying to use it in my personal project, it failed.
These were my steps:

1. yarn add "../react-native-login-screen"
2. yarn start
3. Got a spam of thousands errors until the app crashed:

 ERROR  Invariant Violation: No callback found with cbID 2 and callID 1 for module <unknown>. Args: '[{"app_state":"active"}]'
 ERROR  Invariant Violation: No callback found with cbID 1177 and callID 588 for module <unknown>. Args: '[0]'
 ERROR  Invariant Violation: Module AppRegistry is not a registered callable module (calling runApplication). A frequent cause of the error is that the application entry file path is incorrect.
      This can also happen when the JS bundle is corrupt or there is an early initialization error when loading React Native.
 ERROR  Invariant Violation: No callback found with cbID 1180 and callID 590 for module <unknown>. Args: '[{"app_state":"active"}]'
 ERROR  Invariant Violation: No callback found with cbID 1205 and callID 602 for module <unknown>. Args: '[1]'
 ERROR  Invariant Violation: No callback found with cbID 1209 and callID 604 for module <unknown>. Args: '[2]'
 ERROR  Invariant Violation: No callback found with cbID 1211 and callID 605 for module <unknown>. Args: '[3]'
 ERROR  Invariant Violation: No callback found with cbID 1215 and callID 607 for module <unknown>. Args: '[4]'
 ERROR  Invariant Violation: No callback found with cbID 1217 and callID 608 for module <unknown>. Args: '[5]'
 ERROR  Invariant Violation: No callback found with cbID 1221 and callID 610 for module <unknown>. Args: '[6]'
 ERROR  Invariant Violation: No callback found with cbID 1223 and callID 611 for module <unknown>. Args: '[7]'
 ERROR  Invariant Violation: No callback found with cbID 1227 and callID 613 for module <unknown>. Args: '[8]'
 ERROR  Invariant Violation: No callback found with cbID 1229 and callID 614 for module <unknown>. Args: '[9]'
 ERROR  Invariant Violation: No callback found with cbID 1233 and callID 616 for module <unknown>. Args: '[10]'
 ERROR  Invariant Violation: No callback found with cbID 1235 and callID 617 for module <unknown>. Args: '[11]'
 ERROR  Invariant Violation: No callback found with cbID 1239 and callID 619 for module <unknown>. Args: '[12]'
.
.
.
.

1. Is there a contributors guide? Am I missing something in the installation steps?
2. Does this happen to anyone else?

Please give me advice how to move screen onPressLogin

Hello,

Just want to change screen when pressed "Sign In" Button like below:

onPressLogin={()=>Home()}

const Home = () => {
  return (
              `<View`
                  `<Text>Home</Text>`
               `</View>`
    );
};

But login screen not changed when press button.

Please give me any advise.

Unhide password function

Hi,

We use this library in our app. Lovely open-source work BTW.

I was wondering if the function of having the password being visible (like the common UI of using the eye) can be made available. I'm asking because I could make a PR on that if it's something you feel the package could find use with.

Thanks. 👍🏾

Customize email placeholder

I want to change it from saying 'Email' to 'Usename'. I don't see any props currently that let me change that.

Want to add 1 more Password Field (to confirm password)

Hi.
First, I'd like to say i really appreciate this beautiful source code. This helps me so much.

Yet I wanted to make my project's Auth UI consistent, i tried to make SignUp UI as well out of this Login component. The only thing I wanted was to add one more password field to verify confirming password.

So I editted the source in ./node_modules to enable confirming password field by 'enableConfirmPassword' boolean flag. However, i soon found out it doesn't works with my changes. It didn't make any change that i couldn't find confirming password field appear.

By any chance, can you help me to fix this issue?

Below is my patch file.

diff --git a/node_modules/react-native-login-screen/build/dist/LoginScreen.d.ts b/node_modules/react-native-login-screen/build/dist/LoginScreen.d.ts
index 240170a..877bc89 100644
--- a/node_modules/react-native-login-screen/build/dist/LoginScreen.d.ts
+++ b/node_modules/react-native-login-screen/build/dist/LoginScreen.d.ts
@@ -13,6 +13,8 @@ export interface ILoginScreenProps {
     passwordPlaceholder?: string;
     disableSignup?: boolean;
     disablePasswordInput?: boolean;
+    enableConfirmPassword?: boolean;
+    confirmPasswordPlaceholder?: string;
     loginButtonText?: string;
     style?: CustomStyleProp;
     dividerStyle?: CustomStyleProp;
@@ -28,6 +30,7 @@ export interface ILoginScreenProps {
     onSignupPress: () => void;
     onEmailChange: (email: string) => void;
     onPasswordChange: (password: string) => void;
+    onConfirmPasswordChange : (confirmPassword: string) => void;
     onFacebookPress?: () => void;
     onTwitterPress?: () => void;
     onApplePress?: () => void;
diff --git a/node_modules/react-native-login-screen/lib/LoginScreen.tsx b/node_modules/react-native-login-screen/lib/LoginScreen.tsx
index e346f19..d614fdd 100644
--- a/node_modules/react-native-login-screen/lib/LoginScreen.tsx
+++ b/node_modules/react-native-login-screen/lib/LoginScreen.tsx
@@ -36,6 +36,8 @@ export interface ILoginScreenProps {
   passwordPlaceholder?: string;
   disableSignup?: boolean;
   disablePasswordInput?: boolean;
+  enableConfirmPassword?: boolean;
+  confirmPasswordPlaceholder?: string;
   loginButtonText?: string;
   style?: CustomStyleProp;
   dividerStyle?: CustomStyleProp;
@@ -51,6 +53,7 @@ export interface ILoginScreenProps {
   onSignupPress: () => void;
   onEmailChange: (email: string) => void;
   onPasswordChange: (password: string) => void;
+  onConfirmPasswordChange : (confirmPassword: string) => void;
   onFacebookPress?: () => void;
   onTwitterPress?: () => void;
   onApplePress?: () => void;
@@ -82,6 +85,9 @@ const LoginScreen: React.FC<ILoginScreenProps> = ({
   onDiscordPress = dummyFunction,
   emailPlaceholder = 'Email',
   passwordPlaceholder = 'Password',
+  enableConfirmPassword = false,
+  onConfirmPasswordChange,
+  confirmPasswordPlaceholder = 'Confirm Password',
   disableSignup = false,
   children,
   textInputProps,
@@ -111,6 +117,16 @@ const LoginScreen: React.FC<ILoginScreenProps> = ({
           />
         </View>
       )}
+      {enableConfirmPassword && (
+        <View style={styles.passwordTextInputContainer}>
+          <TextInput
+            placeholder={confirmPasswordPlaceholder}
+            secureTextEntry
+            onChangeText={onConfirmPasswordChange}
+            {...textInputProps}
+          />
+        </View>
+      )}
     </View>
   );
 

Couple of Ideas by leitooop

Couple of ideas:

As a user i want the Login button to show"create account" but if i start filling username and password it changes to "login" (because i already have an account)
( weird but i think it will be intuitive )

I think in most of cases "Remember me" is not strictly necessary either. Becauso every time you enter the App it should remember your account as default.
Maybe, simplifying the design taking out "remember me" gives space for "sign up"

A bit more ugly but aside of "login" making two buttons in that space ( "login" at left and "sign up" at right )

Using the library for register screen?

Hi,

I come from a native Swift background and I'm still trying to work my way around React Native.

I'm trying to create a register screen using this library, and not sure how I could add an extra text input for a username?
Any help would be appreciated, as I'm not sure how to customise it.

An off topic issue, any chance it's possible to change the selectionColour on the pre defined text inputs? As I can't find my way to style it with a different colour, only the base blue stays.

Web support

Any plans to support the web platform?

Email initials uppercase character

Initials in the E-Mail field are always capitalized. Can I make it all lowercase?

Suggested iterative development workflow?

It seems the default React Native build process doesn't support symlinks, making the standard npm link technique for adding local repos ineffective.

What is your development process for react-native-login-screen? Do you have an alternative process that allows rapid development?

Defect

when I change usernameTitle, passwordTitle it happens nothing!
I check the source code and it hasn't been implemented anything to customize this propery!

Styling

Hello, I am trying to make a dark mode design for my app but i am not able to change the background colors of the input text fields, any tips?

TypeError: undefined is not an object (evaluating '_reactNative.Animated.Text.propTypes.style')

I installed Peer Dependencies and then react-native-login-screen. But whenever import LoginScreen using

import LoginScreen from "react-native-login-screen"

then i receive error which says;

Error: Requiring module "node_modules\react-native-login-screen\build\dist\LoginScreen.js", which threw an exception: TypeError: undefined is not an object (evaluating '_reactNative.Animated.Text.propTypes.style')

Please let me know why this error is occurring! Am I doing something wrong or is there any problem with the package?

App.js Code

import React,{Component} from 'react';
import {
  SafeAreaView,
  StyleSheet,
  ScrollView,
  View,
  Text,
  StatusBar,
} from 'react-native';
import {Button, ThemeProvider,Header} from 'react-native-elements'
import LoginScreen from "react-native-login-screen"


export default class App extends Component{
  render(){
    return(
        <LoginScreen/>
    )
  }
}

Package.json Code:

{
  "name": "RentAla",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "android": "react-native run-android",
    "ios": "react-native run-ios",
    "start": "react-native start",
    "test": "jest",
    "lint": "eslint ."
  },
  "dependencies": {
    "@freakycoder/react-native-helpers": "^0.1.3",
    "react": "16.13.1",
    "react-native": "0.63.2",
    "react-native-dynamic-vector-icons": "^1.1.3",
    "react-native-elements": "^2.3.2",
    "react-native-login-screen": "^2.0.3",
    "react-native-material-textfield": "^0.16.1",
    "react-native-spinkit": "^1.5.0",
    "react-native-vector-icons": "^7.1.0"
  },
  "devDependencies": {
    "@babel/core": "7.11.6",
    "@babel/runtime": "7.11.2",
    "@react-native-community/eslint-config": "1.1.0",
    "babel-jest": "25.5.1",
    "eslint": "6.8.0",
    "jest": "25.5.4",
    "metro-react-native-babel-preset": "0.59.0",
    "react-test-renderer": "16.13.1"
  },
  "jest": {
    "preset": "react-native"
  }
}

Issue with '@expo/vector-icons/Fontisto'

Hello!
I really like your login screen and would love to use it, but I have ran into a slight issue that prevents the application from compiling:

C:/Users/Thomas/Downloads/MobileApp/node_modules/react-native-dynamic-vector-icons/lib/components/Icon.tsx
Module not found: Can't resolve '@expo/vector-icons/Fontisto' in 'C:\Users\Thomas\Downloads\MobileApp\node_modules\react-native-dynamic-vector-icons\lib\components'

This is my package.json:

{
  "main": "node_modules/expo/AppEntry.js",
  "scripts": {
    "start": "expo start",
    "android": "expo start --android",
    "ios": "expo start --ios",
    "web": "expo start --web",
    "eject": "expo eject"
  },
  "dependencies": {
    "@freakycoder/react-native-helpers": "^0.1.2",
    "expo": "~36.0.0",
    "fontisto": "^3.0.4",
    "npm-install-missing": "^0.1.4",
    "react": "^16.9.0",
    "react-dom": "~16.9.0",
    "react-native": "https://github.com/expo/react-native/archive/sdk-36.0.0.tar.gz",
    "react-native-dynamic-vector-icons": "^0.2.1",
    "react-native-improved-text-input": "0.0.1",
    "react-native-login-screen": "^0.3.6",
    "react-native-spinkit": "^1.5.0",
    "react-native-vector-icons": "^6.6.0",
    "react-native-web": "~0.11.7"
  },
  "devDependencies": {
    "@babel/core": "^7.0.0"
  },
  "private": true
}

Any ideas what might be wrong?

How to get entered email/password?

This is a pretty basic question, but I can't figure out how to get the entered email/password. Should I store the email in state, or can it be sent with onLoginPress() ?

If I try to use setEmail during onEmailChange, the email input will not update.

If I try getting values from onLoginPress, I get this node object, but I don't see any values in e.target.value for example.

Here's my example:

import React, {useState} from 'react';
import {Alert} from 'react-native';

import LoginScreen from 'react-native-login-screen';

export default function LoginPage() {
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');

  function login(test) {
    Alert.alert('login, ' + email + password);
  }

  return (
    <LoginScreen
      logoImageSource={require('../assets/ikon.png')}
      onLoginPress={() => login()}
      onEmailChange={email => setEmail(email)} //Doesn't work
      disableSignup
      disableSocialButtons
    />
  );
}

Support custom props for TextInput

Hi ! Thank you for this awesome library.

I would like to add support for custom props to Username and Password TextInput to support the following use case:

autoCapitalize="none"
autoCompleteType="email"
autoCorrect={false}
keyboardType="email-address"

What would be the best way to add this feature ? Adding usernameTextInputProps and passwordTextInputProps ?