Designing Mobile UI in React Native

Mobile UI is the visual part of a mobile application that users see and interact with.

It includes:

• Text
• Buttons
• Images
• Forms
• Cards
• Menus
• Navigation
• Lists

A typical mobile application UI contains several important areas.

Header
   ↓
Content
   ↓
Cards / Forms / Lists
   ↓
Actions
   ↓
Navigation

The exact structure depends on the purpose of the application.

The View component is one of the most important components for creating a mobile UI.

<View style={styles.container}>

    <Text>
        Welcome
    </Text>

</View>

It can be used to group and arrange other components.

<View style={styles.header}>

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

</View>

A header usually contains the screen title, logo, menu or other important actions.

const styles = StyleSheet.create({

    header: {
        padding: 20,
        backgroundColor: '#2563EB',
        alignItems: 'center'
    },

    title: {
        fontSize: 22,
        fontWeight: 'bold',
        color: 'white'
    }

});

<View style={styles.content}>

    <Text style={styles.heading}>
        Dashboard
    </Text>

    <Text>
        Welcome to your dashboard.
    </Text>

</View>

The content area contains the main information and actions of a screen.

Proper spacing makes a UI easier to read and interact with.

const styles = StyleSheet.create({

    content: {
        padding: 20
    },

    heading: {
        marginBottom: 15
    }

});

Avoid placing too many elements close together.

Typography controls how text appears in the interface.

const styles = StyleSheet.create({

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

    description: {
        fontSize: 16,
        lineHeight: 24
    }

});

Use larger and stronger text for important headings and readable text sizes for descriptions.

Colors help users understand different sections and actions.

const styles = StyleSheet.create({

    primaryButton: {
        backgroundColor: '#2563EB'
    },

    successButton: {
        backgroundColor: '#16A34A'
    },

    dangerButton: {
        backgroundColor: '#DC2626'
    }

});

Use colors consistently throughout the application.

<Pressable style={styles.button}>

    <Text style={styles.buttonText}>
        Continue
    </Text>

</Pressable>

Buttons should clearly communicate the action they perform.

const styles = StyleSheet.create({

    button: {
        backgroundColor: '#2563EB',
        padding: 15,
        borderRadius: 10,
        alignItems: 'center'
    },

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

});

Mobile users interact with their fingers. Buttons and interactive elements should therefore have enough space to tap comfortably.

const styles = StyleSheet.create({

    button: {
        paddingVertical: 14,
        paddingHorizontal: 20,
        borderRadius: 10
    }

});

Avoid making important controls extremely small.

<View style={styles.card}>

    <Text style={styles.title}>
        React Native Course
    </Text>

    <Text style={styles.description}>
        Learn mobile application development.
    </Text>

    <Pressable style={styles.button}>

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

    </Pressable>

</View>

<Image
    source={require('./assets/course.jpg')}
    style={styles.image}
    resizeMode="cover"
/>

Images can be used for logos, profiles, products, courses and banners.

<View style={styles.profile}>

    <Image
        source={require('./assets/user.jpg')}
        style={styles.avatar}
    />

    <Text style={styles.name}>
        Rahul Kumar
    </Text>

    <Text>
        React Native Student
    </Text>

</View>

<View style={styles.form}>

    <Text style={styles.label}>
        Email
    </Text>

    <TextInput
        style={styles.input}
        placeholder="Enter email"
    />

    <Text style={styles.label}>
        Password
    </Text>

    <TextInput
        style={styles.input}
        placeholder="Enter password"
        secureTextEntry
    />

</View>

Forms should provide clear labels and enough spacing between controls.

const styles = StyleSheet.create({

    input: {
        borderWidth: 1,
        borderColor: '#CBD5E1',
        borderRadius: 10,
        padding: 14,
        fontSize: 16,
        marginBottom: 15
    }

});

When a screen contains more content than the available height, use ScrollView.

<ScrollView
    contentContainerStyle={{
        padding: 20
    }}
>

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

</ScrollView>

<View style={styles.dashboard}>

    <View style={styles.card}>
        <Text>Students</Text>
        <Text style={styles.number}>
            250
        </Text>
    </View>

    <View style={styles.card}>
        <Text>Courses</Text>
        <Text style={styles.number}>
            12
        </Text>
    </View>

</View>

Dashboard cards can display important statistics at a glance.

