React Native 101

Carlos Fernández Llamas
Development Advisor @ Plain Concepts

@sirikon

BilboStack 2016

¿Qué es

React Native?

Arquitectura de React Native

React

React Native

React-DOM

JavaScriptCore

Operating System

*JS Engine

WebView

Native Android UI

Native iOS UI

"Escribe una vez, ejecuta donde quieras"

"Aprende una vez, escribe donde quieras"

Demo

Entorno de ejecución

Sin depuración

Con depuración

JavaScriptCore

Fetch API

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

Accesibilidad

<TouchableOpacity
    accessible={true}
    accessibilityLabel={'Tap me!'}
    onPress={this._onPress}>
      <View style={styles.button}>
        <Text style={styles.buttonText}>
            Press me!
        </Text>
      </View>
</TouchableOpacity>

Testing (con Jest)

// __tests__/sum-test.js
jest.dontMock('../sum');

describe('sum', function() {
 it('adds 1 + 2 to equal 3', function() {
   var sum = require('../sum');
   expect(sum(1, 2)).toBe(3);
 });
});

Animations

<Animated.Image
    source={{uri: 'http://.../img.jpg'}}
    style={{
        flex: 1,
        transform: [
            {scale: this.state.bounceValue},
        ]
    }}
/>
...
this.state.bounceValue.setValue(1.5);
Animated.spring(
  this.state.bounceValue,
  {
    toValue: 0.8,
    friction: 1,
  }
).start();