title: React native create custom modal using render props
body: <p>I want to create a Modal component and I want to have possibility to inject to it everything what I want. Firstly I decided to use HOC but then I've changed my solution to render props. Everything works fine but I don't really like this solution. I'm wondering how could I optimize it to make it better. What is the best practise to create such kind of modal where you have button opening this modal beyond modal component. I really don't like that now I have two components with open/close state of modal. And both of them have a toggle method to open/close modal. Any suggestion? Maybe I should stick with the HOC ? </p>
  
  <p>Here's the code with Component.js where CustomModal is used:</p>
  
  <pre><code>toggleModalVisibility = (visible) =&gt; {
      this.setState({modalVisible: visible});
  };
  
  render() {
      const question = this.props.questions[this.props.counter];
      return (
              &lt;View style={styles.questionContainer}&gt;
  
                  &lt;CustomModal
                      visible={this.state.modalVisible}
                      toggleModalVisibility={this.toggleModalVisibility}
                      render={() =&gt; (
                          &lt;&gt;
                              &lt;Text&gt;{question.text}&lt;/Text&gt;
                              &lt;Text&gt;{question.details}&lt;/Text&gt;
                          &lt;/&gt;
                      )}
                  /&gt;
                  &lt;View style={styles.questionTextContainer}&gt;
                      &lt;Text style={styles.questionText}&gt;{question.text}&lt;/Text&gt;
                      &lt;TouchableOpacity onPress={() =&gt; this.toggleModalVisibility(!this.state.modalVisible) }&gt;
                          &lt;FontAwesome5 name='question-circle' size={30} color='#B7DBF3' light /&gt;  
                      &lt;/TouchableOpacity&gt;                          
                  &lt;/View&gt;
              &lt;/View&gt;
      )
  }
  </code></pre>
  
  <p>and here's the code of CustomModal.js</p>
  
  <pre><code>export default class CustomModal extends Component {
  constructor(props) {
      super(props);
      this.state = {
          isOpen: this.props.visible
      };
  }
  
  componentDidUpdate(prevProps) {
      if (prevProps.visible !== this.props.visible) {
          this.setState({isOpen: this.props.visible});
      }        
  }
  
  toggle = (isOpen) =&gt; {
      this.setState({ isOpen });
      this.props.toggleModalVisibility(isOpen)
  }
  
  render() {
      return (
          &lt;View&gt;
              &lt;Modal
                  animationType='slide'
                  transparent={false}
                  visible={this.state.isOpen}
              &gt;
                  &lt;View style={{marginTop: 30, marginLeft: 5}}&gt;            
                      &lt;TouchableHighlight
                          onPress={() =&gt; {
                              this.toggle(!this.state.isOpen)
                          }}&gt;
                          &lt;FontAwesome5 name='times-circle' size={30} light /&gt;  
                      &lt;/TouchableHighlight&gt;
                      &lt;View&gt;{this.props.render()}&lt;/View&gt;                      
                  &lt;/View&gt;
              &lt;/Modal&gt;
          &lt;/View&gt;
      )
  }
  </code></pre>
  
  <p>}</p>