Modern login screen with fully customizable options with ready to use components for React Native
Add the dependency:
npm i react-native-modern-login-screen
import ModernLoginScreen from "react-native-modern-login-screen";
<ModernLoginScreen
title="Welcome to Noxx"
description="Create an account to sync all your data and access them from anywhere."
logoSource={require('./assets/logo-example.png')}
onEmailPress={() => {}}
onFacebookPress={() => {}}
onGooglePress={() => {}}
/>
<ModernLoginScreen
title="Welcome to Noxx"
description="Create an account to sync all your data and access them from anywhere."
logoSource={require('./assets/logo-example.png')}
>
<LoginButton
text="Continue with Facebook"
imageSource={require('./assets/facebook.png')}
onPress={() => {}}
/>
<LoginButton
text="Continue with Twitter"
imageSource={require('./assets/twitter.png')}
style={{marginTop: 16}}
onPress={() => {}}
/>
<MailButton
text="Continue with Email"
imageSource={require('./assets/email.png')}
style={{marginTop: 16}}
onPress={() => {}}
/>
</ModernLoginScreen>
You can checkout the example project 🥰
Simply run
npm i
react-native run-ios/android
should work of the example project.
Property | Type | Default | Description |
---|---|---|---|
title | string | undefined | change the title |
description | string | undefined | change the descrition |
logoSource | ImageSourcePropType | undefined | set your own logo |
Property | Type | Default | Description |
---|---|---|---|
style | ViewStyle | default | set or override the style object for main container
|
headerStyle | ViewStyle | default | set or override the style object for header
|
logoStyle | ViewStyle | default | set or override the style object for logo container
|
logoImageStyle | ImageStyle | default | set or override the style object for logo image
|
titleTextStyle | TextStyle | default | set or override the style object for title text
|
descriptionTextStyle | TextStyle | default | set or override the style object for description text
|
onFacebookPress | function | default | set the functionality when facebook button is pressed |
onGooglePress | function | default | set the functionality when google button is pressed |
onEmailPress | function | default | set the functionality when email button is pressed |
Property | Type | Default | Description |
---|---|---|---|
style | ViewStyle | default | set or override the style object for main container
|
imageSource | source | undefined | set login button image source |
imageStyle | ImageStyle | default | set or override the style object for image
|
textContainerStyle | ViewStyle | default | set or override the style object for text container
|
textStyle | ViewStyle | undefined | set or override the style object for button text
|
descriptionTextStyle | TextStyle | default | set or override the style object for description text
|
onPress | function | default | set the functionality when button is pressed |
TouchableComponent | React.ComponentType | TouchableOpacity | set your own component instead of TouchableOpacity component |
Property | Type | Default | Description |
---|---|---|---|
style | ViewStyle | default | set or override the style object for main container
|
imageSource | source | undefined | set login button image source |
imageStyle | ImageStyle | default | set or override the style object for image
|
textContainerStyle | ViewStyle | default | set or override the style object for text container
|
textStyle | ViewStyle | undefined | set or override the style object for button text
|
descriptionTextStyle | TextStyle | default | set or override the style object for description text
|
onPress | function | default | set the functionality when button is pressed |
TouchableComponent | React.ComponentType | TouchableOpacity | set your own component instead of TouchableOpacity component |
FreakyCoder, [email protected]
React Native Modern Login Screen is available under the MIT license. See the LICENSE file for more info.