React Native Text is cutting off | Drawer menu title cut issue | Image not visible issue 

React Native Text is cutting off 

In few of the devices there is a issue with text cutting off , here there is a example of a profile screen where second word of all the header fields gets cut off as such name from first name, number from mobile number, address from email address and so on. Basically the reason behind this issue is fontWeight and i did find this issue in One Plus 6T device.

Issue:

Solution:

Answer1: Place fontFamily:'Roboto' in style

 <Text

 style={{ fontFamily:"Roboto", fontWeight: "bold", textAlign: "left", marginLeft: 10, marginRight: 5, fontSize: fonts.fontMedium, color: "#337AB7", }}>First Name</Text>

             

Answer2: Add extra space after the text 

 <Text

 style={{fontWeight: "bold", textAlign: "left", marginLeft: 10, marginRight: 5, fontSize: fonts.fontMedium, color: "#337AB7", }}>First Name </Text>

             

Both the answers are tested and it works fine as you can see in the screenshot attached below 

Drawer menu title cut issue 

In few of the devices there is a issue with text in drawer menu title, here there is a example of a drawer menu with last letters getting cut off. Basically the reason behind this issue is fontWeight and i did find this issue in One Plus 6T device.

Issue:

Solution:

Answer1:  Add fontFamily:'Roboto' to labelStyle in <Drawer.Navigator>

 <Drawer.Navigator

      drawerContentOptions={{

        activeTintColor: '#337AB7',

        tintColor: "#337AB7",

        inactiveTintColor: '#337AB7',

        marginTop: 10,

        labelStyle: {

          fontFamily: 'Roboto',

          fontSize: fonts.fontHeader,

          fontWeight: "bold",

        },

        itemStyle: { marginVertical: 5 },

      }}>

Answer2:  Add extra space to label title 

<Drawer.Screen

        name="FirstPage" options={{

          drawerIcon: config => <Icon name="home" size={20} color="#337AB7" style={{ alignSelf: "center", alignItems: "center" }} />,

          headerTintColor: '#337AB7',

          tintColor: '#337AB7',

          activeTintColor: "#337AB7",

          headerTransparent: "true",

          headerTintColor: "#337AB7",

          drawerLabel: 'Home  ',

          headerTitleContainerStyle: {

            left: TITLE_OFFSET_CENTER_ALIGN,

          },

        }}

        component={firstScreenStack} />

Image not visible issue 

In few of the devices as such in one plus 6T images go missing on the screen 

Solution : Add resizeMode={'cover'} or resizeMode={'contain'} and provide a specific width and height to the Image.

  <ImageBackground

                source={require('../image/hospital.png')}

                style={{ width: heightPercentageToDP("20%"), height: heightPercentageToDP("20%"), marginTop: 10, position: "absolute", top: 0, alignSelf: "center", fontFamily: 'Roboto', }}

                resizeMode={'cover'}

              />

Stay tuned to my posts  and do share your valuable thoughts if any queries or you would like to share anything on this topic in the comment section and please do like and share my post if this was helpful.

Hope you liked it :)