10 Essential React Native UI Components for Beautiful Apps

In this tutorial, we will explore 10 essential React Native UI components that are crucial for building beautiful and functional mobile apps. React Native is a popular JavaScript framework that allows developers to build native mobile applications using React, a JavaScript library for building user interfaces. These UI components will help you create stunning and intuitive user interfaces for your React Native apps.

Introduction

What is React Native?

React Native is a framework that allows you to build mobile apps using JavaScript and React. It allows you to write code once and deploy it on multiple platforms, such as iOS and Android. React Native uses native components instead of web components, which results in better performance and a more native-like experience for users.

Benefits of React Native

Some of the key benefits of using React Native for mobile app development are:

1. Code Reusability: With React Native, you can write code once and use it across multiple platforms, saving time and effort.

2. Performance: React Native uses native components, which results in better performance compared to hybrid frameworks.

3. Hot Reloading: React Native's hot reloading feature allows developers to see the changes in real-time without recompiling the entire app.

4. Large Community: React Native has a large and active community, which means you can find plenty of resources, libraries, and support.

Importance of UI Components

UI components play a crucial role in creating a visually appealing and user-friendly interface for your React Native apps. These components provide the building blocks for your app's user interface and allow you to create reusable and modular code. In this tutorial, we will explore 10 essential React Native UI components that will help you create beautiful and functional apps.

1. Button Component

The button component is one of the most commonly used UI components in mobile apps. It allows users to perform actions by tapping on it. In React Native, the button component is provided by the Button class from the react-native package. Here's an example of a basic button component:

import React from 'react';
import { Button } from 'react-native';

const App = () => {
  const onPressButton = () => {
    console.log('Button pressed');
  };

  return (
    <Button
      title="Press me"
      onPress={onPressButton}
    />
  );
};

export default App;

In the above example, we import the Button component from the react-native package. We define an onPressButton function that logs a message when the button is pressed. The Button component is rendered with a title prop and an onPress prop that specifies the function to be called when the button is pressed.

Usage

The Button component can be customized using various props. Some of the commonly used props are:

• title: Specifies the text to be displayed on the button.
• color: Sets the background color of the button.
• disabled: Disables the button if set to true.
• onPress: Specifies the function to be called when the button is pressed.

Styling Options

The Button component does not provide extensive styling options. However, you can use CSS-in-JS libraries like styled-components or inline styles to customize the appearance of the button.

Event Handling

To handle button press events, you can pass a function to the onPress prop of the Button component. This function will be called when the button is pressed. You can perform any desired action inside this function, such as updating the state or making API calls.

2. Text Input Component

The text input component is used to capture user input in the form of text. In React Native, the text input component is provided by the TextInput class from the react-native package. Here's an example of a basic text input component:

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

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

  const onChangeText = (value) => {
    setText(value);
  };

  return (
    <TextInput
      value={text}
      onChangeText={onChangeText}
    />
  );
};

export default App;

In the above example, we import the TextInput component from the react-native package. We define a state variable text and a function setText using the useState hook. The TextInput component is rendered with a value prop that is set to the text state variable and an onChangeText prop that specifies the function to be called when the text input changes.

Input Validation

You can perform input validation by checking the value of the text input and displaying error messages or disabling buttons based on the input. You can use regular expressions or custom validation functions to validate the input.

Placeholder Text

The TextInput component supports the placeholder prop, which allows you to display a hint or example text inside the input field. This text is displayed when the input is empty and disappears when the user starts typing.

Keyboard Types

The TextInput component supports various keyboard types, such as numeric, email, phone, and default. You can set the keyboardType prop to specify the type of keyboard to be displayed.

3. Image Component

The image component is used to display images in your React Native apps. In React Native, the image component is provided by the Image class from the react-native package. Here's an example of a basic image component:

import React from 'react';
import { Image } from 'react-native';

const App = () => {
  return (
    <Image
      source={require('./image.jpg')}
    />
  );
};

export default App;

In the above example, we import the Image component from the react-native package. We render the Image component with a source prop that specifies the image file to be displayed. The require function is used to load the image from the local file system.

Local and Remote Images

The Image component supports both local and remote images. For local images, you can use the require function to load the image from the local file system. For remote images, you can use the source prop with a URL to the image.

Image Loading

To display images from remote URLs, you need to handle image loading states. You can use the onLoadStart, onLoad, and onError props of the Image component to handle these states and display loading indicators or error messages.

Image Resizing

You can resize images using the resizeMode prop of the Image component. The available options are cover, contain, stretch, repeat, and center. These options allow you to control how the image is resized and displayed within its container.

4. List Component

The list component is used to display a list of items in your React Native apps. In React Native, the list component is provided by the FlatList class from the react-native package. Here's an example of a basic list component:

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

