title: ReactNative Flat list Odd cards full width
body: <p>i have 12 card view on homescreen </p>
  
  <p>im using Flat list to render the 12 cards</p>
  
  <p>I have 2 columns set so 2 cards in the view</p>
  
  <p>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 </p>
  
  <p>here is my code </p>
  
  <pre><code>        &lt;FlatList
  
      data={ this.state.GridListItems }
      keyExtractor={(item) =&gt; item.id.toString()}
  
      renderItem={ ({item, index}) =&gt;
  
        &lt;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={() =&gt; this.props.navigation.navigate('ProfileScreen', { height: "6'2", category: item.key })}&gt;
        &lt;ImageBackground
          source={{ uri: item.img }}
          style={{width: '108%', height: '110%', justifyContent:'center'}} &gt;
          &lt;View style={{position: 'absolute', top: 0, left: 0, right: 0, bottom: 0, justifyContent: 'center', alignItems: 'center'}}&gt;          
            &lt;Text style={styles.GridViewTextLayout}  &gt; {item.key} &lt;/Text&gt;
          &lt;/View&gt;
        &lt;/ImageBackground&gt;
  
        &lt;/TouchableOpacity&gt;
    }
    numColumns={2}
    initialNumToRender={6}
  </code></pre>
  
  <p>/></p>
  
  <p>i want it to render 2 cards (each card 50% of screen) and every third card (100% of the screen) for the 12 element </p>