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

react native flatlist container style

Singh99 answered on February 4, 2021 Popularity 10/10 Helpfulness 4/10

answer react native flatlist container style

related react native flatlist

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 javascript react-native

Link to this answer
Share Copy Link

Contributed on Aug 16 2021

Singh99

0 Answers Avg Quality 2/10

Closely Related Answers

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 flatlis

Link to this answer
Share Copy Link

Contributed on Feb 04 2021

Dayanaohhnana

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 container style

Contents

More Related Answers

react native flatlist container style

Closely Related Answers

react native flatlist

react native flatlist

Grepper

Documentation

Social

Legal

Contact

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