React Native 0.59

Why you need React Native 0.59

tldr

  • React Hooks in React Native
  • New JavaScriptCore
  • Support android 64-bit apk (Google Play Store Requirement)
  • Inline requires (Faster app launch)
  • And Breaking Changes !!! (Just Kidding  😂)

#1 React Hooks

React hooks make us having more code to be share among React Native app especially when involving state. From my experience, there are a lot of logic that involves state, we can share among the component instead of create a new one… (Flutter did this, due to their designation. Their widget allow them to share state that contain certain logic with others widget)


#2 New JavaScriptCore (Android)

Separate out the JavaScriptCore out of Android instead of binding together. This allow developer to upgrade the JavaScriptCore version for android or built their JavaScript VM. Performance improving and size is increasing too… 😂


#3 Support android 64-bit apk

According to this post, Android developers are require to submit 64-bit apk to Google Play starting 1st August 2019. So, this upgrade is important for most of the React Native app.


#4 Inline Require

Yet another helpful resource, for improving React Native’s performance. Inline require + RAM bundling greatly improving React Native performance.


#5 Breaking Changes

As usual, React Native 0.59 did some breaking changes to the core component as well. For more details information, may refer to their blog post. In RN 0.59, they separated some core component, such as React Natice CLI, NetInfo and AsyncStorage. They took it out and host under react-native-community

Upgrade React Native

Manually upgrade using rn-diff-purge. So far, this is the safer way to upgrade react-native. react-native-git-upgrade no longer maintained and I try it to upgrade React Native from 0.57 to 0.59.1 but it failed.

If you are using React Native version below 0.49. Then, it is possible to use react-native-git-upgrade. Upgrade React Native version to 0.57 and then manually upgrade to 0.59.

npm install -g react-native-git-upgrade

react-native-git-upgrade
// or
react-native-git-upgrade version

This method is not guarantee to work for all React Native upgrade.

SnapEffect

How to create snap effect on FlatList

Introduction

A simple demonstration for FlatList snap on scroll effect.

How ?

By adding 4 props. That you can create a snap effect on FlatList.

They are snapTiAlignment, snapToInterval, decelerationRate and pagingEnabled.

Follow the links for more documentation about the props from official react-native.

<FlatList
    data={this.VEGETABLES}
    renderItem={this._renderItem}
    keyExtractor={this._keyExtractor}
    horizontal={true}
    snapToAlignment={"start"}
    snapToInterval={this.IMAGE_WIDTH + 10}
    decelerationRate={"fast"}
    pagingEnabled
/>

Example

https://youtu.be/EHfwHxWJB7U

Thanks for reading. 😀

Source

For those interesting for the complete source is available on my github repo.

Feel free clone it and checkout the specific branch to try it out. 😀

git clone https://github.com/yikkok-yong/sample.git
git checkout sidestory/flatlist-snap-effect