Bootcamp Notes – Day 6 (Wed) – React Native: Week 2: Forms and Modals

React Native Forms and Modals

The first thing you need to understand about Forms in React Native, that there is no direct equivalent to the HTML <form> element. In React, you still had to use components (such as Form and LocalForm) that would render to HTML <form> element in the browser DOM – this is not necessary in React Native.

You will still use components that act similarly to HTML elements that take input from the user:

For example: Choose Yes/No, True/False, On/Off, etc:

• HTML: Radio button
• React Native: Switch component

For example: Choose from multiple options:

• HTML: <option> and <select>
• React Native: Picker and Picker.Item

For example: Enter text:

• HTML: <input>
• React Native: TextInput

• Learn to create a form using these input components: Switch, Picker, and DateTimePicker.
• Use the local component state to store the form data, and write an event handler to handle the form submission.
• Add the new component into the drawer and stack navigation for your application.

• First, install DateTimePicker from React Native Community. To do this, we need to use what’s called a scoped package syntax, which means we use an @ symbol, the name of the community, a forward slash, then the name of the package, as follows:   expo install @react-native-community/datetimepicker

Add a new file named ReservationComponent.js and give it the following content:

ReservationComponent.js

import React, { Component } from 'react';
import { Text, View, ScrollView, StyleSheet,
    Picker, Switch, Button } from 'react-native';
import DateTimePicker from '@react-native-community/datetimepicker';

class Reservation extends Component {

    constructor(props) {
        super(props);

        this.state = {
            campers: 1,
            hikeIn: false,
            date: new Date(),
            showCalendar: false
        };
    }

    static navigationOptions = {
        title: 'Reserve Campsite'
    }

    handleReservation() {
        console.log(JSON.stringify(this.state));
        this.setState({
            campers: 1,
            hikeIn: false,
            date: new Date(),
            showCalendar: false     
        });
    }

    render() {
        return (
            <ScrollView>
                <View style={styles.formRow}>
                    <Text style={styles.formLabel}>Number of Campers</Text>
                    <Picker
                        style={styles.formItem}
                        selectedValue={this.state.campers}
                        onValueChange={itemValue => this.setState({campers: itemValue})}
                    >
                        <Picker.Item label='1' value='1' />
                        <Picker.Item label='2' value='2' />
                        <Picker.Item label='3' value='3' />
                        <Picker.Item label='4' value='4' />
                        <Picker.Item label='5' value='5' />
                        <Picker.Item label='6' value='6' />
                    </Picker>
                </View>
                <View style={styles.formRow}>
                    <Text style={styles.formLabel}>Hike-In?</Text>
                    <Switch
                        style={styles.formItem}
                        value={this.state.hikeIn}
                        trackColor={{true: '#5637DD', false: null}}
                        onValueChange={value => this.setState({hikeIn: value})}
                    />
                </View>
                <View style={styles.formRow}>
                    <Text style={styles.formLabel}>Date</Text>
                    <Button
                        onPress={() =>
                            this.setState({showCalendar: !this.state.showCalendar})
                        }
                        title={this.state.date.toLocaleDateString('en-US')}
                        color='#5637DD'
                        accessibilityLabel='Tap me to select a reservation date'
                    />
                </View>
                {this.state.showCalendar && (
                    <DateTimePicker
                        value={this.state.date}
                        mode={'date'}
                        display='default'
                        onChange={(event, selectedDate) => {
                            selectedDate && this.setState({date: selectedDate, showCalendar: false});
                        }}
                        style={styles.formItem}
                    />
                )}
                <View style={styles.formRow}>
                    <Button
                        onPress={() => this.handleReservation()}
                        title='Search'
                        color='#5637DD'
                        accessibilityLabel='Tap me to search for available campsites to reserve'
                    />
                </View>
            </ScrollView>
        );
    }
}

const styles = StyleSheet.create({
    formRow: {
        alignItems: 'center',
        justifyContent: 'center',
        flex: 1,
        flexDirection: 'row',
        margin: 20
    },
    formLabel: {
        fontSize: 18,
        flex: 2
    },
    formItem: {
        flex: 1
    }
});

export default Reservation;

MainComponent.js

Modals

• Add a Modal component that can be opened from the Reservation component
• Learn to show and hide the modal with an event handler

ReservationComponent.js

Additional Resources:

• React Native – Switch
• React Native – Picker
• React Native – Button
• React Native – AccessibilityLabel
• NPM – Scoped packages
• React Native Community DateTimePicker
• React Native Community on Github
• React Native – Modal
• React Native – Button