how to set back button style on left side in react-native?-CodePudding

I want to place the back button to the left of the header.

<View style={styles.header}>
      <AntDesign style={styles.backBtn} name="arrowleft" size={24} color="black" />
      <Text style={styles.headerText}>My Page</Text>
 </View>


//style
header: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        flexDirection: 'row',
    },
    backBtn: {
        marginTop: 35,
        alignItems: 'flex-start',
        backgroundColor: 'blue'
    },
    headerText: {
        fontWeight: 'bold',
        fontSize: 18,
        marginTop: 35,
        backgroundColor: 'red'
    },

[enter image description here][1]

I want to set back button on like flex-start [1]: https://i.stack.imgur.com/2sSH1.png

CodePudding user response：

Just wrap your AntDesign icon inside a view and give it a flex of 1. So that it takes up all the space left in the parent view. Then add alignSelf: 'center' to the Text component so that it aligns itself to the center of the View

You can do something like this

<View style={styles.header}>
  <AntDesign name="arrowleft" size={24} color="black" style={styles.backBtn} />
  <View style={{ flex: 1 }}>
    <Text style={styles.headerText}>My Page</Text>
  </View>
</View>

And Styles

header: {
  flexDirection: 'row',
  width: width,
  backgroundColor: 'red',
},
backBtn: {
  backgroundColor: 'blue',
},
headerText: {
  fontWeight: 'bold',
  fontSize: 18,
  backgroundColor: 'red',
  alignSelf: 'center',
},

Working Example