Develop Reference

why I keep getting the render method error when i try to customize fonts in my project?

I want to use a custom font for my project but this error keeps appearing as soon as I run it on emulator
import { StyleSheet, Text, View } from 'react-native'
import React from 'react';
import {AppLoading} from 'expo';
import * as Font from 'expo-font';
import {useState} from 'react';
these are the imports
const getFonts=()=>{
return Font.loadAsync({
inkfree:require("./assets/fonts/Inkfree.ttf"),
} );
};
and this is the method I used to get the fonts
const App=()=> {
const[fontLoading,setfontloading]=useState(false);
if(fontLoading)
{ return (
<View>
<Text>App</Text>
</View>
)}
else{
return(
<AppLoading
startAsync={getFonts}
onFinish={()=>setfontloading(true)}
/> )
}
}
and this is the main code
and i run to this error:
Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got:
undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.
Check the render method of `App`.
This error is located at:
in App (created by ExpoRoot)
in ExpoRoot
in RCTView (created by View)
in View (created by AppContainer)
in RCTView (created by View)
in View (created by AppContainer)
in AppContainer
in main(RootComponent)

Error: Element type is invalid: expected a string - Getting this error after using NativeBaseProvider

I upgraded native-base library from 2.13.14 to 3.0.3 and wrapped my App.js content in NativeBaseProvider. Here is the error I got after doing this:
Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.
--
My Code:
import React, {useEffect} from 'react';
import {I18nManager, ActivityIndicator} from 'react-native';
import {NavigationContainer} from '#react-navigation/native';
import {NativeBaseProvider, Container} from 'native-base';
import TrackPlayer from 'react-native-track-player';
import {PlayerContextProvider} from './contexts/PlayerContext';
import MainStackNavigator from './Navigators/MainStackNavigator';
const App = () => {
const [isReady, setIsReady] = React.useState(false);
useEffect(() => {
TrackPlayer.setupPlayer().then(() => {
console.log('player is setup');
TrackPlayer.updateOptions({
capabilities: [
TrackPlayer.CAPABILITY_PLAY,
TrackPlayer.CAPABILITY_PAUSE,
TrackPlayer.CAPABILITY_STOP,
TrackPlayer.CAPABILITY_JUMP_BACKWARD,
TrackPlayer.CAPABILITY_JUMP_FORWARD,
],
jumpInterval: 30,
});
setIsReady(true);
});
}, []);
return (
<NativeBaseProvider>
<Container>
{isReady ? (
<PlayerContextProvider>
<NavigationContainer>
<MainStackNavigator />
</NavigationContainer>
</PlayerContextProvider>
) : (
<Container>
<ActivityIndicator />
</Container>
)}
</Container>
</NativeBaseProvider>
);
};
I18nManager.forceRTL(true);
export default App;

I did found the root cause of this problem (in my case). The approach was to go down the navigator structure (in your case start with MainStackNavigator) and replace the rendered component with the example code from https://docs.nativebase.io/setup-provider until it breaks:
function Test() {
return (
<Box flex={1} bg="#fff" alignItems="center" justifyContent="center">
<Text>Open up App.js to start working on your app!</Text>
</Box>
)
}
In my case it lead me to a component which was using deprecated native-base elements from v2. Sadly there is no good deprecation guide or migration guide which tells you how to upgrade from v2 to v3.
So following this approach might lead out of this situation (the error message is not really helpful). Keep an eye on the following deprecated components or functions and replace them as follows:
Header -> use HStack docs.nativebase.io/3.0.0/migration/Header
Body -> use Box or Container (not documented)
Left -> use Center or remove (not documented)
Right -> use Center or remove (not documented)
getTheme -> use extendTheme docs.nativebase.io/setup-provider#add-custom-theme-optional
StyleProvider -> use NativeBaseProvider docs.nativebase.io/setup-provider
This is my list of deprecated components so far. In addition here are some update guides for
Icon docs.nativebase.io/3.0.0/migration/Icon
Button docs.nativebase.io/3.0.0/migration/Button
and there are a lot more to be found on this index page https://docs.nativebase.io/3.0.0/migration/
I hope It helps you solving this problem.

