CODEWITHSUNDEEP
androidreactjsreact-nativereact-navigation
Bhaumik Surani
Bhaumik Surani

Reputation: 1833

react-navigation space between left button and title on android

I'm using react-navigation for navigate between screen.
In ios it display on center and working properly but in android it display left side and space between back button and title.

enter image description here

I want to remove space between back button and title on android.

My Code

class Detail extends Component {
    .
    .
    .
    static navigationOptions = ({ navigation }) => {
        const {state} = navigation;
        return {
            headerTitle: "title",
            headerStyle: {
                borderBottomColor: 'transparent',
                borderBottomWidth: 0,
                backgroundColor: 'transparent',

                elevation: 0 ,
                shadowOpacity: 0,
                shadowColor: 'transparent',
                shadowRadius: 0,
                shadowOffset: {
                    width: 0,
                    height: 0
                }
            },
            headerTitleStyle: {
              color: 'white',
              width: width-72,
            },
            headerBackTitleStyle: {
              color: 'white',
            },
            headerTintColor: 'white',
            headerBackground: (
                <LinearGradient
                    colors={[MyConstants.colorNavbarStart, MyConstants.colorNavbarEnd]}
                    style={{ flex: 1 ,padding: 0}}
                    start={{x: 0, y: 0.5}}
                    end={{x: 1, y: 0.5}} />
            ),
            headerRight: (
            <TouchableOpacity>
              <View style={{padding: 8}}>
                <Image source={MyConstants.imgShareArrow} style={{height:20, width: 20}} />
              </View>
            </TouchableOpacity>
            ),
            headerLeft: (
            <TouchableOpacity onPress={ () => {navigation.pop()}}>
              <View style={{padding: 8}}>
                <Image source={MyConstants.imgBackArrow} style={MyStyle.backButton} />
              </View>
            </TouchableOpacity>
            )
        };
    };
}

In above code width is screen width and i'm using -72 because left and right button width.
I'm also using marginLeft in minus but it cut the title.

Upvotes: 7

Views: 6297

Answers (2)

John
John

Reputation: 836

to remove space between back button and title you can use:

headerTitleContainerStyle: {
  left: 0,
},

Upvotes: 13

Bhaumik Surani
Bhaumik Surani

Reputation: 1833

After Some change It's Working
Change headerTitle in above code

headerTitle:<Text numberOfLines={1} style={[MyStyle.appFontStyle1, {color: 'white', width: width- (Platform.OS==='ios'?72:118), fontSize: 20}]}>Title</Text>

Upvotes: 0

Related Questions