How to do it...

1. Let's start by opening App.js and adding our imports. The imports include the UserForm component that we'll be building out in a later step:

import React from 'react';
import {
 Alert,
 StyleSheet,
 ScrollView,
 SafeAreaView,
 Text,
 TextInput,
} from 'react-native';

import UserForm from './UserForm';

1. Since this component is going to be very simple, we are going to create a stateless component for our App. We will only render a top toolbar inside a ScrollView for the UserForm component:

const App = () => (
  <SafeAreaView style={styles.main}>
    <Text style={styles.toolbar}>Fitness App</Text>
    <ScrollView style={styles.content}>
      <UserForm />
    </ScrollView>
  </SafeAreaView>
);

const styles = StyleSheet.create({
  // Defined in a later step
});

export default App; 

1. We need to add some styles to these components. We'll add some colors and padding, as well as setting the main class to flex: 1 to fill the remainder of the screen:

const styles = StyleSheet.create({
  main: {
    flex: 1,
    backgroundColor: '#ecf0f1',
  },
  toolbar: {
    backgroundColor: '#1abc9c',
    padding: 20,
    color: '#fff',
    fontSize: 20,
  },
  content: {
    padding: 10,
  },
});

1. We have defined the main App component. Now let's get to work on the actual form. Let's create a new directory called UserForm in the base of the project and add an index.js file. Then, we'll import all the dependencies for this class:

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

1. This is the class that will render the inputs and keep track of the data. We are going to save the data on the state object, so we'll start by initializing state as an empty object:

export default class UserForm extends Component { 
  state = {}; 

  // Defined in a later step
} 

const styles = StyleSheet.create({ 
 // Defined in a later step
});

1. In the render method, we are going to define the components that we want to display, which in this case are three text inputs and a button. We are going to define a renderTextfield method that accepts a configuration object as a parameter. We'll define the name of the field, the placeholder, and the keyboard type that should be used on the input. In addition, we're also calling a renderButton method that will render the Save button:

  render() {
    return (
      <View style={styles.panel}>
        <Text style={styles.instructions}>
          Please enter your contact information
        </Text>
        {this.renderTextfield({ name: 'name', placeholder: 'Your 
        name' })}
        {this.renderTextfield({ name: 'phone', placeholder: 'Your
        phone number', keyboard: 'phone-pad' })}
        {this.renderTextfield({ name: 'email', placeholder: 'Your 
        email address', keyboard: 'email-address'})}
        {this.renderButton()}
      </View>
    );
  }

1. To render the text fields, we are going to use the TextInput component in our renderTextfield method. This TextInput component is provided by React Native and works on both iOS and Android. The keyboardType property allows us to set the keyboard that we want to use. The four available keyboards on both platforms are default, numeric, email-address, and phone-pad:

  renderTextfield(options) {
    return (
      <TextInput
        style={styles.textfield}
        onChangeText={(value) => this.setState({ [options.name]: 
        value })}
        placeholder={options.label}
        value={this.state[options.name]}
        keyboardType={options.keyboard || 'default'}
      />
    );
  }

1. We already know how to render buttons and respond to the Press action. If this is unclear, I recommend reading the Creating a reusable button with theme support recipe in Chapter 3, Implementing Complex User Interfaces – Part I:

  renderButton() {
    return (
      <TouchableOpacity
        onPress={this.handleButtonPress}
        style={styles.button}
      >
        <Text style={styles.buttonText}>Save</Text>
      </TouchableOpacity>
    );
  }

1. We need to define the onPressButton callback. For simplicity, we'll just show an alert with the input data that we have on the state object:

  handleButtonPress = () => {
    const { name, phone, email } = this.state;

    Alert.alert(`User's data`,`Name: ${name}, Phone: ${phone}, 
    Email: ${email}`);
  }

1. We are almost done with this recipe! All we need to do is apply some styles – some colors, padding, and margins; nothing fancy really:

const styles = StyleSheet.create({
 panel: {
  backgroundColor: '#fff',
  borderRadius: 3,
  padding: 10,
  marginBottom: 20,
 },
 instructions: {
  color: '#bbb',
  fontSize: 16,
  marginTop: 15,
  marginBottom: 10,
 },
 textfield: {
  height: 40,
  marginBottom: 10,
 },
 button: {
  backgroundColor: '#34495e',
  borderRadius: 3,
  padding: 12,
  flex: 1,
 },
 buttonText: {
  textAlign: 'center',
  color: '#fff',
  fontSize: 16,
 },
});

1. If we run our app, we should be able to see a form that uses native controls on both Android and iOS, as expected: