Upgrading to React Native 0.59+ & Handling Deprecation Warnings

v0.59 of React Native is a big deal. It...

1. Adds support of hooks
2. Is a big push towards the "Lean Core" initiative
3. Improves developer tooling

With that, I wanted to spend some time walking through how to upgrade (it's easy!), how to upgrade in the future, and handling changes.

This post was originally published at React Native School. If you’re interested in learning more about React Native be sure to visit! New articles weekly!

How to Upgrade

React Native is putting it's foot down on what the proper way to upgrade React Native is and I'm happy to see the community unifying around one solution.

To upgrade you'll want to use rn-diff-purge. This tool will allow you to view the differences between your current version of React Native and your target version. For example, here are all the changes necessary to upgrade from 0.58.3 to 0.59.2.

Once you've done that and you're running v0.59+ you can then use the react-native upgrade tool.

Speaking of the react-native CLI tool...

CLI Has Been Moved Out of React Native Core

This is a great thing to happen. Why? Because Facebook (who has the final say in what is merged into React Native) wasn't using the React Native CLI internally. That made it a lower priority and thus the CLI was a bit stagnant. With this moving to the community it means it can improve independently of core React Native. We're already benefiting from this one!

Learn more about the CLI improvements.

Moving Core Packages to the Community

If you upgrade to React Native v0.59+ you may start getting some Yellowbox warnings saying that certain APIs are being deprecated.

Don't be alarmed!

Just like the CLI, this is going to be a great thing for the React Native community as a whole because these package can now be updated and managed independently of a React Native release.

Learn which APIs and why they're being moved to the community.

Handling Deprecation Warnings in v0.59+

Okay, you've upgraded to React Native v0.59+ (or you're considering it and want to know what it's like to handle those deprecation warnings). How do I take care of the warnings? Let's say we're seeing this warning:

The code that causes this warning:

import React, { Component } from 'react';
import { StyleSheet, Text, View, Button, AsyncStorage } from 'react-native';

export default class App extends Component {
  get = () => {
    AsyncStorage.getItem('item').then(result => alert(result));
  };

  write = () => {
    AsyncStorage.setItem('item', Math.random().toString()).then(() =>
      alert('set!')
    );
  };

  render() {
    return (
      <View style={styles.container}>
        <Button title="Get" onPress={this.get} />
        <Button title="Set" onPress={this.write} />
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
});

The Wrong Way

The easiest way is to use Yellowbox.ignoreWarnings, like this:

import React, { Component } from 'react';
import {
  StyleSheet,
  Text,
  View,
  Button,
  AsyncStorage,
  Yellowbox,
} from 'react-native';

Yellowbox.ignoreWarnings(['Warning: Async Storage has been extracted...']);

// ...

Why is this wrong? Because when you upgrade React Native in the future and the API is actually removed you're going to be confused why things don't work. No bueno - let's fix it now.

The Right Way

After upgrading React Native (via rn-diff-purge) you can quickly handle each deprecation error. Find the effected APIs and their new home.

Terminal

yarn add @react-native-community/async-storage
react-native link @react-native-community/async-storage

Then update your code:

import React, { Component } from 'react';
import { StyleSheet, Text, View, Button } from 'react-native';
import AsyncStorage from '@react-native-community/async-storage';

// ...

Sure you may have to do it in a handful of places but it's for the best!

Conclusion

If I've learned anything working with React Native it's to update often. I know it can be tiring but it'll pay dividends. Spending an hour or two each month upgrading to the next version (even if it's a version behind the latest!) wins over having to go from v0.48 -> v0.59. That's going to hurt, take a ton of time, and likely break things.

Don't be afraid to upgrade to v0.59! Gotta get them hooks 🎣 (and all the other fantastic updates included).

If you want to learn more about React Native be sure to visit reactnativeschool.com!