Width Percentage Flexbox

Question

I’m having trouble defining items using Flexbox.

What I need to do is leave mine item in 90%, I’m currently doing so, but it doesn’t work.

    <View>
        <ScrollView horizontal>
            <View style={Card}>
                <View style={CardItem}>

                </View>
            </View> 
        </ScrollView>
    </View>


const styles = {
    Card: {
        width: '100%',
        height: 80,
        padding: 10
    },
    CardItem: {
        backgroundColor: 'red',
        width: '90%',
        height: 100
    }
}

Only works if I set mine width with values without the %

Answer 1

Rafael, try to use the Dimensions to capture the size of the device, create a rule of three that receives a value and make it a helper. I usually use this because the interfaces need to be exactly according to the proportions of the layouts.

Follow what I use:

import { Dimensions } from 'react-native';

/**
 * SIZES
 * @type {Number}
 */

export const SCREEN_WIDTH = Dimensions.get('window').width;
export const SCREEN_HEIGHT = Dimensions.get('window').height;