Question 35099 in React native Question posted in
The official React Native documentation can be found here.

how to use react native login screen not working

I am trying to use npm i react-native-login-screen but it is not working. When I start typing password or email the keyboard disappears, this error occurs only when I try to handle password or email state.

Here is my code:

import {View, Text} from 'react-native';
import React, {useState} from 'react';
import LoginScreen, {SocialButton} from 'react-native-login-screen';

const App = () => {
  const [isLoggedIn, setIsLoggedIn] = useState(false);
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');



  return (
    <LoginScreen
      logoImageSource={require('./data1.jpg')}
      onLoginPress={() => {}}
      onSignupPress={() => {}}

      onEmailChange={(email) => {
        setEmail(email);
      }
      }
      onPasswordChange={(password) => {
        setPassword(password)
      }
      }
    />
  );
};

export default App;
Tags:

2

Answers


  1. 0

    I had the same experience recently. I figured that useState is not working with it properly for some reason.

    It does behave as expected when using useRef instead.

    Here’s how I’d do it:

        import {View, Text} from 'react-native';
    import React, {useState, useRef} from 'react';
    import LoginScreen, {SocialButton} from 'react-native-login-screen';

    const App = () => {
      const [isLoggedIn, setIsLoggedIn] = useState(false);
      const emailRef = useRef('');
      const passwordRef = useRef('');



      return (
        <LoginScreen
          logoImageSource={require('./data1.jpg')};
          onLoginPress={() => {}};
          onSignupPress={() => {}};

          onEmailChange={(email) = {emailRef.current = email;}};
          onPasswordChange={(password) => {passwordRef.current = password;}};
        />
      );
    };

    export default App;
    Login or Signup to reply.
  2. 0

    I am the author of this library. Version 5 is released and it fixes all these bugs and integrated more built-in features.
    react-native-login-screen

    You can use with the useState as expected now 🙂 Please try it out, here is the example:

    import React from 'react';
import {View, StatusBar, UIManager, Platform} from 'react-native';
import LoginScreen from 'react-native-login-screen';
import TextInput from 'react-native-text-input-interactive';

if (
  Platform.OS === 'android' &&
  UIManager.setLayoutAnimationEnabledExperimental
) {
  UIManager.setLayoutAnimationEnabledExperimental(true);
}

const App = () => {
  const [username, setUsername] = React.useState('');
  const [password, setPassword] = React.useState('');
  const [repassword, setRepassword] = React.useState('');

  const renderLoginScreen = () => (
    <LoginScreen
      logoImageSource={require('./assets/logo-example.png')}
      onLoginPress={() => {}}
      onSignupPress={() => {}}
      onEmailChange={setUsername}
      onPasswordChange={setPassword}
      enablePasswordValidation
    />
  );

  return (
    <View style={{ flex: 1 }}>
      <StatusBar barStyle="light-content" />
      {renderLoginScreen()}
    </View>
  );
};

export default App;
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search