v0.5.0-rc

45 commits and 21 contributors.

New Features

FPS Monitor

One of the reason you may want to use React Native is because you can build applications that perform well with it. As React Native matures in term of features, we are starting to invest a lot more into performance. If you open the developer panel via Cmd+Ctrl+Z, you will see a new option called "Show FPS Monitor".

When activated, you will see two FPS counters, one for the UI thread and one for the JS thread. The best way to make an application fast is to fix the slow parts. This is where performance investigation tooling is required. This one lets you do a first triage between issues from the UI thread and the JS thread. This is the first of a series of performance tooling we're working on.

Please, do not ever profile on simulator as it doesn't reflect at all what on device performance is going to be. Also, make sure that you dev mode is turned off as it introduces non trivial overhead to provide great developer warnings.

Accessibility

Facebook is being used by 1.4 billion people around the world and we want every single one of them to have the best experience possible. Accessibility features are an important tool and one that has traditionally been very developer unfriendly.

Our goal with React Native is that if you write your app without thinking about accessibility: it will be 80% there. We want you to fall into the pit of success.

In order to make an app accessible via Voice Over, you need to identify all the interactive elements and mark them as accessible with a label. It turns out that if you follow React Native best practices, most of your interactive elements are going to be implemented via <TouchableHighlight>, <TouchableOpacity> or <TouchableWithoutFeedback>. We made sure to mark those as accessible. In order to compute the label, we traverse the hierarchy and concatenate all the text nodes. Most of the time it gives a good result. The place where it breaks down most often is when the button is an icon. In those cases, you need to specify the label yourself via the accessibilityLabel prop.

To check if your app is accessible, you can enable the Accessibility Inspector by doing: Hardware > Home > Settings > General > Accessibility > Accessibility Inspector. And go back to your app via Hardware > Home > Your app.

All the text outside of touchable elements is also marked as accessible by default as the user is likely going to want to know about it. Since React Native uses native components such as UIScrollView and UIButton, you also get their great accessibility features.

As you can imagine, those heuristics do not work all the time. You can polish the accessibility via the following props: accessible, accessibilityLabel, onAcccessibilityTap, onMagicTap, accessibilityTraits.

This is an area that's often overlooked and where we hope React Native can shine. If you are interested in helping out with this effort, please let us know.

Breaking Changes

• AdSupport is no longer linked by default. The mere existence of code that uses the advertising id in your app triggers an additional verification step during the App Store review process :( If you are using it, you'll need to manually link it to continue using it.

Bug Fixes

• Add RCTNativeAppEventEmitter as mentioned in the documentation
• Add a warning when trying to react-native init in an already initialized folder
• onLayout is now available on <ActivityIndicatorIOS> and <TextInput>
• Update Jest to 0.4.5
• Fix RCTBatchedBridge main thread invalidation
• Fix exception when creating a native component with no propTypes
• Fix edge cases in <Navigator>
• Red box if JSC throws a syntax error not previously caught by the packager