change an array of pictures depending on iPhone screen size

Question

I have a screen that is an HRV reading, the styles work well on all new devices, even on SE and Mini versions, my problem is with iPhone 8, the screen gets all messed up. this is the iPhone 13 screen and this is the iPhone 8 screen , I don't know how to change my code to identify it here is how my code is:

Obs. each index has a different style for the image.

const hrvScreensData = [
  {
    //0
    imagePath: require('../../assets/images/hrvanimation1.png'),
    styleText: {
      fontSize: 28,
      fontFamily:'inter-regular',
      lineHeight:34,
      padding: 20,
      color: '#FFF',
      textAlign: 'center',
    },
    title: 'Measure with back camera',
    bkgColor: 'rgba(83,58,237,0.7)',
    styleLarge: {height: screenWidth/2, width: screenWidth, flex: 1, resizeMode: 'contain'},
    styleSmall: {height: 40, width: 40, resizeMode: 'contain'}
  },
.
.
.
      <View
        style={{
          marginTop: -150,
          flexDirection: 'row',
          justifyContent: 'flex-end',
          paddingLeft: index == 0 ? 20 : 0,
          backgroundColor: 'transparent',
        }}
        >
        {
          item.imagePath !== null ?
          <Image
            source={item.imagePath}
            
            style={item.styleLarge}
          />
          : 
          null
        }
      </View>

      <View
        style={{
          alignItems: 'center',
          justifyContent: 'flex-start',
          width: screenWidth,
          flex: 0.8,
        }}>
        <Text
        style={item.styleText}
          >
          {item.title}
        </Text>
      </View>

any way I can make the app check which device or screen size is and change the style on the Index?

Answer 1

You can access the screen dimensions of the current device using Dimensions from react-native . Then conditionally set the styles of your component.

Here is an example.

import { Dimensions } from "react-native"


const height = Dimensions.get("screen").height
const width = Dimensions.get("screen").width

const SomeComponent = () => {

   return (
     <View
        style={{
           paddingLeft: width < 321 ? 10 : 20
        }}
     ></View>
   )
}