React Native make items responsive

Question

Example between correct and incorrect item stacking

Please refere to the image. I have twee phones one with a screen width of 1440px and one with 1080px.On the 1440 screen the items are stacked in a two column structure. On the 1080 everything gets stacked on the left column. Is there a way to write a javascript function that looks at the device width and sets the item to adjust accordingly?

const Complex = () => {
return (
    <View style={{ flex: 1 }}>
        <CarouselCards />
        <Divider
            style={{
                color: 'black',
                backgroundColor: 'black',
                marginHorizontal: 15,
            }}
        />
        <ScrollView horizontal={false}>
            <View style={{ flexDirection: 'row', flexWrap: 'wrap' }}>
                {KPI.map((item) => (
                    <View style={styles.cardContainer} key={item.id}>
                        <View style={{ flexDirection: 'row' }}>
                            <View
                                style={{
                                    flex: 1,
                                    flexWrap: 'wrap',
                                }}
                            >
                                <View style={styles.cardContent}>
                                    <Text style={styles.cardTitle}>{item.title}</Text>
                                    <Text style={styles.bigFatNumber}>{item.value}</Text>
                                    <Text style={styles.smallKPI}>{item.kpi}</Text>
                                    <View style={{display:' flex'}}>

                                    <BarChart
                                        style={{ height: 100, width: 130 }}
                                        data={barData}
                                        svg={{ fill }}
                                        contentInset={{ top: 1, bottom: 30 }}
                                    ></BarChart>
                                    </View>

                                </View>
                            </View>
                        </View>
                    </View>
                ))}
            </View>
        </ScrollView>
    </View>
)

export default Complex

const styles = StyleSheet.create({
cardContainer: {
    backgroundColor: '#fff',
    width: 168,
    height: 190,
    margin: 15,
    borderRadius: 8,
    shadowColor: '#000',
    shadowOffset: {
        width: 0,
        height: 3,
    },
    shadowOpacity: 0.29,
    shadowRadius: 4.65,
    elevation: 7,
    padding: 15,
},
chartContainer: {
    backgroundColor: '#fff',
    width: 168,
    height: '100%',
    margin: 15,
    borderRadius: 8,
    shadowColor: '#000',
    shadowOffset: {
        width: 0,
        height: 3,
    },
    shadowOpacity: 0.29,
    shadowRadius: 4.65,
    elevation: 7,
    padding: 15,
    flexWrap: 'wrap',
    display: 'flex',
},
cardTitle: {
    // letterSpacing: 0.25,
    fontStyle: 'normal',
    fontSize: 14,
},
cardContent: {
    alignItems: 'flex-start',
    flexWrap: 'wrap',
    gap: 6,
    paddingVertical: 5,
},
bigFatNumber: {
    letterSpacing: 0.25,
    lineHeight: 36,
    fontWeight: 'bold',
    fontStyle: 'normal',
    fontSize: 24,
},
smallKPI: {
    letterSpacing: 0.25,
    lineHeight: 24,
    fontWeight: 'bold',
    fontStyle: 'normal',
    fontSize: 14,
    order: 1,
    color: 'rgba(0, 0, 0, 0.6)',
},

})

Answer 1

You can get device-width with Dimensions that you get in React native - https://reactnative.dev/docs/dimensions . Yust add your items fixed width(something like (width-yourMargin) / 3) or you can use flex and not use fixed width.

Answer 2

1. use

react-native-responsive-dimensions

use key word npm install for windows

 npm i react-native-responsive-dimensions

2. import using that

 import { responsiveHeight as rh, responsiveWidth as rw, responsiveFontSize as rf, } from "react-native-responsive-dimensions";

3. how to use

 width:rw(100), height:rh((100), fontSize:rf(1.5),