CODEWITHSUNDEEP
react-native
Shashika Virajh
Shashika Virajh

Reputation: 9477

Stack Navigator Navigation Options Alignment issue

I want to align the stack navigator options, title to center and have a rightMargin to headerRight. This is my code and it doesn't work. What am I doing wrong here?

I tried to set styles but it didn't take styles. 

  static navigationOptions = {
    title: "Share To Feed",
    // headerTitleStyle: {
    //   alignSelf: "center"
    // },
    headerLeft: (
      <Icon
        name={"close-box-outline"}
        size={40}
        onPress={() => {
          navigation.goBack();
        }}
      />
    ),
    headerRight: (
      // <TouchableOpacity>
        <View style={styles.image}>
          <Text>Post</Text>
        </View>
      // </TouchableOpacity>
    )
  };
}

const styles = StyleSheet.create({
  container: {
    flex: 1
  },
  sharePostWrapper: {
    marginTop: 0,
    marginRight: 5,
    marginBottom: 5,
    marginLeft: 5,
    padding: 5,
    borderWidth: 1,
    borderColor: "gray"
  },
  image: {
    flex: 1,
    width: width - 20,
    height: 200
  },
  headerRight: {
    color: "red"
  }
});

export default SharePostScreen;

Upvotes: 0

Views: 446

Answers (1)

Pritish Vaidya
Pritish Vaidya

Reputation: 22209

For customizing all the header components you can define your Navigation layout in the following way.

// Use headerTitle since , it accepts both React.Element and React.Component

headerTitle: <Text>Post a Title</Text>, // Or a string
headerTitleStyle: {alignItems: 'center'}, // If it is an component
headerRight: <Text>Post</Text>,  // Or a string
headerLeft: (
      <Icon
        name={"close-box-outline"}
        size={40}
        onPress={() => {
          navigation.goBack();
        }}
      />
    ),
 // Give the styles to the parent wrapper here.
 headerStyle: {
       paddingRight: 15, // padding would be better
       paddingLeft: 15,
       height: 200
     }

The code 

image: {
    flex: 1,
    width: width - 20,
    height: 200
  },

is wrong since , image takes almost all the screen width and rest of the header is misaligned.

Also another point to note is the hierarchy of the navigationOptions

RouteConfigs > Screen Property > Static Nagivation Config

Upvotes: 1

Related Questions