Nativebase: native-base expo 33 problem

[bibekkakati]

I am facing problem after latest expo update 33.0.x

Error is-
system is looking for node_modules/native-base/fonts in Screens folder

directory tree-

main folder...
screens
components
node_modules
other folders..

[joaopiopedreira]

Hi @bibekkakati , did you find a solution to this?

[bibekkakati]

Not yet. I tried everything. Downgrading, reinstalling stuffs. Tried on new project also. But no result.

[joaopiopedreira]

Hi @bibekkakati, my error is gone. I was importing like this:

Font.loadAsync({
          'Roboto': require('native-base/Fonts/Roboto.ttf'),
          'Roboto_medium': require('native-base/Fonts/Roboto_medium.ttf'),
        }),

but then I've moved the relevant font files to a folder inside my app and imported like thiis:

Font.loadAsync({
          'Roboto': require('./resources/fonts/Roboto.ttf'),
          'Roboto_medium': require('./resources/fonts/Roboto_medium.ttf'),
        }),

[bibekkakati]

Is it required ?
Are you using any custom fonts ?
Because I am not using any custom fonts. Everything is by default.

[joaopiopedreira]

not sure, but it fixed my error

[bibekkakati]

Ohk I'll try that now

[bibekkakati]

ENOENT: no such file or directory, scandir 'E:\ReactNative\Foblo\screens\node_modules\native-base\Fonts'
Failed building JavaScript bundle.

Is the problem with native-base or latest react native and expo. Becoz this is happening after the latest update.

[joaopiopedreira]

shouldn't it be importing from E:\ReactNative\Foblo\screens\node_modules instead of E:\ReactNative\Foblo\node_modules?

[joaopiopedreira]

tested with a fresh new sdk33 project with native-base added. Works well.

[bibekkakati]

yeah.. It should import like this
E:/React Native/Foblo/node_modules

I dont know why this is happening.
Is there any common issue because of which this is happening ? I might
have written somewhere something incorrectly.

On Mon, Jun 24, 2019, 6:41 PM João Pio Pedreira [e-mail]
wrote:

tested with a fresh new sdk33 project with native-base added. Works well.

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/GeekyAnts/NativeBase/issues/2731?email_source=notifications&email_token=AIJT6VNHM6BBLSYDUWMEBGTP4DBWRA5CNFSM4H2ZSRFKYY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGODYM3ZTQ#issuecomment-505003214,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AIJT6VIQCN5TKRQVFIPAAS3P4DBWRANCNFSM4H2ZSRFA
.

[matanume]

In my case
I reinstall expo font

expo install expo-font

then change Font import

import * as Font from 'expo-font';

then rebuild native-base

npm rebuild native-base

then re eject theme

node node_modules/native-base/ejectTheme.js

and make sure to import theme from new correct path

import getTheme from "./../native-base-theme/components"; import variables from "./../native-base-theme/variables/commonColor";

[bibekkakati]

ohk sure I'll try this. Thank you.

BTW Are you using any custom fonts in any screen ? Or just the default
font, since I am not using any type of fonts by myself.

[meishier]

in my case

Font.loadAsync({
'Roboto': require('native-base/Fonts/Roboto.ttf'),
'Roboto_medium': require('native-base/Fonts/Roboto_medium.ttf'),
}),

works when coding in root app.js

root
App.js <-- Font.loadAsync here

not work when coding child directory

root
App.js
src/main.js <-- Font.loadAsync here

ENOENT: no such file or directory, scandir 'E:\ReactNative\Foblo\screens\node_modulesnative-base\Fonts'
Failed building JavaScript bundle.

[Azghour-Saad]

@meishier, This really helped me :smile: Thanks.

[danghuyminh]

If you put it in sub directory, you should add node_modules to the path also:

Font.loadAsync({ 'Roboto': require('../node_modules/native-base/Fonts/Roboto.ttf'), 'Roboto_medium': require('../node_modules/native-base/Fonts/Roboto_medium.ttf'), })

[sguha00]

Anyone know what changed in Expo 33 that breaks loading font files from node_modules without specifying a relative path?

[kocho]

Also having issues running native base with Expo 33.

doing a clean install and following the provided commands i keep getting
Unable to resolve "@expo/vector-icons/FontAwesome5Pro" from "node_modules/native-base/dist/src/basic/IconNB.js" Failed building JavaScript bundle.

[gurudewan]

Same issue - have tried everything above and nothing worked. Has anyone got a fix?

[thiemo--bleeken]

same issue for me

[thiemo--bleeken]

fixed it with the following steps. was because the TabBarIcon component is using the icon from expo.

yarn add @expo/vector-icons

replace
import { Icon } from 'expo'
to
import * as Icon from '@expo/vector-icons'

[michaelkoek]

Downgrading to 2.12.1 worked for me
Got it from this reference 2783

yarn remove native-base
yarn add [email protected]

[syedjaffersathik]

Yes. It's worked for me.

If you are mac user then

