Interested in learning React Native? Let’s build your first React Native, a simple app displaying a list of countries, fetched from a REST API with a network request. This React Native tutorial is aimed at introducing React Native, giving you the basis of what you need to know before building a real React Native application. After that, we proceed to helping you build your first real React Native app. By the end of this article you will build a React Native app that can run on both iOS and Android devices. React Native is a cross platform development library built on top of React by Facebook, for mobile development platforms. React Native was developed in 2013 as a hackthon project inside Facebook and was later released for public use in 2015. It gained huge popularity in the developer community and multiple tech companies adopted it as a mobile development solution because React Native apps share a single codebase for both iOS and Android and could hardly be distinguished from truly native apps. According to the React Native website: In 2018, React Native had the 2nd highest number of contributors for any repository in GitHub. Today, React Native is supported by contributions from individuals and companies around the world including Expo , and Microsoft . Before we go ahead and build our first React Native app, I’m going to show you the pros and cons of React Native and more details on what it actually is. What is React Native? React Native is a hybrid mobile development library. React Native apps are written in JSX and Javascript and compiled into native code. React Native apps contain 85-90% shared Javascript and JSX code What is React Native not? React Native is not a webview React Native is not React React Native is not PWA React Native as of this writing supports web development using React Native for Web Why should you adopt/learn React Native? Targets multiple platforms (iOS, Android, Web, TVOS) with the same codebase and effort Has a large and growing community that is there to provide adequate support Has native support meaning that you can customize the native code to suit your use-case/business logic Requires knowledge of Javascript. Javascript is a language in high popular demand and learning it will pay off immensely Has a feature which I personally refer to as the sweet spot: Fast Refresh (Hot Reloading) React Native Drawbacks? React Native has some drawbacks too, but the developers of the library are consistently trying to improve them as the community grows: While the codebase is mostly shared among various platform, knowledge of native development is sometimes required in developing more advanced React Native projects Despite the fact that most React Native apps look the same in appearance to native apps React Native seems to lack the smooth navigation achieved by native apps. React Native developers agree that React Native style of error reporting is not the best out there but they cope with it over time. Build Your First React Native App Let’s build a React Native app to display a simple list of countries. The app will contain only one screen, and we are going to keep its functionality and styling to a minimum, since the purpose of this tutorial is to help you set up your React Native developer environment and dip your toes into the React Native programming language. In this React Native tutorial we are going to use Expo in order to build your first React Native application. Expo is a powerful tool for those how are beginners in the React Native world, since it lets you run and preview React Native apps on your devices easily. 1. Install Expo Follow the official documentation on . Once you’ve installed it, come back to this tutorial and follow the next steps in order to build your first React Native app. how to install Expo 2. Create a New React Native App expo init firstapp Select the ‘ ‘ project blank Select ‘ ‘ to work with yarn. Y Yarn v1.19.2 found. Use Yarn to install dependencies? (Y/n) Once you click Yes, Expo will work its magic and create all the necessary files for you. You can take a look at the directory structure to get an idea of what is going on in the project. 3. Run Your First React Native App Run the following commands to start your newly created React Native app: firstappyarn cd start At this point, if you set up Expo properly at the previous steps, the new React Native project should have loaded successfully and you should be able to see the app as in the following screenshot: There you have it, the very first React Native application that you’ve build. By default it says ‘ ‘ and I agree that it’s not the best welcome message Expo could offer but we’re going to go ahead and do as they say. Let’s open file, which looks like this: Open up App.js to start working on your app App.js { StatusBar } ; React ; { StyleSheet, Text, View } ; { ( <Text>Open up App.js to start working on your app!</Text> <StatusBar style="auto" />
    </View> import from 'expo-status-bar' import from 'react' import from 'react-native' export default ( ) function App return < = > View style {styles.container} );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
}); Now let me give a concise summary of what’s going on before we move on. The styles variable contains various style dicts of the components The function App is a React Native Functional Component, the default one that renders what we currently see on our screen and above are import statements that import components to be used and composed to create our parent component App. 4. Add List of Countries Let’s move on and rewrite this dummy screen with our own UI. As we mentioned before, we are going to display a list of countries. For this, we need to implement the following: React ; { StyleSheet, Text, FlatList } ; { countriesData = [{ : },{ : },{ : },{ : }] ( <Text style={styles.text}>{item.name}</Text> import from 'react' import from 'react-native' export default ( ) function App const "name" "Afghanistan" "name" "Åland Islands" "name" "Albania" "name" "Algeria" return item.name}
      renderItem={({item})=> < = = = => FlatList data {countriesData} contentContainerStyle {styles.container} keyExtractor {item }
    />
  );
}

