concept render method in category react native

This is an excerpt from Manning's book React Native in Action. Login to get full access to this book.

Next, look at the render method:

render() {
  return (
    <View>
      <Text>Hello from Home</Text>
    </View>)
}

copy

The code for the component is executed in the render method, and the content after the return statement returns what’s rendered on the screen. When the render method is called, it should return a single child element. Any variables or functions declared outside of the render function can be executed here. If you need to do any calculations, declare any variables using state or props, or run any functions that don’t manipulate the state of the component, you can do so between the render method and the return statement.

2.3.1 Using the render method to create a UI

The render method is the only method in the component specification that’s required when creating a component. It must return either a single child element, null, or false. This child element can be a component you declared (such as a View or Text component), or another component you defined (maybe a Button component you created and imported into the file):

render() {
  return (
    <View>
      <Text>Hello</Text>
    </View>
  )
}

copy

You can use the render method with or without parentheses. If you don’t use parentheses, then the returned element must of course be on the same line as the return statement:

render() {
  return <View><Text>Hello</Text></View> 
}

copy

The render method can also return another component that was defined elsewhere:

render() {
   return <SomeComponent />
}
#or
render() {
   return (
     <SomeComponent />
   )
}

copy

You can also check for conditionals in the render method, perform logic, and return components based on their value: