Creating Cards in React Native

A card is a container that groups related information together. For example, a course card can contain a course name, image, description, fee and button.

<View style={styles.card}>

    <Text>React Native Course</Text>

</View>

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

<View style={styles.card}>

    <Text>
        Student Information
    </Text>

</View>

The View component acts as the main card container.

const styles = StyleSheet.create({

    card: {
        backgroundColor: 'white'
    }

});

The backgroundColor property controls the card's background color.

const styles = StyleSheet.create({

    card: {
        backgroundColor: 'white',
        padding: 20
    }

});

Padding creates space between the card's content and its edges.

const styles = StyleSheet.create({

    card: {
        margin: 10,
        padding: 20
    }

});

Margin creates space outside the card.

const styles = StyleSheet.create({

    card: {
        padding: 20,
        borderRadius: 12
    }

});

The borderRadius property creates rounded card corners.

const styles = StyleSheet.create({

    card: {
        padding: 20,
        borderWidth: 1,
        borderColor: '#D1D5DB',
        borderRadius: 12
    }

});

Borders can help visually separate a card from its background.

const styles = StyleSheet.create({

    card: {
        width: '90%',
        padding: 20
    }

});

A percentage width can help a card adapt to the available space.

A shadow can give a card a raised appearance. React Native shadow properties can behave differently across platforms.

const styles = StyleSheet.create({

    card: {
        padding: 20,
        borderRadius: 12,
        elevation: 4
    }

});

The elevation property is commonly used for elevation effects on Android.

<View style={styles.card}>

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

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

</View>

Cards can organize a title and supporting information together.

<View style={styles.card}>

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

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

</View>

An image can be placed at the top of a card to make it more informative and visually attractive.

const styles = StyleSheet.create({

    image: {
        width: '100%',
        height: 180,
        borderRadius: 12
    }

});

Rounded images can match the rounded corners of the card.

<View style={styles.card}>

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

    <Text>
        Learn JavaScript basics.
    </Text>

    <Pressable style={styles.button}>

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

    </Pressable>

</View>

Buttons can be placed inside cards to provide actions.

<Pressable
    style={styles.card}
    onPress={() => {
        console.log('Card clicked');
    }}
>

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

</Pressable>

The entire card can be made interactive using Pressable.

A card can have a separate header section.

<View style={styles.card}>

    <View style={styles.header}>

        <Text style={styles.headerText}>
            Course Details
        </Text>

    </View>

    <Text>
        React Native Development
    </Text>

</View>

<View style={styles.card}>

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

    <Text>
        Mobile App Development
    </Text>

    <View style={styles.footer}>

        <Text>
            6 Months
        </Text>

        <Text>
            ₹15000
        </Text>

    </View>

</View>

A footer is useful for displaying additional information or actions.

const styles = StyleSheet.create({

    card: {
        flexDirection: 'row',
        padding: 15,
        borderRadius: 12
    }

});

Using flexDirection: 'row' allows the image and text to appear side by side.

<View style={styles.row}>

    <Text style={styles.icon}>
        ★
    </Text>

    <View>

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

        <Text>
            Advanced learning program
        </Text>

    </View>

</View>

An icon or symbol can be placed beside card content.

<View style={styles.card}>

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

    <Text>
        Mobile App Development
    </Text>

    <Text style={styles.fee}>
        ₹15000
    </Text>

    <Pressable style={styles.button}>

        <Text style={styles.buttonText}>
            Enroll Now
        </Text>

    </Pressable>

</View>

Course cards can display course names, descriptions, fees and actions.

<View style={styles.card}>

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

    <Text>
        Name: Rahul Kumar
    </Text>

    <Text>
        Course: ADCA
    </Text>

    <Text>
        Student ID: SP1001
    </Text>

</View>

Cards are useful for displaying grouped student information in dashboards.

<View>

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

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

</View>

Multiple cards can be placed inside a parent container.

const styles = StyleSheet.create({

    container: {
        flexDirection: 'row',
        flexWrap: 'wrap',
        gap: 10
    },

    card: {
        width: '48%',
        padding: 20,
        borderRadius: 12
    }

});

A wrapping row can be used to create a simple card grid.

const {
    width
} = useWindowDimensions();

const cardWidth =
    width > 600 ? '31%' : '100%';

<View
    style={{
        width: cardWidth
    }}
>

    <Text>
        Responsive Card
    </Text>

</View>

The card width can be changed according to the available screen width.

<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 style={styles.card}>
        <Text>Fees</Text>
        <Text style={styles.number}>
            ₹50000
        </Text>
    </View>

</View>

Dashboard cards are useful for displaying important statistics.

const course = {
    name: 'React Native',
    duration: '6 Months',
    fee: '₹15000'
};

<View style={styles.card}>

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

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

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

</View>

Cards can display data received from variables, APIs or databases.

• Using too much content inside a single card.
• Using excessive padding and margins.
• Making cards too wide on small screens.
• Using fixed dimensions unnecessarily.
• Using poor contrast between text and background.
• Not providing enough spacing between multiple cards.
• Making every element interactive without a clear purpose.
• Ignoring responsive layouts.

import React from 'react';

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

export default function App() {

    return (

        <View style={styles.container}>

            <View style={styles.card}>

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

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

                <Text style={styles.description}>
                    Learn mobile app development
                    using React Native.
                </Text>

                <Text style={styles.fee}>
                    ₹15000
                </Text>

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

                    <Text style={styles.buttonText}>
                        Enroll Now
                    </Text>

                </Pressable>

            </View>

        </View>

    );

}

const styles = StyleSheet.create({

    container: {
        flex: 1,
        alignItems: 'center',
        padding: 20
    },

    card: {
        width: '100%',
        maxWidth: 400,
        padding: 15,
        backgroundColor: 'white',
        borderRadius: 15,
        borderWidth: 1,
        borderColor: '#E2E8F0',
        elevation: 4
    },

    image: {
        width: '100%',
        height: 180,
        borderRadius: 12
    },

    title: {
        fontSize: 22,
        fontWeight: 'bold',
        marginTop: 15
    },

    description: {
        fontSize: 15,
        marginTop: 8
    },

    fee: {
        fontSize: 20,
        fontWeight: 'bold',
        marginTop: 12
    },

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

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

});

• Keep related information together.
• Use consistent padding and spacing.
• Use a reasonable border radius.
• Use readable text sizes.
• Keep card widths responsive.
• Use images only when they add value.
• Use clear buttons for important actions.
• Maintain good contrast.
• Test cards on different screen sizes.
• Avoid putting too much information into one card.

Cards can be reused throughout a real application for many different purposes.

• Course cards
• Product cards
• Student cards
• Profile cards
• Dashboard statistic cards
• Payment cards
• Notification cards
• Blog cards
• Event cards
• Booking cards

Reusable card components help keep application interfaces consistent.

Choose Card Purpose
       ↓
Create View Container
       ↓
Add Background
       ↓
Add Padding
       ↓
Set Border Radius
       ↓
Add Image or Content
       ↓
Add Title and Description
       ↓
Add Button if Required
       ↓
Make Card Responsive
       ↓
Test on Different Screens

Cards are one of the most useful UI patterns in mobile applications. By combining View, Text, Image, Pressable and StyleSheet, you can create reusable and responsive card designs for real-world applications.