I want to seperate my rendering of a class in another class and just call the rendering. Do you know how to do this in React Native? Would be great if you can help me out here.

Thanks a lot

Albo

I want to seperate my rendering of a class in another class and just call the rendering. Do you know how to do this in React Native? Would be great if you can help me out here.

Thanks a lot

Albo

• javascript
• react-native

• I just wanted to seperate rendering and logic. For example you have a class Home which has business logic and rendering for your view. I want to seperate business logic in one class and rendering of your view in another class. Question now clear? Sorry for that... – NullPointer Commented Jul 7, 2016 at 5:20

3 Answers 3

Got it!

You have to write a Class like this for example:

export default class HomeRender extends Component {
constructor(props){
    super(props);
}

render() {
    return (
      <View>
          <Text>
              Hi
          </Text>
      </View>
    );
} 
}
module.exports = HomeRender;

After that you have simple to do the following in your class to call the render function from HomeRender:

var Home = require('./app/ponents/home/HomeRender');
...
render() {
 <View>
  <Home />
 </View>

}
...

Calling render from another class is not good practice. Instead create a new ponent class and import that class in your view. It will render.

This is not a good practise man, in react-native you should always import your ponent and insert it wherever you want like this:

Import your render file which you want like this:

            var Home = require('./app/ponents/home/HomeRender');

Again, wherever yo want to import that ponent which consists certain view you can render inside your specific like this:

render() {
   <View>
       your wish ponent.... <Home/>
    </View>
  }

This will ease your work in navigation part as well as to render your ponents which return view in wherever you want. Also, you should follow official documentation of react-native as well: https://facebook.github.io/react-native/docs/tutorial.html