Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

like image 703
zp26 Avatar asked Jan 11 '19 09:01

zp26


People also ask

How do you show array of objects in React Native?

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.

Is FlatList better than ScrollView?

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.

Can FlatList be used for dissimilar components?

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.


1 Answers

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,
  },
});
like image 170
Nazır Dogan Avatar answered Oct 08 '22 17:10

Nazır Dogan