Hero Image

React native features

Table of Contents

Videos

AsyncStorage

One of the simplest, but also useful native APIs we can access through React Native is AsyncStorage. Async storage is a simple key: value-based storage that allows us to store information on the device so it is persistent. In the following video, I'll introduce more about AsyncStorage, its uses, and how to set it up in our app.

Video Summary

  • AsyncStorage definition
  • AsyncStorage implementation
  • AsyncStorage uses
  • Documentation: (opens in a new tab)https://react-native-async-storage.github.io/async-storage/docs/install/(opens in a new tab)

Where does the data go?

We talked about how the data given to AsyncStorage is saved to the device, but what does that mean? This is a quote from the documentation:

"On iOS, AsyncStorage is backed by native code that stores small values in a serialized dictionary and larger values in separate files. On Android, AsyncStorage will use either RocksDB or SQLite based on what is available. The AsyncStorage JavaScript code is a facade that provides a clear JavaScript API..."

Where the data is stored is different for Android and iOS, this goes back to what we learned about at the beginning of the course about how React Native has native implementations of each component, same goes for the implementations of the various APIs.

Push Notifications

Push notifications are one of the most obvious things people want mobile apps to do. But there are some important things to understand about Push Notifications before you'll be able to send any. The video below will explain some of these factors and go over one way we can implement simple push notifications in our app.

Video Summary

In this video we covered:

  • The different types of push notifications, local and remote
  • How to implement local push notifications
  • Documentation: (opens in a new tab)https://docs.expo.dev/versions/latest/sdk/notifications/(opens in a new tab)

    Video Code

    Here is the code from the video:

// src/components/features/animal/AnimalOfTheDay.js

import React, { useEffect, useState } from 'react'
import { Keyboard, TextInput, View, Button, Text } from 'react-native'
// Expo Constants provides system information https://docs.expo.dev/versions/latest/sdk/constants/
import Constants from 'expo-constants'
import * as Notifications from 'expo-notifications'

const animalsOfTheWeek = [
  'Wallaby',
  'Peregrine Falcon',
  'Dolphin',
  'Elephant',
  'Okapi',
  'Poison Arrow Frog',
  'Dingo'
]

const onSubmit = (seconds) => {
  Keyboard.dismiss()
  const schedulingOptions = {
    content: {
      title: `Your animal of the day is ${animalsOfTheWeek[Math.floor(Math.random()*animalsOfTheWeek.length)]}`,
      body: 'Open the app to read more about your animal of the day!',
      sound: true,
      priority: Notifications.AndroidNotificationPriority.HIGH,
      color: 'blue'
    },
    trigger: {
      seconds: seconds,
    },
  }
  // Notifications show only when app is not active.
  // (ie. another app being used or device's screen is locked)
  Notifications.scheduleNotificationAsync(
    schedulingOptions,
  )
}

const handleNotification = () => {
  console.warn('Your notification ran, but won`t show up in the app!')
}

const askNotification = async () => {
  // We need to ask for Notification permissions for ios devices
  const { status } = await Notifications.requestPermissionsAsync()
  if (Constants.isDevice && status === 'granted') {
    console.log('Notification permissions granted.')
  }
}

const AnimalOfTheDay = () => {
  useEffect(() => {
    askNotification()

    const listener = Notifications.addNotificationReceivedListener(handleNotification)
    return () => listener.remove()
  }, [])

  return (
    <View>
      <Text>Press the button to get your very own animal of the day!</Text>

      <Button onPress={() => onSubmit(5)} title='Schedule'/>
    </View>)
}

export default AnimalOfTheDay

Mobile Application Permissions Best Practices

Let's take a moment to discuss the bit of code I went over really quickly in the last video:

const askNotification = async () => {
  // We need to ask for Notification permissions for ios devices
  const { status } = await Notifications.requestPermissionsAsync()

  if (Constants.isDevice && status === 'granted') {
    console.log('Notification permissions granted.')
  }
}

This was the code I used in the example app to set permissions for this notification. But permissions and how we ask for user information is a really important topic.

Basic Guidelines

Phones store a lot of user data, and we are only increasing the amount and importance of information stored on our phones. Health and fitness trackers, location, connection, and network information, history of various types. It's all there and potentially exposed to the applications installed on the device. As app creators, we have some responsibilities to our users:

