Breaking News: Grepper is joining You.com. Read the official announcement!

react native flatlist

Add Answer

Dayanaohhnana answered on February 4, 2021 Popularity 10/10 Helpfulness 5/10

answer react native flatlist

related react native flat list

related react native flatlist container style

related flatlist inside flatlist react native

related react native flatlist

react native flatlist

Comment

import React from 'react';
import { SafeAreaView, View, FlatList, StyleSheet, Text, StatusBar } from 'react-native';

const DATA = [
  {
    id: 'bd7acbea-c1b1-46c2-aed5-3ad53abb28ba',
    title: 'First Item',
  },
  {
    id: '3ac68afc-c605-48d3-a4f8-fbd91aa97f63',
    title: 'Second Item',
  },
  {
    id: '58694a0f-3da1-471f-bd96-145571e29d72',
    title: 'Third Item',
  },
];

const Item = ({ title }) => (
  <View style={styles.item}>
    <Text style={styles.title}>{title}</Text>
  </View>
);

const App = () => {
  const renderItem = ({ item }) => (
    <Item title={item.title} />
  );

  return (
    <SafeAreaView style={styles.container}>
      <FlatList
        data={DATA}
        renderItem={renderItem}
        keyExtractor={item => item.id}
      />
    </SafeAreaView>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    marginTop: StatusBar.currentHeight || 0,
  },
  item: {
    backgroundColor: '#f9c2ff',
    padding: 20,
    marginVertical: 8,
    marginHorizontal: 16,
  },
  title: {
    fontSize: 32,
  },
});

export default App;

Popularity 10/10 Helpfulness 5/10 Language javascript

Source: Grepper

Tags: flatlist javascript react-native

Link to this answer
Share Copy Link

Contributed on Feb 04 2021

Dayanaohhnana

0 Answers Avg Quality 2/10

Closely Related Answers

react native flat list

Comment

import { FlatList } from 'react-native'

...

<FlatList
  data={items}
  renderItem={
    ({ item, index, separators }) => <Component item={item} />
  }
  keyExtractor={item => item.id}
/>

Popularity 10/10 Helpfulness 4/10 Language typescript

Source: Grepper

Tags: flat

Link to this answer
Share Copy Link

Contributed on May 12 2022

florinrelea

0 Answers Avg Quality 2/10

react native flatlist container style

Comment

<FlatList
    contentContainerStyle={{flexGrow: 1, justifyContent: 'center'}}
    //... other props
/>

Popularity 10/10 Helpfulness 4/10 Language javascript

Source: Grepper

Tags: flatlist flatlis

Link to this answer
Share Copy Link

Contributed on Aug 16 2021

Singh99

0 Answers Avg Quality 2/10

flatlist inside flatlist react native

Comment

<FlatList
  data={data ? data : []}
  renderItem={({ outerItem }) => (
    <View>
      <FlatList
        data={outerItem["data"] ? outerItem["data"] : []}
        renderItem={({ innerItem }) => (
          <TouchableOpacity onPress={() => {
            navigation.navigate("Home", {
              artist_id: innerItem["artistID"]
            })
          }}>
            <View>
              <Text>Inner FlatList</Text>
            </View>
          </TouchableOpacity>
        )}
        keyExtractor={(innerItem) => innerItem.id}
      />
    </View>
  )}
/>

Popularity 10/10 Helpfulness 3/10 Language javascript

Source: stackoverflow.com

Tags: flatlist flatlis

Link to this answer
Share Copy Link

Contributed on Jul 19 2022

Ismet Glumcevic

0 Answers Avg Quality 2/10

react native flatlist

Comment

### Example::: FlatList 2 Column


##### Create: Card Component

```

type Props = {
  icon: ReactNode,
  title: string,
  isTwoLine: boolean
};

const CardMainMenuComponent = ({ icon, title, isTwoLine }: Props) => {
  return (

    <TouchableHighlight 
      onPress={() => Alert.alert("Super")}
      underlayColor={'lightgrey'}
      style={[styles.card, {}]}
    >
      <View style={{flex: 1, width: '100%'}}>
        <View style={[{ flex: 1, width: '100%' }]}>
          <View style={[{ flex: 1, justifyContent: 'center', alignItems: 'center' }]}>
            {icon}
          </View>
        </View>
        <View style={[{ flex: isTwoLine ? 2 : 1, justifyContent: 'center' }]}>
          <Text numberOfLines={isTwoLine ? 2 : 1} adjustsFontSizeToFit style={[styles.text, gbs.title]}>{title}</Text>
        </View>
      </View>
    </TouchableHighlight>
  );
}

export default CardMainMenuComponent;

const styles = StyleSheet.create({
  card: {
    width: '45%',
    height: sc.cardMenuHeight,
    backgroundColor: colors.white,
    padding: sc.padMin,
    margin: sc.midSpace,
    alignItems: 'center',
    borderRadius: sc.spaceTitle,
    shadowColor: colors.secondary,
    shadowRadius: sc.padMin,
    shadowOpacity: 0.1
  },
  text: {
    color: '#4F4F4F',
    textAlign: 'center'
  }
});

``` 

### Use FlatList

```

<View style={[{ flex: 1, flexDirection: 'row', alignItems: 'center' }]}>

    <FlatList
        keyExtractor={(item, index) => index.toString()}
        data={saleProductModels}
        renderItem={({item}) => (
            <CardMainMenuComponent 
                icon={item.icon}
                title={item.title}
                isTwoLine={item.isTwoLine}
            />
        )}
        numColumns={2}
        columnWrapperStyle={{justifyContent: 'space-between'}}
        contentContainerStyle={{padding: sc.padMin}}
        ItemSeparatorComponent={() => <View style={[{height: sc.padMin}]}></View>}
    >

    </FlatList>

</View>

```

Popularity 10/10 Helpfulness 2/10 Language typescript

Source: Grepper

Tags: flatlist flatlis

Link to this answer
Share Copy Link

Contributed on Dec 24 2022

Sore Sardine

0 Answers Avg Quality 2/10

react native flatlist

Contents

More Related Answers

react native flatlist

Closely Related Answers

react native flat list

react native flatlist container style

flatlist inside flatlist react native

react native flatlist

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.