I want to custom a screen same:

so I use Flastlist and check if the item is header I will set with item = window.with and if not width item = window.width/3. But its error. Here is my code:

const { width, height } = Dimensions.get("window")
class App extends React.Component {
    constructor() {
        super()
        this.state = {
            data: [
                { name: "Movies", header: true },
                { name: "Interstellar", header: false },
                { name: "Dark Knight", header: false },
                { name: "Pop", header: false },
                { name: "Music", header: true },
                { name: "Adams", header: false },
                { name: "Nirvana", header: false },
                { name: "Amrit Maan", header: false },
                { name: "Oye Hoye", header: false },
                { name: "Eminem", header: false },
                { name: "Places", header: true },
                { name: "Jordan", header: false },
                { name: "Punjab", header: false },
                { name: "Ludhiana", header: false },
                { name: "Jamshedpur", header: false },
                { name: "India", header: false },
                { name: "People", header: true },
                { name: "Jazzy", header: false },
                { name: "Appie", header: false },
                { name: "Baby", header: false },
                { name: "Sunil", header: false },
                { name: "Arrow", header: false },
                { name: "Things", header: true },
                { name: "table", header: false },
                { name: "chair", header: false },
                { name: "fan", header: false },
                { name: "cup", header: false },
                { name: "cube", header: false }
            ],
            stickyHeaderIndices: []
        };
    }
    renderItem(item) {
        if (item.header) {
            return (
                <View style={{ width: width, height: 40, backgroundColor: 'green' }}>
                    <Text>{item.name}</Text>
                </View>
            )
        } else {
            return (
                <View style={{
                    width: width / 3,
                    height: width / 3,
                    backgroundColor: 'white',
                    borderWidth: 1,
                    borderColor: 'gray'
                }}>
                    <Text>{item.name}</Text>
                </View>
            )
        }
    }
    render() {
        return (
            <View style={{ flex: 1, backgroundColor: 'red' }}>

                <FlatList
                    data={this.state.data}
                    renderItem={({ item }) => (
                        this.renderItem(item)
                    )}
                    keyExtractor={item => item.name}

                />
            </View>
        );
    }
}
export default App;

I want to custom a screen same:

so I use Flastlist and check if the item is header I will set with item = window.with and if not width item = window.width/3. But its error. Here is my code:

const { width, height } = Dimensions.get("window")
class App extends React.Component {
    constructor() {
        super()
        this.state = {
            data: [
                { name: "Movies", header: true },
                { name: "Interstellar", header: false },
                { name: "Dark Knight", header: false },
                { name: "Pop", header: false },
                { name: "Music", header: true },
                { name: "Adams", header: false },
                { name: "Nirvana", header: false },
                { name: "Amrit Maan", header: false },
                { name: "Oye Hoye", header: false },
                { name: "Eminem", header: false },
                { name: "Places", header: true },
                { name: "Jordan", header: false },
                { name: "Punjab", header: false },
                { name: "Ludhiana", header: false },
                { name: "Jamshedpur", header: false },
                { name: "India", header: false },
                { name: "People", header: true },
                { name: "Jazzy", header: false },
                { name: "Appie", header: false },
                { name: "Baby", header: false },
                { name: "Sunil", header: false },
                { name: "Arrow", header: false },
                { name: "Things", header: true },
                { name: "table", header: false },
                { name: "chair", header: false },
                { name: "fan", header: false },
                { name: "cup", header: false },
                { name: "cube", header: false }
            ],
            stickyHeaderIndices: []
        };
    }
    renderItem(item) {
        if (item.header) {
            return (
                <View style={{ width: width, height: 40, backgroundColor: 'green' }}>
                    <Text>{item.name}</Text>
                </View>
            )
        } else {
            return (
                <View style={{
                    width: width / 3,
                    height: width / 3,
                    backgroundColor: 'white',
                    borderWidth: 1,
                    borderColor: 'gray'
                }}>
                    <Text>{item.name}</Text>
                </View>
            )
        }
    }
    render() {
        return (
            <View style={{ flex: 1, backgroundColor: 'red' }}>

                <FlatList
                    data={this.state.data}
                    renderItem={({ item }) => (
                        this.renderItem(item)
                    )}
                    keyExtractor={item => item.name}

                />
            </View>
        );
    }
}
export default App;

and my result I have the error: an item isn't header is a row, but I want to show 3 item in a row.

When added number column = 3 in flastlist with code :

 <FlatList
  numColumns={3}
  data={this.state.data}
  renderItem={({ item }) => (this.renderItem(item))}
  keyExtractor={item => item.name}
/>

How can I fix show 3 item in a row? Thank you very much.

• javascript
• react-native

3 Answers 3

I think you forgot to add numColumns = { 3 } in Flatlist props. Here you get detail solution to your problem.

I've used nested FlatList to solve this:

const renderCategory = category => (
    <View>
      <Text>{category}</Text>
      <FlatList
        data={itemsByCategory[category]}
        renderItem={({item, index}) => renderItem(item)}
        keyExtractor={(item, index) => index.toString()}
        numColumns={3}
      />
    </View>
  );

return (
    <FlatList
      data={Object.keys(itemsByCategory)}
      renderItem={({item, index}) => renderCategory(item)}
      keyExtractor={(item, index) => index.toString()}
    />
  );

Using flexWrap: 'wrap' and flexDirection: 'row' in your main container should resolve your problem.

<View style={{ flex: 1, backgroundColor: 'red', flexWrap: 'wrap', flexDirection: 'row' }}>
  <FlatList
    data={this.state.data}
    renderItem={({ item }) => (
      this.renderItem(item)
    )}
    keyExtractor={item => item.name}
  />
</View>