Customize Behavior Across Platforms

Step 5: Customize Behavior Across Platforms

It is possible to detect which platform the React Native application is running on, by accessing the value of Platform.OS. Let’s say that, in the example above, we wanted to display a different alert message based on the platform we are running on. We can do it like this:

...
clickMe() {
  var message = ‘';
  if(Platform.OS == ‘ios') {
    message = ‘Welcome to iOS!';
  } else if(Platform.OS == ‘android') {
    message = ‘Welcome to Android!';
  }   
  Alert.alert(message);
}
...

Alternatively, the select method is also available, which provides a switch-like syntax:

…
clickMe() {
  Alert.alert(Platform.select({
    ios: ‘Welcome to iOS!',
    android: ‘Welcome to Android!'
  })
  );
}
...

Step 6: Custom Fonts and react-native link

In order to add a custom font, we need to jump through some hoops. First of all, make sure that the font full name and the font’s file name are the same: iOS will use the font’s full name in order to pick the font up, while Android uses the file name.

So, if your font’s full name is myCustomFont, make sure the font’s file name is myCustomFont.ttf.

After that, we need to create an assets folder and point npm to it. We can do it by creating the folder first, under assets/fonts in the application’s root directory. Any other directory will do, but this is the conventional name used for the fonts directory.

We can tell npm where we have our assets by adding an Assets property under React’s npm integration section, rnpm:

"rnpm": {
  "Assets": [
    "./assets/fonts/"
  ]
}

After we’ve done all that, we can finally run react-native link. That will copy the fonts to the right directories and will add the necessary xml to info.plist on iOS.

Once done, we can use our font by just referencing it in any stylesheet by its full name. Let’s use it on our Text element:

import React from ‘react';
import {View, Text, StyleSheet, TouchableOpacity, Alert} from ‘react-native';

class HelloThere extends React.Component {
  clickMe() {
    Alert.alert("Hi!")
  }
  render() {
    return (
      <TouchableOpacity onPress={this.clickMe()}>
        <View style={styles.box}>
          <Text style={styles.message}>Hello {this.props.name}. Please click me.</Text>
        </View>
      </TouchableOpacity>
    );
  }
}

var styles = StyleSheet.create({
  box: {
    borderColor: 'red',
    backgroundColor: '#fff',
    borderWidth: 1,
    padding: 10,
    width: 100,
    height: 100
  },
  message: {
    fontFamily: 'myCustomFont'
  }
});

React.render(<HelloThere name="Component" />, document.getElementById('content'));

Step 7: Moving Things Around

React Native uses the same rules as Flexbox for laying out components. Say we wanted to position our button at the bottom of the screen: let’s wrap our TouchableOpacity with a container View:

<View style={styles.container}>
    <TouchableOpacity onPress={this.clickMe.bind(this)}>
        <View style={styles.box}>
            <Text style={styles.message}>Hello {this.props.name}. Please click me.</Text>
        </View>
    </TouchableOpacity>
</View>

And now let’s define the container style, together with the other already defined styles:

container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center'
  }

Let’s focus on justifyContent and alignItems. Those two properties control how the component is aligned respectively along its primary axis and its secondary axis. By default, the primary axis is the vertical one, and the secondary axis is the horizontal axis (you can change that by setting the flexDirection property to row).

justifyContent has six possible values it can be set to:

• flex-start will position all the elements together, at the beginning of the component’s bounding box.
• flex-end will position all the elements at the end.
• center will position all the elements in the center of the bounding box.
• space-around will spread the components evenly, and will center the components in their created bounding boxes.
• space-evenly will spread the components evenly as well, but it will try to leave an equal amount of space between the components and the other boundaries.
• space-between will spread the components by keeping the spacing between adjacent components equal.

alignItems can be set to four possible values: flex-start, flex-end, center, and stretch. The first three behave like they do for justifyContent, while stretch will set the component to occupy all the available space along the axis, so that the axis will be completely filled.

So, since we want our TouchableOpacity to be displayed at the bottom and centered along the horizontal axis, we can change the style like so:

container: {
  flex: 1,
  justifyContent: 'flex-end',
  alignItems: 'center'
}

More information about the values justifyContent and alignItems we will discuss in the coming sections