Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Roboto font missing

See original GitHub issue

I have gone through these following points

Check latest documentation: https://docs.nativebase.io/
Check for existing open/closed issues for a possible duplicate before creating a new issue: https://github.com/GeekyAnts/NativeBase/issues
Use the latest NativeBase release: https://github.com/GeekyAnts/NativeBase/releases
Check examples from NativeBase KitchenSink https://github.com/GeekyAnts/NativeBase-KitchenSink
For discussion purpose make use of NativeBase Slack: http://slack.nativebase.io/
For queries related to theme, check Theme Variables from Docs and live NativeBase Theme Editor http://nativebase.io/customizer/

Issue Description

The roboto fonts were deleted in the latest release, yet they seem to be still required

node, npm, react-native, react and native-base version, expo version if used, xcode

node v10.16.3 yarn 1.17.3 expo 3.0.10 native-base 2.13.6 react-native 0.59.10

Expected behaviour

The javascript bundle builds.

Actual behaviour

The javascript bundle fails because Roboto.ttf is missing.

Steps to reproduce

Initialize a new expo project with typescript. App.tsx :

import React from 'react';
import { AppLoading } from 'expo';
import { Container, Title, Header, Left, Body, Right } from 'native-base';
import * as Font from 'expo-font';
import { Ionicons } from '@expo/vector-icons';

interface State {
  isReady: boolean;
}

interface Props {
}

export default class App extends React.Component<Props, State> {
  constructor(props) {
    super(props)
    this.state = {
      isReady: false,
    };
  }

  async componentDidMount() {
    await Font.loadAsync({
      Roboto: require('native-base/Fonts/Roboto.ttf'),
      Roboto_medium: require('native-base/Fonts/Roboto_medium.ttf'),
      ...Ionicons.font,
    });
    this.setState({ isReady: true });
  }

  render() {
    if (!this.state.isReady) {
      return <AppLoading />;
    }

    return (
      <Container>
        <Header>
          <Left/>
          <Body>
            <Title>OpenMood?</Title>
          </Body>
          <Right/>
        </Header>
      </Container>
    );
  }
}

app.json:

{
  "name": "OpenMood",
  "displayName": "OpenMood",
  "expo": {
    "name": "OpenMood",
    "slug": "expo-template-bare",
    "privacy": "unlisted",
    "sdkVersion": "34.0.0",
    "version": "1.0.0",
    "entryPoint": "node_modules/expo/AppEntry.js",
    "platforms": [
      "ios",
      "android",
      "web"
    ]
  },
  "androidStatusBarColor": "#334393",
  "androidStatusBar": {
    "barStyle": "light-content",
    "backgroundColor": "#334393"
  }
}

Launch expo start. Error: ENOENT: no such file or directory, scandir '/home/alice/Projects/node_modules/native-base/Fonts

Trying to comment the font imports :

fontFamily "Roboto_medium" is not a system font and has not been loaded through Font.loadAsync.                                                                                                
- If you intended to use a system font, make sure you typed the name correctly and that it is supported by your device operating system.                                                                               
- If this is a custom font, be sure to load it with Font.loadAsync.                             
- node_modules/expo/build/environment/muteWarnings.fx.js:26:24 in error                         
- node_modules/expo-font/build/Font.js:35:16 in processFontFamily                               
- node_modules/react-native/Libraries/Renderer/oss/ReactNativeRenderer-dev.js:3545:38 in diffProperties
- node_modules/react-native/Libraries/Renderer/oss/ReactNativeRenderer-dev.js:3556:8 in diffProperties
- node_modules/react-native/Libraries/Renderer/oss/ReactNativeRenderer-dev.js:4003:29 in createInstance
- node_modules/react-native/Libraries/Renderer/oss/ReactNativeRenderer-dev.js:14437:12 in completeWork
- node_modules/react-native/Libraries/Renderer/oss/ReactNativeRenderer-dev.js:17094:10 in completeUnitOfWork
- node_modules/react-native/Libraries/Renderer/oss/ReactNativeRenderer-dev.js:17304:30 in performUnitOfWork
- node_modules/react-native/Libraries/Renderer/oss/ReactNativeRenderer-dev.js:17316:41 in workLoop
- node_modules/react-native/Libraries/Renderer/oss/ReactNativeRenderer-dev.js:17417:15 in renderRoot                                 
- node_modules/react-native/Libraries/Renderer/oss/ReactNativeRenderer-dev.js:18423:17 in performWorkOnRoot
- node_modules/react-native/Libraries/Renderer/oss/ReactNativeRenderer-dev.js:18324:24 in performWork
- node_modules/react-native/Libraries/Renderer/oss/ReactNativeRenderer-dev.js:18285:14 in performSyncWork                            
- node_modules/react-native/Libraries/Renderer/oss/ReactNativeRenderer-dev.js:18169:19 in requestWork                                
- node_modules/react-native/Libraries/Renderer/oss/ReactNativeRenderer-dev.js:17969:16 in scheduleWork                                                                                                                                    
- node_modules/react-native/Libraries/Renderer/oss/ReactNativeRenderer-dev.js:6934:17 in enqueueSetState
- node_modules/react/cjs/react.development.js:335:31 in setState
* App.tsx:28:18 in componentDidMount$                   
- node_modules/@babel/runtime/node_modules/regenerator-runtime/runtime.js:45:44 in tryCatch
- node_modules/@babel/runtime/node_modules/regenerator-runtime/runtime.js:271:30 in invoke
- node_modules/@babel/runtime/node_modules/regenerator-runtime/runtime.js:45:44 in tryCatch
- node_modules/@babel/runtime/node_modules/regenerator-runtime/runtime.js:135:28 in invoke
- node_modules/@babel/runtime/node_modules/regenerator-runtime/runtime.js:145:19 in <unknown>
- node_modules/promise/setimmediate/core.js:37:14 in tryCallOne
- node_modules/promise/setimmediate/core.js:123:25 in <unknown>
- node_modules/react-native/Libraries/Core/Timers/JSTimers.js:152:14 in _callTimer
- node_modules/react-native/Libraries/Core/Timers/JSTimers.js:200:17 in _callImmediatesPass
- node_modules/react-native/Libraries/Core/Timers/JSTimers.js:473:30 in callImmediates                                                                                                                                                    
* [native code]:null in callImmediates                                                                                                                                                                                                    
- node_modules/react-native/Libraries/BatchedBridge/MessageQueue.js:337:6 in __callImmediates                                                                                                                                             
- node_modules/react-native/Libraries/BatchedBridge/MessageQueue.js:135:6 in <unknown>                                                                                                                                                    
- node_modules/react-native/Libraries/BatchedBridge/MessageQueue.js:314:10 in __guard                                                                                                                                                     
- node_modules/react-native/Libraries/BatchedBridge/MessageQueue.js:134:17 in flushedQueue                                                                                                                                                
* [native code]:null in flushedQueue                                                                                                                                                                                                      
* [native code]:null in invokeCallbackAndReturnFlushedQueue

Is the bug present in both iOS and Android or in any one of them?

Android, can’t test on iOS

Any other additional info which would help us debug the issue quicker.

Downgrading native-base to 2.13.0 solved the issue for me. Changing the import path to ./node_modules/native-base/Fonts/Roboto_medium.ttf did not solve the problem.