Width Percent Flexbox

Question

Width Percent Flexbox

Navigation

#1 by (0 votes)

0

I'm having trouble defining items using Flexbox.

What I need to do is to leave my item in 90% , currently I'm doing so, but it does not 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 my width to values without %

react-native flexbox

asked by anonymous 04.02.2018 / 16:32

1 answer

Problems with animation How to Make a Mask for field validation

score 0 · Answer 1

Rafael, try using Dimensions to capture the size of the device, create a rule of thumb three to receive a value and make it a helper. I usually use this because the interfaces need to be exactly the same as the layouts.

Here's 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;