CODEWITHSUNDEEP
react-nativereact-navigation
Jun
Jun

Reputation: 3432

Use navigationOptions in react-native

I am using navigatioinOptions in component.

The problem is the space is always leaving while I use navigationOptions.

Here's my code:

static navigationOptions = ({ navigation }) => {
return {
  headerLeft: ...
  }
}

I have attached image file.

Please help me. Thanks for your time. enter image description here

Upvotes: 0

Views: 386

Answers (1)

designorant
designorant

Reputation: 2401

Assuming that your screenshot represents headerLeft alone, therefore a layout not conforming to the typical headerLeft|title|headerRight arrangement, I'd suggest that you move all those elements into header alone. That way you'll have the whole space for everything that you need there, i.e.:

static navigationOptions = ({ navigation }) => {
  return {
    header: (
      <View
        style={{
          backgroundColor: "red",
          paddingTop: 21,
        }}
      >
        <View style={{ backgroundColor: "yellow" }}>
          <Text>This is 100% wide</Text>
        </View>
      </View>
    ),
  };
};

which looks like:

Rendered header

Note that while using the header this way you will need to take care of all platform specific styles yourself. You may find Header.js' source code helpful for that.

Upvotes: 1

Related Questions