title: Single instance of component react native
body: <p>I want to make a component where it renders a modal.
  This component should have <code>states{Key(integer),ImageLink(string),Visible(bool)}</code>.
  I am using <code>flatlist</code>. I want to render the component's modal on flatlist parent but component. States changes upon touch on flatlist child.</p>
  
  <p><strong>For example:</strong></p>
  
  <p><strong><em>Modal Component which means to be single instance</em></strong></p>
  
  <pre><code>import React from "react";
  import {
      View,
      Modal,
      Text,
      StyleSheet,
      TouchableHighlight,
      Platform
  } from "react-native";
  
  export default class MySingleInstanceModal extend Component{
      constructor(props) {
          super(props);
          this.state = {
              Visiable: props.Visiable, \\Bool For turning Modal On or Off
              ImageLink: props.ImageLink, \\String Image Online Link
              Key: props.PostKey,\\integer Key
          };
      }
  
      NextImage = (Current,Link )=&gt; {
          this.setState({ ImageLink: Link,Key:Current+1 });
      };
  
      ToggleMeOff = () =&gt; {
          this.setState({ TurnMeOn: false });
      };
  
      ToggleMeOn = (MyKey,MyLink) =&gt; {
          this.setState({ TurnMeOn: true,ImageLink: MyLink,Key:MyKey  });
      };
  
      PrevImage = (Current,Link )=&gt; {
          this.setState({ ImageLink: Link,Key:Current-1 });
      };
  
      render() {
          return (
              &lt;View&gt;
                  &lt;Modal
                      animationType="slide"
                      transparent={false}
                      visible={this.state.TurnMeOn}
                  &gt;
                      &lt;View style={{ marginTop: 22 }}&gt;
                          &lt;View&gt;
                              &lt;Text&gt;Hello World!&lt;/Text&gt;
                              &lt;TouchableHighlight onPress={this.ToggleMeOff}&gt;
                                  &lt;Text&gt;Hide Modal&lt;/Text&gt;
                              &lt;/TouchableHighlight&gt;
                              &lt;Image
                                  source={{ uri: this.state.ImageLink }}
                                  resizeMethod={"resize"}/&gt;
                          &lt;/View&gt;
                      &lt;/View&gt;
                  &lt;/Modal&gt;
              &lt;/View&gt;
          );
      }
  }
  </code></pre>
  
  <p><strong>Calling In Flatlist Parent:</strong></p>
  
  <pre><code>render() {
      return  (
        &lt;View style={Style1.container}&gt;
        &lt;MySingleInstanceModal/&gt; // Here I want to call render
        &lt;FlatList
                data={data}
                initialNumToRender={4}
                keyExtractor={this._keyExtractor}
                renderItem={this._renderItem}
                onEndReached={this._reachedEnd}
                refreshing={isRefreshing}
                onEndReachedThreshold={0.5}
                onRefresh={this._refreshdata}
                ListFooterComponent={this.renderFooter}
              /&gt;
      &lt;/view&gt;)
  }
  </code></pre>
  
  <p><strong><em>And want to change <code>states</code> of <code>MySingleInstanceModal</code> in <code>flatlist items</code>(<code>flatlist child</code>)</em></strong></p>
  
  <p><strong>somewhere in the rendering of flatlist child item</strong>   </p>
  
  <pre><code>render(){
      return  (
          ...
          &lt;TouchableHighlight onPress={() =&gt; 
              MySingleInstanceModal.ToggleMeOn(this.state.Link,this.state.Key)}&gt;
              &lt;Text&gt;Open Modal For Me&lt;/Text&gt;
          &lt;/TouchableHighlight&gt;
          ...
      )
  }
  </code></pre>
  
  <p>Which means component will render at parent but its states will be controlled by the child(Every flatlist item)</p>