DEV Community: Nedim Becirovic

React Native — Platform specific code

Nedim Becirovic — Sun, 13 May 2018 05:39:30 +0000

With React Native we are writing the code for both, iOS and Android. And it won’t pass long to notice that we need to differ one from another.

Right: Android Emulator Nexus 5 API 23 1080x1920: xxhdpi x86_64

As we can see, our Header component, that has the simple task of displaying text behaves differently on Android and iOS. Clearly, we need to have two different styles for the two. So, how can we accomplish this? Good people from the React Native team have provided us with a quite simple solution. They have offered us a module called Platform.

All we need to do is to import Platform from react-native and we are good to go. The Platform has OS property which tells us either we are running our app on iOS (ios) or Android (android). Furthermore, Platform comes with a method select which given an object with a key of Platform.OS will return the value for the platform we are running our code on.

Enough talk. Let’s see those in action.

import React from 'react';
import { View, Text, StyleSheet, Platform } from 'react-native';

export const Header = () => (
  <View style={styles.header}>
    <Text style={styles.text}>I am Header</Text>
  </View>
);

const styles = StyleSheet.create({
  header: {
    height: Platform.OS === 'android' ? 76 : 100,
    marginTop: Platform.OS === 'ios' ? 0 : 24,
    ...Platform.select({
      ios: { backgroundColor: '#f00', paddingTop: 24},
      android: { backgroundColor: '#00f'}
    }),
    alignItems: 'center',
    justifyContent: 'center'
  },
  text: {
    color: '#fff',
    fontSize: 24
  }
});

And the result of running such code:

Header after style applied

Let’s break down our code!

height: Platform.OS === 'android' ? 76 : 100,
marginTop: Platform.OS === 'ios' ? 0 : 24,

Nothing fancy here. We have already mentioned that Platform.OS returns ios or android depending on the platform it is running on. Combining that with the ternary operator gave us this nice code which helped us set height/margin of our Header. This code is equivalent to height: 76, marginTop: 24 on Android and height:100, marginTop: 0 on iOS

Moving along we have:

...Platform.select({
 ios: { backgroundColor: '#f00', paddingTop: 24},
 android: { backgroundColor: '#00f'}
 }),

As we mentioned Platform.select will return the value given the key from Platform.OS. So in our case this code becomes ...{ backgroundColor: '#f00', paddingTop: 24} for iOS, and ...{ backgroundColor: '#00f'} for Android.

So to sum it up, or styles are going to look like this:

Android:
const styles = StyleSheet.create({
 header: {
 height: 76,
 marginTop: 24,
 backgroundColor: '#00f',
 alignItems: 'center',
 justifyContent: 'center'
 },
 text: {
 color: '#fff',
 fontSize: 24
 }
});

-----------------------------------

iOS:
const styles = StyleSheet.create({
 header: {
 height: 100,
 marginTop: 0,
 backgroundColor: '#f00', 
 paddingTop: 24,
 alignItems: 'center',
 justifyContent: 'center'
 },
 text: {
 color: '#fff',
 fontSize: 24
 }
});

We have not come to an end with Platform.select. The cool thing about it is that it accepts any value, so you can use this to your advantage to return components for iOS/Android. In our case, we have created BodyAndroid.js, BodyIOS.js, and Body.js. We have replaced default text in App.js with Body component. So, our App.js look like this:

import React from 'react';
import { View} from 'react-native';
import {styles} from "./src/theme/Style";
import { Header } from './src/components/Header';
import { Body } from "./src/components/Body";

export default class App extends React.Component {
  render() {
    return (
      <View style={styles.container}>
        <Header />
        <Body />
      </View>
    );
  }
}

The rest of our code:

BodyAndroid.js
import React from 'react';
import { View, Text} from 'react-native';
import {styles} from "../theme/Style";

export const BodyAndroid = () => (
  <View style={styles.body}>
    <Text style={styles.h1}>This is Android App!</Text>
  </View>
);
--------------------------------
BodyIOS.js
import React from 'react';
import { View, Text} from 'react-native';
import {styles} from "../theme/Style";

export const BodyIOS = () => (
  <View style={styles.body}>
    <Text style={styles.h1}>This is iOS App!</Text>
  </View>
);
--------------------------------
Body.js
import { Platform } from 'react-native';

import { BodyAndroid } from './BodyAndroid';
import { BodyIOS } from './BodyIOS'

export const Body = Platform.select({
  ios: BodyIOS,
  android: BodyAndroid
});

And the result:

As good as this looks I do not consider it the best solution. There is something called Platform-specific extension which I prefer. So in the case of iOS, we want to have .ios. extension, while for Android we will have .android.. This will help React Native determine which component to use for what platform.

Let’s illustrate this with an example.

The code for our Footer is very similar to our Header, therefore, I will not be pasting it here. What is important for us to nice is this simple line import { Footer } from './src/components/Footer';. As we can notice in the components directory we do not have Footer file, but righter Footer.ios and Footer.android. React Native is smart enough to determine which one to use, depending on what platform we are building our app for.

We have seen how we can add our component using the Platform-specific extension and Platform.select method. Was it all that Platform module can do? Well, no. There is one more thing left and you might have guessed it. It is detecting the version of Android/iOS. So let’s modify our Body message by appending to it the version number.

Showing Platform version is as simple as calling Platform.Version. Well… there is a catch. While Android returns the version as an integer, iOS is not so friendly and will give us the version as a string. It should not be difficult to covert it to the integer if we need to compare it (which is the most likely scenario if we need a version number). If we just want to display it we are safe to go with what we get.

To make everything more interesting, React Native comes with build in components and APIs, some of which are Android/iOS specific. To mention few, for Android we have: DatePickerAndroid, ProgressBarAndroid, ViewPagerAndroid; as for iOS we have: AlertIOS, ImagePickerIOS, TabBarIOS. Furthermore, we can write Native modules for our Platform, but that is topic for itself.

Honorary mention goes to component parameters. Some components have Platform specific parameters which we will cover as we mention each component or set of components.

Conclusion

To Platform or not to Platform, that is the difficult question. Usage of the platform-specific code is quite simple when it comes to React Native. As we have seen we have the variety of the choices. Either to create a platform-specific component or to make modification in component by determining OS. So it is all up to us, and our case scenario.

The code used in this article can be found at :

nedimb86/RNPlatform

React Native — Intro

Nedim Becirovic — Thu, 10 May 2018 18:46:04 +0000

Following my previous article, we are going to continue with an introduction to React Native. Assuming you have everything set up and ready, and you have created your first project and have seen “Hello world!” on the screen, what’s next?

Well… We have been instructed to open App.js and make our modifications. So, let’s look into the project folder.

Project folder structure and initial screen — created using create-react-native-app

Before we continue I would like to mention that for this lesson I am using create-react-native-app, therefore if you have created your project using react-native-cli or ignite-cli, project folder will differ from what I will be referring to.

There it is. App.js. And as much as it is tempting to open it, let’s first see what we can learn from README.md.

If we want to keep our project up-to-date we will need to update our dependencies, which should be quite a simple task. But beware of dependency compatibility. Create React Native App relies on 3 dependencies: react-native, react and expo, each being compatible with a narrow version of other two. Not to forget, the expo also needs to have specific SDK version, which can be set in the app.json file. Beside specifying SDK version, app.json can help us to name our app, give it an icon, version, specify supported platform, build details, and set many other settings.

Moving along we will see that we have 5 predefined scripts:

npm start or yarn start used to run the app in development mode. If you need to clear cache run npm start --reset-cache flag.
npm test used for running test. The project is set up to use jest, but you are free to change it to your likening. If you decide to continue with jest, all you need to do is to create files inside a __test__ folder or with .test extension, and your tests will be ready running.
npm run ios used to run the project on iOS Simulator. The same can be achieved with npm start since one of the available options is to run the app on iOS Simulator as well.
npm run android will run the app on Android device or emulator. Keep in mind that you will need a device connected or emulator started before running this script. As for the previous script, same goes for this one, the app can be run on Android with npm start as well.
npm run eject if you find yourself that you need to add native code, do not worry, running this script will put you on the same track as if you have created your app with react-native-cli, but make sure that you have react-native-cli installed globally.

