React Native Tutotial - Using JSX

React Native Tutotial - Your current application uses React.createElement to construct the simple UI for your application, which React turns into the native equivalent. While your JavaScript code is perfectly readable in its present form, a more complex UI with nested elements would rapidly become quite a mess.

Make sure the app is still running, then return to your text editor to edit App.js. Modify the body of render to be the following:

return <Text style={styles.description}>Search for houses to buy! (Again)</Text>;

This is JSX, or JavaScript syntax extension, which mixes HTML-like syntax directly in your JavaScript code; if you’re already a web developer, this should feel rather familiar. You’ll use JSX throughout this article.

Save your changes to App.js and return to the emulator. Tap R twice, and you’ll see your application refresh to display the updated message:

Re-running a React Native application is really as simple as refreshing a web browser! :] Note that this will only reflect changes made to your JavaScript files – native code or resource changes will require you to restart the packager.

You can even skip having to refresh the app by enabling live reload. Press Cmd+m for Mac or Ctrl+m for Windows/Linux in the emulator then select Enable Live Reload:

In App.js, modify the render method’s body to the following:

return <Text style={styles.description}>Search for houses to buy!</Text>;

Save your changes. Note that the emulator automatically refreshes to reflect your changes:

Adding Navigation
React Navigation is a community effort led by Facebook and Expo to provide an easy-to-use navigation solution for React Native apps. It’s a JavaScript implementation which means that it works across iOS and Android. You’ll be working with this library in this tutorial.

There are other native navigation solutions out there including AirBnB’s Native Navigation and React Native Navigation from Wix. Be sure to check out the alternatives if you’re looking for a more native look and feel for your future app.

Install React Navigation by running the following in terminal:

yarn add react-navigation

You’re now ready to use its navigation components.

In App.js, add the following after the import statements near the top:

import {
  createStackNavigator,
} from 'react-navigation';

createStackNavigator enables your app to transition from one screen to another with the new screen being placed on top of a stack.

Next, replace the App class definition with the following:

class SearchPage extends Component<Props> {

Next, add the following to SearchPage just before render():

static navigationOptions = {
  title: 'Property Finder',
};

This sets the title in the navigation bar for this screen.

Add the following below the SearchPage component:

const App = createStackNavigator({
  Home: { screen: SearchPage },
});
export default App;

This configures the SearchPage component as the initial component in the navigation stack.

Save your changes and check the emulator to see the updated UI:

Excellent — you now have the basic navigation structure in place.