CODEWITHSUNDEEP
reactjsreact-native
Alain Goldman
Alain Goldman

Reputation: 2908

React Native move navigator text

Hey In react native I'm using and Everything works well so far but the title and the back button text don't line up. (The login is higher then register) Any ideas how I could set this up?

enter image description here

render() {
    const titleConfig = {
      title: 'login',
      tintColor: "white",
    }
    return(
        <View style={styles.bb}>
            <NavigationBar
              title={titleConfig}
              tintColor="black" />
        </View>

    )
}

Upvotes: 0

Views: 62

Answers (1)

Bilal Budhani
Bilal Budhani

Reputation: 487

You can pass in a react element to title prop with styling to make it align as per your requirements. For e.g: 

render() {
  const title = <View style={styles.navTitle}>
    <Text style={styles.navTitleText}>Login</Text>
  </View>;

  return (
    <View style={styles.bb}>
       <NavigationBar
          title={title}
          tintColor="black"
        />
    </View>
  );
}

var styles = StyleSheet.create({
  navTitleText: {
    color: "white",
    fontSize: 19,
    marginBottom: 4,
  }
});

Here's the complete guide about the API https://github.com/react-native-fellowship/react-native-navbar#api

Upvotes: 1

Related Questions