How can i position two Views in left and right?-CodePudding

I want to position two views on of them left and the another in right, but the right view disssapear when i aplied the style like this:

 return (
        <View style={{ width: '100%' }}>
            <View style={{ float: 'left' }}>
                <Avatar.Icon
                    size={iconSize}
                    name="md-beer" type="ionicon"
                    color="blue"
                    style={{
                        backgroundColor: '#00aced',
                        width: customAvtardimension,
                        height: customAvtardimension,
                    }}
                />
            </View>
            <View style={{ flex: 1, fontSize: 16, lineHeight: 30, color: '#1D2359', textAlign: 'right' }}>
                <Button icon="camera" >
                </Button>
            </View>
        </View>
    )

why does not work? my mistake is in the css?

CodePudding user response：

You should in your style prop use flexDirection: 'row' to set views next to each other

CodePudding user response：

Previous answer is the right solution. This is what your code would look like.

return (
        <View style={{ width: '100%', flexDirection: 'row' }}>
            <View style={{ float: 'left' }}>
                <Avatar.Icon
                    size={iconSize}
                    name="md-beer" type="ionicon"
                    color="blue"
                    style={{
                        backgroundColor: '#00aced',
                        width: customAvtardimension,
                        height: customAvtardimension,
                    }}
                />
            </View>
            <View style={{ flex: 1, fontSize: 16, lineHeight: 30, color: '#1D2359', textAlign: 'right' }}>
                <Button icon="camera" >
                </Button>
            </View>
        </View>
    )

You can add additional styling for spacing, using justifyContent property.