Getting Started With React Native

When I hear React I immediately think of using React for web development. However React can be used across many platforms. If you have ever looked at the React docs or listened to a talk on React you have most likely been exposed to the tag line “Learn Once Write Anywhere”. I recently dipped my toes into React Native and found myself pleasantly surprised with just how true that statement is.

However despite it feeling very familiar you will still be exposed to a few “gotchas” worth mentioning. The first one being applying styling. The styling is typically scoped to the component it lives in and applied using inline styles. Here is a good example of what that might look like from the React Native docs.

import React, { Component } from 'react';
import { AppRegistry, StyleSheet, Text, View } from 'react-native';
class LotsOfStyles extends Component {
  render() {
    return (
      <View>
        <Text style={styles.red}>just red</Text>
        <Text style={styles.bigblue}>just bigblue</Text>
        <Text style={[styles.bigblue, styles.red]}>
          bigblue, then red
        </Text>
        <Text style={[styles.red, styles.bigblue]}>
          red, then bigblue
        </Text>
      </View>
    );
  }
}
const styles = StyleSheet.create({
  bigblue: {
    color: 'blue',
    fontWeight: 'bold',
    fontSize: 30,
  },
  red: {
    color: 'red',
  },
});
AppRegistry.registerComponent('LotsOfStyles', () => LotsOfStyles);

The next “gotcha” you will probably encounter is building your components out of a number of prebuilt components that you may be unfamiliar with compared to hand rolling all of your own JSX. A few common examples are View, ScrollView and TouchableHighlight. Lets take a look at what the code may look like for these.

View:
class ViewColoredBoxesWithText extends Component {
   render() {
     return (
       <View style={{flexDirection: 'row', height: 100}}>
         <View style={{backgroundColor: 'blue', flex: 0.3}} />
         <View style={{backgroundColor: 'red', flex: 0.5}} />
         <Text>Hello World!</Text>
       </View>
     );
   }
 }
ScrollView:
class IScrolledDownAndWhatHappenedNextShockedMe extends Component {
  render() {
      return(
        <ScrollView>
          <Text style={{fontSize:96}}>Scroll me plz</Text>
          <Image source={require('./img/favicon.png')} />
          <Image source={require('./img/favicon.png')} />
          <Image source={require('./img/favicon.png')} />
          <Image source={require('./img/favicon.png')} />
          <Image source={require('./img/favicon.png')} />
          <Text style={{fontSize:96}}>If you like</Text>
          <Image source={require('./img/favicon.png')} />
          <Image source={require('./img/favicon.png')} />
          <Image source={require('./img/favicon.png')} />
          <Image source={require('./img/favicon.png')} />
          <Image source={require('./img/favicon.png')} />
        </ScrollView>
    );
  }
}
TouchableHighlight: 
var TappyButtonApp = React.createClass({  
  getInitialState() {
    return {
      score: 0
    }
  },
  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.label}>
         {'Score: ' + this.state.score}
        </Text>
        <TouchableHighlight
          activeOpacity={0.6}
          underlayColor={'white'}
          onPress={() => this.setState({score:++this.state.score})}>
          <Text style={styles.button}>Tap</Text>
        </TouchableHighlight>
      </View>
   );
  }
});

Finally since iOS and Android have their own unique design guidelines your code will not be 100% reusable across platforms. There appears to be a few React Native libraries out there working towards a truly singular codebase to handle both platforms but I have not tried any yet. I have also seen statements that will render different components or styles based on a conditional that checks the OS. Something similar to…

if (Platform.OS === 'android') Do Something 

For now I would probably opt for two entirely separate code bases mainly to avoid hating myself while debugging 6 months down the road but that is just my opinion. Hopefully this is helpful for anyone thinking about getting started with React Native.