I'm trying to pass data from one screen to another.
My problem is that the first screen goes to a calendar, when I've finished to put the dates in the calendar, I submit and go back to the first screen, the problem is that the first screen doesn't reload when I go back to it, so the data is not loaded, I think.
First screen : "Mytrips" = I click and go to Calendar
Calendar : I send the 2 datas I need with onPress
<TouchableOpacity
style={styles.touchable2}
onPress={() => this.props.navigation.navigate("MyTrips",
{selectedStartDate: selectedStartDate,
selectedEndDate: selectedEndDate })}
></TouchableOpacity>
So now, I go back to MyTrips and I set up the data recovery in the state :
this.state = {
selectedStartDate: props.navigation.state.params && props.navigation.state.params.selectedStartDate
? props.navigation.state.params.selectedStartDate
: "",
selectedEndDate: props.navigation.state.params && props.navigation.state.params.selectedEndDate
? props.navigation.state.params.selectedEndDate
: "",
and I want to display it in the screen :
<Text>{this.state.selectedStartDate}{this.state.selectedEndDate}</Text>
But, there is nothing displayed. I think that it's because when I go back to the first screen, the state is not updated with the data I passed.
Is anyone that can help me ? I think I'm close to get it work but ... I miss something. Thanks for any help
Ciao, this happens bacause this.state.selectedStartDate and this.state.selectedEndDate will be not updated when Calendar component changes selectedStartDate and selectedEndDate. In this.state = {... you are just copying props into state on first component loading. To update state with new values I suggest you to use componentDidUpdate in MyTrips component. Something like:
componentDidUpdate(prevProps, prevState) {
// here you could write:
// if (prevProps !== this.props) {
// this.setState with this.props
// }
}
Related
I am trying to create a button that changes the text when clicked and it saves a value to an array. I then need to save the state of the button and the array to the device using AsyncStorage.
I have the first part done (please see Snack link here) but I am struggling to get the AsyncStorage to work properly. If the button had been clicked once, I would expect that the array has the "item 1" value in it and the button would say clicked. Even if the app is closed and reopened, those values should still remain until the button is clicked again.
I have not found any solutions so far. Is there anyone that has some ideas?
This is the workflow that you should follow:
create an object in state (in this.state = {} for classes, or setState() with hooks) for your button's text value
initialize the above value with the value from AsyncStorage (make sure to add some conditional that if it's empty it returns [])
also take note of how Asyncstorage is async, meaning you'll have to add 'await' when you're assigning the value
add some conditional for the text value of your button, whereas it will show a loading icon, (or nothing, doesn't matter) while AsyncStorage is retrieving the initial data
onPress on your button will change the state value AND the AsyncStorage value (or you can only update the AsyncStorage value when you're closing the page with componentWillUnMount, or useEffect(() => return(--do it here--))
If you're using functional components, it would look something like this:
const [textValues, setTextValues] = useState([])
const setInitialValues = async () => {
const info = await AsyncStorage.getItem('myValues')
setTextValues(info)
}
useEffect(() => {
setInitialValues()
return(
AsyncStorage.setItem('myValues', textValues)
)
}, [])
return(
<View>
<Button onPress={() => setTextValues(textValues + 1) title={textValues.length === 0 ? '' : textValues[textValues.length - 1]}}
</View>
)
I'm using react-native-swipe-list-view (https://github.com/jemise111/react-native-swipe-list-view) in my React Native app and I'm trying to close rows programmatically.
Once the user swipes to the right or left and clicks the button there, I call a function to make API calls and handle a few things. This is where I also try to close the row programmatically. This is working ONLY for the last item in the list. Anything above it, the row stays open.
I do hit my handleClickUpdateItemStatus() function and the API call works fine but as I said, only the last item in the list will close. Anything above that one stays open even though all the other code in the function work fine.
My code looks like this:
class MyComponent extends Component {
constructor(props) {
super(props);
this.handleClickUpdateItemStatus = this.handleClickUpdateItemStatus.bind(this);
}
handleClickUpdateItemStatus(itemId, value) {
this._swipeListView.safeCloseOpenRow();
// Call my API to update item status
}
render() {
return(
<Container>
<SwipeListView
ref={ref => this._swipeListView = ref}
data={this.props.items}
... // Omitted for brevity />
</Container>
);
}
}
Any idea what's causing this?
I did some changes in my second screen and comeback to my first screen the data is not updated. After reloading app the data is updated. How to update the data from second screen to first screen navigation without refresh or reload
What i believe without any code is that if you do navigation.goBack() or navigation.navigate() it doesnt call the api if its in your componentDidMount, what you can try is adding an eventlistener called onFocus so that whenever screen is focused you call that :
like this in your componentDidMount
componentDidMount(){
this.focusListener = this.props.navigation.addListener('didFocus', () => {
// The screen is focused
// Calling action to reset current day index to 1
this.getItineryData();
});
}
Hope it helps
I have multiple buttons in a screen and all are independent like one button is for navigating to next page, another one is for a popup calendar, etc. When I click quickly on all these buttons, all clicks are triggered and I tried using disabling the buttons by using a boolean state variable. But still I can click on the button within the time I set the state. So is there any way to prevent this to happen?
Thanks in Advance!
You can easily achieve this behavior by using setState method. However be careful, as set state is asynchronous. For simple scenario you can to do it like this:
constructor(props) {
super(props);
this.state = {
enableButton: false
};
}
And then use your button or TouchableOpacity like this:
<TouchableOpacity
disabled={this.state.enableButton}
onPress={() => handleMe()}>
<Text>
{text}
</Text>
</TouchableOpacity>
And then for enabling your button:
handleMe() {
this.setState({
enableButton: true
});
}
Let me know, if you are still confused.
There might be a issue with function binding. The function might not have been binded which makes them being called even without tap.
I have a component that locks the screen to landscape before rendering.
When I click on the next button, I go to the next screen which unlocks the orientation.
When I click on the previous button, I go back to the first screen.
(The navigation is done by this.props.navigation.navigate('ScreenName') from react-native-navigation).
The screen now gets locked in the componentDidMount method, is there a similar method that gets called when you go back to an already rendered component?
One way you can do this in react-native-navigation is to pass parameters backwards. When you navigate back to your component pass a parameter that indicates that it went back. After that in your file where you want to have the function, have it listening for the wentBack prop.
Navigating backwards with a parameter:
this.props.navigation.navigate('ScreenName', {
wentBack: true,
});
Listening for the parameter:
const { navigation } = this.props,
wentBack = navigation.getParam('wentBack', 'whatever default value - should be false');
Then in your render method you can render conditionally for whatever you want to show:
render() {
return (
<View>
{wentBack ? 'do something it went back!' : 'it didn't go back'}
</View>
);
}