10.2 The same but different

User Input

Form Elements

There is no <form /> container element. To organize the layout of your input elements, you can use a standard View component, or a ScrollView component if your form is really long.

TextInput

Use the TextInput component to collect free form text input from the user. This should be a controlled component with a state variable to hold the input value. There is a onChange event to give you full flexibility in your event handler, but there is also a simpler onChangeText event with a simpler API - see example below.

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

const DemoTextInput = () => {
  const [firstName, setFirstName] = React.useState('');
  const [lastName, setLastName] = React.useState('');

  return (
    <View style={{flex: 1}}>
      <TextInput
        style={{ height: 40, borderColor: 'gray', borderWidth: 1 }}
        onChangeText={text => setFirstName(text)}
        value={firstName}
      />

      <TextInput
        style={{ height: 40, borderColor: 'gray', borderWidth: 1 }}
        onChange={event => setLastName(event.nativeEvent.text)}
        value={lastName}
      />
    </View>
  )
}

export default DemoTextInput

Switch

For binary inputs, the HTML checkbox is replace with the Switch component. Like the TextInput, this is a controlled component and there is a convenience event for handling input changes called onValueChange.

<Switch
  trackColor={{false: '#767577', true: '#81b0ff'}}
  thumbColor={isEnabled ? '#f5dd4b' : '#f4f3f4'}
  ios_backgroundColor="#3e3e3e"
  onValueChange={value => setIsEnabled(value)}
  value={isEnabled}
/>

Also, notice there are special props for setting the color of the various visual elements of the <Switch /> component, and you would normally want to conditionally change those colours based on the value (true | false). The behaviour is slightly different between iOS and Android. Check the docs for these props.

Picker

In place of the familiar HTML <select> list. React Native has the Picker component. This component is a community developed component and must be explicitly added to your project.

expo install @react-native-community/picker

Don't forget to import it in your application.

import {Picker} from '@react-native-community/picker'

Suppose we want to ask the user what their favourite programming language is. You will need a state variable language for the controlled component, and then in your JSX ...

<Picker
  selectedValue={language}
  style={{height: 50, width: 100}}
  itemStyle={{color: 'white'}}
  onValueChange={(itemValue, itemIndex) => setLanguage(itemValue) }
>
  <Picker.Item label="JavaScript" value="js" />
  <Picker.Item label="Swift" value="swift" />
  <Picker.Item label="Kotlin" value="kotlin" />
  <Picker.Item label="Java" value="java" />
</Picker>

SegmentedControl

Where is the good old radio button? Oh right, no HTML. Instead we have the native UI SegmentedControl. This is also a community developed component.

expo install @react-native-community/segmented-control

Don't forget to import it in your application.

import SegmentedControl from '@react-native-community/segmented-control'

Then in your JSX ...

const [languageIndex, setLanguageIndex] = React.useState(1)

return (
  <SegmentedControl
    values={['JavaScript', 'Swift', 'Kotlin']}
    selectedIndex={languageIndex}
    onChange={event => setLanguageIndex(event.nativeEvent.selectedSegmentIndex)}
  />
)

Images

For displaying images import the Image component from react-native.

To choose and image from the camera roll, you need the ImagePicker component from Expo.