React Native and Material Design

Material Design

Material Design is a design convention used by google on their applications. It defines a certain look and feel to our apps with common ui components. In this tutorial we tried to use material design in our react native application.

Bootstrapping a new react native application

We will use react-native-cli to start our app so if it's not installed on your computer, install with npm:

        
            > npm install -g react-native-cli
        
    

Start a new react native application with the cli using the following command:

        
            > react-native init RnMaterial
        
    

After this command you can cd into your project directory and run

        
            > react-native run-ios
        
    

This will launch the iphone simulator with your app.

Installing material design

RNPM - the package manager for react native is now obsorbed into react native, so we can use react native to install packages now. We will install the material design package located here

        
            react-native install react-native-material-kit
        
    

after installing a package you will need to exit the simulator and the terminal and run again

        
            > react-native run-ios
        
    

You can now modify you App.js to contain components from the react-native-material-kit Modify App.js

        
            import React, {Component} from 'react';
            import {StyleSheet, Text, View, Alert} from 'react-native';
            import { MKButton } from 'react-native-material-kit';

            type Props = {};
            export default class App extends Component<Props> {
            sayHello = () => {
                Alert.alert('hello world');
            }

            render() {
                const ColoredRaisedButton = MKButton.coloredButton()
                .withText('Say Hello')
                .withOnPress(this.sayHello)
                .build();
                return (
                <View style={styles.container}>
                    <Text style={styles.welcome}>Hello world</Text>
                    <ColoredRaisedButton />
                </View>
                );
            }
            }

            const styles = StyleSheet.create({
            container: {
                flex: 1,
                justifyContent: 'center',
                alignItems: 'center',
                backgroundColor: '#F5FCFF',
            },
            welcome: {
                fontSize: 20,
                textAlign: 'center',
                margin: 10,
            }
            });
        
    

As you can see we are using a material design button and we attached a click event to that button that will issue an alert dialog with an hello world message. The material design library contains more that just buttons and you can read more about it in this link

Debugging our code

What if we would like to debug the js code we wrote. Lets say we want to add a break point inside the sayHello method in our App component. In the Simulator click on the menu on Hardware -> Shake Gesture and on the menu that openned click on Debug JS Remotely This should open a tab in your browser. Open chrome developer tools by pressing Command + Alt + i Go to the sources tab and on the bottom you should see debuggerWorker.js You can search in the files there for the App.js file or more easily you can just type Command + O and type App.js to search for the file. In the file place a breakpoint in the sayHello method and go to the simulator and press Command + R to reload. You should see the debugger pausing on your breakpoint when you click the say hello button.

Material design toolbar

react-native-material-kit is a great library which you saw how easy it was to install, but I wanted also to create a material design toolbar with material design icons. So there is another popular material design library for react native, with more components you can use which is called: react-native-material-ui This library has a toolbar and it's also using the material design icons. Lets try and install it by typing in the terminal:

        
            > react-native install react-native-material-ui
        
    

This will install and link the library, but the library is also using the material design vector icons for reach native so this is another library we will have to install.

react-native-vector-icons

You can install this library by using the react-native packager and typing in the terminal:

        
            > react-native install react-native-vector-icons
        
    

Installing custom fonts

The material design library we just installed is using a custom font called Roboto We need to install this font otherwise we will get an error, plus it's a good practice to how we load custom fonts in react native. First lets download the Roboto font by clicking this link You need to download the zip archive of the font. Create a folder in your project ./assets/fonts and copy all the font files to the fonts folder. modify the package.json file and add the following line

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

This will instruct react native package manager to copy the content of the folder and link the fonts to the ios and android projects. To finish the linking process simply run

        
            > react-native link
        
    

After all this installations you will need to restart the simulator and run again

        
            > react-native run-ios
        
    

Toolbar

Now lets add the material design toolbar to our application. Modify the App.js file to this

        
            import React, {Component} from 'react';
            import {StyleSheet, Text, View, Alert} from 'react-native';
            import { MKButton } from 'react-native-material-kit';
            import { Toolbar, getTheme } from 'react-native-material-ui';


            type Props = {};
            export default class App extends Component<Props> {
            sayHello = () => {
                Alert.alert('hello world');
            }

            render() {
                const ColoredRaisedButton = MKButton.coloredButton()
                .withText('Say Hello')
                .withOnPress(this.sayHello)
                .build();
                return (
                <View style={styles.container}>
                    <View style={{height: 24, backgroundColor: getTheme().toolbar.container.backgroundColor, alignSelf: 'stretch'}} />
                    <Toolbar
                    leftElement="menu"
                    centerElement="Searchable"
                    searchable={{
                        autoFocus: true,
                        placeholder: 'Search',
                    }}
                    rightElement={{
                        menu: {
                            icon: "more-vert",
                            labels: ["item 1", "item 2"]
                        }
                    }}
                    onRightElementPress={ (label) => { console.log(label) }}
                    />
                    <Text style={styles.welcome}>Hello world</Text>
                    <ColoredRaisedButton />
                </View>
                );
            }
            }

            const styles = StyleSheet.create({
            container: {
                flex: 1,
                justifyContent: 'flex-start',
                alignItems: 'center',
                backgroundColor: '#F5FCFF',
            },
            welcome: {
                fontSize: 20,
                textAlign: 'center',
                margin: 10,
            }
            });
        
    

Few things to note in this code

• We are importing the Toolbar from react-native-material-ui
• we are placing the toolbar at the top but for this to align properly we need to modify the justifyContent of the view to start from the top
• We also placed a view with height of 24 to start a bit from the top to include the status bar

Summary

Using material design in our app can save us a lot of time. If material design is our starting point and the designer will implement a theme on top of that our app will look professional and quick to implement. In this tutorial we learned how to start a new react native project and install external libraries. We also covered a bit about layout installing custom font and the react native package manager. We will cover more advanced react native issues on our next lessons.