An overview of the

In the past year, React Native has gone through dozens of iterations from V0.40 to V0.52, and we’ve seen the library of React Native components continue to grow during these dozens of iterations. The newly introduced components include FlatList, SectionList and other list components with higher performance, as well as SafeAreaView components adapted to the full screen with The Times. Meanwhile, some old components with poor performance cannot adapt to the future development of React Native, such as: Components such as ListView and Navigator are also fading from the battlefield.

This article summarizes the major changes React Native has made over the past year, as well as recommendations for adapting new components and apis. This article is intended to help you quickly understand the important updates of React Native in the past year, how to make your APP use the new features of React Native faster, and use the new components and features of React Native to improve the performance and experience of your APP.

We’ve also prepared the React Native Course, which will continue to be updated.

Illustrated React Native Annual Report

  • New Components (8)

    • CheckBox
    • ImageBackground
    • VirtualizedList
    • FlatList
    • SwipeableFlatList
    • SectionList
    • MaskedViewIOS
    • SafeAreaView

  • New API(5)

    • AccessibilityInfo
    • DeviceInfo
    • BackHandler
    • findNodeHandle
    • TVEventHandler
    • [YellowBox](https://facebook.github.io/react-native/docs/debugging.html#in-app-errors-and-waReact Nativeings)

  • Other additions (2)

    • ViewPropTypes
    • takeSnapshot

  • Obsolete, removed (7)

    • BackAndroid
    • Navigator
    • ListView
    • MapView
    • RecyclerViewBackedScrollView
    • AdSupportIOS
    • NavigationExperimental

Change component and API description

New Components

component Minimum Supported Version instructions
CheckBox 0.49 A check box component for React Native (Android only, iOS will be supported in the future)
ImageBackground 0.46 New background image component, which is a container component that supports including other components
VirtualizedList 0.43 Underlying implementations of FlatList and SectionList.
FlatList 0.43 A high-performance simple list component based on VirtualizedList.
SwipeableFlatList 0.50 A FlatList component with a sliding display of more menus;
SectionList 0.43 A high-performance section list component based on VirtualizedList.
MaskedViewIOS 0.48 You can add a transparent mask to the component.
SafeAreaView 0.50 Used to wrap other views, it will automatically fill in the missing parts of the layout, but not navigation bars, TAB bars, Toolbars, etc.

New API description

component Minimum Supported Version instructions
AccessibilityInfo 0.47 An API for determining whether a screen reader is active.
DeviceInfo 0.44 A class that provides an API for screen size, font size, and so on.
BackHandler 0.44 Listen for back button events on devices (Android, Apple TV).
findNodeHandle 0.45 An API used to get a handle to a component’s local node.
TVEventHandler 0.43 An API for accepting remote events from Apple TV, such as remote controls.
[YellowBox](https://facebook.github.io/react-native/docs/debugging.html#in-app-errors-and-waReact Nativeings) 0.44 This API allows you to mask specific warnings.

Other Changes

component Minimum Supported Version instructions
ViewPropTypes 0.44 The propTypes in the View are moved to the ViewPropTypes.
takeSnapshot 0.44 Move the takeSnapshot method from UIManager to ReactNative.

Obsolete, remove instructions

component Minimum Supported Version instructions
BackAndroid 0.44 Use more feature-rich onesBackHandlerInstead of;
Navigator 0.43 usereact-navigationInstead of;
ListView 0.43 useFlatListInstead of;
MapView 0.43 usereact-native-mapsReplace this map component;
RecyclerViewBackedScrollView 0.42 This component was added a long time ago to solve the scrollback-when-data-is-added bug, but has now been solved directly by ScrollView internal code.
AdSupportIOS 0.48.4 usereact-native-deprecated-modulesorreact-native-idfaInstead of;
NavigationExperimental 0.44.3 usereact-navigationInstead of;

The above is the React Native Report for 2017 and 2018. You can also learn how to React Native by studying the React Native Combat Course.

  • React Native development video