If you are unlucky one and everything does not run smoothly on the first try, there is a list of troubleshooting suggestions related to networking, iOS Simulator not running, and QR Code not scanning.

We have prolonged opening App.js enough. So let’s check it out.

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

export default class App extends React.Component {
  render() {
    return (
      <View style={styles.container}>
        <Text>Open up App.js to start working on your app!</Text>
        <Text>Changes you make will automatically reload.</Text>
        <Text>Shake your phone to open the developer menu.</Text>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

What do we have here?

First of all, we can notice that code is written using ES6. I am assuming that we are all familiar with it to some degree. For those that want to learn more please check out this link.

React Native comes with ES6 support so there is no need to worry about compatibility. To ensure you how it is much simpler to write the code using ES6, here is a link to our code after it is compiled.

Moving along we can see <Text>Lorem Ipsum</Text>, which might be unusual to some of us. This is JSX , React feature for embedding XML within JavaScript. Contrary to other framework languages that let you embed your code inside markup language React lets us write markup language inside the code. This is one of the reasons why we have React as one of our dependencies.

React

As we have already seen we need to know of React if we want to write React Native, but do not worry, if you do not know React you will still be able to follow along. That being said, we will look into two types of data that control React component and two different types of components.

import React, { Component } from 'react';
import { Text, View } from 'react-native';

const Greeting = ({name}) => <Text>Hello {name}!</Text>;

export default class GreetPeople extends Component {
    constructor(props) {
        super(props);
        this.state = {
            doeName: 'Doe'
        };
    }
    render() {
        const janesName = 'Jane';
        return (
            <View style={{marginTop:40, marginLeft:20}}>
                <Greeting name='John' />
                <Greeting name={janesName} />
                <Greeting name={this.state.doeName} />
            </View>
        );
    }
}

The code above is all we need, so let’s break it down.

Functional Components

Also known as presentational or stateless components. They are dump components that should not contain any complex logic and should be used for displaying a specific part of context or as wrappers to apply specific styles.

const Greeting = (props) => {
return (
 <Text>Hello {props.name}!</Text>
 )
};

----- or after shortening the code -----

const Greeting = ({name}) => <Text>Hello {name}!</Text>;

Class Components

More complex components that should deal with all necessary logic for displaying the content. React has something called component lifecycle and those should be handled inside class components. One of the lifecycle examples is the constructor. Some of the others are componentDidMount, componentWillUnmonut, and others. We will cover them as we need them.

export default class GreetPeople extends Component {
    constructor(props) {
        super(props);
        this.state = {
            doeName: 'Doe'
        };
    }
render() {
        const janesName = 'Jane';
        return (
            <View style={{marginTop:40, marginLeft:20}}>
                <Greeting name='John' />
                <Greeting name={janesName} />
                <Greeting name={this.state.doeName} />
            </View>
        );
    }
}

I would like to note that we do not need to have the constructor in every class component.

Props

Props are used for customizing the components. In our case, <Greeting /> component has a prop name, and as we have seen we can pass it a string directly or we can pass it a constantan inside curly braces.

const janesName = 'Jane';
    return (
        <View style={{marginTop:40, marginLeft:20}}>
            <Greeting name='John' />
            <Greeting name={janesName} />
        </View>
    );

If we are passing prop, let say fullName, to a class component we will access it with this.props.fullName, while in a functional component we will use props.fullName (we will omit this keyword).

State

While props are passed from parent to child, the state is what we are going to use with the component itself. We can initialize the state in the constructor, but if we want to change it we should use this.setState() function. It accepts two parameters, object that will update the state, and a callback function that will execute once the state is updated. We should not worry about re-rendering the component since it will re-render every time the state or the props for the component have been changed.

constructor(props) {
    super(props);
    this.state = {
        doeName: 'Doe'
    };
}

componentDidMount(){
    setTimeout(
        () => this.setState({doeName:'Alex'}),
        3000
    )
}

Ok! I think we had enough of React for now. Let’s go back to React Native.

Styling

Well, sooner or later we will get bored at looking at same style over and over. So, what can we do about it? It’s easy. We will create CSS file, add our style, and… NO! React Native does not play that way. But not to worry. Styling React Native is not at all more complex. We will write our styles using JavaScript.

All of the core components accept prop named style which accepts an object that contains our styling, that we write similar to CSS. The difference is that instead of dashes we are using camel casing (instead of font-family we will have fontFamily) and that our values unless they are only numeric, need to be surrounded by quotations (color: blue is color: 'blue'). With further ado, let’s look how we style React Native component.

import React, { Component } from 'react';
import { StyleSheet, Text, View } from 'react-native';

export default class LotsOfStyles extends Component {
    render() {
        return (
            <View style={{margin:40}}>
                <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>
                <Text style={{color:'yellow'}}>yellow</Text>
                <Text style={[styles.bigblue, {color:'green'}]}>bigblue, then green</Text>
            </View>
        );
    }
}

const styles = StyleSheet.create({
    bigblue: {
        color: 'blue',
        fontWeight: 'bold',
        fontSize: 30,
    },
    red: {
        color: 'red',
    },
});

As we have seen we can have two different approaches, somewhat similar to the inline style and class-based style. Also lets notice that we can easily combine styles by passing an array of objects to style prop instead of an object.

Dimensions

It should not be strange to us that we can use height and width to determine component size on the screen. Also, we can assume that our dimension can be fixed and flexible. So, how we are setting each in React Native.

As for fixed, it is as simple as setting height and width. The trick is that all dimension in React Native are unitless and represent density-independent pixels.

import React, { Component } from 'react';
import { View } from 'react-native';

export default class FlexDimensionsBasics extends Component {
    render() {
        return (
            <View style={{flex: 1}}>
                <View style={{flex: 3, backgroundColor: 'powderblue'}} >
                    <View style={{width: 50, height: 50, backgroundColor: 'orange'}} />
                    <View style={{width: '50%', height: 50, backgroundColor: 'green'}} />
                    <View style={{width: 150, height: 50, backgroundColor: 'red'}} />
                </View>
                <View style={{flex: 2, backgroundColor: 'skyblue'}} />
                <View style={{flex: 1, backgroundColor: 'steelblue'}} />
            </View>
        );
    }
}

Lets now check out flexible dimensions. This can be achieved with flex property.

A component can only expand to fill available space if its parent has dimensions greater than 0. If a parent does not have either a fixedwidth andheight orflex, the parent will have dimensions of 0 and theflex children will not be visible.

While talking about flex, we need to say that we can use flexbox principles to layout our components. And something that we need to keep in mind is that flexbox in React Naive slightly differs from what we are used on the web.

Flexbox works the same way in React Native as it does in CSS on the web, with a few exceptions. The defaults are different, withflexDirection defaulting tocolumn instead ofrow, and theflex parameter only supporting a single number.

Components

Now we know how to apply a basic style to our app. Where to next? Well… we will need something to style. And that something is React Native components. So let’s have a look into few.

View : the most fundamental component for building UI — as div for web

Text: used for displaying text — heading, and paragraphs for web

TextInput: used for inputting text into the app via keyboard — input for web

StyleSheet: creates styles — acts style tag for web

Image: used for displaying images — same as img on web

Button: gives us buttons — acts like button for web

Platform: helps us to determine either we are running our code on Android or iOS

Alert / AlertIOS: the name says it — as JavaScript alert message

ScrollView: helps us to scroll the content that is higher or wider than our device

FlatList: displays similarly structured data; unlike ScrollView it renders only visible items

Touchable “components”: creates touchable views — similar to anchor tags on web

Let’s not go overboard with listing components. Those are some basic ones that we will be using the most. As for other, we will mention them as appropriate to our case.

We have already seen how we can style Text and View in our examples. Styling others is not much different. For the full list of styling attributes, you can check the official documentation.

Conclusion

I think we have covered enough in this article. We now know how to create a project using create-react-native-app and we have a basic understanding of what we get out of the box when doing so. We have learned just enough React to be able to write code for our app. And we have shown how to style React Native component, as well as how to give it dimensions. In addition to that, we have mentioned fundamental React Native components to have us up and ready when we want to build a simple app.

The code used here can be found on my GitHub repository:

nedimb86/MyReactNativeApp

Starting with React Native

Nedim Becirovic — Sun, 29 Apr 2018 20:43:46 +0000

Since I was working as React developer it was just a matter of time when I would check out React Native. My first touch with it did not go out good at all. And I am not talking about writing code, but starting demo project.

I admit. Everything was my fault. Trying to act too smart and just scanning documentation was more than enough to waste few hours. To be clear, I was trying to run “AwesomeProject” generated with react-native-cli on Android emulator on Windows. This simple task is not so simple if you are trying to use “the latest” versions.

While getting advice from a good old friend StackOverfow I came across a comment that cites official documentation stating that I need to use Android 6.0. I had it enough and went back to the roots, followed instructions to the letter, and believe it or not, everything worked just fine.

A couple of the months down the road I found myself trying to help others start with the React Native and hence this article. So, how should one start?

I found three different approaches that I am going to cover here:

create-react-native-app
react-native-cli
ignite-cli

Create React Native App

This should be more than enough for the beginner that wants to check basic concepts of React Native. All you need is Node on your machine and Expo client app on your device and you are ready to go. Next step is to run npm i -g create-react-native-app. Once this is done you will need to run

create-react-native-app MyReactNativeApp

.........

cd MyReactNativeApp npm start

Almost there. Start Expo on your device (ensure that your machine and device are on the same IP address) and scan QR code. Congratulations! You have just entered into the world of React Native.

So what is the catch?

Well… There are some limitations what you can do due to not building any native code. Not to worry thou, you will be able to do quite a lot, and once you need to take it up the notch you can “eject” project and create native builds. This comes with the price of having to install Xcode (for iOS) and JDK and Android Studio (for Android), besides some other requirements which differ from macOS, Windows, and Linux.

React Native CLI

One more time. Be sure to follow instructions as mentioned in the documentation. So, once you have run out of “OS-specific installations” and have you cli installed globally by running npm i -g react-native-cli, you are ready to create your first project.

react-native init MyReactNativeApp

.......

cd MyReactNativeApp

----------

react-native run-ios

------or--------

react-native run-android

It is that simple. Just be sure that you have your Android emulator running or that your device is connected, before running app for Android.

Ignite CLI

Even for Ignite, you will need to go through the same setup as for react-native-cli. Creating the project is a bit more complex than with react-native-cli. First install it globally npm i -g ignite-cli. Then let it run its magic

ignite new ILoveIgniteApp

You will be prompted with a couple of yes/no questions to let you chose what you want to install.

So, why would you choose something that seems more complex?

For starters ignite comes with a bunch of boilerplates that you can install from as easy as running ignite new MyNewAppName -b 'name of boilerplate'. Moreover, there is a number of plugins (npm packages) that are easily added by ignite. For beginners, it can be a source of learning how to organize the project. Ignite generates the code with clear instructions on how to modify the code so the app will work. For advanced users, it saves time with some copy-paste processes when adding native related dependencies, like google maps.

Conclusion

Sooner or later you will need to set up the environment, either to extend your app with native modules or to build it for AppStore or PlayStore or both. Even though you can use Expo and physical device for create-react-native-app, you can also use emulators to run your app. So do not postpone this painless, time-consuming process.

As for me, I like using create-react-native-app for trying out any non-native module related thing. When it comes to project I prefer ignite-cli since it speeds up my work. But when using a native module for the first time or playing with them, I like creating a new project with react-native-cli just to be sure I won’t miss anything that ignite will do for me.

It does not matter what approach will you chose, as long as you have chosen any.