To request access to information in a transparent and clear manner, explaining how the data will be used to better their experience of our application. To only request the data required to do a specific action within our application currently. To notify users when the data we require has changed, or when our usage of that data has changed significantly Making sure our code lives up to the responsibilities above is not an easy task. It requires the intentional handling of every piece of data requested. And every time permissions are requested, the possibility that a user will deny that request might create a whole new branch of functionality that has to be accounted for. If your app uses location data to provide a service, what do you display to the user if they deny the ability to use location data?

Resources

This topic quickly goes beyond the scope of this course, but I would be remiss not to at least mention this very important topic. For more reading on permissions, how they work, and some best practices laid out by Android and Apple -- here are some resources:

https://blog.prototypr.io/3-best-practices-for-in-app-permissions-dce7d36544a4(opens in a new tab) https://mentormate.com/blog/whats-new-in-the-world-of-mobile-app-permissions/(opens in a new tab) https://developer.android.com/training/permissions/usage-notes(opens in a new tab) https://developer.apple.com/design/human-interface-guidelines/ios/app-architecture/accessing-user-data/(opens in a new tab)

Preparing for Publication

Unfortunately, we aren't going to be able to publish an app as part of this introductory course, but we are going to cover the general steps and what is involved in publication.

Video Summary

  • What does publishing to the App or Play stores entail?
  • Best things to do to prepare
  • Using Expo to build a native binary

Additional Resources

  • Here is a helpful guide for getting your app ready for publication: (opens in a new tab)https://docs.expo.dev/distribution/app-stores/(opens in a new tab) How to create your first build: (opens in a new tab)https://docs.expo.dev/build/setup/(opens in a new tab)
  • Here are the React Native docs for publishing to the App Store: (opens in a new tab)https://reactnative.dev/docs/publishing-to-app-store(opens in a new tab)
  • Here are the React Native docs for publishing to the Play Store: (opens in a new tab)https://reactnative.dev/docs/signed-apk-android(opens in a new tab)
  • And here are the expo docs for how to build a standalone app for submission: (opens in a new tab)https://docs.expo.dev/classic/building-standalone-apps/?redirected

Closing Thoughts

There are a few topics surrounding React Native that I wasn't able to cover in this short time, but that I would at least like to offer as food for thought and further research before we end the course.

Mobile App or Responsive Website

How do you know when to create a mobile application versus just making your website responsive? Here is an article that explores some of the pros and cons of each: (opens in a new tab)https://www.smashstack.com/articles/the-pros-and-cons-of-mobile-apps-vs-responsive-web-design/(opens in a new tab)

How Stable is React Native

You might have heard that React Native is still in 'beta,' meaning it hasn't reached version 1.0 yet. People sometimes reference this fact to say that React Native might not be stable or worth investing in. The most recent React Native version at the making of this course is React Native .67. So what does that mean for the library?

There are lots of opinions about this, but there are a few things it's good to keep in mind.

  • React also isn't at version 1.0 yet, and it is used across all Facebook and has become an industry-standard in JavaScript, so React Native's version is mostly due to how Facebook does its versioning and is less meaningful as to stability.
  • React Native is used in many professional and large-scale applications and has been for quite a while now, meaning that those companies believed it to be and have continued to experience it to be stable.
  • Because the release version is still not 1.0 it can mean more breaking changes between versions, and upgrading React Native from one version to another has sometimes been more painful than upgrading other libraries

    React Native Competitors

    React Native has some competitors we didn't cover much in this course. The main competitors are Ionic, Cordova, and Flutter.

Here is an article talking about Flutter and React Native:

(opens in a new tab)https://betterprogramming.pub/you-dont-have-to-compare-flutter-and-react-native-anymore-15ddc4c1342a(opens in a new tab)

And a link to the Flutter documentation in case you're curious: (opens in a new tab)https://docs.flutter.dev/(opens in a new tab)

React Native is currently leading the modern hybrid application market. Among the top 500 apps in the US, 14.85% of installed apps are built with React Native. In the category of top US apps, React Native is the third most popular framework, right after Kotlin and Android Architecture Components.

Here's an article with the above stats and more: (opens in a new tab)https://www.stxnext.com/blog/why-use-react-native-your-mobile-app/(opens in a new tab)

And who is using React Native? Here's their list: (opens in a new tab)https://reactnative.dev/showcase