Show List
Tutorials > React Native > Building UI components with React Native

Building UI components with React Native

React Native provides a number of built-in components that you can use to build the user interface of your app. These components are designed to look and feel like native mobile components, and they can be customized to suit your needs.

Here are a few examples of common UI components in React Native and how to use them:

  1. View: The View component is a container for other components, and it's used to define a section of the user interface. You can use it to add padding, margin, and other styles to your UI. For example:
import React from 'react';
import { View, Text } from 'react-native';

const MyComponent = () => (
  <View style={{ padding: 20 }}>
    <Text>Hello, world!</Text>
  </View>
);

export default MyComponent;
  1. Text: The Text component is used to display text in your UI. For example:
import React from 'react';
import { Text } from 'react-native';

const MyComponent = () => (
  <Text>Hello, world!</Text>
);

export default MyComponent;
  1. Image: The Image component is used to display images in your UI. For example:
import React from 'react';
import { Image } from 'react-native';

const MyComponent = () => (
  <Image
    source={{ uri: 'https://picsum.photos/200' }}
    style={{ width: 200, height: 200 }}
  />
);

export default MyComponent;
  1. Button: The Button component is used to display buttons in your UI. For example:
import React from 'react';
import { Button, View, Text } from 'react-native';

const MyComponent = () => (
  <View style={{ padding: 20 }}>
    <Button
      title="Click Me"
      onPress={() => alert('Button was pressed!')}
    />
  </View>
);

export default MyComponent;
These are just a few examples of the UI components available in React Native. There are many more components available, including input fields, lists, and navigation components, among others. By using these components, you can quickly and easily build the UI of your React Native app.


Next: Using Flexbox for layout and styling

    Leave a Comment

  • captcha text