12 Building a Star Wars app using cross-platform components

 

This chapter covers

  • The basics of fetching data using the Fetch API
  • Using a Modal component to show and hide views
  • Creating a list using the FlatList component
  • Using the ActivityIndicator to show loading state
  • Using React Navigation in a real-world project to handle navigation

React Native ships with many components that are ready to use in your apps. Some of these components work cross-platform: that is, they work regardless of whether you’re running an app on iOS or Android. Other components are platform-specific: for example, ActionSheetIOS only runs on iOS, and ToolbarAndroid only runs on the Android platform (cross-platform components were covered in Chapters 10 and 11).

This chapter covers some of the most-used cross-platform components and how to implement each one as you build a demo application. For this purpose, you’ll implement the following cross-platform components and APIs by building a cross-platform Star Wars information app:

  • Fetch API
  • Modal
  • ActivityIndicator
  • FlatList
  • Picker
  • React-Navigation

12.1 Creating the app and installing dependencies

12.1.1 Importing the People component and creating the Container component

12.1.2 Creating the navigation component and registering routes

12.1.3 Creating the main class for the initial view

12.2 Creating the People component using FlatList, Modal, and Picker

12.2.1 Creating the state and setting up a fetch call to retrieve data

12.2.2 Adding the remaining class methods

12.2.3 Implementing the render method

12.3 Creating the HomeWorld component

12.3.1 Creating the HomeWorld class and initializing state

12.3.2 Fetching data from the API using the url prop

12.3.3 Wrapping up the HomeWorld component

Summary