const App = () => {
  const data = [
    { id: '1', title: 'Item 1' },
    { id: '2', title: 'Item 2' },
    { id: '3', title: 'Item 3' },
  ];

  const renderItem = ({ item }) => (
    <View>
      <Text>{item.title}</Text>
    </View>
  );

  return (
    <FlatList
      data={data}
      renderItem={renderItem}
    />
  );
};

export default App;

In the above example, we import the FlatList, Text, and View components from the react-native package. We define a data array that contains the list items. We define a renderItem function that renders each item in the list using the Text and View components. The FlatList component is rendered with a data prop that is set to the data array and a renderItem prop that specifies the function to be called for rendering each item.

Rendering Lists

The FlatList component efficiently renders large lists by only rendering the items that are currently visible on the screen. It uses the data prop to determine the list of items and the renderItem prop to render each item.

Scrolling Performance

To improve scrolling performance, you can use the keyExtractor prop of the FlatList component to specify a unique key for each item in the list. This helps React Native optimize the rendering process and improve performance.

List Item Customization

You can customize the appearance of list items by modifying the renderItem function. You can use the Text, View, and other components to create complex list item layouts and styles.

5. Modal Component

The modal component is used to display content on top of the current screen in your React Native apps. In React Native, the modal component is provided by the Modal class from the react-native package. Here's an example of a basic modal component:

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

const App = () => {
  const [modalVisible, setModalVisible] = useState(false);

  const toggleModal = () => {
    setModalVisible(!modalVisible);
  };

  return (
    <View>
      <Button
        title="Open Modal"
        onPress={toggleModal}
      />

      <Modal
        visible={modalVisible}
        animationType="slide"
        onRequestClose={toggleModal}
      >
        <View>
          <Text>This is a modal</Text>
          <Button
            title="Close Modal"
            onPress={toggleModal}
          />
        </View>
      </Modal>
    </View>
  );
};

export default App;

In the above example, we import the Button, Modal, Text, and View components from the react-native package. We define a state variable modalVisible and a function setModalVisible using the useState hook. We define a toggleModal function that toggles the visibility of the modal. The Button component is rendered with an onPress prop that calls the toggleModal function. The Modal component is rendered with a visible prop that is set to the modalVisible state variable, an animationType prop that specifies the type of animation to be used when showing or hiding the modal, and an onRequestClose prop that specifies the function to be called when the user tries to close the modal.

Creating Modals

To create a modal, you need to render the Modal component and wrap the content you want to display inside it. You can control the visibility of the modal by setting the visible prop to true or false.

Modal Animation

The Modal component supports various animation types, such as none, slide, and fade. You can set the animationType prop to specify the type of animation to be used when showing or hiding the modal.

Modal Dismissal

To dismiss the modal, you can use a close button or a gesture. You can set the onRequestClose prop of the Modal component to specify the function to be called when the user tries to close the modal.

6. Navigation Component

The navigation component is used to navigate between screens in your React Native apps. React Navigation is a popular library for handling navigation in React Native apps. It provides various navigation components, such as stack navigation, tab navigation, and drawer navigation. Here's an example of stack navigation:

import React from 'react';
import { Button, View } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';

const HomeScreen = ({ navigation }) => {
  const goToDetails = () => {
    navigation.navigate('Details');
  };

  return (
    <View>
      <Button
        title="Go to Details"
        onPress={goToDetails}
      />
    </View>
  );
};

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

const Stack = createStackNavigator();

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

        <Stack.Screen
          name="Details"
          component={DetailsScreen}
        />
      </Stack.Navigator>
    </NavigationContainer>
  );
};

export default App;

In the above example, we import the Button, Text, View, NavigationContainer, createStackNavigator, and other components from the respective packages. We define a HomeScreen component that renders a button to navigate to the details screen. We define a goToDetails function that uses the navigation.navigate function to navigate to the details screen. We define a DetailsScreen component that displays some text. We create a Stack navigator using the createStackNavigator function. We render the NavigationContainer and the Stack.Navigator components, and specify the screen components using the Stack.Screen components.

Stack Navigation

Stack navigation allows you to navigate between screens using a stack-based approach. When you navigate to a new screen, it is added to the top of the stack. You can go back to the previous screen by pressing the back button or using the navigation.goBack function.

Tab Navigation

Tab navigation allows you to navigate between screens using tabs at the bottom or top of the screen. Each tab represents a different screen. You can switch between screens by tapping on the tabs.

Drawer Navigation

Drawer navigation allows you to navigate between screens using a drawer or sidebar menu. The drawer can be opened by swiping from the left or right edge of the screen or by tapping on a button. It provides a convenient way to access different screens in your app.

Conclusion

In this tutorial, we explored 10 essential React Native UI components that are crucial for building beautiful and functional mobile apps. We covered the button component for performing actions, the text input component for capturing user input, the image component for displaying images, the list component for rendering lists, the modal component for displaying content on top of the current screen, and the navigation component for navigating between screens. By using these UI components effectively, you can create stunning and intuitive user interfaces for your React Native apps. Happy coding!