<Image source={{uri: 'https://reactnative.dev/docs/assets/p_cat2.png', }} style={{ width: 250, height: 200 }} /> //------------------------------------------------ // texbox <TextInput style={styles.input} onChangeText={onChangeNumber} value={number} placeholder="useless placeholder" keyboardType="numeric" //defaultValue="Name me!" /> //------------------------------------------------ //funtion const Cat = (props) => { return ( <View> <Text>Hello, I am {props.name}!</Text> </View> );} // call funtion <Cat /> <Cat name="Maru" /> //----------------------------------------------- // list view const styles = StyleSheet.create({ container: { flex: 1, paddingTop: 80 }, item: { padding: 10, fontSize: 18, height: 44, }, }); const FlatListBasics = () => { return ( <View style={styles.container}> <FlatList data={[ {key: 'Devin'}, {key: 'Dan'}, {key: 'Dominic'}, {key: 'Jackson'}, {key: 'James'}, {key: 'Joel'}, {key: 'John'}, {key: 'Jillian'}, {key: 'Jimmy'}, {key: 'Julie'}, ]} renderItem={({item}) => <Text style={styles.item}>{item.key}</Text>} /> </View> ); } export default FlatListBasics; // show the list off item //renderitem will list down the name //-------------------------------- // for button export default class ButtonBasics extends Component { _onPressButton() { alert('You tapped the button!') } render() { return ( <View style={styles.container}> <View style={styles.buttonContainer}> <Button onPress={this._onPressButton} title="Press Me"/> </View> <View style={styles.buttonContainer}> <Button onPress={this._onPressButton} title="Press Me" color="#841584" /> </View> <View style={styles.alternativeLayoutButtonContainer}> <Button onPress={this._onPressButton} title="This looks great!" /> <Button onPress={this._onPressButton} title="OK!" color="#841584" /> </View> </View> ); } } const styles = StyleSheet.create({ container: { flex: 1, justifyContent: 'center', }, buttonContainer: { margin: 4 }, alternativeLayoutButtonContainer: { margin: 40, flexDirection: 'row', justifyContent: 'space-between' } });
Preview:
downloadDownload PNG
downloadDownload JPEG
downloadDownload SVG
Tip: You can change the style, width & colours of the snippet with the inspect tool before clicking Download!
Click to optimize width for Twitter