Introduction

In this tutorial, we aim to get you familiar with handling user input and navigation in a React Native app. By the end of this guide, you will be able to capture and respond to user interactions and navigate between different screens in your app.

You will learn:
- How to capture user input using built-in React Native components.
- How to handle user interactions such as button clicks.
- How to navigate between different screens in your app using React Navigation.

Prerequisites:
- Basic understanding of JavaScript and React.
- A working environment with React Native installed.

Step-by-Step Guide

Handling User Input

React Native provides built-in components such as TextInput and Button to handle user inputs.

TextInput

The TextInput component is used to capture text input from the user.

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

Here, onChangeText is a function that gets called every time the text changes, and value is the current text present in the text box.

Button

The Button component is used to create a clickable button.

<Button
  onPress={onPressLearnMore}
  title="Learn More"
  color="#841584"
/>

The onPress function is called when the button is clicked.

Navigation

React Navigation is a popular library for handling navigation in a React Native app. Install it using the npm package manager:

npm install @react-navigation/native

Code Examples

Handling User Input

Let's create a simple login form to demonstrate user input.

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

const LoginForm = () => {
  const [username, setUsername] = useState('');
  const [password, setPassword] = useState('');

  const handleLogin = () => {
    // Handle login functionality here
  };

  return (
    <View>
      <TextInput
        value={username}
        onChangeText={(text) => setUsername(text)}
        placeholder={'Username'}
      />
      <TextInput
        value={password}
        onChangeText={(text) => setPassword(text)}
        placeholder={'Password'}
        secureTextEntry={true}
      />
      <Button title={'Login'} onPress={handleLogin} />
    </View>
  );
};

export default LoginForm;

In this code, we're using React's useState hook to manage our form's state. When the user types into the TextInput fields, the corresponding state variables are updated. When the user presses the 'Login' button, the handleLogin function is called.

Navigation

Let's create two screens and navigate between them. First, install the stack navigator:

npm install @react-navigation/stack

Next, create two screens:

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

const HomeScreen = ({ navigation }) => (
  <View>
    <Text>Home Screen</Text>
    <Button title="Go to Details" onPress={() => navigation.navigate('Details')} />
  </View>
);

const DetailsScreen = () => (
  <View>
    <Text>Details Screen</Text>
  </View>
);

export { HomeScreen, DetailsScreen };

Then, create a stack navigator and include both screens:

import { createStackNavigator } from '@react-navigation/stack';
import { HomeScreen, DetailsScreen } from './screens';

const Stack = createStackNavigator();

const App = () => (
  <NavigationContainer>
    <Stack.Navigator initialRouteName="Home">
      <Stack.Screen name="Home" component={HomeScreen} />
      <Stack.Screen name="Details" component={DetailsScreen} />
    </Stack.Navigator>
  </NavigationContainer>
);

export default App;

In this code, pressing the button in the HomeScreen will navigate to the DetailsScreen.

Summary

You've learned how to handle user input and navigate between screens in a React Native app. You can now create more complex apps with multiple screens and user interactions.

Next, you could learn more about form validation and how to handle more complex navigation scenarios.

Additional resources:
- React Native Documentation
- React Navigation Documentation

Practice Exercises

1. Create a signup form with fields for username, email, and password. Capture the input and print it to the console when a signup button is clicked.
2. Create an app with three screens: Home, About, and Contact. Add navigation between these screens.
3. Extend the app from exercise 2 by passing data between screens.

Remember to test your solutions and understand what each line of code is doing. Happy coding!