React Native + Expo Documentation

External Links

React Native Documentation

React Native lets you build native mobile apps using JavaScript and React.

Expo Documentation

Expo is a set of tools, libraries and services which let you build native iOS and Android apps by writing JavaScript. On CodeHS, you can use Expo in your React Native programs.

React Native File Skeleton

This is a simple React Native file skeleton that you can use to get started on a project. To get info on specific parts, see below.

import React, { Component } from 'react';
import { AppRegistry, View, StyleSheet } from 'react-native';
import Constants from 'expo-constants';

export default class App extends Component {
    render() {
        return (
            <View>
                <Text>
                    Hello, world!
                </Text>
            </View>
        );
    }
}

The import statements that appear at the top of the file are needed to import items from outside our app and inform the computer that we are calling on the React Native library and unique syntax. Here, the second import statement is importing three components- AppRegistry, View, and StyleSheet. AppRegistry and View must always be imported and as programs become more complex, even more components will need to be imported in this statement.

The export statement is needed to export the information to be rendered correctly. The syntax of this statement will stay the same for the purposes of this course.

The render function below tells our app what to render. All of the components used to create our app are written inside this function.

Components

Many components can be used to build your app. This React Native Documentation can be used to get more information on those discussed below as well as others.

View

The view component is the most fundamental component for building a user interface. A parent view component is needed to hold all components of your app. Additional view components can be nested inside the parent as well. Each view component must have an opening and closing tag. View must be imported at the top of the program.The example below shows a text and view component nested inside the parent view component. The second view component could be used as a button, for example.

export default class App extends Component {
    render() {
        return (
            <View>
                <Text>
                    Hello
                </Text>
                <View>
                </View>
            </View>
        );
    }
}

Text

A text component can be used to print text to the screen. Each text component must have an opening and closing tag. Text must be imported at the top of the program. The example below shows two text components nested inside a parent view component.

export default class App extends Component {
    render() {
        return (
            <View>
                <Text>
                    Hello
                </Text>
                <Text>
                    World!
                </Text>
            </View>
        );
    }
}

Image

An image component can be used to display images on the screen. An image component only has an opening tag, which contains the image uri, height, and width. Image must be imported at the top of the program. The example below shows a text component below an image component. All components are nested inside a parent view component.

export default class App extends Component {
    render() {
        return (
            <View>
                <Image
                    source={{ uri: 'http://d23dyxeqlo5psv.cloudfront.net/cat.gif' }}
                    style={{ height: 140, width: 200 }}
                />
                <Text>
                    Bad Kitty
                </Text>
            </View>
        );
    }
}

ScrollView

A ScrollView component can be used to wrap certain components on the screen and allow the user to scroll through items. A ScrollView component must have an opening and closing tag. ScrollView must be imported at the top of the program. The example below shows 3 sets of text components nested inside view components. All components are nested inside a ScrollView component which is inside a parent view component.

export default class App extends Component {

    render() {
        return (
            <View>
                <ScrollView>
                    <View>
                        <Text>
                            Period: 1
                        </Text>
                        <Text>
                            Introduction to Computer Science
                        </Text>
                    </View>
                    <View>
                        <Text>
                            Period: 2
                        </Text>
                        <Text>
                            AP Computer Science Principles
                        </Text>
                    </View>
                    <View>
                        <Text>
                            Period: 3
                        </Text>
                        <Text>
                            Introduction to Python
                        </Text>
                    </View>
                </ScrollView>
            </View>
        )
    }
}

Look at the React Native ScrollView Docs for more information on ScrollView components.

Stylesheet Values

Stylesheet API

The Stylesheet API can be used to style our app. We need to import StyleSheet at the beginning of our program to inform our app that we are using the Stylesheet attributes and values. The example below shows two view components and a text component being styled using the Stylesheet.

import React, { Component } from 'react';
import { AppRegistry, View, Text, StyleSheet } from 'react-native';
import Constants from 'expo-constants';

