Quantcast
Channel: Active questions tagged react-native+typescript - Stack Overflow
Viewing all articles
Browse latest Browse all 6287

React Native navigation (4.x) props become null between screens

$
0
0

I have a stack of screens that are used to create objects that will be displayed at the end.

While passing parameters through screens there is no problem until the last one.

When you confirm on the last screen the function that navigates to the dashboard (where all objects are listed) triggers, it goes where it needs to go, but at the moment of retrieving the parameters in the constructor they are returned as null, even if by debugger I can clearly see that the prop is successfully passed to the navigate function.

The piece of code below calls an api from the backend to retrieve the current user, if successful the openDashboardHouses function is triggered:

new UsersApi(context).apiUsersCurrentMeGet().then(resp => {            console.log(resp);                     // passing context - user - house object             openDashboardHouses(context, resp, context.state.house);        }).catch(error => {            console.log(JSON.stringify(error))            AlertHelper.showSimpleErrorAlert();        });

The openDashboardHouses function is just the single line of code to navigate:

export function openDashboardHouses(context: Component<NavigationProps, any>, user: User, house: House = null) {    context.props.navigation.navigate(dashboardHousesRoute, {user: user, house: house}); // During debugging the values on this line are correctly filled}

Then on the next screen it should get the props in the constructor and save them in the state:

constructor(props) {        super(props);        setHeaderTitleLocalized(props, 'screens.dashboard.title');        this.state = {            loading: false,            user: getUserFromNavigationProps(this),             houses: [],            resources: [],            created_house: getHouseFromNavigationProps(this),         };    }

As you can see I have two helper functions, neither of them returns anything

export function getUserFromNavigationProps(context: Component<NavigationProps, any>) {    return context.props.navigation.getParam(USER_KEY); // USER_KEY = 'user'}export function getHouseFromNavigationProps(context: Component<NavigationProps, any>): House {    return context.props.navigation.getParam(HOUSE_KEY); // HOUSE_KEY = 'house'}

Any idea of what is going on?

Additional info: that house prop is created in the first screen and it's passed in the same way in all of them. It's just the last one that doesn't want to cooperate

Dependencies:

React Native:

├─ react-native@0.62.2│├─ @sentry/react-native@^1.0.0

React Navigation:

├─ @react-navigation/core@3.5.0├─ @react-navigation/native@3.6.2├─ @react-navigation/web@1.0.0-alpha.9├─ react-navigation-drawer@1.4.0├─ react-navigation-stack@1.5.3├─ react-navigation-tabs@1.2.0├─ react-navigation@3.12.1│├─ @react-navigation/core@~3.5.0│├─ @react-navigation/native@~3.6.1│├─ react-navigation-drawer@~1.4.0│├─ react-navigation-stack@~1.5.0│└─ react-navigation-tabs@~1.2.0

Viewing all articles
Browse latest Browse all 6287

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>