2

How can I open a modal/ Actionsheet by clicking on a bottom tab of tab-based application using wix react native navigation v2?

Currently, I am using the following package and version :

  • react-native : "0.59.8"
  • react : "16.8.3"
  • react-native-navigation : "^2.13.2"
  • react-native-image-crop-picker: "^0.24.1"

Here is my route/ navigation file

 Promise.all([
        Foundation.getImageSource("home", 40),
        FontAwesome5.getImageSource("user",30),
        Feather.getImageSource("camera",25),
    ]).then(sources => {
        Navigation.setRoot({
            root: {
                sideMenu: {
                    center: {
                        bottomTabs: {
                            options: {
                                bottomTabs: {
                                    backgroundColor: 'white',
                                    titleDisplayMode: 'alwaysHide'
                                },
                            },
                            children: [
                                {
                                    stack: {
                                        children: [{
                                            component: {
                                                name: 'HomeScreen',
                                                passProps: {
                                                    text: 'This is tab 1'
                                                }
                                            }
                                        }],
                                        options: {
                                            bottomTab: {
                                                testID: 'HOME_TAB',
                                                icon: sources[0],
                                            },

                                            topBar: {
                                                title: {
                                                    text: 'MyReactApp',
                                                }
                                            }
                                        }
                                    }
                                },
                                {
                                    component: {
                                        name: 'Camera',
                                        passProps: {
                                            text: 'This is tab 2'
                                        },
                                        options: {
                                            bottomTab: {
                                                testID: 'CAMERA_TAB',
                                                icon: sources[2]
                                            }
                                        }
                                    }
                                },
                                {
                                    stack: {
                                        children: [{
                                            component: {
                                                name: 'ProfileScreen',
                                                passProps: {
                                                    text: 'Profile Screen'
                                                }
                                            }
                                        }],
                                        options: {
                                            bottomTab: {
                                                testID: 'PROFILE_TAB',
                                                icon: sources[1],
                                            },
                                            topBar: {
                                                title: {
                                                    text: 'John Doe',
                                                }
                                            }
                                        }
                                    }
                                }
                                ]
                        },
                    },
                },
            }
        });
    });

All I want is that when a user clicks on camera tab it should open a modal/actionsheet which will show options whether he should select an image from camera roll or should open the camera. For that, I want to use react-native-image-crop-picker. But how can I achieve that or how can I customize button tab press actions?

I have looked on google but didn't find anything other then these links which didn't help me much

https://github.com/wix/react-native-navigation/issues/3238

https://github.com/wix/react-native-navigation/issues/2766

https://github.com/wix/react-native-navigation/issues/3204

3
  • Use navigation event to show and hide modal/actionsheet on tab.
    – Swapnil
    Jun 9, 2019 at 11:35
  • How? I want it to open a modal instead of new page how can i do so can you please share an example or something. Jun 9, 2019 at 16:05
  • Navigation events refer to this link. You have to use modal that will visible when components is visible and hidden when screen is not visible.
    – Swapnil
    Jun 9, 2019 at 16:21

2 Answers 2

2

It is said that the documentation of v2 is worse than the v1 release. I'm using this package. Mostly I try to solve the problems that I can't solve by looking at the source code. I must say it's useful. It's a little challenging, but it really helps.

It is worth remembering again; In the React structure, everything is component.

There are many ways; (what comes to mind right now)

  1. You create your own component and connect it to the bottomTab. When this component is triggered, you can display either the modal of wix or the modal of react-native.
  2. Although the above is still valid; you can just do it with passProps. But remember that when you do this, the page you link to the bottomTab will also appear.

As a solution;

You don't have to use Wix's modal. Frankly, I didn't like it because I was expecting Bootstrap's modal style, I'm using react-native's own modal. This is your decision.

You can use any of the bottomTab solutions I've written, or you can create a solution yourself. Wix provided quite a possibility for this.

You can also add touchable buttons inside the modal and specify whether you want to turn on the camera or the gallery.

I've seen the sample codes in the module's repo.

I can create a sample repo if I can't explain it :/

1
  • Hello, yes I was also thinking the same. Using wix modal is not a good solution in this case, but still, I couldn't able to do so. Can you please share me the link of the solution you have written or if you create a small repo that will really be a great help to me. Jun 18, 2019 at 12:01
