React Native Components

A component is a reusable piece of a user interface. It can contain UI elements, styling, logic and data.

function Welcome() {

    return (
        <Text>
            Welcome to React Native
        </Text>
    );

}

The Welcome function is a simple React component.

• Components make applications easier to organize.
• Components can be reused.
• Large interfaces can be divided into smaller parts.
• Components can receive data through props.
• Components can manage their own state.
• Components make code easier to maintain.

React Native provides many components that are ready to use.

• View
• Text
• Image
• TextInput
• Button
• Pressable
• ScrollView
• FlatList
• ActivityIndicator
• SafeAreaView

View is one of the most commonly used React Native components. It is used as a container for other components.

import {
    View
} from 'react-native';

<View>

    <Text>
        Hello
    </Text>

</View>

The Text component is used to display text.

import {
    Text
} from 'react-native';

<Text>
    Hello React Native
</Text>

Text can be styled using properties such as fontSize, fontWeight and color.

The Image component displays local or remote images.

import {
    Image
} from 'react-native';

<Image
    source={require('./assets/logo.png')}
    style={{
        width: 100,
        height: 100
    }}
/>

TextInput allows users to enter text.

import {
    TextInput
} from 'react-native';

<TextInput
    placeholder="Enter your name"
/>

It is commonly used in login forms, registration forms and search interfaces.

The Button component provides a simple button.

import {
    Button
} from 'react-native';

<Button
    title="Login"
    onPress={() =>
        console.log('Login')
    }
/>

Pressable can be used to create custom touchable elements.

import {
    Pressable,
    Text
} from 'react-native';

<Pressable
    onPress={() =>
        console.log('Pressed')
    }
>

    <Text>
        Click Me
    </Text>

</Pressable>

ScrollView allows users to scroll through content that does not fit within the available screen space.

import {
    ScrollView,
    Text
} from 'react-native';

<ScrollView>

    <Text>
        Long content goes here.
    </Text>

</ScrollView>

FlatList is designed for rendering lists of data.

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

const students = [
    { id: '1', name: 'Rahul' },
    { id: '2', name: 'Amit' },
    { id: '3', name: 'Priya' }
];

<FlatList
    data={students}
    renderItem={({ item }) => (
        <Text>
            {item.name}
        </Text>
    )}
    keyExtractor={item => item.id}
/>

ActivityIndicator displays a loading indicator.

import {
    ActivityIndicator
} from 'react-native';

<ActivityIndicator
    size="large"
/>

It is useful while data is loading or an operation is in progress.

SafeAreaView can be used to help place content within safe areas of supported devices.

import {
    SafeAreaView,
    Text
} from 'react-native';

<SafeAreaView>

    <Text>
        Safe Content
    </Text>

</SafeAreaView>

StyleSheet is used to organize styles for React Native components.

import {
    StyleSheet
} from 'react-native';

const styles = StyleSheet.create({

    title: {
        fontSize: 24,
        fontWeight: 'bold'
    }

});

Props allow data to be passed from a parent component to a child component.

function Greeting({ name }) {

    return (

        <Text>
            Hello {name}
        </Text>

    );

}

<Greeting name="Rahul" />

The child component receives name through props.

function CourseCard() {

    return (

        <View>

            <Text>
                React Native
            </Text>

            <Text>
                Mobile App Development
            </Text>

        </View>

    );

}

This custom component can be reused wherever a course card is needed.

function CourseCard({ title, fee }) {

    return (

        <View style={styles.card}>

            <Text>
                {title}
            </Text>

            <Text>
                Fee: {fee}
            </Text>

        </View>

    );

}

The same component can display different courses by changing its props.

A component can receive content through the children prop.

function Card({ children }) {

    return (

        <View style={styles.card}>

            {children}

        </View>

    );

}

<Card>

    <Text>
        Student Details
    </Text>

</Card>

A component can use state to store information that can change during application usage.

import React, {
    useState
} from 'react';

function Counter() {

    const [count, setCount] =
        useState(0);

    return (

        <View>

            <Text>
                {count}
            </Text>

            <Button
                title="Increase"
                onPress={() =>
                    setCount(count + 1)
                }
            />

        </View>

    );

}

Interactive components can respond to user events.

