1.0.3 • Published 6 years ago
react-native-fslogin v1.0.3
react-native-fslogin
What is about?
Hello everyone! Here is my last work. This (react-native-fslogin) is a simple javascript ui library about login page screen. Purpose of this library is making easy to developing UI components for Login Pages. Library jus provides a simple static Login Page UI but it is easy to making changes on it because library takes style and text props for each its own components.
Getting started
$ npm install react-native-fslogin --save
TODO: What to do with the module?
- Adding Dynamic Logo Path
Usage(Simple)
import FsLogin from 'react-native-fslogin';
<Fslogin>
...
<TextInput
autoCapitalize="none"
autoCorrect={false}
keyboardType='email-address'
returnKeyType="next"
placeholder='Phone or E-Mail'
placeholderTextColor='rgba(0,0,0,0.7)'
/>
<TextInput
returnKeyType="go"
placeholder='Password'
placeholderTextColor='rgba(0,0,0,0.7)'
secureTextEntry
/>
...
</Fslogin>
Usage(with props)
import FsLogin from 'react-native-fslogin';
<Fslogin
containerStyle={{flex: 1, justifyContent: 'center', alignItems: 'center', backgroundColor: '#89F9E6',}},
loginContainerStyle={{alignItems: 'center', flexGrow: 1, justifyContent: 'center'}},
inputStyle={{width: window.width - 10, alignItems: 'center', justifyContent: 'center', height: 40, backgroundColor: '#FFFFFF', marginBottom: 10, padding: 10, color: '#ffff'}},
buttonTextStyle:{{color: '#ffff', textAlign: 'center', fontWeight: '700'}},
buttonContainerStyle={{width: window.width - 10, alignItems: 'center', justifyContent: 'center', height: 40, marginBottom: 10, padding: 10, backgroundColor: '#2980b6', paddingVertical: 15}},
underlineTextStyle={{textAlign: 'center', fontSize: 20, textDecorationLine: 'underline', color: 'rgba(0,50,0,0.7)'}},
forgetPasswordtext='Forget Password?',
passwordText='Password',
loginText='LOGIN',
usernameText='Username',
>
...
<TextInput
autoCapitalize="none"
autoCorrect={false}
keyboardType='email-address'
returnKeyType="next"
placeholder='Phone or E-Mail'
placeholderTextColor='rgba(0,0,0,0.7)'
/>
<TextInput
returnKeyType="go"
placeholder='Password'
placeholderTextColor='rgba(0,0,0,0.7)'
secureTextEntry
/>
...
</Fslogin>
Prop Name | Prop Type | Purpose | Default Define |
---|---|---|---|
containerStyle | style | Styles Container | Yes |
logoStyle | style | Styles Logo in the middle | Yes |
loginContainerStyle | style | Styles Login Button | Yes |
buttonTextStyle | style | Button Text | Yes |
buttonContainerStyle | style | Button Container | Yes |
underlineTextStyle | style | Styles underline text at the bottom of view | Yes |
forgetPasswordtext | String | Forget Password String | Yes |
passwordText | String | Placeholder - Password text area | Yes |
loginText | String | Login button text | Yes |
usernameText | String | Placeholder - Username text area | Yes |
onLoginPress | Function | Execute when press on login button | No |