CODEWITHSUNDEEP
androidreactjsreact-nativereact-navigation
anurag145
anurag145

Reputation: 155

React-Native , items in Drawer Navigator (React-Navigation) are not completely visible on some devices

So the drawer in my app should Ideally look like this:

enter image description here

but instead it looks like this:

enter image description here

I am creating it like this and passing it down to my stackNavigator 

export const Drawer = createDrawerNavigator({
"Home":Home,
"Profile":Profile,
"Contact Us":Contact
},{ 
  contentComponent:DrawerComponent
})

My DrawerComponent is :

class Content extends React.Component<IProps>{

 render(){
  return (<View>
    <View
      style={{
        backgroundColor: '#f50057',
        height: 100,
        alignItems: 'center',
        justifyContent: 'center',
      }}
    >
      <Text style={{ color: 'white', fontSize: 15 }}>
        {this.props.name}
      </Text>
      <Text style={{ color: 'white', fontSize: 15 }}>
         {this.props.phone}
      </Text>
    </View>
    <DrawerItems {...this.props} />
  </View>
   )
 }
}

StackOverflow, any reading recommendations are welcome

Upvotes: 1

Views: 1341

Answers (2)

anurag145
anurag145

Reputation: 155

A dumber solution that I found to this question was to add space after my keys like this:

 export const Drawer = createDrawerNavigator({
 "Home ":Home,
 "Profile ":Profile,
 "Contact Us ":Contact,
 "Your Progress ":UserProgress
 },{ 
  contentComponent:DrawerComponent
 })

Upvotes: 2

Manju Basha
Manju Basha

Reputation: 665

What is the width you have given for the Textview?

There is something called a "Toggle Inspector" that will help you to debug the UI. Check this link to read its documentation.

Check if the width of the label/Text is proper.

Upvotes: 1

Related Questions