title: Trying to set different styles on two items from JSON
body: <p>I try to build a news app that shows on the MainPage an overview of news items.
  The first 3 items need to be rendered different as the rest, using a FlatList.</p>
  
  <ul>
  <li>First item is a 100% background image with some text on it (did this with: if index === 0))</li>
  <li>The second and third item needs to be background images with titles in a row (so next to each other)</li>
  <li>The rests is a list with image, title, and date (underneath each other)</li>
  </ul>
  
  <p>I tried everything but item 2 and 3 is not working.</p>
  
  <p>Tried with this little basic test:</p>
  
  <pre><code>import React, { Component } from "react";
  import { View, StyleSheet, Text, FlatList } from "react-native";
  
  export default class Screen1 extends Component {
    state = {
      data: [
        {
          text: "one"
        },
        {
          item1: {
            text: "two"
          },
          item2: {
            text: "three"
          }
        },
        {
          item1: {
            text: "four"
          },
          item2: {
            text: "five"
          }
        },
        {
          item1: {
            text: "six"
          }
        }
      ]
    };
  
    renderItem = ({ item, index }) =&gt; {
      if (index === 0) {
        return (
          &lt;View style={styles.bigSquare}&gt;
            &lt;Text&gt; {item.text} &lt;/Text&gt;{" "}
          &lt;/View&gt;
        );
      } else if (index &gt; 0 || index &lt;= 3) {
        return (
          &lt;View
            style={{
              flexDirection: "row"
            }}
          &gt;
            {" "}
            {item.item2 &amp;&amp; (
              &lt;View
                style={[
                  styles.smallSquare,
                  {
                    backgroundColor: "red"
                  }
                ]}
              &gt;
                &lt;Text&gt; {item.item2.text} &lt;/Text&gt; &lt;Text&gt; {item.item2.text} &lt;/Text&gt;{" "}
              &lt;/View&gt;
            )}{" "}
          &lt;/View&gt;
        );
      }
    };
  
    keyExtractor = (item, index) =&gt; `${index}`;
  
    render() {
      return (
        &lt;View style={styles.container}&gt;
          &lt;FlatList
            data={this.state.data}
            renderItem={this.renderItem}
            keyExtractor={this.keyExtractor}
          /&gt;{" "}
        &lt;/View&gt;
      );
    }
  }
  
  const styles = StyleSheet.create({
    container: {
      flex: 1
    },
    bigSquare: {
      flexDirection: "column",
      height: 220,
      width: "100%",
      margin: 10,
      backgroundColor: "yellow",
      justifyContent: "center",
      alignItems: "center"
    },
    smallSquare: {
      height: 100,
      width: 100,
      margin: 10,
      backgroundColor: "green",
      justifyContent: "center",
      alignItems: "center"
    }
  });
  </code></pre>
  
  <p>Can someone point me in the right direction?</p>
  
  <p>Example:</p>
  
  <p><a href="https://i.stack.imgur.com/RgSXO.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/RgSXO.jpg" alt="Example of what I need "></a></p>