1

One way to do this is using the componentDidAppear event. This event is called each time the component is attached to the view hierarchy (thus, appears). It is more or less used in the same way as the React Native lifecycle API (e.g. componentDidMount), with the difference being that you need to 'listen' for it in, according to the docs, componentDidMount() (https://wix.github.io/react-native-navigation/#/docs/events?id=componentdidappear)

Then you can use some logic in componentDidAppear() of your Camera component to show a modal or overlay and pass a function as a prop to change the state of the Camera component and render according to the choice. Following example uses the componentDidAppear() example from the RNN docs. Disclaimer, I didn't test it, but it should work.

class Camera extends Component {
  constructor(props){
      super(props);

      // Don't forget to bind the setMode function
      this.setMode = this.setMode.bind(this);

      // Edit: catch the tabchange
      this.eventSubscription = Navigation.events().registerBottomTabSelectedListener(this.tabChanged);

      this.state = {
         mode: 'default'
      }
  }

  componentDidMount() {
    this.navigationEventListener = Navigation.events().bindComponent(this);
  }

  componentWillUnmount() {
    // Not mandatory
    if (this.navigationEventListener) {
      this.navigationEventListener.remove();
    }
  }

  componentDidAppear() {
      Navigation.showModal({
          component: {
              // Example name, don't forget to register the modal screen
              name: 'modals.ImageModeChoiceModal',
              passProps: {
                  setMode: this.setMode,
                  // Edit pass the index of the unselected tab to the modal
                  fromTab: this.fromTab
              }
           }
      });
  }

  setMode(mode){
      this.setState({
          mode: mode
      });
  }

  // Edit: callback that will be fired on the bottomTabSelectedListener
  // Tracks the selected and unselected tab index
  tabChanged = (selectedTabIndex, unselectedTabIndex}) => {
      this.fromTab = unselectedTabIndex;
  }

  render(){
      if(this.state.mode === "camera"){
          return( 
                // Camera component
          );
      } else if(this.state.mode === "roll"){
          return( 
                // Camera roll component
          );
      } else {
          return(
                // Default component
                // You could also choose to implement the user choice logic 
                // here
          )
      }
  }
}

EDIT: as a follow-up question the problem arised of handling the back navigating behaviour. On a backpress or modalclose the modal closes and ends up going to the Camera component (screen/tab, in this case). This is because the tab is selected and the modal is opened on 'appear' of the Camera component. The Navigation props don't hold information about the tabs that are pressed. So you need to get information about it somewhere else. You can add an Navigation event listener in the Camera component to intercept the selected and unselected tab indices (example: https://github.com/wix/react-native-navigation/issues/4109, docs: https://wix.github.io/react-native-navigation/#/docs/events?id=registerbottomtabselectedlistener)

In the modal component you should add some logic to handle the backpress/back behaviour (source: https://facebook.github.io/react-native/docs/backhandler.html):

  ...

  componentDidMount() {
    this.backHandler = BackHandler.addEventListener('hardwareBackPress', this.handleBackPress);
  }

  componentWillUnmount() {
    this.backHandler.remove()
  }

  handleBackPress = () => {
    this.closeModal();
    return true;
  }

  // Can also be used to implement close button behaviour (eg. on iOS)
  closeModal(){

      // Dismiss the modal itself
      Navigation.dismissModal(this.props.componentId);

      // This changes the active tab programmatically
      // Don't forget to add a bottomTabsId to your bottomTabs configuration
      Navigation.mergeOptions('bottomTabsId', {
          bottomTabs: {

              // Using the index of the unselected tab passed from the Camera component
              currentTabIndex: this.props.fromTab
          }
      });
  }

  ...

ps: according to the RNN docs dismissModal takes 'mergeOptions' as a second parameter, but I have not used or tested that yet but it probably means that the Navigation.mergeOptions can be integrated in the Navigation.dismissModal call. (docs: https://wix.github.io/react-native-navigation/#/docs/screen-api?id=dismissmodalcomponentid-mergeoptions)

1
  • This does open the modal but when I try to press back button. It goes back to the same camera page. Jun 10, 2019 at 8:09

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.