Intro To React Native

Varun Vachhar
@winkerV eck
React Native

H rid App Are
A we view
running a we app
with acce to native API
that ou uild once and deplo
ever where

React Native I An
xten ion of H rid

What I It?
An em edded in tance of
Java criptCore.
React component with inding to
native UI component .
Manipulating call into O jective C &
Java for ehavior.
And pol fill for ome we API
Native App
React Native li rar
Java cript ngine
React J
React Native J
Li rar
Your app

Getting tarted
In tall Node
(optional)

Platform pecific xten ion
// MyComponent.ios.js
// MyComponent.android.js

import MyComponent from './components/MyComponent';

Component
class MyComponent extends Component {
  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.welcome}>
          Welcome to React Native!
        </Text>
        <Text style={styles.instructions}>
          To get started, edit index.android.js
        </Text>
        <Text style={styles.instructions}>
          Shake or press menu button for dev menu
        </Text>
      </View>
    );
  }
}

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

t le
const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  },
  instructions: {
    textAlign: 'center',
    color: '#333333',
    marginBottom: 5,
  },
});

Touch
Toucha leHighlight and Toucha le*
Ge ture Re ponder tem &
PanRe ponder

Network
fetch('https://mywebsite.com/endpoint/', {
  method: 'POST',
  headers: {
    'Accept': 'application/json',
    'Content‐Type': 'application/json',
  },
  body: JSON.stringify({
    firstParam: 'yourValue',
    secondParam: 'yourOtherValue',
  })
});

Animation
Declarative
Compo a le: parallel, equence & tagger
Ge ture and event can drive animation

Navigator
Will feel familiar
tack a ed
Pu h/pop tate
call ack decide what to
render

True Multi-Threading
Java cript ha it' own thread. We can move
image proce ing, data manipulation , etc.
to a different thread.

Varun Vachhar
githu .com/winkerV eck / potif -arti t-
lookup
@winkerV eck
Thank You!

Intro To React Native

More Related Content

What's hot (20)

Similar to Intro To React Native (20)

More from FITC (20)

Recently uploaded (20)

Intro To React Native