npm remove native-base
npm install [email protected]

[diegolaciar]

+1
same issue, thanks for the solution

[shivarajnaidu]

Unable to resolve "@expo/vector-icons/FontAwesome5Pro" from "node_modules/native-base/dist/src/basic/IconNB.js"
getting the same error.. :(

[bibekkakati]

I resolved the issue by creating a FontAwesome5Pro file in that path(@expo/vector-icons) and
copied the stuffs of FontAwesome. Thats it. It works for me.

[syedjaffersathik]

I resolved the issue by creating a FontAwesome5Pro file in that path(@expo/vector-icons) and copied the stuffs of FontAwesome. Thats it. It works for me.

Can you please explain more or provide the stuffs!!!

[pratik007kumar]

I resolved the issue by creating a FontAwesome5Pro file in that path(@expo/vector-icons) and copied the stuffs of FontAwesome. Thats it. It works for me.

Please explain how you did?

[bibekkakati]

Unable to resolve "@expo/vector-icons/FontAwesome5Pro" from "node_modules/native-base/dist/src/basic/IconNB.js"

If you are facing this issue, then here is the trick to resolve this issue until expo solve it on its own.
Problem is system is searching for a FontAwesome5Pro.js file in @expo/vector-icons , but file is not there.

So you just do this...

1. Go to node_modules/@expo/vector-icons.
2. Open the file FontAwesome5, and copy everything from that file.
3. Create a new js file "FontAwesome5Pro" , and paste everything here.
4. Save it and done.

[pratik007kumar]

thanks its worked

[Farangi]

Unable to resolve "@expo/vector-icons/FontAwesome5Pro" from "node_modules/native-base/dist/src/basic/IconNB.js"

If you are facing this issue, then here is the trick to resolve this issue until expo solve it on its own.
Problem is system is searching for a FontAwesome5Pro.js file in @expo/vector-icons , but file is not there.

So you just do this...

1. Go to node_modules/@expo/vector-icons.

2. Open the file FontAwesome5, and copy everything from that file.

3. Create a new js file "FontAwesome5Pro" , and paste everything here.

4. Save it and done.

It resolved the issue but now i am getting following:

fontFamily "ionicons" 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.

[syedjaffersathik]

If you are using expo then follow this official documentation:
https://docs.expo.io/versions/latest/guides/using-custom-fonts/#using-custom-fonts

This is my app.js and working !!!

import React from 'react';
import { StyleSheet, Text, View, AcivityIndicator } from 'react-native';
import { Font } from 'expo';

export default class App extends React.Component {
constructor () {
super ()
this.state = {fontLoaded: false}
}
async componentDidMount() {
await Font.loadAsync ({
'Roboto': require ('./assets/fonts/Roboto-Bold.ttf')
});
this.setState({fontLoaded: true});
}
render () {
return (
{
this.state.fontLoaded ? (

            <Text style = {{fontFamily: 'Roboto', fontSize: 56 }}>
            SYED JAFFER SATHIK
            </Text>
                                     ) : null
            }
    </View>
    )
}

}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center',

},
});

[NestedLooper]

Thanks @bibekkakati
cp node_modules/\@expo/vector-icons/FontAwesome5.js node_modules/\@expo/vector-icons/FontAwesome5Pro.js

[umutcanbolat]

Thanks @bibekkakati
cp node_modules/\@expo/vector-icons/FontAwesome5.js node_modules/\@expo/vector-icons/FontAwesome5Pro.js

This solves the error until the next npm install. Isn't there any persistent solution?

[alexanderwanyoike]

@umutcanbolat
This is a massive hack but I added this to package.json we can only wait for @expo/vector-icons or native-base to fix this. I had problems install reactivesearch-native until I run this so added it to my post install for now. Warning this is a monkey patch

    "postinstall": "cp ./node_modules/@expo/vector-icons/FontAwesome.js ./node_modules/@expo/vector-icons/FontAwesome5Pro.js"

[Sanjaya94]

If you put it in sub directory, you should add node_modules to the path also:

           'Roboto': require('../node_modules/native-base/Fonts/Roboto.ttf'),
           'Roboto_medium': require('../node_modules/native-base/Fonts/Roboto_medium.ttf'),
       })```

Thank you

[malFuckingFurion]

Delete the node_modules folder
Delete the package-lock.json
Run npm install
Run expo start -c

[alejandroyunes]

Hi @bibekkakati, my error is gone. I was importing like this:

Font.loadAsync({
          'Roboto': require('native-base/Fonts/Roboto.ttf'),
          'Roboto_medium': require('native-base/Fonts/Roboto_medium.ttf'),
        }),

but then I've moved the relevant font files to a folder inside my app and imported like thiis:

Font.loadAsync({
          'Roboto': require('./resources/fonts/Roboto.ttf'),
          'Roboto_medium': require('./resources/fonts/Roboto_medium.ttf'),
        }),

this fixxed my issue aswell, had to move the fonts to a src/resources/fonts and that did the trick