title: React Native FlatList with clickable items
body: <p>I'm building a custom line style for a react-native <code>FlatList</code>.</p>
  
  <p>I want the user to navigate to item details when clicking on the line text, or navigate to another page (drill down next level) when clicked on the right caret, something like: </p>
  
  <p><a href="https://i.stack.imgur.com/DuerI.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/DuerI.png" alt="enter image description here"></a></p>
  
  <p>Here is my current list components code:</p>
  
  <pre><code>class MyList extends Component {
    handleShowDetails = index =&gt; {
      ...
    };
  
  
    handleDrillDown = index =&gt; {
      ...
    }
  
    render = () =&gt; {
      let data = // Whatever data here
  
      return (
        &lt;View style={styles.container}&gt;
          &lt;FlatList
            data={data}
            keyExtractor={(item, index) =&gt; index.toString()}
            renderItem={({ item }) =&gt; (
              &lt;MyListItem
                onTextPress={this.handleShowDetails}
                onCaretPress={this.handleDrillDown}
                item={item}
              /&gt;
            )}
          /&gt;
        &lt;/View&gt;
      );
    };
  }
  
  export default MyList;
  
  const styles = StyleSheet.create({
    container: {
      flex: 1
    },
    item: {
      padding: 10,
      fontSize: 18,
      height: 44,
      backgroundColor: colors.white,
      borderStyle: "solid",
      marginBottom: 1
    }
  });
  </code></pre>
  
  <p>And my list item component:</p>
  
  <pre><code>class MyListItem extends Component {
    handleTextPress = () =&gt; {
      if (this.props.onTextPress) this.props.onTextPress(this.props.item.id);
    };
  
    handleIconPress =() =&gt; {
      if (this.props.onCaretPress) this.props.onCaretPress(this.props.item.id)
    }
  
    render = () =&gt; {
      return (
        &lt;View style={styles.container}&gt;
          &lt;View style={styles.textContainer}&gt;
            &lt;Text onPress={this.handleTextPress}&gt;{this.props.item.title}&lt;/Text&gt;
          &lt;/View&gt;
          &lt;View style={styles.iconContainer}&gt;
            &lt;Button onPress={this.handleIconPress}&gt;
              &lt;Icon name="ios-arrow-forward"/&gt;
            &lt;/Button&gt;
          &lt;/View&gt;
        &lt;/View&gt;
      );
    };
  }
  
  export default MyListItem;
  
  const styles = StyleSheet.create({
    container: {
      flex: 1,
      flexDirection: "row",
      justifyContent: "space-between",
      alignItems: "center",
      backgroundColor: colors.white,
      marginBottom: 1,
      height: 30
    },
    textContainer: {
      backgroundColor: colors.light,
      paddingLeft: 5,
      fontSize: 26
    },
    iconContainer: {
      alignSelf: "flex-end",
      backgroundColor: colors.primary,
      paddingRight: 5, 
      fontSize: 26
    }
  });
  </code></pre>
  
  <p>Problems I'm facing:</p>
  
  <p>a. Clicking on text is not working properly. Sometimes it navigates but most of time I cannot navigate, specially if I click on the empty space between the text and the caret.</p>
  
  <p>b. I simply cannot style the fontSize of the text.</p>
  
  <p>c. I'm not being able to space then accordingly.</p>
  
  <p>d. I need to vertical center both itens on row.</p>
  
  <p>Here is what I'm getting for now:</p>
  
  <p><a href="https://i.stack.imgur.com/YYdpT.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/YYdpT.png" alt="enter image description here"></a></p>