Create-React-Native-App-使用本机模块

Question

I have a question related to using native modules with react-native apps.

As described here it appears that application created with CRNA is not supposed to be used with native modules. Is it still true?

Recently I was able to integrate @shoutem/ui module with my app created with CRNA (as far as I understand this is native module because it requires me to run react-native link command) and it was working just fine on my android and ios phones and ios simulator as well.

As this PR explains, using react-native link should display error message but I cannot observe it at all.

Has anything changed? This is really confusing. Or maybe my understanding of native modules in react-native is wrong?

Answer 1

If you've imported the fonts used in the toolkit (as described in this Github issue ):

async componentWillMount() {
    await Font.loadAsync({
      'Rubik-Black': require('./node_modules/@shoutem/ui/fonts/Rubik-Black.ttf'),
      'Rubik-BlackItalic': require('./node_modules/@shoutem/ui/fonts/Rubik-BlackItalic.ttf'),
      'Rubik-Bold': require('./node_modules/@shoutem/ui/fonts/Rubik-Bold.ttf'),
      'Rubik-BoldItalic': require('./node_modules/@shoutem/ui/fonts/Rubik-BoldItalic.ttf'),
      'Rubik-Italic': require('./node_modules/@shoutem/ui/fonts/Rubik-Italic.ttf'),
      'Rubik-Light': require('./node_modules/@shoutem/ui/fonts/Rubik-Light.ttf'),
      'Rubik-LightItalic': require('./node_modules/@shoutem/ui/fonts/Rubik-LightItalic.ttf'),
      'Rubik-Medium': require('./node_modules/@shoutem/ui/fonts/Rubik-Medium.ttf'),
      'Rubik-MediumItalic': require('./node_modules/@shoutem/ui/fonts/Rubik-MediumItalic.ttf'),
      'Rubik-Regular': require('./node_modules/@shoutem/ui/fonts/Rubik-Regular.ttf'),
      'rubicon-icon-font': require('./node_modules/@shoutem/ui/fonts/rubicon-icon-font.ttf'),
    });

    this.setState({fontsLoaded: true});
  }

You shouldn't have issues using Shoutem UI toolkit components.

Fonts are linked into the app's binary and are therefore considered a native dependency.