What is React Native?

React Native is a framework for building mobile applications using JavaScript and React.

It allows you to write mobile applications that run on iOS and Android using a single codebase.

Try changing the code below to see how it affects the app:

Tip

You’ll notice a button in the top left of the Snack above that looks like a square with an arrow coming out:

This button allows you to open the Snack in a new window.

You might find this useful if you want to see the Snack in a larger window, or arrange this page and the Snack side by side.

1. The View Component

Understanding View

The View component is a fundamental building block in React Native.

It is a container that supports layout with flexbox, style, touch handling, and accessibility controls.

Creating a Simple View

Replace the code in the Snack editor with the following to create a simple View component:

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

const ViewExample = () => {
  return (
    <View style={styles.container}>
      <View style={styles.box} />
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  box: {
    width: 100,
    height: 100,
    backgroundColor: 'blue',
  },
});

export default ViewExample;

Look carefully at how the styles object is used to style the View components.

Challenge

1. Modify the box style to change the background color to red.
2. Add another View inside the container with a different size and color.
3. Try changing the justifyContent and alignItems properties of the container style to see how they affect the layout. Some possible values to try are:

• 'flex-start'
• 'center'
• 'flex-end'
• 'space-between'
• 'space-around'

2: Introduction to Text Component

Understanding Text

The Text component is used to display text in your app. It supports nesting, styling, and touch handling.

Creating a Simple Text

Replace the code in your Snack editor with the following to create a simple Text component:

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

const TextExample = () => {
  return (
    <View style={styles.container}>
      <Text style={styles.text}>Hello, React Native!</Text>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  text: {
    fontSize: 20,
    color: 'black',
  },
});

export default TextExample;

Again, look carefully at how the styles object is used to style the Text component.

Challenge

1. Change the text to display your own message.
2. Change the text style to increase the font size to 30.
3. Add another Text component with different text and style.

3: Handling Text Input in React Native

Understanding TextInput

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

It supports various properties to handle user input, styling, and events. Details about the TextInput component can be found in the official documentation.

Creating a Simple TextInput

Replace the code in your Snack editor with the following to create a simple TextInput component:

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

const TextInputExample = () => {
  const [text, setText] = useState('');

  return (
    <View style={styles.container}>
      <TextInput
        style={styles.input}
        placeholder="Type here..."
        onChangeText={setText}
        value={text}
      />
      <Text style={styles.text}>You typed: {text}</Text>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    padding: 16,
  },
  input: {
    height: 40,
    borderColor: 'gray',
    borderWidth: 1,
    paddingHorizontal: 8,
    width: '80%',
    marginBottom: 12,
  },
  text: {
    fontSize: 18,
  },
});

export default TextInputExample;

Look carefully at how the TextInput component is used to capture and display user input.

The useState hook is used to manage the input value. The onChangeText prop is used to update the input value when the user types.

Challenge

1. Change the placeholder text to something else.
2. Modify the input style to change the border color to blue.
3. Add another TextInput component below the first one and display its value in a separate Text component.

More React Native Components

React Native provides a wide range of components to build mobile applications. Some commonly used components include:

1. Button: A button component to handle user interactions.
2. Switch: A switch component to toggle between two states.
3. Image: An image component to display images.
4. ScrollView: A scrollable container to display content.
5. FlatList: A component to render lists efficiently.
6. Modal: A modal component to display content on top of other content.
7. Pressable: A component to handle press interactions.

Visit each of the links above and explore these components further.

Platform-Specific Components

React Native also provides platform-specific components like:

• SafeAreaView: A component to handle safe area insets on iOS.

or

• DrawerLayoutAndroid: A component to create a drawer layout on Android.