React Native - Navigation DrawerItem Label Multiline-CodePudding

In Sidebar I'm using "@react-navigation/drawer": "^5.12.5"

How to wrap the label in DrawlerItems to the next line?

const itemStyle = {
  marginLeft: 0,
  borderBottomColor: '#D9DBE9',
  borderBottomWidth: 1,
  marginVertical: 0,
  paddingBottom: 10,
  paddingTop: 10,
  width: '100%',
};

const labelStyle = {
  fontSize: 16,
  fontWeight: '600'
}

<DrawerContentScrollView {...props} style={{ flex: 1 }}>
  <View>
    <DrawerItem
      label={'label 1'}
      labelStyle={{ ...labelStyle, backgroundColor: 'red' }}
      style={itemStyle}
    />
    <DrawerItem
      label={'long label 2'}
      labelStyle={{ ...labelStyle, backgroundColor: 'yellow' }}
      style={itemStyle}
    />
  </View>
</DrawerContentScrollView>

CodePudding user response：

This is due to the because DrawerItem file has numberOfLines={1}

Workaround can be like you can update the DrawerItem file from the library by removing numberOfLines Currently It has the following code

<Text
    numberOfLines={1} // this line making the label single liner
    allowFontScaling={allowFontScaling}
    style={[
      {
        color,
        fontWeight: "500",
      },
      labelStyle,
    ]}
  >
    {label}
</Text>

Alternate way is to use like function e.g

label={({focused, color}) => (
  <Text style={{color}}>Your Label</Text>
)}