Skip to content

Instantly share code, notes, and snippets.

@Ryanlucass
Last active January 13, 2023 20:50
Show Gist options
  • Save Ryanlucass/72005d8f61b83a284ef74c15ea94373f to your computer and use it in GitHub Desktop.
Save Ryanlucass/72005d8f61b83a284ef74c15ea94373f to your computer and use it in GitHub Desktop.
Modal Biometric - React Native
<Modal
visible={isBiometric}
transparent={false}
onRequestClose={()=> setIsBiometric(false)}
>
<Biometric
handleClosse={() => setIsBiometric(false)}
/>
</Modal>
import React from 'react';
import {ScaledSheet} from 'react-native-size-matters';
import {
View,
Text,
SafeAreaView,
StyleSheet,
TouchableOpacity,
Image,
BlueView}
from 'react-native';
import { Colors, Images, Fonts} from '~/utils';
export function Biometric({handleClosse}){
const styles = ScaledSheet.create({
content:{
backgroundColor: Colors.white,
height: '50%',
//borderTopLeftRadius: 38,
//borderTopRightRadius: 38,
alignItems: 'center'
},
areaOpacity:{
flex:1,
backgroundColor: 'black',
opacity: 0.6,
},
textTitle:{
marginTop: '20@ms',
fontFamily: Fonts.Quicksilver.bold,
fontSize: 25,
color: Colors.mediumGray,
},
textInfo:{
marginTop: '10@ms',
marginBottom: '30@ms',
fontFamily: Fonts.Quicksilver.medium
},
textDescription:{
marginTop: '20@ms',
fontFamily: Fonts.Quicksilver.medium,
color: Colors.lowGray
},
buttonCancel:{
marginTop: '30@ms'
},
textButton:{
fontFamily: Fonts.Quicksilver.bold,
fontSize: 15,
color: Colors.bgGreenRuralCash,
}
})
return (
<SafeAreaView style={{flex:1}}>
<TouchableOpacity style={styles.areaOpacity} onPress={handleClosse}/>
<View style={styles.content}>
<Text style={styles.textTitle}>Login por Biometria</Text>
<Text style={styles.textInfo}>Faça login usando sua credencial biométrica</Text>
<Image source={Images.Biometric}/>
<Text style={styles.textDescription}>Toque no sensor de impressão digital</Text>
<View style={{width: '90%', alignItems:'flex-start'}}>
<TouchableOpacity
onPress={handleClosse}
style={styles.buttonCancel}>
<Text style={styles.textButton}>Cancelar</Text>
</TouchableOpacity>
</View>
</View>
<TouchableOpacity/>
</SafeAreaView>
)
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment