Image Styling in React Native

Image styling means controlling the appearance and layout of an image using React Native style properties.

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

The width and height properties determine the size of the image.

The Image component can be imported from React Native.

import {
    Image
} from 'react-native';

You can then use the component inside your application.

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

const styles = StyleSheet.create({

    image: {
        width: 200,
        height: 150
    }

});

Both width and height should normally be provided when displaying an image.

const styles = StyleSheet.create({

    image: {
        width: 250,
        height: 150
    }

});

The width property controls the horizontal size of the image.

const styles = StyleSheet.create({

    image: {
        width: 200,
        height: 250
    }

});

The height property controls the vertical size of the image.

const styles = StyleSheet.create({

    image: {
        width: 150,
        height: 150
    }

});

Using the same width and height creates a square image area.

The borderRadius property rounds the corners of an image.

const styles = StyleSheet.create({

    image: {
        width: 200,
        height: 150,
        borderRadius: 15
    }

});

A square image can be displayed as a circle by using a borderRadius equal to approximately half of its size.

const styles = StyleSheet.create({

    avatar: {
        width: 120,
        height: 120,
        borderRadius: 60
    }

});

Circular images are commonly used for profile pictures.

You can add a border around an image using borderWidth and borderColor.

const styles = StyleSheet.create({

    image: {
        width: 150,
        height: 150,
        borderWidth: 2,
        borderColor: '#333'
    }

});

const styles = StyleSheet.create({

    image: {
        width: 180,
        height: 180,
        borderWidth: 3,
        borderColor: '#444',
        borderRadius: 90
    }

});

This can create a circular image with a border.

The resizeMode property controls how an image fits inside its defined dimensions.

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

Common values include cover, contain, stretch, repeat, and center.

<Image
    source={require('./assets/photo.jpg')}
    style={{
        width: 300,
        height: 200
    }}
    resizeMode="cover"
/>

cover scales the image so the entire image area is covered. Some parts of the image may be cropped.

<Image
    source={require('./assets/logo.png')}
    style={{
        width: 300,
        height: 200
    }}
    resizeMode="contain"
/>

contain keeps the complete image visible inside the available image area. Empty space may remain around the image.

<Image
    source={require('./assets/photo.jpg')}
    style={{
        width: 300,
        height: 200
    }}
    resizeMode="stretch"
/>

stretch stretches the image to fill the available width and height. This can change the image's original proportions.

<Image
    source={require('./assets/logo.png')}
    style={{
        width: 300,
        height: 200
    }}
    resizeMode="center"
/>

The center mode displays the image centered without scaling it beyond its original size.

Margin creates space outside the image.

const styles = StyleSheet.create({

    image: {
        width: 200,
        height: 150,
        margin: 20
    }

});

An image can be aligned inside a parent using Flexbox.

const styles = StyleSheet.create({

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

    image: {
        width: 200,
        height: 150
    }

});

Here, alignItems: 'center' centers the image horizontally inside the parent.

const styles = StyleSheet.create({

    image: {
        width: '100%',
        height: 220
    }

});

A percentage width can make an image adapt to the width of its parent.

const styles = StyleSheet.create({

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

});

Combining percentage width with an appropriate height can create an image that adapts to different parent widths.

<View style={styles.card}>

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

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

</View>

Images can be combined with text and other components to create cards.

The ImageBackground component can be used when text or other components need to appear over an image.

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

<ImageBackground
    source={require('./assets/banner.jpg')}
    style={styles.banner}
>

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

</ImageBackground>

The opacity property controls how transparent an image appears.

const styles = StyleSheet.create({

    image: {
        width: 200,
        height: 150,
        opacity: 0.7
    }

});

The value normally ranges from 0 to 1.

On supported platforms, shadow-related style properties can be used to create visual depth.

const styles = StyleSheet.create({

    image: {
        width: 180,
        height: 180,
        borderRadius: 15,
        elevation: 5
    }

});

For cross-platform designs, remember that shadow properties can behave differently between platforms.

<Image
    source={require('./assets/photo.jpg')}
    style={[
        styles.image,
        isLarge ? styles.large : styles.small
    ]}
/>

const styles = StyleSheet.create({

    image: {
        borderRadius: 12
    },

    large: {
        width: 300,
        height: 200
    },

    small: {
        width: 150,
        height: 100
    }

});

Multiple styles can be combined based on application conditions.

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

export default function App() {

    const { width } =
        useWindowDimensions();

    return (

        <View>

            <Image
                source={require('./assets/photo.jpg')}
                style={{
                    width: width - 40,
                    height: 220,
                    borderRadius: 15
                }}
                resizeMode="cover"
            />

        </View>

    );

}

The image width changes according to the available window width.

• Forgetting to specify an appropriate image size.
• Using extremely large fixed dimensions.
• Using stretch when preserving image proportions is important.
• Forgetting to choose an appropriate resizeMode.
• Using a very large border radius without a square image.
• Making images wider than their parent container.
• Ignoring different screen sizes.
• Using very large local images unnecessarily.

import React from 'react';

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

export default function App() {

    return (

        <View style={styles.container}>

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

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

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

        </View>

    );

}

const styles = StyleSheet.create({

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

    image: {
        width: 180,
        height: 180,
        borderRadius: 90,
        borderWidth: 3,
        borderColor: '#333',
        marginBottom: 20
    },

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

    description: {
        fontSize: 16,
        marginTop: 8
    }

});

• Always choose appropriate image dimensions.
• Use resizeMode according to the design.
• Use borderRadius carefully.
• Use percentage widths for responsive layouts when appropriate.
• Use useWindowDimensions when image size depends on screen width.
• Use cover when filling a defined image area is important.
• Use contain when the complete image should remain visible.
• Keep image spacing consistent with the rest of the interface.
• Test images on different screen sizes.

Select Image
      ↓
Import Image Component
      ↓
Set Width and Height
      ↓
Choose resizeMode
      ↓
Add Border Radius if Needed
      ↓
Add Border if Needed
      ↓
Add Margin and Alignment
      ↓
Make Image Responsive
      ↓
Test Different Screen Sizes
      ↓
Improve Image Appearance

Image styling becomes easier when you understand dimensions, border radius, resize modes, alignment, spacing, and responsive design. These techniques can be combined to create professional image-based interfaces.