CODEWITHSUNDEEP
cssreact-nativeflexbox
Tiger_Stripes
Tiger_Stripes

Reputation: 525

How to style using flexbox to keep text central when there are two items in the row

If say the grid around the < button and the Modes text represents a flexbox row, how do you style the items such that the text is always central and the button is always at the start of the row?

i.e. should they be two seperate views with flex=1 or is there a way to put something on top of a row without impacting the centering of the text?

Example

Upvotes: 0

Views: 25

Answers (2)

Vishal Pawar
Vishal Pawar

Reputation: 1737

You can do this with flexbox

<View style={{flexDirection: 'row', alignItems: 'center', backgroundColor: 'steelblue', height: 40, padding: 16}}>
    <View style={{flex: 0.1}}>
        <TouchableOpacity onPress={() => _navigate(props, 'Home')}>
            <Icons icon="Ionicons" name="chevron-back" size={24} color={theme.colors.text} />
        </TouchableOpacity>
    </View>
    <View style={{flex: 0.8}}>
         <Text style={{textAlign: 'center'}}>Centered Text</Text>
    </View>
    <View style={{flex: 0.1}}/>
</View>

Upvotes: 0

Leri Gogsadze
Leri Gogsadze

Reputation: 3093

I had a similar issue a few months ago. I used one trick, define a fake view at the end of the row with the same width as the button has and MODES text will be in the centre.

<View style={{ flexDirection: 'row', justifyContent: 'space-between' }}>
  <Button style={{ width: 30, height: 30 }} />
  <Text>MODES</Text>
  <View style={{ width: 30 }} />
</View>

Upvotes: 2

Related Questions