An open source, cross-platform framework for building native mobile apps with JavaScript and React using declarative components.

We all love Javascript

React Native

• Built by Facebook
• Applications run at near full speed*
• 80% code sharing between iOS and Android
• Architeture is scalable
• Extensible libraries
• BSD Licensed

Markets & Platforms

Apple | Android

• Smartphones
• Smartwatches
• Tablets
• Others

Apps

• Native
• HTML5 responsive
• Hybrids

React Native is an extension of hybrid applications

React Components

React Native layers schema

Javascript execution context

React Native states schema

Why is React Native cool?

• Leverage existing skill sets to write apps with native feel
• Gets you out of the "responsive HTML5"
• Writing cross-platform with high performance apps using a single business logic codebase.
• Hot reloading, no time wasted in recompiling
• Add React Native to an existing app

React Hello World

              
var HelloNameComponent = React.createClass({
  render: function(){
    return ( 
Hello, {this.props.name}!
 ); }
  }
);

ReactDOM.render( ,
                document.getElementById('app'));
              
            

React Native Hello world

              
class HelloWorldApp extends Component {
  render() {
    return ( Hello world! );
  }
}

AppRegistry.registerComponent('HelloWorldApp', () => HelloWorldApp);
              
            

Styling for components

              
class LotsOfStyles extends Component {
   render() {
     return (
        
          just red
          just bigblue
        
      );
    }
}

const styles = StyleSheet.create({
  bigblue: { color: 'blue', fontWeight: 'bold', fontSize: 30, },
  red: { color: 'red', }
});
              
            

Getting started on Android

• Linux Window o Mac
• node.js
• Install the Android SDK 23, Google API, Configure PATH, etc
• react native cli

Getting started on OS X

• Mac
• node.js
• Install the XCode
• react native cli

More info: getting-started

Styles

• JS-TO-CSS
• flexbox
• yoga

Some basic Primitives

• View
• Text
• TextInput
• Image

Touchables

• TouchableOpacity
• TouchableHighlight
• TouchableNativeFeedback

Animations

              return Hi Tarragona;
            

react-native-web

react-native-windows

create-react-native-app

• Audio
• AV
• BarCodeScanner
• Brightness
• Camera
• Contacts
• FileSystem
• Fingerprint
• Font
• GestureHandler
• GLView
• Gyroscope
• ImagePicker
• Location
• Lottie

• Magnetometer
• MapView
• Notifications
• Payments
• Pedometer
• Permissions
• ScreenOrientation
• Speech
• SQLite
• Svg

Packager

Metro bundler - official

Haul

Snacks

Examples

https://gist.github.com/agrcrobles/d5aff9cd3f31290f5d1712b3ac5e0272