react native paper header Appbar.Content issue

Question

hear in this image i add title in Appbar (react native paper appbar) but it is not display full.

i want to display whole title

hear is my code

export default function Header(props) {
  const navigation = useNavigation();
  return (
    <Appbar.Header style={{backgroundColor: primaryBlack}}>
      <Appbar.Action
        icon="menu"
        onPress={() => navigation.openDrawer()}
        size={28}
        style={{paddingLeft: 3}}
      />
      <Appbar.Content 
          title={<Text style={{color: textColor, fontSize: 20}}> This 
        is not display </Text>}
          style={{marginLeft: -10}}
       />
    <Appbar.Content
      onPress={() =>
       props.goback ? navigation.goBack() : navigation.navigate('Profile')
      }
      title={
      <TouchableOpacity
        onPress={() =>
          props.goback ? navigation.goBack() : navigation.navigate('Profile')
        }
        style={{flexDirection: 'row', display: 'flex'}}>
        <Icon name={'ellipsis-vertical'} size={20} color={'#000'} />
        <Text style={{color: textColor, fontSize: 21}}>test</Text>
      </TouchableOpacity>
     }
     style={{alignItems: 'flex-end'}}
    />
    </Appbar.Header>
  );
}

please help me to solve this...

I answered please check and please vote up if it helps thanks :-) — Nooruddin Lakhani, Oct 30 '20 at 06:46

score 3 · Accepted Answer · answered Oct 30 '20 at 06:44

Add flex:0 in last's App.Bar content style like

<Appbar.Content
      onPress={() =>
       props.goback ? navigation.goBack() : navigation.navigate('Profile')
      }
      title={
      <TouchableOpacity
        onPress={() =>
          props.goback ? navigation.goBack() : navigation.navigate('Profile')
        }
        style={{flexDirection: 'row', display: 'flex'}}>
        <Icon name={'ellipsis-vertical'} size={20} color={'#000'} />
        <Text style={{color: textColor, fontSize: 21}}>test</Text>
      </TouchableOpacity>
     }
     style={{flex: 0}} // Update with this style will solve the issue
 />

Check exmaple Snack

react native paper header Appbar.Content issue

1 Answers1