Announced at last week’s React Conf at Facebook HQ in Menlo Park (California), React Native is a version of the popular React JavaScript library targeted solely at mobile developers. On the surface React Native looks very similar to React, with JavaScript declarations of reactive user interfaces, but behind the scenes React Native interfaces are backed by platform specific native controls rather than DOM elements.
Originally developed and subsequently open-sourced by Facebook, React is a client side JavaScript framework for building user interfaces. React uses a declarative syntax and JavaScript syntax extension called JSX to describe HTML layouts. Each React component is backed and configured by properties and state, changes to which trigger updates via a one-way data flow. These updates are optimised by a virtual DOM, which diffs components to ensure that only those altered by the state change are refreshed.
An example of a typical React component is shown below:
var HelloMessage = React.createClass({
render: function() {
return <div>Hello {this.props.name}</div>;
}
});
React.render(<HelloMessage name="John" />, mountNode);
In the above example a custom component named HelloMessage is defined. As is standard in React, the HelloMessage component declares a render function that returns a tree of HTML elements to render to the DOM. The use of HTML style element definitions is enabled by JSX, which is in turn pre-processed and translated into React function calls which produce the associated HTML elements.
Likewise React Native uses the same declarative approach to defining native UIs, but rather than binding to HTML elements, it exposes a number of custom classes that are bridged to the underlying native UI components. Take for example the following extract from the ChecklistApp sample which shows how React Native binds to native UI components such as views and editable text fields:
render() {
return (
<View style={{marginTop: 20}}>
<Text>Checklist</Text>
<TextInput
style={styles.input}
autoFocus={true}
onSubmitEditing={this.handleSubmit}
/>
<View style={styles.list}>
{this.renderItems()}
</View>
</View>
);
}
Following on from the announcement on Wednesday (28th January), Christopher Chedeau (Software Developer, Facebook) delivered a talk titled “A Deep Dive into React Native”. In his talk Christopher identified three areas where React Native can improve the app development experience versus using standard web or native approaches:
- Touch Handling - mobile apps built upon web technologies (HTML5/JavaScript) are often critiqued for feeling unresponsive - by avoiding these technologies in favour of native rendering React Native apps can appear more responsive.
- Native Components - often components written in HTML5/JavaScript fall short of their native counterparts and ’never feel as good as native', React Native avoids this by providing access to the native UI components.
- Style and Layout - iOS, Android and web based apps all have different mechanisms for laying out and styling applications. React Native provides a single consistent mechanism for styling and laying out apps on all mobile platforms (with a layout engine based on FlexBox).
Commenting in a discussion on the announcement on Hacker News, Peter Hunt (React contributor) provided an insight into the internal workings of React Native:
- JS engine on a background thread
- Communicates via batched, async messaging protocol to a native (objc or android) server running on the main thread (basically create_view(), update_view(), destroy_view(), on_event() etc)
- Plug-in for React that speaks that protocol
- Tools to make cross-platform dev a bit easier (standard text component, cross-platform flexbox layout system)
- Designed to take advantage of native platform views, NOT be the next Java Swing
Facebook have yet to announce when Reactive Native will be publicly available - and the library is still subject to ongoing development within the company. It is however at a functional stage of development and has been utilised in a number of publicly available applications, including the Facebook Groups iOS App.