const styles = StyleSheet.create({
  container: {
    paddingTop: 30,
  },
  text: {
    fontSize: 20,
    margin: 10
  },
}); As you can see, we have updated our and added a few things: App.js A to display the list of countries Flatlist A dummy dataset to display to be displayed on the list We updated the style object to contain the style for our text Run your app if you haven’t started it already, and you should be seeing this: We now have something to work with. But the data is static and we would like a longer dynamic list, that can change and we need those changes to be reflected in the UI. So we need the UI to be “ ” to the changes in the data model. This is the core concept of React, and therefore React Native. So we need to introduce the State concept. reactive A React Native component holds data in its state, and whenever the state changes, the UI is re-rendered to reflect those changes. Let’s add a state variable, named countriesData which will store the dynamic list of countries displayed on the screen. [countriesData, setCountriesData] = useState([]) const The is called a “hook” in React Native. According to official React useState documentation on hooks A Hook is a special function that lets you “hook into” React features We just declared a state for our app with default value as an empty array [] and a function to update the value of . For example, calling will update the value of to [1,2,3,]. countriesData setCountriesData countriesData setCountriesData([1,2,3,]) countriesData Another important hook is going to be applied in the following code snippet. Simply put, any code written inside the useEffect runs when the component is mounted. useEffect React, {useState, useEffect} ; { StyleSheet, Text, FlatList } ; { [countriesData, setCountriesData] = useState([]) {
    fetch( )
      .then( response.json())
      .then( setCountriesData(json))
      .catch( .error(error))
  }

  useEffect( {
    fetchCountriesData();
  }) ( <Text style={styles.text}>{item.name}</Text> import from 'react' import from 'react-native' export default ( ) function App const ( ) function fetchCountriesData 'https://restcountries.eu/rest/v2/region/africa?fields=name' ( ) => response ( ) => json ( ) => error console => () return item.name}
      renderItem={({item})=> < = = = => FlatList data {countriesData} contentContainerStyle {styles.container} keyExtractor {item }
    />
  );
}

const styles = StyleSheet.create({
  container: {
    paddingTop: 30,
  },
  text: {
    fontSize: 20,
    margin: 10
  },
}); Please don’t be scared of what’s going on. We are using the to retrieve countries data from an API endpoint and display a list of African countries. The fetch API is how you make network requests in React Native. As you can notice, we’ve used a free API endpoint, exposed on the website. fetch API restcountries.eu This returns a JSON object, parsed in the clause of the method. Once parsed successfully, we update the countriesData state variable with the new list of country, newly retrieved. As a result of updating the state object, the UI also gets re-rendered and we can see the countries on the screen: then() fetch 5. Styling Your First React Native App Let’s now focus on making the design of the app slightly better, since we already have the core functionality in place. We are going to focus on styling the app and our focus is on the dictionary. styles React, {useState, useEffect} ; { StyleSheet, Text, FlatList, Pressable, Alert } ; { StatusBar } ; { [countriesData, setCountriesData] = useState([]) {
    fetch( )
      .then( response.json())
      .then( setCountriesData(json))
      .catch( .error(error))
  }

  useEffect( {
    fetchCountriesData();
  }) ( <StatusBar style='light'/>
      <FlatList
        data={countriesData}
        contentContainerStyle={styles.container}
        keyExtractor={item => item.name}
        renderItem={({item})=> <Text onPress={() => {Alert.alert(`The Capital of ${item.name} is ${item.capital}`)}} style={styles.text}>{item.name}</Text>}
      />
    </>
  );
}

const styles = StyleSheet.create({
  container: {
    paddingTop: 30,
    backgroundColor: '#483D8B'
  },
  text: {
    fontSize: 18,
    margin: 5,
    color: '#fff'
  },
}); import from 'react' import from 'react-native' import from 'expo-status-bar' export default ( ) function App const ( ) function fetchCountriesData 'https://restcountries.eu/rest/v2/region/africa?fields=name;capital' ( ) => response ( ) => json ( ) => error console => () return <> As you can see, we’ve changed the color of the background to purple, by providing the backgroundColor attribute with ‘#483D8B’ hex code. While the syntax is very similar to CSS, it is slightly different. But the core concepts are the same, so if you already know CSS, learning how to style React Native apps will be extremely easy. Especially if you are already familiar with . flexbox layout Conclusion We saw what are the biggest sell points for using React Native in your mobile development process, and how easy it is to create apps for both iOS and Android. We’ve set up Expo, which is an amazing tool for beginners who are new to the React Native world. We then leveraged Expo to create our first React Native project. After that, we learned about functional components, hooks and state. We’ve used the fetch API to retrieve data via a network request, and we styled the visual components by modifying the stylesheet. Congratulations! You were able to build a React Native app. Now it’s time to learn more advanced concepts, in order to add more complex functionalities and develop fully functional mobile apps, that you can publish to the App Store and Google Play Store. Check out this list of the to learn more about React Native and dive into the next level. best React Native resources Next Steps Now that you have learned about best React Native development tools, here are some other topics you can look into Firebase Push notifications Firebase storage How To in React Native WebView Gradient Camera Adding GIF Google Maps Redux Debugging Hooks Dark mode Deep-link GraphQL AsyncStorage Offline Chart Walkthrough Geolocation Tinder swipe App icon REST API Payments Apple Pay Stripe Authentication Google Login Facebook login Phone Auth App idea Podcasts Newsletters App templates If you need a base to start your next React Native app, you can save months of development by leveraging one of our React Native templates . Previously published at https://www.instamobile.io/react-native-tutorials/build-react-native-app

Apple

Facebook

Fetch

Google

Microsoft

Stripe

React Native Templates

Flutter Templates

Read My Stories

Too Long; Didn't Read

In your car, at home, or at work — Bosch technology shapes many areas of life.

How to Get Started on React Native in 2020 

How to Get Started on React Native in 2020

Too Long; Didn't Read

Companies Mentioned

Coin Mentioned

Instamobile

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

How to Get Started on React Native in 2020

Too Long; Didn't Read

Companies Mentioned

Coin Mentioned

Instamobile

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

RELATED STORIES