Styling React Native FlatList

Question

I'm trying to get the FlatList items next to the HeaderComponent of the list. I want the rooms to start next to the create room. Here is an image of how it looks like [1]: https://i.sstatic.net/qyZZP.png

Here is the code for the rooms list:

<FlatList
   ListHeaderComponent={<Room create />}
   numColumns={2}
   data={this.props.rooms}
   keyExtractor={(room) => room._id}
   renderItem={(itemData) => <Room room={itemData.item} create={false}/>
/>

Here is the styling of the room card:

cardStyle: {
    backgroundColor: "white",
    borderRadius: 10,
    width: Dimensions.get("window").width / 2.6,
    height: Dimensions.get("window").width / 2.6,
    padding: 10,
    margin: 10,
  }

Answer 1

I don't think this is possible unless you "cheat".

What I mean is something like this:

const rooms = this.props.rooms;
rooms.unshift({});
...
...

        <FlatList
            numColumns={2}
            data={rooms}
            keyExtractor={(room) => room._id}
            renderItem={(itemData) => itemData.index === 0 ? <Room create /> : <Room room={itemData.item} create={false}/> 
            room={itemData.item} create={false} />
         />