export default class App extends Component {
    render() {
        return (
            <View style={styles.container}>
                <View style={styles.titleBox}>
                    <Text style={styles.titleText}>
                        Welcome to my app!
                    </Text>
                </View>
            </View>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        alignItems: 'center',
        justifyContent: 'center',
    },
    titleBox: {
        height: 100,
        width: 200,
        backgroundColor: 'red',
        borderColor: 'yellow',
        borderWidth: 10,
        justifyContent: 'center'
    },
    titleText: {
        color: 'white',
        fontFamily: 'Roboto',
        fontWeight: 'bold',
        fontSize: 32,
        textAlign: 'center',
    },
});

For a full list of properties and values that can be used to style:

• Text components, go to React Native Text Style Props
• View components, go to React Native View Style Props
• Image components, go to React Native Image Props
• The layout of components, go to React Native Layout Props

Stylesheet Properties

This section covers some of the most commonly used Stylesheet properties and values. For a full list of possible Stylesheet properties and values, visit the React Native Stylesheet Docs.

Component Layout Properties

There are multiple attributes that can be used to style the layout of your app. A few common properties are shown below.

The justifyContent attribute sets the way components are laid out vertically (along the y-axis). This property can be set to: 'flex-start', 'flex-end', 'center', 'stretch', 'baseline'

The alignItems attribute sets the way components are laid out horizontally (along the x-axis). This property can be set to: 'flex-start', 'flex-end', 'center', 'space-between', 'space-around', 'space-evenly'

The following example centers three view components in the center of the screen, stacked on top of one another.

import React, { Component } from 'react';
import { AppRegistry, View, Text, StyleSheet } from 'react-native';
import Constants from 'expo-constants';

export default class App extends Component {
    render() {
        return (
            <View style={styles.container}>
                <View style={styles.topBox}>
                </View>
                <View style={styles.middleBox}>
                </View>
                <View style={styles.bottomBox}>
                </View>
            </View>
        );
    }
}


const styles = StyleSheet.create({
    container: {
        flex: 1,
        alignItems: 'center',
        justifyContent: 'center',
    },
    topBox: {
        width: 100,
        height: 100,
        backgroundColor: 'lightBlue',
    },
    middleBox: {
        width: 100,
        height: 100,
        backgroundColor: 'mediumBlue',
    },
    bottomBox: {
        width: 100,
        height: 100,
        backgroundColor: 'darkBlue',
    },
});

To arrange items to be placed next to one another rather than stacked vertically, the flexDirection attribute can be set to 'row'.

Note: If the flexDirection is set to 'row', the alignItems and justifyContent attributes are switched (alignItems works along the y-axis, and justifyContent works along the x-axis).

Color

All information about colors in the Stylesheet can be found in the Colors docs.

Stylesheet Colors can either be:

• A valid color name, such as "Blue" or "DarkGreen"
• An RGB value, such as "rgb(255, 0, 0)"
• A HEX color code, such as "#68ff00"

Color Names

Common Color Names:

• red
• orange
• yellow
• green
• blue
• cyan
• indigo
• black
• white

Names are not case-sensitive. "RED" is the same as "red" is the same as "Red".

There are many valid color names. See a full list of all names here.

Example:

titleText: {
    color: 'Blue',
}

Result:

Hello

RGB Colors

Colors can also be represented by the RGB (Red Green Blue) color encoding system. Every color can be made just by mixing different amounts of red, green, and blue.

RGB color values can be specified in the Stylesheet using 'rgb(red, green, blue)'.

• The first two digits specify the amount of RED in the color
• The next two digits specify the amount of GREEN in the color
• The last two digits specify the amount of BLUE in the color
• Each value can be between 0 and 255, inclusive
• 'rgb(255, 0, 0)' would be red
• 'rgb(255, 255, 255)' would be white
• 'rgb(0, 0, 0)' would be black

Example:

titleText: {
    color: 'rgb(255, 0, 0)',
}

Result:

Hello

Hex Color Values

We can also represent RGB colors using hexadecimal values. 6 hexadecimal digits make up a color:

• The first two hexadecimal digits specify the amount of RED in the color
• The next two hexadecimal digits specify the amount of GREEN in the color
• The last two hexadecimal digits specify the amount of BLUE in the color
• Each digit can be a value from 0 to F, with 0 being the least and F being the most
• '#ff0000' would be red
• '#ffffff' would be white
• '#000000' would be black

Example:

titleText: {
    color: '#00ff00',
}

Result:

Hello

Text and Font

color: text color in the selected element (any valid color name or code)

fontSize: size of the font (any numerical value)

fontFamily: font family (ex. 'Arial' or 'Times')

• For a full list of fonts supported in React Native, see the React Native Fonts Doc here

fontStyle: font style ('italic' or 'normal')

fontWeight: how thick the font is (bold or bolder, or a value from 100 to 900)

textAlign: sets the horizontal alignment of text ('center', 'left', 'right')

const styles = StyleSheet.create({
    titleText: {
        color: '#ffff00',
        fontFamily: 'Futura',
        fontStyle: 'italic',
        fontSize: 28,
        textAlign: 'left',
    }
});

Background

backgroundColor: background color in the selected element (any valid color name or code)

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: 'lightBlue'
    }
});

Borders

The border properties allow us to create borders around any element.

• borderColor: sets border color for all four border sides (any valid color name or code)
• borderWidth: sets the width of the border for all four border sides (any numerical value)
• borderStyle: sets the style of the border for all four border sides ('solid', 'dotted', 'dashed', 'double')
• borderRightColor: sets border color for right border (any valid color name or code)
• borderRightWidth: sets the width of the border for right border (any numerical value)
• borderRightStyle: sets the style of the border for right border ('solid', 'dotted', 'dashed', 'double')
• borderLeftColor: sets border color for left border (any valid color name or code)
• borderLeftWidth: sets the width of the border for left border (any numerical value)
• borderLeftStyle: sets the style of the border for left border ('solid', 'dotted', 'dashed', 'double')
• borderTopColor: sets border color for top border (any valid color name or code)
• borderTopWidth: sets the width of the border for top border (any numerical value)
• borderTopStyle: sets the style of the border for top border ('solid', 'dotted', 'dashed', 'double')
• borderBottomColor: sets border color for bottom border (any valid color name or code)
• borderBottomWidth: sets the width of the border for bottom border (any numerical value)
• borderBottomStyle: sets the style of the border for bottom border (solid, dotted, dashed, double)

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: 'rgb(0, 0, 255)',
        borderWidth: 10,
        borderBottomStyle: 'dotted',
        borderTopColor: 'lightBlue',
    }
});

Margins

The margin is the amount of space between an element and the elements around it. The margin is set with a value of pixels.

• margin: shorthand to set the margin of all sides (any numerical value)
• marginTop: sets the margin for the top of the container (any numerical value)
• marginRight: sets the margin for the right of the container (any numerical value)
• marginBottom: sets the margin for the bottom of the container (any numerical value)
• marginLeft: sets the margin for the left of the container (any numerical value)

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: 'lightBlue'
    },
    box: {
        height: 100,
        height: 50,
        backgroundColor: 'Red',
        margin: 30
    }
});

TouchableHighlight

We can allow users to interact with components of our app by using the TouchableHighlight component. This component wraps another component and allows us to program an event to occur when that component is tapped. Each TouchableHighlight component must have an opening and closing tag. TouchableHighlight must be imported at the top of the program. In this example, a text component is being wrapped inside a TouchableHighlight button component and an alert is being shown when the button is pressed.

import React, { Component } from 'react';
import { AppRegistry, View, Text, StyleSheet, TouchableHighlight, Alert } from 'react-native';
import Constants from 'expo-constants';

