I'm trying to get the initial position of the app at x:(device.width*2) since the app consist of 3 main views, yet it doesn't seem to move even with the animation delay, it start on the left view.
componentDidMount() {
const offset = window.width * this.props.initialIndex;
InteractionManager.runAfterInteractions(() => {
this._scrollView.scrollTo({x:offset, animated: false});
})
}
I also tried with Interaction Manager, but i don't know why it doesn't work; setting a timeout worked for me.
setTimeout(() => {
this.scrollView.scrollTo(cordenates, animated);
}, 0);
Related
I have this extremely weird situation. I have this code:
useEffect(() => {
let timeout = undefined as NodeJS.Timeout | undefined;
if (dismissAfter && visible) {
timeout = setTimeout(() => { <--- This code get called, but all code inside it not being called
alert("HELLO"); <--- This alert does not even get called
setVisible(false);
}, dismissAfter);
}
return () => { if (timeout) clearTimeout(timeout); }
}, [dismissAfter, visible]);
The code is to clear a notification automatically if there is dismissAfter property. If I run on web browser this works fine, but not in Android Emulator.
What am I missing here? Is this bug?
Here is my sample React component:
const OwnerView = () => {
const [monthlyCharge, setMonthlyCharge] = useState(0)
useEffect(() => {
getPerMonthCharges(ownerPhoneNumber, vehicles.length)
}, [])
async function getPerMonthCharges(ownerPhoneNumber, noOfCars) {
console.log(`inside getPerMonthCharges`);
try {
const serviceProviderChargesDoc = await firestore().collection(`${serviceProviderId}_charges`).doc(`${ownerPhoneNumber}`).get()
if (serviceProviderChargesDoc?.data()?.chargesPerMonth > 0) {
setMonthlyCharge(serviceProviderChargesDoc?.data()?.chargesPerMonth)
return
}
} catch (error) {
console.log(`Error while fetching monthly charge ${error}`);
}
setMonthlyCharge(noOfCars * perMonthGeneralCharge)
console.log(`done with getPerMonthCharges`);
}
}
There is a possibility that OwnerView gets unmounted even before getPerMonthCharges() completes its execution. Therefore in case OwnerView gets unmounted I receive a warning that am doing state update on an unmounted component and this is a non-op. Can someone please highlight what is your observation and right way to write this piece of code?
There are many ways to address this
You can check if the component is still Mounted, a bit ugly approach I agree, but quite a standard one (I would just use something like useAsync from react-use, which essentially does the same, but hides the ugliness)
Move loading logic outside of UI and make part of the global state (Redux, MobX, Apollo, or any other state management library), it would be in lines of separation of concerns and should make your code more readable.
The worst would be to prevent your user from any actions, while content is loading - making your app seem clunky, but React would not complain anymore.
The closest to the right way would be 2, but this can sparkle religious debates and some witch-burning, which I'm not a fan of.
You can refer to this: https://reactjs.org/docs/hooks-effect.html#effects-with-cleanup
You can have a variable to keep track whether your component has unmount, let isMounted = true inside useEffect and set it to false as soon as the component is unmounted.
The code will be:
useEffect(() => {
let isMounted = true;
async function getPerMonthCharges(ownerPhoneNumber, noOfCars) {
console.log(`inside getPerMonthCharges`);
try {
const serviceProviderChargesDoc = await firestore().collection(`${serviceProviderId}_charges`).doc(`${ownerPhoneNumber}`).get()
if (serviceProviderChargesDoc?.data()?.chargesPerMonth > 0 && isMounted) { // add conditional check
setMonthlyCharge(serviceProviderChargesDoc?.data()?.chargesPerMonth)
return
}
} catch (error) {
console.log(`Error while fetching monthly charge ${error}`);
}
if (isMounted) setMonthlyCharge(noOfCars * perMonthGeneralCharge) // add conditional check
console.log(`done with getPerMonthCharges`);
}
getPerMonthCharges(ownerPhoneNumber, vehicles.length)
return () => { isMounted = false }; // cleanup toggles value, if unmounted
}, []);
I have a requirement of pausing video and some other actions to perform when user clicks on home button or switch to another app using swiper action. I looked at react-native AppState, but it is not calling the event listener when home button clicked on android for some devices. Is there any compatibility minimum version requirements for the react-native app state to work?
The code I tried is as below
useEffect(() => {
AppState.addEventListener("change", _handleAppStateChange);
return () => {
AppState.removeEventListener("change", _handleAppStateChange);
};
}, []);
const _handleAppStateChange = (nextAppState: any) => {
console.log(nextAppState);
};
The console is not printed when clicked on home button/Swiped to another app on some android devices. Is there anyway I can achieve this using react-native preferably without using any external libraries.
As for your requirement, in react-native, to detect is application is in foreground or in background, you don't need to add home-button listener, we can easily achieve this with the help of AppState, check below example,
_handleAppStateChange = (nextAppState: any) => {
if (this.state.appState === "active" && nextAppState === "background") {
// this condition calls when app goes in background mode
// here you can detect application is in background, and you can pause your video
} else if (this.state.appState === "background" && nextAppState === "active") {
// this condition calls when app is in foreground mode
// here you can detect application is in active state again,
// and if you want you can resume your video
}
this.setState({ appState: nextAppState });
};
You also need to attach AppState listener to application to detect application states, for example,
componentDidMount() {
AppState.addEventListener("change", _handleAppStateChange);
}
and detach app-state listener when application component unmount, for example,
componentWillUnmount {
AppState.removeEventListener("change", _handleAppStateChange);
}
Or if you are working with functional component you attach or detach app-state listener in useEffect, for example,
useEffect(() => {
AppState.addEventListener("change", _handleAppStateChange);
return () => {
AppState.removeEventListener("change", _handleAppStateChange);
};
}, []);
ScrollToEnd() (on a FlatList) appears to have no effect in Android (or in the iOS simulator). The refs appear to be correct, and my own scrollEnd function is being called (I was desperate) but nothing changes on the screen. The effects of all the scroll functions appear to be really inconsistent - I can get scrollToOffset to work on iOS but not Android. I read that this may be because Android doesn't know the height of the items in the flatlist, but it still doesn't work with getItemLayout implemented.
There's no feedback/errors I can see which would explain why this wouldn't work. Note that I am developing with Redux, using Android 7.0 to test and am trying this in Debugging mode (using react-native run-android). The FlatList is inside a normal View (not a ScrollView).
The logic in the code is correct as far as I can tell, but calling scrollToEnd on the FlatList has no visible effect.
My render() function:
<View style={styles.container}>
<View style={styles.inner}>
<FlatList
ref={(ref) => { this.listRef = ref; }}
data = {this.getConversation().messages || []}
renderItem = {this.renderRow}
keyExtractor = {(item) => item.hash + ''}
numColumns={1}
initialNumToRender={1000}
onContentSizeChange={() => {
this.scrollToEnd();
}}
getItemLayout={(data, index) => (
{length: 50, offset: 50 * index, index}
)}
onContentSizeChange={this.scrollToEnd()}
onLayout={ this.scrollToEnd()}
onScroll={ this.scrollToEnd()}
/>
</View>
</View>
this.scrollToEnd():
scrollToEnd = () => {
console.log("scrolling func"); // This is printed
const wait = new Promise((resolve) => setTimeout(resolve, 0));
wait.then( () => {
console.log("scrolling"); // This is also printed
this.listRef.scrollToEnd(); // Throws no errors, has no effect?
});
};
Thanks so much.
Your code seems correct to me, but which version of React are you using? Starting from v16.3 the recommended way to use refs is through React.createRef(), so your code would be change to:
// constructor
constructor(props) {
super(props)
this.flatlistRef = React.createRef();
}
// inside render
<FlatList
ref={this.flatlistRef}
...
/>
// scrollToEnd
scrollToEnd = () => {
this.flatlistRef.current.scrollToEnd(); // ref.current refers to component
};
Note that this might not solve your problem, since the older usage of ref should still be valid
Screen mentioned in the initial call of Navigation API is being called twice.
Below is my src in App - root component.
constructor() {
//**mobx** reaction(() => app.currentRoot,(res) => this.startApp(res))
this.startApp('user.login')
}
startApp(root){
Navigation.startSingleScreenApp({
screen: {
screen: root, //componentDidMount is called twice.
navigatorStyle: {
screenBackgroundColor: colors.BACKGROUND,
statusBarColor: colors.BACKGROUND
},
navigatorButtons: {}
}
})
}
I have to load some initial data for the user which I will get through an API call to the server. The call is being made twice and data gets appended (The real problem)
Is there any workaround or am I doing something wrong ?