title: Modal and FlatList
body: <p>i work on my first react-native project and its also my firts javascript work. I want at least a news-app with own database informations. The backend is already finish. Now im in struggle with the app- i want an Popup with Modal with informations from my api like news_image, news_content and news_title. The News are in the FlatList and now i want to click on a item to show the content in an modal popup. so, here is my code where im struggle. i get always an error. so how can i fix this problem? tanks a lot!</p>
  
  <pre><code>import React from "react";
  import {
    AppRegistry,
    FlatList,
    Image,
    Platform,
    ScrollView,
    StyleSheet,
    Text,
    TouchableOpacity,
    View,
    ActivityIndicator,
    ListView,
    YellowBox,
    Alert,
    TextInput
  } from "react-native";
  import { WebBrowser } from "expo";
  import Button from "react-native-button";
  import Modal from "react-native-modalbox";
  import Slider from "react-native-slider";
  import { MonoText } from "../components/StyledText";
  export default class NewsFeed extends React.Component {
    static navigationOptions = {
      title: "HomeScreen"
    };
    constructor(props) {
      super(props);
      this.state = {
        isLoading: true
      };
      YellowBox.ignoreWarnings([
        "Warning: componentWillMount is deprecated",
        "Warning: componentWillReceiveProps is deprecated"
      ]);
    }
    FlatListItemSeparator = () =&gt; {
      return (
        &lt;View
          style={{
            height: 0.5,
            width: "100%",
            backgroundColor: "#000"
          }}
        /&gt;
      );
    };
    webCall = () =&gt; {
      return fetch("http://XXXXXXXXXXXX.com/connection.php")
        .then(response =&gt; response.json())
        .then(responseJson =&gt; {
          this.setState(
            {
              isLoading: false,
              dataSource: responseJson
            },
            function() {
              // In this block you can do something with new state.
            }
          );
        })
        .catch(error =&gt; {
          console.error(error);
        });
    };
    onClose() {
      console.log("Modal just closed");
    }
    onOpen() {
      console.log("Modal just opened");
    }
    onClosingState(state) {
      console.log("the open/close of the swipeToClose just changed");
    }
    componentDidMount() {
      this.webCall();
    }
    render() {
      if (this.state.isLoading) {
        return (
          &lt;View
            style={{ flex: 1, justifyContent: "center", alignItems: "center" }}
          &gt;
            &lt;ActivityIndicator size="large" /&gt;
          &lt;/View&gt;
        );
      }
      return (
        &lt;View style={styles.MainContainer}&gt;
          &lt;FlatList
            data={this.state.dataSource}
            ItemSeparatorComponent={this.FlatListItemSeparator}
            renderItem={({ item }) =&gt; (
              &lt;View style={{ flex: 1, flexDirection: "row" }}&gt;
                &lt;Image
                  source={{ uri: item.news_image }}
                  style={styles.imageView}
                /&gt;
                &lt;Text
                  onPress={() =&gt; this.refs.modal.open()}
                  style={styles.textView}
                &gt;
                  {item.news_title}
                  {"\n"}
                  &lt;Text style={styles.textCategory}&gt;{item.author}&lt;/Text&gt;
                &lt;/Text&gt;
                &lt;Text style={styles.textViewDate}&gt;{item.created_at}&lt;/Text&gt;
                &lt;Modal
                  style={[styles.modal]}
                  position={"bottom"}
                  ref={"modal"}
                  swipeArea={20}
                &gt;
                  &lt;ScrollView&gt;
                    &lt;View style={{ width: "100%", paddingLeft: 10 }}&gt;
                      {item.news_content}
                    &lt;/View&gt;
                  &lt;/ScrollView&gt;
                &lt;/Modal&gt;
              &lt;/View&gt;
            )}
            keyExtractor={(item, index) =&gt; index.toString()}
          /&gt;
        &lt;/View&gt;
      );
    }
  }
  const styles = StyleSheet.create({
    MainContainer: {
      justifyContent: "center",
      flex: 1,
      margin: 5
    },
    imageView: {
      width: "25%",
      height: 100,
      margin: 7,
      borderRadius: 7
    },
    textView: {
      width: "100%",
      height: "100%",
      textAlignVertical: "center",
      padding: 10,
      fontSize: 20,
      color: "#000"
    },
    textViewDate: {
      width: "30%",
      textAlignVertical: "center",
      padding: 15,
      color: "#afafaf"
    },
    textCategory: {
      color: "#d3d3d3",
      fontSize: 12
    },
    modal: {
      justifyContent: "center",
      alignItems: "center",
      height: "90%"
    }
  });
  </code></pre>