I'm trying to make a custom loading screen while my Firebase function is updating the data and avoid the user to leave the screen while loading, except that my header is still clickable and doesn't prevent the user to go back.
I tried with SafeAeraView, etc. but I didn't get any result.
The research goal illustrated:
Here is a pic of what i mean
This is how I do it:
if (taked === true) {
setTimeout(() => {
cancelDelivery();
}, 1500);
return (
<SafeAreaView style={{ flex: 1, backgroundColor: "grey",justifyContent: "center", alignItems: "center"}}>
<View style={styles.mainContainer}>
<Image style={{width: 50, height: 50}} source={require('../../assets/images/delivraide-icon-192.png')}/>
<Text style={styles.patientText}>Veuillez patientez s'il vous plaît</Text>
</View>
</SafeAreaView>
);
After the function is executed, the user is returned to the parent with the PopToTop function.
Basically what you need to do is prevent default behavior while you are updating data by adding a listener on beforeRemove event (please check this doc to know when this event is triggered). You will need to have some state variable (updatingData or whatever) and set it to true when you start the request and set it to false when request completes.
navigation.addListener('beforeRemove', (e) => {
if (updatingData) {
e.preventDefault();
}
}
Related
i'm handling firebase auth errors and i cant show error message on screen
here is my code;
if (error.code === "auth/user-not-found") {
return (
<View>
<Text>user not found</Text>
<Text>try create a account or check ur mail and passwrd</Text>
</View>
)
}
but i use alert it works perfectly.
how can i solve it ?
Try to add some styles in your components so you can see something.
if (error.code === "auth/user-not-found") {
return (
<View style={{flex: 1, width: "100%", height: "100%", backgroundColor: "#f00"}}>
<Text>user not found</Text>
<Text>try create a account or check ur mail and passwrd</Text>
</View>
)
}
I like to try first with full width and height, and with a very basic color (in this case red) so I can watch whats happening in my views. Remember that you can save and metro gonna refresh your app in your emulator/phone.
I have my own HeaderComponent with an image:
const CustomHeaderLogo = () => {
return (
<View style={{ flex: 1, alignItems: "center", justifyContent: "center" }}>
<Image
source={require("../assets/logo.png")}
style={{ width: 160, height: 30 }}
/>
</View>
);
};
export default CustomHeaderLogo;
which I use in navigationOptions in stackNavigator on all my screens like this:
navigationOptions: {
headerTitle: () => <HeaderLogo />
}
It works but the problem is, that the image is flickering / blinking when navigating from screen to screen. That's especially noticeable on iOS.
Is there any way to prevent the image from flickering?
EDIT: Need to edit my question since I now know where the flickering is coming from.
It is the animation effect in the header. I still don't know how to disable it since animationEnabled setting to false doesn't change anything. https://reactnavigation.org/docs/4.x/stack-navigator#animationenabled
I have a question. I have a loader and during the loading I would show three different texts. Like text1, then this disappear and it's show text2 and then text3.
<View style={style.container}>
<View style={style.page}>
<ActivityIndicator size="large" color="#56cbbe" />
<Text>Text1.. </Text>
<Text>Text2.. </Text>
<Text>Text3.. </Text>
</View>
</View>
In this case I only show the three texts together. How can I do?
Thank you :)
One way to solve this is to use setInterval and call update function to loop through the texts assuming if they are present in form of array.
Simply saying for example.
Let's maintain loadingText in state as loadingText: ['text1', 'text2', 'text3'],A variable to track the present item as currentLoadingTextIndex: 0 and call setInterval in componentDidUpdate.
Be careful when calling update function in here,as one wrong mistake will make your app crash.
componentDidUpdate(prevProps, prevState) {
if (!prevState.isLoading && this.state.isLoading) {
this.timerId = setInterval(this.changeLoadText, 2000);
} else if (prevState.isLoading && !this.state.isLoading) {
clearInterval(this.timerId);
}
}
and finally our update function
changeLoadText = () => {
this.setState(prevState => {
return {
currentLoadingTextIndex:
(prevState.currentLoadingTextIndex + 1) %
prevState.loadingText.length,
};
});
};
I am attaching a working expo Demo for clarity purpose.
What you want is to show indicator and text1 during loading time and then text2 and text3. Is that right?
So I made an example for you. This should solve the problem by changing the status value. You can display the indicator for the duration of loading and show the text by changing the status value when loading is complete.
Example Code
//This is an example code to understand ActivityIndicator//
import React from 'react';
//import react in our code.
import { ActivityIndicator, Button, View, StyleSheet,Text } from 'react-native';
//import all the components we are going to use.
export default class App extends React.Component {
state = { showIndicator: true };
componentDidMount() {
setTimeout(() => {this.setState({showIndicator: false})}, 2000)
}
onButtonPress = () => {
//function to change the state to true to view activity indicator
//changing state will re-render the view and indicator will appear
};
render() {
//Check if showIndicator state is true the show indicator if not show button
if (this.state.showIndicator) {
return (
<View style={styles.container}>
{/*Code to show Activity Indicator*/}
<ActivityIndicator size="large" color="#0000ff" />
<Text>Text1.. </Text>
{/*Size can be large/ small*/}
</View>
);
} else {
return (
<View style={styles.container}>
<Text>Text2.. </Text>
<Text>Text3.. </Text>
</View>
);
}
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
flexDirection: 'column',
alignItems: "center"
},
});
// I am using below code for navigating one screen to another i.e Home page .
But when am navigating home page , I have to refresh the page ..reload . In current , when i am coming to home screen non of the life cycle method is getting call . Specially UserAvatar component I have to refresh ,or recall .
Please suggest
<View style={{textTransform: 'lowercase'}}><YellowBtn label="Go to
Dashboard"
OnClick={this._redirectCustomerView}/></View>
_redirectCustomerView = () => {
this.props.navigation.navigate('UserHome');
};
// Below is home page
export default class App extends React.Component {
constructor(props) {
super(props);
this.state = { title: 'Hello!', hasFooterPermission: false };
console.log("Valuueeeeeee");
}
async componentDidMount() {
const homeFooter = await hasPermission('clm.360D.fe.restrictedView.allowed');
this.setState({
hasFooterPermission: homeFooter
})
}
onSearchClick = () => {
this.props.navigation.navigate('SubscriberSearch');
};
componentWillMount(){
console.log(" Home page dataaaa");
}
render() {
return (
<View>
<ImageBackground source={BG} style={{ width: '100%', height: '100%' }} resizeMode="cover">
<View style={{ paddingTop: 5 , alignContent:'space-between',flexDirection:'row'}}>
<View style={{alignSelf: 'flex-start', flex:1}}>
<UserAvatar navigationProps={this.props.navigation} avatarSize={40} isTouchable={true}/>
</View>
{/* <View style={{alignSelf: 'flex-end'}}>
<Icon
name="bell-outline"
type="MaterialCommunityIcons"
style={{ color: '#FFFFFF' }}
onPress={() => Toastr.showToast('No new notifications!', 3000)}
/>
</View> */}
</View>
use push instead of navigate
this.props.navigation.push('UserHome');
It is not homepage duty to know if you have to refresh the page. The suggested approach is that when the condition to reload is met (avatar update, user properties changes, etc) then the calling entity should go to the homepage and if needed ask for a reload (i.e., window.location.reload(true))
If you add a listener on the home page through the navigation prop, you can call a function when a transition to or from the home page is about to happen ('willFocus'/'willBlur') or if it has completed ('didFocus'/'didBlur').
This worked for me:
componentDidMount(){
this.props.navigation.addListener('willFocus',this.load)
}
load = () => {
//whatever you want to do when the page loads
}
Documentation here: https://reactnavigation.org/docs/en/navigation-prop.html
I am using Modal Wrapper to show modal popup in my code. We have visible props to enable and disable the modal view according to the boolean value set to it. I enable the modal view and disable it with setTimeout. setTimeout is called immediately. I attach my code
this.setState({offline: true})
setTimeout(() => {
this.setState({offline:false});
}, 3000)
<ModalWrapper containerStyle={{ flexDirection: 'row', alignItems: 'flex-end' }} overlayStyle={{backgroundColor:'transparent'}} visible={this.state.offline} style = {[styles.snackBarView, {bottom:(height === 812) ? 90 : 56}]}>
<View>
<Image style={styles.snackBbarIconOffline} source={require('../Resources/icons/offline.png')} />
</View>
<Text style={styles.privacyPolicyText}>{'You are offline'}</Text>
</ModalWrapper>
Try this to assess the issue
componentWillReceiveProps() {
console.log('called componentWillReceiveProps')
setTimeout(() => {
console.log('called timeout callback')
}, 3000)
}
There really should be a 3s offset, otherwise there is really something fishy going on.