9 Implementing cross-platform APIs

 

This chapter covers

  • Creating native application alert dialogs
  • Detecting whether the app is in the foreground, background, or inactive
  • Storing and updating text to the device clipboard
  • Using geolocation to retrieve and use latitude, longitude, speed, and altitude of the user’s device
  • Detecting device attributes such as the height and width of the screen and the connection type

One of the key benefits of using React Native is the ease with which native APIs can be accessed and used with JavaScript. In this chapter, we’ll cover most of the cross-platform APIs available in the framework. When accessing these APIs, you’ll be able to use a single codebase to implement platform-specific behavior on both iOS and Android.

The main difference between the native APIs discussed in this chapter and native components is that native components usually have something to do with the UI, such as showing a specific UI element. APIs, on the other hand, are more about accessing native features and hardware in the phone, such as interacting with or accessing data held in the device (geolocation, application state, and so on).

This chapter covers the following cross-platform APIs:

  • Alert
  • AppState
  • AsyncStorage
  • Clipboard
  • Dimensions
  • Geolocation
  • Keyboard
  • NetInfo
  • PanResponder

Although React Native offers other cross-platform APIs, you’ll find these to be the most useful.

9.1 Using the Alert API to create cross-platform notifications

9.1.1 Use cases for alerts

9.1.2 Example of using alerts

9.2 Using the AppState API to detect the current application state

9.2.1 Use cases for AppState

9.2.2 Example of using AppState

9.3 Using the AsyncStorage API to persist data

9.3.1 Use cases for AsyncStorage

9.3.2 Example of using AsyncStorage

9.4 Using the Clipboard API to copy text into the user’s clipboard

9.4.1 Use cases for Clipboard

9.4.2 Example of using Clipboard

9.5 Using the Dimensions API to get the user’s screen information