<Pressable
    onPress={() => {

        console.log(
            'Button pressed'
        );

    }}
>

    <Text>
        Submit
    </Text>

</Pressable>

Events allow the application to perform actions based on user interaction.

function Child() {

    return (
        <Text>
            Child Component
        </Text>
    );

}

function App() {

    return (

        <View>

            <Text>
                Parent Component
            </Text>

            <Child />

        </View>

    );

}

The App component renders the Child component.

Component composition means building a larger UI by combining smaller components.

App
 ↓
Header
 ↓
ProfileCard
 ↓
CourseCard
 ↓
ActionButton

This approach helps divide a large interface into manageable pieces.

function Dashboard() {

    return (

        <View>

            <Header />

            <ProfileCard />

            <StatsCard />

            <CourseCard />

            <RecentActivity />

        </View>

    );

}

A dashboard can be divided into several reusable components.

function LoginScreen() {

    return (

        <View>

            <Logo />

            <LoginTitle />

            <EmailInput />

            <PasswordInput />

            <LoginButton />

        </View>

    );

}

Breaking a login screen into components can make the code easier to understand and reuse.

As an application grows, components can be organized into separate files and folders.

src/
│
├── components/
│   ├── Header.js
│   ├── Button.js
│   ├── Card.js
│   ├── CourseCard.js
│   └── ProfileCard.js
│
├── screens/
│   ├── Home.js
│   └── Login.js
│
└── App.js

Organizing components makes large projects easier to manage.

• Making one component unnecessarily large.
• Repeating the same UI code instead of creating reusable components.
• Using unclear component names.
• Passing unnecessary props.
• Mixing too much business logic into presentation components.
• Not organizing components into appropriate files.
• Forgetting to import a custom component.
• Using invalid component nesting.

import React from 'react';

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

function CourseCard({
    title,
    duration,
    fee
}) {

    return (

        <View style={styles.card}>

            <Text style={styles.title}>
                {title}
            </Text>

            <Text>
                Duration: {duration}
            </Text>

            <Text style={styles.fee}>
                Fee: {fee}
            </Text>

            <Pressable
                style={styles.button}
                onPress={() =>
                    console.log(
                        'Course selected'
                    )
                }
            >

                <Text style={styles.buttonText}>
                    Start Course
                </Text>

            </Pressable>

        </View>

    );

}

export default function App() {

    return (

        <View style={styles.container}>

            <CourseCard
                title="React Native"
                duration="6 Months"
                fee="₹15000"
            />

            <CourseCard
                title="JavaScript"
                duration="4 Months"
                fee="₹8000"
            />

        </View>

    );

}

const styles = StyleSheet.create({

    container: {
        flex: 1,
        padding: 20,
        gap: 15
    },

    card: {
        padding: 20,
        backgroundColor: 'white',
        borderRadius: 12,
        borderWidth: 1,
        borderColor: '#E2E8F0'
    },

    title: {
        fontSize: 22,
        fontWeight: 'bold',
        marginBottom: 10
    },

    fee: {
        fontSize: 18,
        fontWeight: 'bold',
        marginTop: 10
    },

    button: {
        marginTop: 15,
        padding: 14,
        borderRadius: 8,
        backgroundColor: '#2563EB',
        alignItems: 'center'
    },

    buttonText: {
        color: 'white',
        fontWeight: 'bold'
    }

});

This example demonstrates reusable components with props.

• Give components meaningful names.
• Keep components focused on a clear responsibility.
• Reuse components when the same UI appears multiple times.
• Use props to make components configurable.
• Keep styling organized with StyleSheet.
• Separate large screens into smaller components.
• Organize reusable components in a dedicated folder.
• Avoid unnecessary duplication.
• Keep components easy to read and maintain.

Identify UI Requirement
        ↓
Choose Built-in Components
        ↓
Create Custom Components if Needed
        ↓
Pass Data Using Props
        ↓
Manage State When Required
        ↓
Handle User Events
        ↓
Apply Styles
        ↓
Reuse Components
        ↓
Organize Component Files
        ↓
Build Complete Application

Components are the foundation of React Native development. Understanding how to use built-in components and create reusable custom components will help you build larger and more maintainable mobile applications.