workshop 24: react native introduction

Front End Workshops

React Native Part I

Jordi Serrajserra@naradarobotics.com

React NativeA FRAMEWORK FOR BUILDING NATIVE APPS USING REACT

React Native enables you to build world-class application experiences on native platforms using a consistent developer experience based on JavaScript and React.

Focuses on developer efficiency across all platforms.

Learn once, write everywhere.

What is React Native?

React Native uses the actual native components of each platform (currently iOS and Android).

Native Components

Androidrender() { return ( <DrawerLayoutAndroid renderNavigationView={ () => <Text> React Native </Text> }> <ProgressBarAndroid /> </DrawerLayoutAndroid> );}

iOSrender() { return ( <TabBarIOS> <TabBarIOS.Item title="React Native" selected={true}> <NavigatorIOS initialRoute={{ title: 'React Native' }} /> </TabBarIOS.Item> </TabBarIOS> );}

All operations between the javascript code and the native code are performed asynchronously

- Decode images- Save to disk- Measure and compute Layouts- …

All this results in naturally fluid and responsive apps.

Asynchronous execution

Communication with native app is fully serializable, so we can leverage the usual debugging tools

Debugging

The debug version of the code launches a node server responsible to serve the code changes to the app.When code changes, app can reload automatically.

Live Reload/Hot reload

React Native implements a subset of flexbox components and syntax -Not .css!

var styles = StyleSheet.create({ row: { flexDirection: 'row', margin: 40 }, image: { width: 40, height: 40, marginRight: 10 }, text: { flex: 1, justifyContent: 'center'}, title: { fontSize: 11, fontWeight: 'bold' }, subtitle: { fontSize: 10 },});

Flexbox and styling

React Native only focuses on how the view code is writtenYou can leverage all the JS world for any -not visual- library.React Native leverages from the open source community.

When in trouble, just remember: $> npm install --save

It’s just a JS framework!

Useful Native Components:

Native Components

CommonView, Text, TextInput, Image,TouchableHighlight,ScrollView,MapView

iOSTabBarIOSDatePickerIOSProgressViewIOS

AndroidDrawerLayoutAndroidViewPagerAndroidToolbarAndroid

Two worldsSlider-SliderIOS,Picker-PickerIOS,Navigator-NavigatorIOS

Useful Native APIs:

Alert-AlertIOSAppRegistry,StyleSheet,CameraRoll,ToastAndroid,…Para todo lo demás… GitHub + ReactParts

Native APIs

Not included? Make your own!There is a lot already -use with caution!

Native modules

- Set up your environment development carefully- Develop iOS & Android concurrently ASAP- Android first: less components over there- Use linter. It’ll avoid many problems- Use Redux. No hace falta decir nada más

Some Thoughts on Poduction Development

Thanks for your time!

Give your questions on the comments section