React Native - Move code from render() into a different function

Question

I am new to React native. I have a noob question related to moving code away from the main function which is render() and put the code into a different function.

Let's say I have the following code:-

render() {
 return (
   <View>

   <Modal
     animationType={"fade"}
     transparent={true}
     visible={this.state.signUpPopUpVisible}
     onRequestClose={() => {alert("Modal has been closed.")}}>
      {/* Other modal codes */}
   </Modal>

  <View style={styles.mainView}>
      {/* Other mainView codes */}
  </View>

  </View>
);

}

How can I move the whole code

   <Modal
     animationType={"fade"}
     transparent={true}
     visible={this.state.signUpPopUpVisible}
     onRequestClose={() => {alert("Modal has been closed.")}}>
      {/* Other modal codes */}
   </Modal>

into a different function and call it in the render()?

Thanks.

Gaurab Kc · Accepted Answer · 2016-11-30 03:40:44Z

2

you can try doing it this way,

showModal = () => {
    return (<Modal
      animationType={"fade"}
      transparent={true}
      visible={this.state.signUpPopUpVisible}
      onRequestClose={() => { alert("Modal has been closed.") } }>
      {/* Other modal codes */}
    </Modal>);
  }
  render() {
    return (
      <View>
        {this.showModal()}
        <View style={styles.mainView}>
          {/* Other mainView codes */}
        </View>
      </View>
    );
  }

edited Nov 30, 2016 at 3:40

answered Nov 29, 2016 at 9:29

Gaurab Kc

8519 silver badges9 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

yadhu Over a year ago

this.showModal is not a function call. It's just the function prototype.

Lian van der Vyver · Accepted Answer · 2016-11-29 09:54:52Z

All you need is to return your object within another function the same as you did in render.

Example:

yourFunction(){
  return(
    <View></View>
  );
}

Sample of your code:

render() {
 return (
   <View>
      {this._renderModal()}
      <View style={styles.mainView}>
          {this._renderMainViewCode()}/* Other mainView codes */
      </View>
  </View>
 );
}

_renderModal(){
  return(
    <Modal
      animationType={"fade"}
      transparent={true}
      visible={this.state.signUpPopUpVisible}
      onRequestClose={() => {alert("Modal has been closed.")}}>
       {this._renderModalCode()}/* Other modal codes */
    </Modal>
  );
}

_renderModalCode(){
  return(
    <Text>This is the modals code</Text>
  );
}

_renderMainViewCode(){
  return(
    <Text>This is the main views code</Text>
  );
}

Collectives™ on Stack Overflow

React Native - Move code from render() into a different function

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related