const styles = StyleSheet.create({

    row: {
        flexDirection: 'row',
        alignItems: 'center',
        gap: 12
    }

});

Rows are useful for menus, icons with text, profile information and horizontal actions.

const styles = StyleSheet.create({

    container: {
        flexDirection: 'column',
        gap: 15
    }

});

Column layouts are commonly used for forms, profiles and vertical content.

const {
    width
} = useWindowDimensions();

const layout =
    width > 600
        ? 'row'
        : 'column';

The UI can change its layout based on the available screen width.

Important UI content should not be placed where it can conflict with system areas such as device edges or other system UI.

Safe-area handling is particularly important for headers, navigation controls and other content close to screen edges.

<View style={styles.container}>

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

    <TextInput
        style={styles.input}
        placeholder="Email"
    />

    <TextInput
        style={styles.input}
        placeholder="Password"
        secureTextEntry
    />

    <Pressable style={styles.button}>

        <Text style={styles.buttonText}>
            Login
        </Text>

    </Pressable>

</View>

<ScrollView>

    <View style={styles.container}>

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

        <View style={styles.card}>
            <Text>
                Featured Course
            </Text>
        </View>

        <View style={styles.card}>
            <Text>
                Latest Updates
            </Text>
        </View>

    </View>

</ScrollView>

A home screen normally brings together several UI patterns into one complete screen.

• Putting too much information on one screen.
• Using very small buttons.
• Using inconsistent spacing.
• Using too many colors.
• Using poor text contrast.
• Making content wider than the screen.
• Ignoring smaller screens.
• Not making long screens scrollable.
• Using unclear button labels.
• Not testing the UI on different devices.

import React from 'react';

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

export default function App() {

    return (

        <ScrollView>

            <View style={styles.container}>

                <View style={styles.header}>

                    <Text style={styles.headerText}>
                        Student App
                    </Text>

                </View>

                <View style={styles.profile}>

                    <Image
                        source={require('./assets/user.jpg')}
                        style={styles.avatar}
                    />

                    <Text style={styles.name}>
                        Rahul Kumar
                    </Text>

                    <Text>
                        React Native Student
                    </Text>

                </View>

                <View style={styles.card}>

                    <Text style={styles.cardTitle}>
                        React Native Course
                    </Text>

                    <Text>
                        Learn mobile application development.
                    </Text>

                    <Pressable style={styles.button}>

                        <Text style={styles.buttonText}>
                            Continue
                        </Text>

                    </Pressable>

                </View>

            </View>

        </ScrollView>

    );

}

const styles = StyleSheet.create({

    container: {
        flex: 1,
        padding: 20,
        backgroundColor: '#F8FAFC'
    },

    header: {
        padding: 18,
        borderRadius: 12,
        backgroundColor: '#2563EB',
        alignItems: 'center'
    },

    headerText: {
        color: 'white',
        fontSize: 22,
        fontWeight: 'bold'
    },

    profile: {
        alignItems: 'center',
        marginVertical: 25
    },

    avatar: {
        width: 100,
        height: 100,
        borderRadius: 50,
        marginBottom: 12
    },

    name: {
        fontSize: 22,
        fontWeight: 'bold'
    },

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

    cardTitle: {
        fontSize: 20,
        fontWeight: 'bold',
        marginBottom: 10
    },

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

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

});

• Keep the interface simple and easy to understand.
• Use consistent colors throughout the application.
• Maintain consistent spacing.
• Use readable typography.
• Make interactive elements easy to tap.
• Use responsive layouts.
• Keep important actions easy to find.
• Use scrolling when content exceeds the available screen.
• Give users clear feedback after important actions.
• Test the interface on different screen sizes.

Instead of writing the same UI code repeatedly, create reusable components.

function CourseCard({ title, fee }) {

    return (

        <View style={styles.card}>

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

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

        </View>

    );

}

Reusable components make larger applications easier to maintain.

Plan the Screen
       ↓
Create Main Container
       ↓
Create Header
       ↓
Create Content Area
       ↓
Add Text and Images
       ↓
Create Cards
       ↓
Add Forms or Buttons
       ↓
Add Spacing and Colors
       ↓
Make Layout Responsive
       ↓
Test on Different Screens

A professional mobile UI is created by combining layout, typography, colors, spacing, images, cards, buttons, forms and responsive design. These concepts form the foundation for building real-world React Native applications.