Developing cross-platform applications with React Native

Journal

Facebooks React Native provides JavaScript developers with a powerful tool to develop cross-platform applications for Android and iOS devices.

Facebook's React Native provides JavaScript developers with a powerful tool to develop cross-platform applications for Android and iOS devices.

One of the major advantages over other tools available such as Ionic or Sencha Touch is that the applications actually compile into native code, rather than a web-view wrapper displaying an optimised HTML5 application.

Because of the way React Native compiles into the native application, layout and animation are handled with the same performance as one written in Java, Objective-C or Swift.

I haven't tested the Android development workflow yet, but for iOS, once your application is running, hitting Cmd+R reloads the app whilst hitting Cmd+D brings the debug menu into view.

From here, you can enable live-reloading or browser-based debugging. These features really help for enabling rapid development.

Another great feature is the ability to style elements with a similar syntax to CSS, with React even supporting a flex-box style control of layout.

var styles = StyleSheet.create({
	container: {
		alignItems: 'center',
		backgroundColor: '#000',
		flex: 1,
		justifyContent: 'center',
	},
	description: {
		color: '#ffffff'
		fontSize: 20,
		textAlign: 'center',
	}
});

Some iOS developers will be familiar with CocoaPods, a dependancy manager for Swift and Objective-C Cocoa projects, providing a range of components and libraries to help development. react.parts provides this same support for React Native apps, and there are some really great components the community has already made for both Android and iOS platforms to help you create.

To get started or to learn more about React Native visit facebook.github.io/react-native.