Created
January 31, 2024 15:34
-
-
Save cipolleschi/aec7ef20790d3574098546bda4d1cdac to your computer and use it in GitHub Desktop.
Sample app to test TextInput
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/** | |
* Sample React Native App | |
* https://github.com/facebook/react-native | |
* | |
* @format | |
*/ | |
import React from 'react'; | |
import { | |
SafeAreaView, | |
ScrollView, | |
StatusBar, | |
StyleSheet, | |
Text, | |
TextInput, | |
Pressable, | |
useColorScheme, | |
} from 'react-native'; | |
import {Colors} from 'react-native/Libraries/NewAppScreen'; | |
function App(): React.JSX.Element { | |
const isDarkMode = useColorScheme() === 'dark'; | |
return ( | |
<SafeAreaView style={styles.background}> | |
<StatusBar | |
barStyle={isDarkMode ? 'light-content' : 'dark-content'} | |
backgroundColor={'systemBackground'} | |
/> | |
<ScrollView | |
contentInsetAdjustmentBehavior="automatic" | |
style={styles.background}> | |
<TextInput | |
style={styles.textInput} | |
placeholder="Enter your email address" | |
/> | |
<TextInput | |
style={styles.textInput} | |
placeholder="Enter your password" | |
secureTextEntry={true} | |
/> | |
<TextInput | |
style={styles.textInput} | |
placeholder="Repeat your password" | |
secureTextEntry={true} | |
/> | |
<TextInput style={styles.textInput} placeholder="Enter your name" /> | |
<TextInput | |
style={styles.textInput} | |
placeholder="Enter your phone number" | |
keyboardType="phone-pad" | |
/> | |
<TextInput | |
style={styles.textInput} | |
placeholder="Enter your birthday" | |
keyboardType="numeric" | |
maxLength={10} | |
/> | |
<TextInput | |
style={styles.textInput} | |
placeholder="Enter your zip code" | |
keyboardType="number-pad" | |
maxLength={5} | |
/> | |
<Pressable | |
style={({pressed}) => [ | |
styles.button, | |
pressed ? {backgroundColor: 'blue'} : {}, | |
]}> | |
<Text style={styles.buttonText}>Send</Text> | |
</Pressable> | |
</ScrollView> | |
</SafeAreaView> | |
); | |
} | |
const styles = StyleSheet.create({ | |
background: { | |
backgroundColor: 'systemBackground', | |
}, | |
textInput: { | |
marginLeft: '5%', | |
marginRight: '5%', | |
marginTop: 10, | |
marginBottom: 10, | |
padding: 10, | |
backgroundColor: '#EFEFEF', | |
borderWidth: 1, | |
borderRadius: 5, | |
}, | |
button: { | |
flex: 1, | |
alignItems: 'center', | |
justifyContent: 'center', | |
backgroundColor: '#689FD4', | |
marginLeft: '5%', | |
marginRight: '5%', | |
marginTop: 20, | |
height: 40, | |
borderRadius: 20, | |
}, | |
buttonText: { | |
fontSize: 18, | |
color: '#FAFAFA', | |
fontWeight: 'bold', | |
}, | |
}); | |
export default App; |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment