React-native-ui-kitten: Button content does not render text correctly

[nmokkenstorm]

Issue type

I'm submitting a ...

• [x] bug report
• [ ] feature request

Issue description

Current behavior:

I just installed the library in an existing Expo App, and in the process of replacing the default react-native components with their equivalents in UI Kitten. After moving the content from the title prop to inside the component, the text renders incorrectly, always dropping the last word, unless I add a trailing space.

Expected behavior:

The button should just straight up render the content as is

Steps to reproduce:

Create a component using the default react native button, and set the title to 'FOO BAR', it will render 'FOO BAR' as content. If you then replace the button component with the one from UI Kitten, it will render just 'FOO'. Using {'FOO BAR '}, with an extra space, will render 'FOO BAR'

Related code:

import React from 'react'
import { withNavigation } from 'react-navigation'
import { Button } from 'react-native-ui-kitten';

export default withNavigation(
    ({navigation}) =>
        <Button onPress={ _ => navigation.navigate('ItemCreate') } size='small' appearance='ghost'>
            ADD AN ITEM
        </Button>
)

Other information:

OS, device, package version

OS: macOS Mojave, 10.14.5
Packages: React Native 33.0.0., Expo 33.0.0, UI Kitten 4.1.1

[nmokkenstorm]

To add to this, if the content is only one word (Like Register), the button renders regis-. Again, the trick with setting the inner content as {'Register '} works, but this feels very convoluted.

[artyorsh]

@nmokkenstorm Unable to reproduce. See it in action on a Snack
Do you use any additional stylings or custom fonts?

[nmokkenstorm]

@artyorsh I'm using the mapping and light theme from eva-design in the application provider in the root node, no other custom styling. Worth noting might be that the navigation structure from the default React Native / Expo setup is still in, which might (?) influence styling or fonts.

[artyorsh]

@nmokkenstorm
No, definitely. Could you please share some screenshots?

[nmokkenstorm]

<Button onPress={submitLogin} disabled={ loading }>
    {'Login '}
</Button>

<Button onPress={submitLogin} disabled={ loading }>
    Login
</Button>

Attached screenshots are from a physical One Plus 6T running Android 9, if it matters at all.

I have quite a bit of experience with React, but I inherited this particular React Native project and I'm not well versed in the ways of mobile / native at all, so it could be that I'm missing something obvious here.

[artyorsh]

@nmokkenstorm I'm sorry for the late reply. Was it resolved? If no, can you inspect the fonts you're using? By default, Eva Design System is specified to use OpenSans, but in terms of UI Kitten, we're not able to use custom fonts, so your app relies on system fonts. By default it should be Roboto on Android, but any Android device vendor is able to customize it, so I guess it can affect OnePlus devices if it relies on custom fonts.

I think, setting up custom font globally for your App should solve this issue.

[flexbox]

Hello @nmokkenstorm
I know it's a frustrating but it's not related with kitten UI.

As @artyorsh said this issue is due to a bug in the font on OnePlus phones

You can found some info here:

• Official thread on React Native : https://github.com/facebook/react-native/issues/15114
• Expo forums : https://forums.expo.io/t/text-cut-off-on-oneplus-device/4999/4

And feel free to close this issue if you problem is solved 😉

[artyorsh]

Thanks for the detailed explanation @flexbox 👍
Here is one more notice on having issues with fonts on Apple devices. Will just leave it here for easier navigation