This video is available to students only

Screens

Learn about the screen lifecycle, and customize the app bar and the back button. We will also look at perceived load time and how to manage it.

Screens are to apps what pages are to a website, but with one major difference - the screens of an app that are on a stack are all kept in memory, and pressing the Back button will take us to the previous state the screen was in, rather than the view being re-rendered (unless forced), unlike web, where every visit is a re-render.

Lifecycle#

Every screen in React Native gets all the lifecycle events that are default to React class components. If you have worked with React, these are pretty much the same, apart from two methods that are added by React Native Navigation.

The methods are called in the following order when a component is created:

  • constructor() Initializes the component's default state.

  • render() All rendering-related logic is here. No API calls or data fetching.

  • componentDidMount() The best place for API calls, getting data from AsyncStorage and any other data fetching needed to render the view.

  • componentDidAppear() Additional method added by React Native Navigation; called each time a component is revealed to the user. This will be called whenever:

    • the screen appears - the first time, and also as many times as the user comes back from a screen pushed over it

    • the user has moved to another tab and switches back to the tab displaying this screen

    • a modal is closed which was on top of this screen

and while unmounting the screen:

  • componentDidDisappear() Additional method added by React Native Navigation, called each time a component is hidden from the user's view as a result of being detached from hierarchy.

  • componentWillUnmount() Clear up references and event listeners here.

Lifecycle in functional components#

Functional components do not have these lifecycle methods, as the whole function is like one big render function and is executed in one go. However, hooks do provide a way to achieve similar capability. useEffect is one such hook, which helps perform side-effects in function components.

You will notice that we are passing an [] as the second argument to useEffect here. This makes the effect behave similarly to how a componentDidMount does in a class. The array accepts a list of variables to watch for changes, so an empty array means it is not watching anything, thus no re-renders. If we return a function from this, it will be called when the component is unmounted, working like a componentWillUnmount.

We will talk about state management in functional components in detail in upcoming lessons.

Accessing data#

While calling any screen, there are three main ways of passing or accessing data.

  • Application State store If we have some kind of state management integrated, redux or mobx, etc., we can set the data to the application store (or state). However, a lot of the time, the data that needs to be passed is for once-only use, so this tends to not be the optimum choice.

  • React Context API

Context provides a way to pass data through the component tree without having to pass props down manually at every level.

We will look in detail at these first two ways of handling and passing data in the state management module, but for now let's focus the third method, which is more specific to setting up screens:

  • passProps

While calling any screen, the Navigation object has a passProps attribute that allows us to pass data to the screen being opened.

Start a new discussion. All notification go to the author.