"Skip" is Cut Short on Samsung Galaxy Z Fold4

[Bilal-Abdeen]

On Samsung Galaxy Z Fold4 (when it is folded.), the Skip button is cut short (only "Ski" is displayed.)

[Bilal-Abdeen]

As a workaround, I used a custom component for Skip:

const skipComponent = ({ isLight, skipLabel, ...props }) => (
<View style={{ marginStart: 10, minWidth: 30, }}>
    <Text { ...props }
        onPress={() => {onSkip();}}
    >{skipLabel}</Text>
</View>);

<Onboarding
   ...
   SkipButtonComponent={skipComponent}
/> 

[AlexMachin1997]

I don't believe this is specific to the Samsung Galaxy Z Fold4.

I'm just updating my project and I've noticed that the page title, skip and next button are all cut short for some reason.

This is what it look's like a Google Pixel 6a currently:

[Jay-Salisbury]

Also have this problem on a Google Pixel 5a with Next, so perhaps it's an Android styles issue.

This is the code that worked for me, passing a component to nextLabel as there is no onNext equivalent to onSkip that I could see:

const NextComponent = () => (
    <View row centerV right flex>
      <Text primary marginR-2 right style={{ minWidth: 120, textAlign: 'right' }} >
        {services.t.do('onboard.next')}      // Returns 'Next' or other translations
      </Text>
      <Icon name="chevron-forward-outline" size={30} color={Colors.primary} /> // Right arrow added
    </View>
  );

<Onboarding
      nextLabel={NextComponent()}
      ...
``` `