CODEWITHSUNDEEP
layoutreact-nativeflexbox
aqwert
aqwert

Reputation: 10789

Custom header layout for React Native

Trying to construct a header in react-native. I have managed to get this far but I wanted to have the header centered and the right text right-aligned. Is there any simple combination using flexbox to achieve this? 

   <View style={{marginTop: 20, backgroundColor:'yellow'}}>
       <View style={{flex: 1, flexDirection: 'row', alignItems:'center', justifyContent:'space-between', marginTop: 20, marginBottom: 20, borderColor:'red', borderWidth:1}}>
          <Text style={{ flex: 1, alignItems:'center', justifyContent:'center', borderColor:'red', borderWidth:1}}>Left with long text</Text>
          <Text style={{ flex: 1, alignItems:'center', justifyContent:'center', borderColor:'red', borderWidth:1}}>Title</Text>
          <Text style={{ flex: 1, alignItems:'center', justifyContent:'center', borderColor:'red', borderWidth:1}}>Right</Text>
       </View>
    </View>

Image

Upvotes: 0

Views: 8275

Answers (2)

Hamed Taheri
Hamed Taheri

Reputation: 160

for this situation, you can use react-native-falt-header library. this lib support all of your need for the center, left and right text and button handlers.

https://www.npmjs.com/package/react-native-flat-header

example:

<FlatHeader
    leftIcon={<Icon name="arrow-left" size={30} color="#FFF" />}
    leftText="back"
    leftContentHandler={() => {
        console.warn('Left both icon and text pressed');
    }}
    centerContent={
        <Group>
            <Icon name="comment" size={30} color="#FFF" />
            <Text style={{ color: '#FFF', paddingHorizontal: 5 }}>FAQ</Text>
        </Group>
    }
    rightIcon={<Icon name="star" size={30} color="#FFF" />}
    style={{ marginTop: 20, backgroundColor:'yellow' }}
    />

Upvotes: 2

Vahid Boreiri
Vahid Boreiri

Reputation: 3438

If I understand you issue correctly this code will solve your problem:

      <View style={{paddingTop: 20, paddingBottom: 20, backgroundColor:'yellow'}}>
        <View style={{flexDirection: 'row', alignItems:'center', borderColor:'red', borderWidth:1}}>
          <Text style={{ flex: 1, borderColor:'red', borderWidth:1}}>Left with long sd asdf text</Text>
          <Text style={{ flex: 1, borderColor:'red', borderWidth:1, textAlign: 'center'}}>Title</Text>
          <Text style={{ flex: 1, borderColor:'red', borderWidth:1, textAlign: 'right'}}>Right</Text>
        </View>
      </View>

Upvotes: 2

Related Questions