javascriptreact-nativereact-native-flatlist

React Native FlatList with object


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


Solution

  • 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,
      },
    });