Skip to content

Instantly share code, notes, and snippets.

@cipolleschi
Created January 31, 2024 15:34
Show Gist options
  • Save cipolleschi/aec7ef20790d3574098546bda4d1cdac to your computer and use it in GitHub Desktop.
Save cipolleschi/aec7ef20790d3574098546bda4d1cdac to your computer and use it in GitHub Desktop.
Sample app to test TextInput
/**
* 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