How to show multiple components in reactjs

Question

I have written a simple application using react native for android. i want to know how do i use more than one component adjacent to each other in the return function. If I put a toolbar tag, it gives an error.

return (
<MovieScreen
      style={{flex: 1}}
      navigator={navigationOperations}
      movie={route.movie}
/>
);

Above works. Below one gives error

return (
<Toolbar/>
<MovieScreen
      style={{flex: 1}}
      navigator={navigationOperations}
      movie={route.movie}
/>
);

Please help.

Answer 1

Enclose it in a View tag if you think that's how you want to showcase it.

return (
  <View style={{flex: 1}}>
    <Toolbar />
    <MovieScreen
      style={{flex: 1}}
      navigator={navigationOperations}
      movie={route.movie}
    />
  </View>
);

This should work.

Answer 2

You cannot return 2 values remember? You can only return one encapsulated tag. So, wrap a view. It will work :)

return (
  <View style={{flex: 1}}>
    <Toolbar />
    <MovieScreen
      style={{flex: 1}}
      navigator={navigationOperations}
      movie={route.movie}
    />
  </View>
);