Have a try to move the forceRTL method inside the useEffect of the app initialization.
like :
useEffect(() => {
I18nManager.forceRTL(true); // here..
TrackPlayer.setupPlayer().then(() => {
Might it will help you.

How can I improve the launch time react native app?

I've already published an app for IOS and Android.
But the app makes launch time around 5 seconds.
I detect it to make around 5 seconds to load the first screen in Routes
The app.tsx code below:
import React, {useEffect} from 'react';
import configureStore from './Store';
import {SafeAreaProvider} from 'react-native-safe-area-context';
import {Provider} from 'react-redux';
import {PersistGate} from 'redux-persist/es/integration/react';
import {NavigationContainer} from '#react-navigation/native';
import Routes from './configs/Routes';
import {navigationRef} from './services/NavigationService';
import {LocalizationProvider} from './locales/Translation';
import ModalContainer from './modules/ModalGlobal/containers/ModalContainer';
import NetInfoContainer from './containers/NetInfoContainer';
import {
listenNotificationForeground,
requestUserPermission,
} from './services/NotificationService';
import axios from 'axios';
import {removeCurrentSession} from './modules/Setting/service/SettingService';
import {UNAUTHORIZED} from './configs/Constants';
axios.interceptors.response.use(
response => response,
error => {
const {status} = error.response;
if (status === UNAUTHORIZED) {
removeCurrentSession();
}
return Promise.reject(error);
},
); // User for HTTP code difirrent 200 from axios
const App = () => {
useEffect(() => {
let listenBackground: any;
async function _notificationHandle() {
await requestUserPermission();
listenBackground = listenNotificationForeground();
}
_notificationHandle();
return listenBackground;
}, []);
return (
<Provider store={configureStore().store}>
<PersistGate loading={null} persistor={configureStore().persistor}>
<SafeAreaProvider>
<LocalizationProvider> // Locale language
<NetInfoContainer /> // Use to show lost connection
<NavigationContainer ref={navigationRef}>
<Routes />
</NavigationContainer>
<ModalContainer /> // Define global modal to use many routes
</LocalizationProvider>
</SafeAreaProvider>
</PersistGate>
</Provider>
);
};
export default App;
Could I improve anything in this code? Or any way to improve launch time?
Thank you very much!

for android you can eliminate blank screen at the beginning of the project by enabling hermes on app/build.gradle. Hermes convert js code to java code. If you defector your release apk, you can see only java file after enabling hermes and there is a change to reduce the size of your application. the full instruction and documentation see this

You can use react-native-screens to optimize the memory usage and performance of your app, use it as follow (After installing it with yarn add react-native-screens):
Your android/app/src/main/java/<your package name>/MainActivity.java need to look like this:
import android.os.Bundle;
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(null);
}
On your entry file (Mostly App.js), add the following:
import { enableScreens } from 'react-native-screens';
enableScreens(false);
More about it here: Optimize memory usage and performance using react-native-screens

You should also add a splash-screen (if you don't have one) because there will always be a blank screen at the start of 1 second while react-native loads its dependencies. Setting up a splash screen will make this unnoticeable.
i use react-native-splash-screen

Documentation of Navigator in react native

When I am using Navigator from react native I am getting an error. The error is:
Warning: React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.
Check your code at App.js:11.
My code is:
import React, { Component } from 'react';
import {
Text,
Navigator,
TouchableHighlight
} from 'react-native';
export default class App extends Component {
render() {
return (
<Navigator
initialRoute={{ title: 'Awesome Scene', index: 0 }}
renderScene={(route, navigator) => (
<Text>Hello {route.title}!</Text>
)}
style={{ padding: 100 }}
/>
);
}
}
I followed this tutorial: https://reactnative.dev/docs/0.43/navigator
Can someone please help me in this. Is there something wrong in documentation?

This code example is from react doc version 0.43. After that "Navigator" was removed.
If you do not care about backward compatibility then I would suggest following current documentation (0.63). In the latest version, there is more simple solution is given.

React native touch id not working

I want to create touch id local authentication in react native. I used
npm react-native-touch-id
import React, { Component } from 'react';
import {
Platform,
StyleSheet,
Text,
View,
TouchableHighlight
} from 'react-native';
var LocalAuth = require('react-native-touch-id')
var YourComponent = React.createClass({
_pressHandler() {
LocalAuth.authenticate({
reason: 'this is a secure area, please authenticate yourself',
falbackToPasscode: true, // fallback to passcode on cancel
suppressEnterPassword: true // disallow Enter Password fallback
})
.then(success => {
AlertIOS.alert('Authenticated Successfully')
})
.catch(error => {
AlertIOS.alert('Authentication Failed', error.message)
})
},
render() {
return (
<View>
...
<TouchableHighlight onPress={this._pressHandler}>
<Text>
Authenticate with Touch ID / Passcode
</Text>
</TouchableHighlight>
</View>
)
}
})
but it says nothing, i followed this link
https://github.com/ElekenAgency/react-native-touch-id-android

Came here because I've got the same question, but looking at your code I assume you've got lost in mixing libs.
Looking at the line:
var LocalAuth = require('react-native-touch-id')
You're importing LocalAuth which I believe is a part of react-native-local-auth library built on top of react-native-touch-id, while following a tutorial for 3-rd library which is react-native-touch-id-android.
According to their example in the repo, your import should look like this:
import Finger from 'react-native-touch-id-android'
My guess for the reason it's not crashing on you is because you've installed react-native-local-auth somewhere in the process befor trying out react-native-touch-id-android.
Better start all over - go to package.json and remove the above mentioned libraries, then run npm install and then follow the step-by-step guide in the repo you've posted.
I'd be glad if you come back afterwards and report on whether it worked out or not. Good luck.

use this code it worked for me !
import TouchID from 'react-native-touch-id';
TouchID.authenticate('Authentication')
.then(success => {
// Success code
})
.catch(error => {
// Failure code
});