title: React Native FlatList is not scrolling
body: <p>I am developing a React Native application for Learning purposes. Now I am using FlatList in my application. But I am having a problem. My flat list is not scrolling to see all the items. It bounces back when I tried to scroll it out of screen size. I used the solutions I found online adding the flex to 1 on the root, but it is not working.</p>
  
  <p>Here is my code:</p>
  
  <pre><code>class Events extends React.Component {
    static navigationOptions = {
      title: "Events"
    };
  
    constructor(props) {
      super(props);
      this.state = {
        data: [
          {
            id: 1,
            name: "Name 1"
          },
          {
            id: 2,
            name: "Name 2"
          },
          {
            id: 3,
            name: "Name 3"
          },
          {
            id: 4,
            name: "Name 4"
          },
          {
            id: 5,
            name: "Name 5"
          },
          {
            id: 6,
            name: "Name 6"
          },
          {
            id: 7,
            name: "Name 7"
          },
          {
            id: 8,
            name: "Name 8"
          },
          {
            id: 9,
            name: "Name 9"
          },
          {
            id: 10,
            name: "Name 10"
          },
          {
            id: 11,
            name: "Name 11"
          },
          {
            id: 12,
            name: "Name 12"
          },
          {
            id: 13,
            name: "Name 13"
          },
          {
            id: 14,
            name: "Name 14"
          },
          {
            id: 15,
            name: "Name 15"
          },
          {
            id: 16,
            name: "Name 16"
          },
          {
            id: 17,
            name: "Name 17"
          },
          {
            id: 18,
            name: "Name 18"
          },
          {
            id: 19,
            name: "Name 19"
          },
          {
            id: 20,
            name: "Name 20"
          },
          {
            id: 21,
            name: "Name 21"
          },
          {
            id: 22,
            name: "Name 22"
          },
          {
            id: 23,
            name: "Name 23"
          },
          {
            id: 24,
            name: "Name 24"
          }
        ]
      };
    }
  
    _handleLoadMore() {}
  
    renderItem(item) {
      return (
        &lt;Card&gt;
          &lt;CardItem&gt;
            &lt;Left&gt;
              &lt;Thumbnail source={{ uri: "https://www.vkguy.co.uk/images/slideshow/05.jpg" }} /&gt;
              &lt;Body&gt;
                &lt;Text&gt;NativeBase&lt;/Text&gt;
                &lt;Text note&gt;GeekyAnts&lt;/Text&gt;
              &lt;/Body&gt;
            &lt;/Left&gt;
          &lt;/CardItem&gt;
          &lt;CardItem cardBody&gt;
            &lt;Image
              source={{ uri: "https://www.vkguy.co.uk/images/slideshow/05.jpg" }}
              style={{ height: 200, width: null, flex: 1 }}
            /&gt;
          &lt;/CardItem&gt;
          &lt;CardItem&gt;
            &lt;Left&gt;
              &lt;Button transparent&gt;
                &lt;Icon active name="thumbs-up" /&gt;
                &lt;Text&gt;12 Likes&lt;/Text&gt;
              &lt;/Button&gt;
            &lt;/Left&gt;
            &lt;Body&gt;
              &lt;Button transparent&gt;
                &lt;Icon active name="chatbubbles" /&gt;
                &lt;Text&gt;4 Comments&lt;/Text&gt;
              &lt;/Button&gt;
            &lt;/Body&gt;
            &lt;Right&gt;
              &lt;Text&gt;11h ago&lt;/Text&gt;
            &lt;/Right&gt;
          &lt;/CardItem&gt;
        &lt;/Card&gt;
      );
    }
  
    render() {
      return (
          &lt;FlatList
          contentContainerStyle={{
            flex: 1,
            flexDirection: "column",
            height: "100%",
            width: "100%"
          }}
          data={this.state.data}
          keyExtractor={item =&gt; item.id.toString()}
          renderItem={({ item }) =&gt; this.renderItem(item)}
          onEndReached={this._handleLoadMore}
        /&gt;
      );
    }
  }
  
  export default Events;
  </code></pre>
  
  <p>But it is not scrolling to see the items off the screen. How can I fix it?</p>
  
  <p>Here is the screenshot. I cannot scroll down more than that.</p>
  
  <p><a href="https://i.stack.imgur.com/8KYg7.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/8KYg7.png" alt="enter image description here"></a></p>