React Native FlatList

 App Name: Test 

Component Name: App.js

------------------------------------------------------------------------------------

import React, { useState} from 'react';
import {
StyleSheet,
Text,
View,
FlatList,
} from 'react-native';
// class App extends Component {
export default function App(){
const [people, ] = useState([
{name: 'ReactNative King', id: '1'},
{name: 'ReactNative King', id: '2'},
{name: 'ReactNative King', id: '3'},
{name: 'ReactNative Kingaun',id: '4'},
{name: 'ReactNative King', id: '5'},
{name: 'ReactNative King', id: '6'},
{name: 'ReactNative King', id: '7'},
]);
// render() {
return (
<View style={styles.container}>
<FlatList
keyEtractor={(item) => item.id}
data={people}
renderItem={({item}) =>(
<Text style={styles.item}>{item.name}</Text>
)}
/>
</View>
)
}

// }
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#ffecb3',
paddingTop: 40,
paddingHorizontal: 20
},
item: {
marginTop: 24,
padding: 30,
backgroundColor: '#ffb3b3',
fontSize: 24,
marginHorizontal: 10,
marginTop: 24,
borderRadius: 5,
borderColor: 'red'
}
})


Comments

Post a Comment

Popular posts from this blog

React Native class component

Image
class component: class component access react lifecycle methods and render and state props functionality. app name : test component name: App.js ----------------------------------------------------------------------------------------------------------------------- /** * Sample React Native App * https://github.com/facebook/react-native * * @format * @flow strict-local */ import React , { Component } from 'react' import { View , Text , Button , } from 'react-native' ; class App extends Component { render () { function hello (){ alert ( "Welcome class component ReactNative King" ) } return ( < View > < Text > Class Component </ Text > < Button title = "Click Me " onPress = { hello } /> </ View > ) } } export default App ;
Read more