Nesting styles on iOS

[skurpi]

We've come across a specific case where we're trying to nest text styles between tags. It works fine on Android but on iOS I need to specify the exact font with weight and style which breaks the style cascades.

Example:

const InsteadOfThis = (
  <Text style={{ fontFamily: 'Cabin_400Regular' }}>
    some regular text
    <Text style={{ fontFamily: 'Cabin_700Bold' }}>
      Bold section
      <Text style={{ fontFamily: 'Cabin_500Italic' }}>Italic but not Bold :(</Text>
    </Text>
  </Text>
)

const IWantThis = (
  <Text style={{ fontFamily: 'Cabin' }}>
    some regular text
    <Text style={{ fontWeight: 'bold' }}>
      Bold section
      <Text style={{ fontStyle: 'italic' }}>bold and italic!</Text>
    </Text>
  </Text>
)

I feel like I'm missing something simple: Is there a way to do this on iOS with Google fonts? (Either using Expo or ejected.)

(The use case is for output from a WYSIWYG editor where users can apply multiple styling to a text in an arbitrary order. Example: <strong><i><u>This is both bold, italic, and underlined</u></i></strong>.)

[Saadi]

@skurpi , I think you have to load the fonts on App.js with different variants. Rather than using LoadAsync you should use the useFonts hooks. Or can you can specify the customs styling to fonts in style props.

[Charlie Cheever]

Saadi is right. In React Native right now, you need to load the specific variants individually and use those. You could create an abstraction over everything but its not built in right now.