export default class App extends Component {
    render() {
        return (
            <View style={styles.container}>
                <TouchableHighlight
                    style={styles.touchableButton}
                    onPress={() => {
                        alert('Alert Message!');
                    }}
                >
                    <Text style={styles.buttonText}>
                        Press me!
                    </Text>
                </TouchableHighlight>
            </View>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        alignItems: 'center',
        justifyContent: 'center',
        backgroundColor: 'white',
    },
    touchableButton: {
        backgroundColor: '#55acee',
        height: 100,
        width: 300,
        alignItems: 'center',
        justifyContent: 'center',
    },
    buttonText: {
        color: 'white',
        fontWeight: 'bold',
        fontSize: 24,
    }
});

Additional information about handling touches in your programs can be found in the React Native Documentation.

State

We can use state to alter aspects of our program based on interaction by the user. The initial state of variables are set before our render function. Any functions to be completed should also be defined here along with the changes to any variable values. To use the state variables in your program, we use {this.state.variable}. In the example below, a variable team is being created with the initial state set to "Red". A second variable round is created and set to a value of 1. When the button is pressed, the newState function is called and the team variable is updated to "Blue" and the round variable is updated to 1 more than the previous value.

import React, { Component } from 'react';
import { AppRegistry, View, Text, StyleSheet, TouchableHighlight} from 'react-native';
import Constants from 'expo-constants';

export default class App extends Component {
   state = {
        team: "Red",
        round: 1
    }

    newState = () => {
        this.setState ({
            team: "Blue",
            round: this.state.round + 1
        })
    }

    render() {
        return (
            <View style={styles.container}>
                <TouchableHighlight style={styles.touchableButton}
                onPress = {this.newState}>
                    <Text style={styles.paragraph}>
                        {this.state.team}
                    </Text>
                </TouchableHighlight>
                <Text style={styles.paragraph}>
                    {this.state.round}
                </Text>
            </View>
      );
   }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        alignItems: 'center',
        justifyContent: 'center',
        backgroundColor: 'lightBlue',
    },
    touchableButton: {
        backgroundColor: '#55acee',
        height: 100,
        width: 300,
        alignItems: 'center',
        justifyContent: 'center',
        margin: 20
    },

    paragraph: {
        color: 'darkBlue',
        fontSize: 40,
        textAlign: 'center',
    },
});

Additional Interaction

There are many more features you can add to your React Native programs. Copy and paste the examples below into the editor to see what they do and how to use the features in your programs! Check out the React Native Documentation for more information.

Switch

import React, { Component } from 'react';
import { AppRegistry, View, StyleSheet, Switch} from 'react-native';
import Constants from 'expo-constants';

export default class App extends Component {
    state = {
        switchValue: true
    };

    _handleToggleSwitch = () => this.setState(state => ({
        switchValue: !state.switchValue
    }));

    render() {
        return (
            <View style={styles.container}>
                <Switch
                    onValueChange={this._handleToggleSwitch}
                    value={this.state.switchValue}
                />
            </View>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        alignItems: 'center',
        justifyContent: 'center',
        paddingTop: Constants.statusBarHeight,
    },
});

Text Input

import React, { Component } from 'react';
import { AppRegistry, View, StyleSheet, TextInput} from 'react-native';
import Constants from 'expo-constants';

export default class App extends Component {

    state = {
        inputValue: "Change this text!"
    };

    _handleTextChange = inputValue => {
        this.setState({ inputValue });
    };

    render() {
        return (
            <View style={styles.container}>
                <TextInput
                    value={this.state.inputValue}
                    onChangeText={this._handleTextChange}
                    style={styles.input}
                />
            </View>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        alignItems: 'center',
        justifyContent: 'center',
        paddingTop: Constants.statusBarHeight,
        backgroundColor: '#ecf0f1',
    },
    input: {
        width: 200,
        height: 44,
        padding: 8
    }
});