Dimensions in React Native

Dimensions describe the size of a component or available screen space. The most common dimension properties are width and height.

const styles = StyleSheet.create({

    box: {
        width: 200,
        height: 100
    }

});

The width property controls the horizontal size of a component.

const styles = StyleSheet.create({

    box: {
        width: 200
    }

});

The value is normally a number or a percentage string.

The height property controls the vertical size of a component.

const styles = StyleSheet.create({

    box: {
        height: 100
    }

});

const styles = StyleSheet.create({

    box: {
        width: 250,
        height: 150,
        backgroundColor: 'lightblue'
    }

});

Both properties can be used together to create a fixed-size component.

React Native commonly uses numbers for dimensions.

const styles = StyleSheet.create({

    box: {
        width: 200,
        height: 100,
        margin: 20
    }

});

Unlike traditional CSS, you normally do not write 200px for a numeric React Native style value.

Percentage values can be used when a component should occupy a percentage of its parent's available size.

const styles = StyleSheet.create({

    box: {
        width: '80%',
        height: 100
    }

});

Percentage dimensions are relative to the parent layout.

const styles = StyleSheet.create({

    box: {
        width: '100%',
        padding: 20
    }

});

A width of 100% can make a component occupy the available width of its parent.

For screen layouts, Flexbox is often more flexible than using a fixed height.

const styles = StyleSheet.create({

    container: {
        flex: 1
    }

});

This allows the container to use available space.

React Native provides the Dimensions API for reading screen and window dimensions.

import {
    Dimensions
} from 'react-native';

You can then read the available window or screen size.

import {
    Dimensions
} from 'react-native';

const windowWidth =
    Dimensions.get('window').width;

const windowHeight =
    Dimensions.get('window').height;

console.log(windowWidth);
console.log(windowHeight);

This gives the current window dimensions available through the Dimensions API.

const screenWidth =
    Dimensions.get('screen').width;

const screenHeight =
    Dimensions.get('screen').height;

console.log(screenWidth);
console.log(screenHeight);

The screen dimensions represent the device screen dimensions as reported by React Native.

import {
    Dimensions,
    StyleSheet
} from 'react-native';

const { width } =
    Dimensions.get('window');

const styles = StyleSheet.create({

    container: {
        width: width
    }

});

The available width can be used when a layout specifically needs a dimension value.

const { width } =
    Dimensions.get('window');

const boxWidth =
    width / 2;

const styles = StyleSheet.create({

    box: {
        width: boxWidth,
        height: 120
    }

});

This can be useful for certain two-column layouts, although Flexbox is often preferable for responsive designs.

A square component can use the same value for width and height.

const styles = StyleSheet.create({

    box: {
        width: 100,
        height: 100,
        borderRadius: 10
    }

});

This pattern is useful for icons, avatars and small cards.

A square component can become circular by using an appropriate borderRadius.

const styles = StyleSheet.create({

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

});

For a circle, the border radius is typically half the width and height when those dimensions are equal.

The maxWidth property can limit how wide a component can become.

const styles = StyleSheet.create({

    content: {
        width: '100%',
        maxWidth: 500
    }

});

This can be useful when creating layouts that should not grow beyond a certain size.

The minWidth property can define a minimum width.

const styles = StyleSheet.create({

    box: {
        minWidth: 100
    }

});

It can help prevent a component from becoming too narrow.

The maxHeight property limits how tall a component can become.

const styles = StyleSheet.create({

    content: {
        maxHeight: 300
    }

});

This can be useful for areas where content should remain within a controlled size.

The minHeight property specifies a minimum height.

const styles = StyleSheet.create({

    card: {
        minHeight: 100
    }

});

The component can grow beyond this value when the layout allows it.

The available width and height can change when the device orientation changes.

const { width, height } =
    Dimensions.get('window');

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

For layouts that must react to dimension changes, use a responsive approach rather than relying only on a value captured once.

React Native also provides the useWindowDimensions hook. It is useful when a component needs to react to changes in the window dimensions.

import {
    useWindowDimensions
} from 'react-native';

export default function App() {

    const {
        width,
        height
    } = useWindowDimensions();

    return (
        <View>

            <Text>
                Width: {width}
            </Text>

            <Text>
                Height: {height}
            </Text>

        </View>
    );

}

import {
    useWindowDimensions
} from 'react-native';

export default function App() {

    const { width } =
        useWindowDimensions();

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

    return (
        <View>

            <View
                style={{
                    width: cardWidth,
                    height: 150
                }}
            >

                <Text>
                    Responsive Card
                </Text>

            </View>

        </View>
    );

}

The layout can choose different dimensions depending on the available window width.

const styles = StyleSheet.create({

    container: {
        width: '100%'
    },

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

});

Percentage values are useful when a component should scale relative to its parent.

Flexbox is usually preferred when the goal is to distribute available space rather than calculate exact dimensions.

const styles = StyleSheet.create({

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

    item: {
        flex: 1
    }

});

This allows multiple items to share the available width.

import React from 'react';

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

export default function App() {

    const { width } =
        useWindowDimensions();

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

    return (

        <View style={styles.container}>

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

            <View
                style={[
                    styles.card,
                    {
                        width: cardWidth
                    }
                ]}
            >

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

                <Text>
                    Screen Width: {Math.round(width)}
                </Text>

            </View>

        </View>

    );

}

const styles = StyleSheet.create({

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

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

    card: {
        minHeight: 150,
        padding: 20,
        backgroundColor: 'white',
        borderRadius: 12
    },

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

});

This example uses useWindowDimensions to create a layout that responds to the available window width.

• Using too many fixed width and height values.
• Using px strings instead of numeric dimensions where appropriate.
• Forgetting that percentage dimensions depend on the parent.
• Using screen dimensions when window dimensions are more appropriate.
• Calculating dimensions once when the layout needs to respond to changes.
• Ignoring smaller screen sizes.
• Creating horizontal overflow by making children wider than their container.
• Not considering Flexbox for layouts that can adapt automatically.

• Use Flexbox for most screen-level layouts.
• Use fixed dimensions for elements that genuinely need a specific size.
• Use percentages when sizing relative to a parent is appropriate.
• Use useWindowDimensions when the UI needs to react to window size changes.
• Use maxWidth and minWidth where appropriate.
• Test layouts on different screen sizes and orientations.
• Avoid unnecessary hard-coded dimensions.
• Keep enough padding and spacing around content.
• Design layouts that can adapt to different devices.

Design Component
       ↓
Choose Width / Height
       ↓
Decide Fixed or Responsive
       ↓
Use Flexbox When Appropriate
       ↓
Use Percentage When Useful
       ↓
Read Window Dimensions if Needed
       ↓
Use useWindowDimensions for Dynamic Layouts
       ↓
Check Minimum / Maximum Size
       ↓
Test Different Screens
       ↓
Improve Responsive Design

Understanding dimensions allows you to create interfaces that fit different mobile screens. In most cases, combining Flexbox with percentages and responsive dimension hooks provides more flexible layouts than relying only on fixed width and height values.