CODEWITHSUNDEEP
javascriptreact-native
DD DD
DD DD

Reputation: 1228

How to pass this.props to js file using react-native

I am making auth component using react-native.
And the code below sends to 'MainTab' of 'this.props.navigation' depends on the result of axios.

   <TouchableOpacity onPress={this.handleSubmit}>
       <Text>Save</Text>
   </TouchableOpacity>

   handleSubmit = () => {
       const result = await axios.post(
           'http://192.0.0.1:4000/clients',
            users
           );

       if (result.data.success) {
          return this.props.navigation.navigate('MainTab');
       }
       return false
   };

But I want to use handleSubmit at an other 'js' file to avoid doing repeatedly.
Thus, I edit a code like below.

import { saveSettings } from '../../storage/settingsStorage'

handleSubmit(): void {
    saveSettings(this.state);
}


// in 'settingsStorage.js'

export const saveSettings = async users => {
  try {
    const result = await axios.post(
      'http://192.0.0.1:4000/clients/token',
      users
     );

    if (result.data.success) {
      return this.props.navigation.navigate('MainTab');
    }
    return false
  } catch (e) {
    console.log(e);
  }
};

And in this case, I know 'this.props' can't be passed in normal Js file without passing props.
But I don't know how can I pass the props?
Thank you so much for reading this.

Upvotes: 0

Views: 51

Answers (2)

Mehran Khan
Mehran Khan

Reputation: 3636

Instead of passing navigation prop you can use a technique Navigating without the navigation prop as described in official site .

App.js

import { createStackNavigator, createAppContainer } from 'react-navigation';
import NavigationService from './NavigationService';

const TopLevelNavigator = createStackNavigator({
  /* ... */
});

const AppContainer = createAppContainer(TopLevelNavigator);

export default class App extends React.Component {
  // ...

  render() {
    return (
      <AppContainer
        ref={navigatorRef => {
          NavigationService.setTopLevelNavigator(navigatorRef);
        }}
      />
    );
  }
}

we define NavigationService which is a simple module with functions that dispatch user-defined navigation actions.

/ NavigationService.js

import { NavigationActions } from 'react-navigation';

let _navigator;

function setTopLevelNavigator(navigatorRef) {
  _navigator = navigatorRef;
}

function navigate(routeName, params) {
  _navigator.dispatch(
    NavigationActions.navigate({
      routeName,
      params,
    })
  );
}

// add other navigation functions that you need and export them

export default {
  navigate,
  setTopLevelNavigator,
};

Now use it every where without navigation prop

// any js module
import NavigationService from 'path-to-NavigationService.js';

// ...

NavigationService.navigate('MainTab');

Upvotes: 1

azundo
azundo

Reputation: 6052

Based on your description I think you can just add a second parameter to saveSettings and pass the navigation object through:

import { saveSettings } from '../../storage/settingsStorage'

handleSubmit(): void {
    saveSettings(this.state, this.props.navigation);
}


// in 'settingsStorage.js'

export const saveSettings = async (users, navigation) => {
  try {
    const result = await axios.post(
      'http://192.0.0.1:4000/clients/token',
      users
     );

    if (result.data.success) {
      return navigation.navigate('MainTab');
    }
    return false
  } catch (e) {
    console.log(e);
  }
};

Upvotes: 1

Related Questions