react_native_android.md

React Native on Android

with Brent Vatne, April 19th, 2016

---

References: ReactNative Docs | web views | slider | make it open | Redux | Relay | Jest

Phone Gap is essentially a wrapper around your web browser in your mobile that takes up your full screen. When you want to make calls to APIs, you use the camera, or something like that, you make calls to the native side. ReactNative is more similar to Titanium, or NativeScript something like that. It actually uses the platform-native UI libraries.

Our First App

Start out by installing ExponentJS, create a new project, and open up the main.js file. It has a lot of other stuff in it, but we'll simplify that for now.

// my_app/main.js

/**
 * This is the entry point for your experience that you will run on Exponent.
 *
 * Start by looking at the render() method of the component called
 * FirstExperience. This is where the text and example components are.
 */
'use strict';

let React = require('react-native');
let {
  AppRegistry,
  View,
  Text,
  Platform,
  StyleSheet,
} = React;

class FirstExperience extends React.Component {

  render() {
    return (
      <View>

      </View>
    );  
  }
};

let styles = StyleSheet.create({
});

AppRegistry.registerComponent('main', () => FirstExperience);

Let's go ahead and add some stuff. We'll start out adding a box in the styles sections

let styles = StyleSheet.create({
  box: {
    width: 100,
    height: 100,
    color: 'red',
  },
});

And let's add some more elements. We need to add text into a text box, so let's add that, in the render function:

class MyApp extends React.Component {

  render() {
    return (
      <View style={{paddingHorizontal: 50, paddingVertical: 100}}>
        <Image
          onPress={
            function hello() { alert('hello'); }
          }
          style={{width: 300, height: 300, resizeMode: 'contain'}}
          source={{uri: 'https://facebook.github.io/react/img/logo_og.png'}}
        />
        <View style={styles.box}>
          <Text style={styles.text}>
            Hey there some text is this right har!
          </Text>
          <View style={styles.box2}>
          </View>
        </View>
      </View>
    );
  }
}

OK, now that we have that, let's add in some more styles

let styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'flex-end',
    justifyContent: 'center',
    flexDirection: 'row',
  },
  box: {
    flex: 1,
    backgroundColor: 'rgba(100,100,100,0.5)',
    padding: 20,
  },
  box2: {
    flex: 1,
    backgroundColor: 'green',
  },
  text: {
    fontWeight: 'bold',
    fontSize: 40,
  },
});

Also, since we have added some components, we have to include them in the let portion

let {
  AppRegistry,
  View,
  Text,
  Platform,
  StyleSheet,
} = React;

Let's add in a constructor for some reason which we now need, because we want to add a switch

class MyApp extends React.Component {

  constructor(props, context) {
    super(props, context);
    
    this.state = {
      switchIsChecked: false
    };
  }
  
  _updateSwitchValue(switchIsChecked) {
    this.setState({switchIsChecked});
  }

  render() {
    return (
      <View style={{paddingHorizontal: 50, paddingVertical: 100}}>
        <Image
          onPress={
            function hello() { alert('hello'); }
          }
          style={{width: 300, height: 300, resizeMode: 'contain'}}
          source={{uri: 'https://facebook.github.io/react/img/logo_og.png'}}
        />
        
        <Switch
          value={this.state.switchIsChecked}
          onValueChange={value => this._updateSwitchValue(value)}
        />
        
        <View style={styles.box}>
          <Text style={styles.text}>
            Hey there some text is this right har!
          </Text>
          <View style={styles.box2}>
          </View>
        </View>
        
        <Slider
          minimumValue={0}
          maximumValue={42}
          onSlidingComplete={value => this.setState({sliderValue: value})}
          value={this.state.sliderValue}
        />
        
        <Text>
        </Text>
      </View>
    );
  }
}

We also have to add these components to our dependencies list

let {
  AppRegistry,
  View,
  Text,
  Platform,
  StyleSheet,
  Switch,
  Slider,
} = React;

---

After Short Break

Let's make an http request, we'll make a render view thing inside the class

class FirstExperience extends React.Component {
  
   constructor(props, context) {
    super(props, context);
    
    this.state = {
      switchIsChecked: false
    };
  }
  
  _updateSwitchValue(switchIsChecked) {
    this.setState({switchIsChecked});
  }
  
  async _sendRequest() {
    let response = await fetch(`http://reddit.com/r/reactnative.json`)
    let newState = await response.json();
    this.setState({response: newState});
  }
  
  render() {
    return (
      <View styles={style.container}>
        <TouchableNativeFeedback onPress={() -> { this._sendRequest() }}>
          <View style={styles.button}>
            <Text>Fetch data</Text>
          </View>
        </TouchableNativeFeedback>
      </View>
    );  
  }
};

let styles = Stylesheet.create({
  // ...
  button: {
    padding: 10,
    backgroundColor: 'rgba(200,200,200,1)',
  }
  // ...
});