vizir / react-native-simple-login

Login component for react-native

react-native-simple-login

Login component for react-native

Install

npm install --save react-native-simple-login

Usage

import Login from 'react-native-simple-login'

...

const onLogin = (email, password) => {
  console.log(email, password) // user credentials
}

const onResetPassword = (email) => {
  console.log(email)
}

<Login
  onLogin={onLogin}
  onResetPassword={onResetPassword}
/>

Will output:

Available Properties	Description
onLogin	(required) Function to call when the user tries to login
onResetPassword	Function to call when the user tries to reset password
labels	An object with the labels to use on the component, if a label is missing, the default will be used. Available labels are: rememberMe, userIdentification, password, forgotPassword, loginFormButton, forgotPasswordFormButton, back. Example: { userIdentification: 'Email' }
logoImage	The image to be used as the logo. Will appear at the top of the login and reset password forms
passwordInputIcon	The image to be used as the password input icon
resetPasswordHeaderRenderer	If present, function that will be used to get the output of the reset password form header. Receive a param with the function to call to go back to login.
showLogoOnLogin	If true, will show the logo image on the login form. Defaults to true.
showLogoOnResetPassword	If true, will show the logo image on the reset password form. Defaults to true.
userIdentificationInputIcon	The image to be used as the user identification input icon
inputPlaceholderTextColor	Color to use for the input placeholders
backButtonStyle	Reset password back button style
backButtonTextStyle	Reset password back button text style
baseButtonStyle	Base style for the submit buttons
baseButtonTextStyle	Base style for the submit buttons text
loginResetPasswordLinkStyle	Reset password link style
loginResetPasswordLinkTextStyle	Reset password link text style
fieldsetWrapperStyle	Form fieldset style
inputIconStyle	Input icon style
inputWrapperStyle	Input wrapper style
inputStyle	Input style
loginFormSubmitButtonStyle	Login form submit button style
loginFormSubmitButtonTextStyle	Login form submit button text style
loginFormWrapperStyle	Login form wrapper style
logoStyle	Logo style
resetPasswordFormWrapperStyle	Reset password form wrapper style
resetPasswordFormSubmitButtonTextStyle	Reset password form submit button text style
resetPasswordFormSubmitButtonStyle	Reset password form submit button style

Contributing

1. Fork this repository
2. Create a branch based on master about what you are doing

• Names should be separated by hyphen: example-name

3. Commit using the format: [<type>] <message>

• The type should be: Feat, Fix, Refactor or Docs
• Example message: [Docs] Added contributing to readme
• Do not forget to add tests!

4. Run all tests npm test and linter npm run lint
5. Create a pull request describing the changes you made

License

MIT

react-native-simple-login's Issues

React Native unexpected token, expected ";"

Help, this is my code, the error says in line 67:9 there's a mistake, and tells me that unexpected token sign, i don't know what's wrong

`_/**

• Sample React Native App
• https://github.com/facebook/react-native
• @Format
• @flow strict-local
  */

import React, { Component } from 'react';
import {
SafeAreaView,
StyleSheet,
ScrollView,
View,
Text,
StatusBar,
Alert,
Button,
TextInput,
TouchableHighlight,
} from 'react-native';

import {
Header,
LearnMoreLinks,
Colors,
DebugInstructions,
ReloadInstructions,
} from 'react-native/Libraries/NewAppScreen';

const App: () => React$Node = () => {
return (
<>

{global.HermesInternal == null ? null : (

Engine: Hermes

)}


Step One

Edit App.js to change this
screen and then come back to see your edits.




LogIn




</>
);
};

67 onLogin(){
console.log('Has pulsado el boton login/')
}
const styles = StyleSheet.create({
scrollView: {
backgroundColor: Colors.darker,
},
engine: {
position: 'absolute',
right: 0,
},
body: {
backgroundColor: Colors.grey,
},
sectionContainer: {
marginTop: 32,
paddingHorizontal: 24,
},
sectionTitle: {
fontSize: 24,
fontWeight: '600',
color: Colors.black,
},
sectionDescription: {
marginTop: 8,
fontSize: 18,
fontWeight: '400',
color: Colors.dark,
},
highlight: {
fontWeight: '700',
},
footer: {
color: Colors.dark,
fontSize: 12,
fontWeight: '600',
padding: 4,
paddingRight: 12,
textAlign: 'right',
},
});

export default App;_`

onLogin is undefined

Using this, on a react-native:

renderLogin() {
        const onLogin = (email, password) => {
            console.log(email, password) // user credentials
        }
        
        const onResetPassword = (email) => {
            console.log(email)
        }
        
        return (
            <Login
                onLogin={onLogin}
                onResetPassword={onResetPassword}
            />
        );
    }

The component warns me against the onLogin undefined :/, any idea?

Warning: View.propTypes has been deprecated and will be removed in a future version of ReactNative. Use ViewPropTypes instead.

Getting this warning with the following packages. Please update soon! =)

{
"name": "my-app",
"version": "0.1.0",
"private": true,
"devDependencies": {
"react-native-scripts": "0.0.31",
"jest-expo": "~1.0.1",
"react-test-renderer": "16.0.0-alpha.6"
},
"main": "./node_modules/react-native-scripts/build/bin/crna-entry.js",
"scripts": {
"start": "react-native-scripts start",
"eject": "react-native-scripts eject",
"android": "react-native-scripts android",
"ios": "react-native-scripts ios",
"test": "node node_modules/jest/bin/jest.js --watch"
},
"jest": {
"preset": "jest-expo"
},
"dependencies": {
"expo": "^17.0.0",
"react": "16.0.0-alpha.6",
"react-native": "^0.44.0",
"react-native-simple-login": "^1.1.0",
"react-redux": "^5.0.5",
"redux": "^3.7.0"
}
}

TypeError: Cannot read property 'any' of undefined

TypeError: Cannot read property 'any' of undefined

  at Object.<anonymous> (node_modules/react-native-simple-login/Login/Structure/Logo/Logo.js:15:33)
  at Object.<anonymous> (node_modules/react-native-simple-login/Login/Structure/index.js:1:209)
  at Object.<anonymous> (node_modules/react-native-simple-login/Login/Forms/BaseForm/BaseForm.js:3:16)