search

expo / react-native-action-sheet

A cross-platform ActionSheet for React Native
MIT License
1.37k stars 224 forks source link

navigation prop is undefined after wrapping with connectActionSheet method #152

Closed remotenode closed 4 years ago

remotenode commented 4 years ago

Hi. Thanks for the library. Here "LocalContacts" is the component wrapped with redux.

const ReduxConnected = connect(
  (state: RootState) => ({
    localContacts: state.localContacts
  }),
  mapDispatchToProps
)(LocalContacts)

const ConnectedApp = connectActionSheet<{}>(ReduxConnected);

export default class AppContainer extends React.Component {
  render() {
    return (
      <ActionSheetProvider>
        <ConnectedApp />
      </ActionSheetProvider>
    );
  }
}

Any ideas of how to fix this?

bradbyte commented 4 years ago

Hey @AwanesowArtem! What happens if you first connect LocalContacts to action sheet, and then lastly connect it to redux (so do the reverse of what you tried)?

diosney commented 4 years ago

@bradbumbalough It happens the same, all my connected props are undefined inside the this.props.showActionSheetWithOptions call, but in the component body they are fine.

I tried both ways and the two gives undefined.

    "@expo/react-native-action-sheet": "^3.4.0",
    "@react-native-community/async-storage": "^1.6.2",
    "amazon-cognito-identity-js": "^3.0.13",
    "aws-amplify": "^1.1.30",
    "aws-amplify-react-native": "^2.1.14",
    "axios": "^0.19.0",
    "decimal.js": "^10.2.0",
    "formik": "^2.1.1",
    "moment": "^2.24.0",
    "moment-timezone": "^0.5.27",
    "react": "16.8.6",
    "react-moment": "^0.9.6",
    "react-native": "0.60.4",
    "react-native-countdown-component": "^2.6.0",
    "react-native-elements": "^1.1.0",
    "react-native-extended-stylesheet": "^0.12.0",
    "react-native-gesture-handler": "^1.3.0",
    "react-native-material-dropdown": "^0.11.1",
    "react-native-modal": "^11.3.1",
    "react-native-progress": "^4.0.2",
    "react-native-reanimated": "^1.1.0",
    "react-native-super-grid": "^3.1.1",
    "react-native-swiper": "^1.5.14",
    "react-native-text-input-mask": "^1.0.6",
    "react-native-vector-icons": "^6.6.0",
    "react-navigation": "^3.11.1",
    "react-navigation-animated-switch": "^0.2.1",
    "react-navigation-backhandler": "^1.3.2",
    "react-navigation-header-buttons": "^3.0.1",
    "react-redux": "^7.1.0",
    "redux": "^4.0.4",
    "redux-axios-middleware": "^4.0.1",
    "redux-persist": "^6.0.0",
    "redux-thunk": "^2.3.0",
    "uuid": "^3.3.3"
diosney commented 4 years ago

Found a workaround a couple of days ago, but didn't had the time to post it.

This is just a simple context overwriting, so just cache this before the call to showActionSheetWithOptions, and then use self inside the context, like this:

let self = this;

this.props.showActionSheetWithOptions({
        options,
        cancelButtonIndex,
        destructiveButtonIndex,
        title,
        tintColor
      },
      async (buttonIndex: number) => {
          // `self.props` is defined here correctly.
      });