Responsive Design in React Native

Responsive design means that the layout changes appropriately according to the available screen space.

For example, a dashboard may display cards in a row on a large screen and arrange them differently when less space is available.

• Mobile devices have different screen sizes.
• Users can change device orientation.
• Phones and tablets provide different amounts of space.
• Fixed layouts may not work well on every device.
• Responsive layouts improve usability.

Flexbox is one of the most important tools for creating responsive layouts in React Native.

const styles = StyleSheet.create({

    container: {
        flex: 1,
        flexDirection: 'row'
    },

    item: {
        flex: 1
    }

});

Using flex allows available space to be distributed between components.

const styles = StyleSheet.create({

    container: {
        flex: 1
    }

});

A container with flex: 1 can use the available space inside its parent.

const styles = StyleSheet.create({

    card: {
        width: '90%',
        height: 150
    }

});

Percentage values allow a component to size itself relative to its parent.

const styles = StyleSheet.create({

    container: {
        width: '100%'
    }

});

A percentage width can be useful when the component should occupy the available width of its parent.

const styles = StyleSheet.create({

    container: {
        flex: 1,
        paddingHorizontal: 20
    }

});

Horizontal padding creates space on both sides of the content and helps prevent content from touching the screen edges.

The useWindowDimensions hook provides the current window width and height.

import {
    useWindowDimensions
} from 'react-native';

const { width, height } =
    useWindowDimensions();

console.log(width);
console.log(height);

You can use available width to choose an appropriate text size.

const { width } =
    useWindowDimensions();

const titleSize =
    width > 600 ? 28 : 22;

This can be useful when creating interfaces for different screen sizes.

const { width } =
    useWindowDimensions();

const cardWidth =
    width > 600
        ? 280
        : width - 40;

A larger screen can use a wider card while a smaller screen can use a card that fits within the available space.

const styles = StyleSheet.create({

    row: {
        flexDirection: 'row',
        gap: 10
    },

    item: {
        flex: 1
    }

});

Using flex: 1 allows items to share the available horizontal space.

const styles = StyleSheet.create({

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

    item: {
        width: '48%',
        marginBottom: 10
    }

});

flexWrap allows items to move onto another line when there is not enough horizontal space.

const styles = StyleSheet.create({

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

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

});

This pattern can be used for dashboards and grid-style interfaces.

const styles = StyleSheet.create({

    container: {
        flexDirection: 'column'
    },

    card: {
        width: '100%',
        marginBottom: 15
    }

});

A column layout is useful when content should appear vertically, especially on narrow screens.

const { width } =
    useWindowDimensions();

const isLargeScreen =
    width > 600;

const direction =
    isLargeScreen ? 'row' : 'column';

A layout can choose between row and column based on available width.

const { width } =
    useWindowDimensions();

const styles = {

    container: {
        flexDirection:
            width > 600
                ? 'row'
                : 'column'
    }

};

This technique can help create layouts that change structure on larger and smaller screens.

Images should also be sized according to the available space.

const styles = StyleSheet.create({

    image: {
        width: '100%',
        height: 200,
        resizeMode: 'cover'
    }

});

Using a percentage width can help an image fit the available container width.

const styles = StyleSheet.create({

    button: {
        width: '90%',
        padding: 15,
        alignSelf: 'center'
    }

});

A button can use a percentage width and centered alignment to adapt to different screen sizes.

const styles = StyleSheet.create({

    form: {
        width: '90%',
        alignSelf: 'center'
    },

    input: {
        width: '100%',
        marginBottom: 15
    }

});

Forms should leave enough space around their controls so that they remain comfortable to use on smaller screens.

Dashboard cards can use Flexbox and wrapping to adapt to different screen widths.

const styles = StyleSheet.create({

    dashboard: {
        flexDirection: 'row',
        flexWrap: 'wrap',
        gap: 12
    },

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

});

Avoid using extremely large fixed margins and padding values. Use reasonable spacing that works on different screen sizes.

const styles = StyleSheet.create({

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

    card: {
        marginBottom: 15
    }

});

Important content should consider safe areas, especially around device edges and areas occupied by system UI.

A responsive interface should make sure important buttons, text and other controls remain accessible and visible.

When content can become larger than the available screen height, a ScrollView can allow users to scroll through it.

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

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

</ScrollView>

This is especially useful for forms and long content.

Tablets usually provide more available space than phones. A responsive layout can use that extra space to display more content in a row.

const { width } =
    useWindowDimensions();

const columns =
    width > 600 ? 3 : 2;

The exact layout strategy depends on the application.

A device can be used in portrait or landscape orientation. The available width and height can change when orientation changes.

const {
    width,
    height
} = useWindowDimensions();

const landscape =
    width > height;

This information can be used when an interface needs different layouts for portrait and landscape modes.

import React from 'react';

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

export default function App() {

    const { width } =
        useWindowDimensions();

    const isLargeScreen =
        width > 600;

    return (

        <View style={styles.container}>

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

            <View
                style={[
                    styles.dashboard,
                    {
                        flexDirection:
                            isLargeScreen
                                ? 'row'
                                : 'column'
                    }
                ]}
            >

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

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

            </View>

        </View>

    );

}

const styles = StyleSheet.create({

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

    title: {
        fontSize: 26,
        fontWeight: 'bold',
        marginBottom: 20
    },

    dashboard: {
        gap: 15
    },

    card: {
        flex: 1,
        minHeight: 120,
        padding: 20,
        borderRadius: 12,
        backgroundColor: '#E2E8F0'
    },

    number: {
        fontSize: 28,
        fontWeight: 'bold',
        marginTop: 10
    }

});

This example changes the dashboard direction according to the available window width.

• Using too many fixed width values.
• Making content wider than its parent.
• Ignoring smaller screen sizes.
• Ignoring landscape orientation.
• Using excessive padding or margins.
• Not using Flexbox when the layout can adapt naturally.
• Forgetting to make long content scrollable.
• Using fixed text sizes without considering the design.
• Not testing the interface on multiple screen sizes.

• Use Flexbox for flexible layouts.
• Use percentages when appropriate.
• Use useWindowDimensions for dynamic layouts.
• Use flexWrap when items may need another row.
• Keep reasonable padding and margins.
• Use scrolling for content that may exceed the screen.
• Test portrait and landscape layouts.
• Test both smaller and larger screens.
• Avoid unnecessary hard-coded dimensions.
• Keep the most important content accessible on every screen.

Design the Screen
       ↓
Choose Flexbox Layout
       ↓
Use Flexible Dimensions
       ↓
Add Percentage Widths if Needed
       ↓
Use useWindowDimensions
       ↓
Handle Small Screens
       ↓
Handle Large Screens
       ↓
Consider Orientation
       ↓
Make Long Content Scrollable
       ↓
Test on Different Screen Sizes

Responsive design is an important part of mobile application development. Instead of designing for only one screen size, create layouts that can adapt to the available space.