How can we control the time of splash screen in react native app.?
Now it takes over 4 second.
We can use third party libraries to handle splash screen duration. It would be a one time configuration which includes a bit of native changes on both sides. You can use below libraries :-
https://www.npmjs.com/package/react-native-splash-screen (For normal splash)
https://www.npmjs.com/package/react-native-lottie-splash-screen (For animated splash using lotties)
I have Used This Library
im using Immidiate Hide Splash after budle complete
first See the Documentation
How to Setup SplashScreen see-Video SplashScreen
Use It Like:
import React, {useEffect} from 'react';
import {
requestUserPermission,
NotificationListner,
} from './utils/noteficationService';
import {Provider} from 'react-redux';
import {persistor, store} from './redux toolkit/store';
// SCREENS
import Routes from './navigation';
import {PersistGate} from 'redux-persist/integration/react';
//bootsplash
import RNBootSplash from 'react-native-bootsplash';
import {StatusBar, Text, View} from 'react-native';
import CustButton from './constants/gradiantbutton';
export default function App() {
useEffect(() => {
requestUserPermission();
NotificationListner();
RNBootSplash.hide(); //immidiate
}, []);
return (
<Provider store={store}>
<PersistGate persistor={persistor}>
<Routes />
</PersistGate>
</Provider>
);
}
Related
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
I have a page:
import React, {Component} from 'react';
//import react in our code.
import { Text, View, TouchableOpacity, StyleSheet, WebView } from 'react-native';
//import all the basic component we have used
export default class ProfileScreen extends React.Component {
//Profile Screen to show from Open profile button
render() {
return (
<WebView
source={{uri: 'mobilesite'}}
style={{marginTop: 20}}
/>
);
}
}
On this mobile site, I have a <input type="file" /> element; in testing, I noticed that the file upload functionality works in iOS devices but not Android.
I've researched various threads on this topic, but many are from 1 year or older. I'd like to doublecheck with the developer community that a better solution (that I haven't yet researched) is available?
Thanks #Akshay Mulgavkar for the initial suggestion! https://github.com/react-native-community/react-native-webview (I just tested and it works in Android and iOS!), also to anyone reading this who's just getting into app development and who may be frustrated when they hit a roadblock, please keep learning, you'll get there, one step at a time :)
We are encountering a very bizarre scenario with react-navigation in our React Native application that is only observed on Android (both in the emulator and on physical devices AND for debug builds as well as release builds), but it works fine on iOS.
Context
We have an existing native application, and decided to implement some new screens in React Native as an experiment to see whether it would benefit our development lifecycle.
Our native app has a sidebar menu, and we added a new menu item, that when selected, takes the user into the React Native portion. They can of course navigate back out whenever they want, and later go back into that React Native portion.
Observed problem (Only occurs in Android)
We have identified it relates to the react-navigation library, but we don't know what we're doing wrong.
When the app is first loaded, the user can select the new menu item and the React Native app loads fine, showing its initial route page and with the StackNavigator working fine.
If the user returns to the native portion (either via the back key, or by selecting a different option from the sidebarmenu) and then later opts to return to the React Native portion, then the StackNavigator portion doesn't display. Other React components outside the StackNavigator get rendered. We know it mounts the contained components, as some of them are making API calls and we see those endpoints being queried. It just doesn't render.
Reloading within the emulator will render the app properly again until we navigate out of React Native and then return.
Oddly enough: If we turn on remote JS debugging, it suddenly all works fine.
So our question:
Can anyone spot what we might be missing in how we are using the StackNavigator, that is keeping it from rendering properly? Again: it works fine when the JS debugger is on, making us think that it is not a logic item, but perhaps a timing condition, or some subtle config? Or should we just ditch react-navigation and go to a different navigation library?
Simple reproduction of the issue
Our package.json is:
{
"dependencies": {
"react": "16.0.0",
"react-native": "0.50.4",
"react-navigation": "1.5.2"
}
}
Our React Native entry page (index.js) is:
import * as React from 'react';
import { AppRegistry, Text, View } from 'react-native';
import { StackNavigator } from 'react-navigation';
import TestPage from './TestPage';
AppRegistry.registerComponent('MyApp', () => MyApp);
class MyApp extends React.Component {
public render() {
return (
<View style={{flex:1}}>
<Text>'This text always shows up fine on Android, even on reentry to React application'</Text>
<AccountNavigator />
</View>
);
}
}
const AccountNavigator = StackNavigator(
{
FirstPage: {
screen: TestPage,
navigationOptions: ({ navigation }) => ({
title: 'Test View'
})
},
{
initialRouteName: 'FirstPage'
}
);
The simple test page (TestPage.js) is just:
import * as React from 'react';
import { Text, View } from 'react-native';
export default class TestPage extends React.Component {
render() {
return (
<View style={{flex:1, alignItems: 'center', justifyContent: 'center'}}>
<Text>'If you can read this, then the app is on first load. But return to the native portion and then try to come back to React Native and you will not see me.'</Text>
</View>
);
}
}
Turns out it was a layout setting issue. In our native code, within our React Activity layout XML we had:
<com.facebook.react.ReactRootView
android:id="#+id/ReactRootView
android:layout_width="match_parent"
android:layout_height="wrap_content" />
and the issue was in the "wrap_content" for height which was causing it to render the StackNavigator() as 1 pixel high. No idea why it always happened only on re-entry and not on the first time, nor why the JS debugger would cause the issue to disappear.
Changing layout_height to "match_parent" resolved the issue altogether.
I'm trying to run my project in android emulate, It show error red screen, but iOS run perfectly.
My screen just have a View that contain a text
import React, { Component } from 'react'
import {
View,
Text,
} from 'react-native'
const Test = ({navigation}) => {
return(
<View>
<Text>Hola</Text>
</View>
)
}
export default Test
and in the index.js call de screen
import { AppRegistry } from 'react-native';
import Test from "./src/test"
AppRegistry.registerComponent('SanSilvestre', () => Test);
A screen shot
Attempted to redefine property 'padding'. (http://10.0.2.2:8081/index.bundle?platform=android&dev=true&minify=false:65166)
Attempted to redefine property 'padding'. (http://10.0.2.2:8081/index.bundle?platform=android&dev=true&minify=false:65166)
screen shot
thanks
You probably have a syntax error in your code where you are defining padding twice in the same object.
I have followed every Lottie example for React native and looked at questions that have the same problem like Lottie animation on Expo but I have successfully imported an animation exported to .json via Bodymovin using React native here:
import React, {Component} from 'react';
import Animation from 'lottie-react-native';
import {
StyleSheet,
Text,
View,
Animated,
Easing,
ScrollView,
RefreshControl,
AppRegistry
} from 'react-native';
export default class LottieTest extends Component {
componentDidMount() {
this.animation.play();
}
render()
{
//console.log(this.);
return (
<View>
<Animation
ref={animation => { this.animation = animation; }}
style={{
width: 500,
height: 500
}}
source={require('./animations/btn1.json')}
/>
</View>
);
}
}
I am putting it in a view so that is not the problem. The animation json file is not finding the images, so only the shapes (vectors that were converted to shapes in Aftereffects) are being displayed.
I can't figure out why the json cant find path to the images. My images folder is in same folder as the .json and I have changed the path here to match the class it is being called from:
,"fr":29.9700012207031,"ip":0,"op":34.0000013848484,"w":861,"h":861,"nm":"button1","ddd":0,"assets":[{"id":"image_0","w":782,"h":782,"u":"../animations/images/","p":"img_0.png"}
How can I import images using React native and Lottie? What is wrong here?
Images for animation should be added to XCode and Android Studio projects directly.
So you should have .json file in React Native project and image assets in ios/android projects.