Upgrading to React Native 0.59+ & Handling Deprecation Warnings
Tags: reactnative, mobiledevelopment, javascript, react
Published: 2019-04-03 14:47:32

---
title: "Upgrading to React Native 0.59+ & Handling Deprecation Warnings"
published: true
description: "v0.59 of React Native is a big deal. It brings new features and is a major stepping stone for the future development with React Native. Here's what you need to know."
tags: React Native, Mobile Development, JavaScript, React
canonical_url: "https://www.reactnativeschool.com/upgrading-to-react-native-0.59+-and-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](https://www.reactnativeschool.com/upgrading-to-react-native-0.59+-and-handling-deprecation-warnings). If you’re interested in learning more about React Native be sure to visit! New articles weekly!

{% youtube 3qq2uziLdg8 %}

## 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`](https://github.com/react-native-community/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](https://github.com/react-native-community/rn-diff-purge/compare/version/0.58.3...version/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](http://facebook.github.io/react-native/blog/#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](http://facebook.github.io/react-native/blog/#lean-core-is-underway).

## 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:

![Deprecation Warning](https://www.reactnativeschool.com/static/f8dfbf477b2d90f56a0afc5f94f36138/c8590/01.png)

The code that causes this warning:


```jsx
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:


```jsx
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](http://facebook.github.io/react-native/blog/#lean-core-is-underway).

<p class="code-header">Terminal</p>

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

Then update your code:

```jsx
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](https://www.reactnativeschool.com/)!