I want to render object with React Native's FlatiList but this component doesn't return the expected result. My dictionary is like this:
Object {
"Lisa.Sky": Object {
"name": "Lisa",
"surname": "Sky",
"age": 21,
"sex": female
},
"Thomas.Prat": Object {
"name": "Thomas",
"surname": "Prat",
"age": 33,
"sex": male
},
"Paul.Sing": Object {
"name": "Paul",
"surname": "Sing",
"age": 88,
"sex": male
},
"Andrew.Brown": Object {
"name": "Andrew",
"surname": "Brown",
"age": 23,
"sex": male
},
}
I have implemented a FlatList like this, but I have white screen
<View>
<ScrollView>
<FlatList
data={this.props.nameList}
renderItem={({item}) =>
<View key={item.name + "." + item.surname}>
<Text style={styles.viewDetail}>{item.name}</Text>
<Text style={styles.viewDetail}>{item.surname}</Text>
<Text style={styles.viewDetail}>{item.age}</Text>
<Text style={styles.viewDetail}>{item.sex}</Text>
</View>
}
keyExtractor={(index) => index.toString()}
/>
</ScrollView>
</View>
Thanks
To render an array of objects in react with JSX we need to use Array. map() to transform the object into something react can make use of because you cannot directly render an object into React. Instead, by using Array.
As opposed to the ScrollView, the FlatList renders only those elements that are currently being displayed on the screen (default: 10 items). Thus, it does not have any impact on the performance of the application. So, it is preferable to use the FlatList Component to display a large list of data.
There is no such functionality in built into FlatList. However, one way of doing this would be to add the ads to the data that is passed into the FlatList and modify the renderItem function to also be able to render them.
you can do like this way. check working snack. https://snack.expo.io/@nazrdogan/bad-cashew
import * as React from 'react';
import { Text, View, StyleSheet, FlatList } from 'react-native';
import { Constants } from 'expo';
// You can import from local files
import AssetExample from './components/AssetExample';
// or any pure javascript modules available in npm
import { Card } from 'react-native-paper';
var obj = {
'Lisa.Sky': {
name: 'Lisa',
surname: 'Sky',
age: 21,
sex: 'female',
},
'Thomas.Prat': {
name: 'Thomas',
surname: 'Prat',
age: 33,
sex: 'male',
},
'Paul.Sing': {
name: 'Paul',
surname: 'Sing',
age: 88,
sex: 'male',
},
'Andrew.Brown': {
name: 'Andrew',
surname: 'Brown',
age: 23,
sex: 'male',
},
};
export default class App extends React.Component {
render() {
return (
<View style={styles.container}>
<FlatList
data={Object.keys(obj)}
renderItem={({ item }) => <Text>{obj[item].name}</Text>}
/>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
paddingTop: Constants.statusBarHeight,
backgroundColor: '#ecf0f1',
padding: 8,
},
});
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With