Make images adaptable to different screen sizes

[dreaminglucid]

To make images adaptable to different screen sizes, you can make the following updates to your existing code:

• Dynamic Sizing: Use the Dimensions API to get the width and height of the device screen and set the image dimensions accordingly.
• Aspect Ratio: Maintain the aspect ratio to ensure the image doesn't get distorted when resized.

Here are the relevant code modifications to make your images adaptable to different screen sizes:

Import Dimensions from React Native:

import { Dimensions } from 'react-native';

Get the screen width:

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

Use this screenWidth to define your image styles dynamically:

imageContainer: {
    width: screenWidth,
    height: screenWidth * 0.75,  // you can adjust this ratio according to your needs
    backgroundColor: theme.colors.primary,
    overflow: 'hidden',
},
image: {
    width: screenWidth,
    height: screenWidth * 0.75,
},

Your updated getStyles method will look something like this:

const getStyles = (theme) => {
    const screenWidth = Dimensions.get('window').width; // New code
    return StyleSheet.create({
        // ... other styles
        imageContainer: {
            width: screenWidth,
            height: screenWidth * 0.75,  // Adjust according to your needs
            backgroundColor: theme.colors.primary,
            overflow: 'hidden',
        },
        image: {
            width: screenWidth,
            height: screenWidth * 0.75, // Adjust according to your needs
        },
        // ... other styles
    });
};

This ensures that the image will adapt to the width of different devices while maintaining its aspect ratio. Feel free to adjust the 0.75 multiplier according to your specific needs to maintain the desired aspect ratio.