Open Bilal-Abdeen opened 1 year ago
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}
/>
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:
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()}
...
``` `
On Samsung Galaxy Z Fold4 (when it is folded.), the
Skip
button is cut short (only "Ski" is displayed.)