ReactNative Flat list Odd cards full width - reactjs

Question

i have 12 card view on homescreen
im using Flat list to render the 12 cards
I have 2 columns set so 2 cards in the view
i would like to tweak it so after every 2 cards 1 card be full width then the next 2 cards next to each other and the third is full width and so on
here is my code
<FlatList
data={ this.state.GridListItems }
keyExtractor={(item) => item.id.toString()}
renderItem={ ({item, index}) =>
<TouchableOpacity style={{width: (index + 1) % 3 === 0 ? '108%' : '54%', height: '110%', justifyContent:'center', overflow: "hidden",
flex:1,
justifyContent: 'center',
alignItems: 'center',
margin: 5,
backgroundColor: '#231F20',
borderRadius: 5,
shadowColor: '#000',
shadowOffset: { width: 5, height: 5 },
shadowOpacity: 0.8,
shadowRadius: 5,
elevation: 6,
padding: 5,}}
onPress={() => this.props.navigation.navigate('ProfileScreen', { height: "6'2", category: item.key })}>
<ImageBackground
source={{ uri: item.img }}
style={{width: '108%', height: '110%', justifyContent:'center'}} >
<View style={{position: 'absolute', top: 0, left: 0, right: 0, bottom: 0, justifyContent: 'center', alignItems: 'center'}}>
<Text style={styles.GridViewTextLayout} > {item.key} </Text>
</View>
</ImageBackground>
</TouchableOpacity>
}
numColumns={2}
initialNumToRender={6}
/>
i want it to render 2 cards (each card 50% of screen) and every third card (100% of the screen) for the 12 element

Answer 1

you can try this. so, on every third card, it should display the full width.
const styles = {
GridViewContainer: {
justifyContent:'center',
overflow: "hidden",
flex:1,
justifyContent: 'center',
alignItems: 'center',
margin: 5,
backgroundColor: '#231F20',
borderRadius: 5,
shadowColor: '#000',
shadowOffset: { width: 5, height: 5 },
shadowOpacity: 0.8,
shadowRadius: 5,
elevation: 6,
padding: 5,
}
}
<FlatList
data={this.state.GridListItems}
keyExtractor={(item) => item.id.toString()}
renderItem={({item, index}) =>
<TouchableOpacity
style={styles.GridViewContainer}
onPress={() => this.props.navigation.navigate('ProfileScreen', { height: "6'2", category: item.key })}
>
<ImageBackground
source={{ uri: item.img }}
style={{
width: (index + 1) % 3 === 0 ? '216%' : '108%',
height: '110%',
justifyContent: 'center',
}}
>
<View
style={{
position: 'absolute',
top: 0,
left: 0,
right: 0,
bottom: 0,
justifyContent: 'center',
alignItems: 'center'
}}
>
<Text style={styles.GridViewTextLayout}> {item.key} </Text>
</View>
</ImageBackground>
</TouchableOpacity>
}
numColumns={2}
initialNumToRender={6}
/>
edited to reflect the styling for GridViewContainer