Wix Navigation integration discussion

[ChathuraLiyanapathirana]

Short Description

i'm beginner to react native so could you please show me how to integrate this with wix navigation. and i also use redux

Steps to Reproduce / Code Snippets / Usage

Expected Results

when change internet connectivity every time show a message

Additional Information

• React Native version: [FILL THIS OUT]
• react-native-dropdownalert version: [FILL THIS OUT]
• Platform(s) (iOS, Android, or both?): [FILL THIS OUT]
• iOS version: [FILL THIS OUT]
• Android version: [FILL THIS OUT]

[testshallpass]

Welcome to the react-native world. I would assume the best starting point is get redux project structure up and running then install wix navigation. Once you have screens established, you can install react-native-dropdownalert. Lastly, then you can follow the usage example: https://github.com/testshallpass/react-native-dropdownalert#usage

[madandrija]

The problem with Wix navigation, as far as I can see it, is not in setting it up to work on a single screen, but setting it up so it works throughout the application.

In the available React navigation example, as far as I can see, there's one root component that contains the Router component and the DropdownAlert component.

Wix routing does not have a main routing component which would have a single DropdownAlert component, instead, every screen is encapsulated so you can't have a parent wrapper with shared UI, e.g. registering screens looks like this:

function registerScreens() {
  screens.forEach((component: any, id: string) => {
    Navigation.registerComponent(id, () => registerComponentWithAlert(component, id), () => component);
  });
}

where screens is a map (e.g. screens.set(screenName.FEED_SCREEN, FeedScreen)) and registerComponentWithAlert adds a store provider and the DropdownAlert component as the last component in the stack:

function registerComponentWithAlert(Comp: any, id: string) {
  return (props: any) => (
    <Provider store={store}>
      <Comp {...props} />
      <DropdownAlert ref={ref => DropDownHolder.setDropDown(ref, id)} closeInterval={6000} />
    </Provider>
  );
}

The problem with this is when you want to show an error on a screen which has yet to be loaded, e.g. you make a server request after the user presses Next and you want to present the result on whichever screen the user will be on by the time the requests response gets processed - you may not have the appropriate DropdownAlert ready to go, so if anyone has an example of getting this to work, analogue to the readme example for ReactNavigation - that would be great.

TLDR: If you have a simple app/usecase, then using the DropdownAlert component with Wix ReactNativeNavigation is analogue to using it with ReactNativeRouter, and if you have something more complex - we're still looking for a good example.

[3luyka]

@madandrija hey, how about something like

...
await Navigation.push(...);
DropdownAlertService.show(...);
...

In this case alert will appear only after navigation.

[madandrija]

@madandrija hey, how about something like

...
await Navigation.push(...);
DropdownAlertService.show(...);
...

In this case alert will appear only after navigation.

@3luyka - hey, thanks, but the issue isn't with calling the service when it's supposed to be called, the issue is with making the DropdownAlert component the last component in each screen.

We ended up using the approach I wrote out in the previous comment. The way we us it is by

1. saving a reference to each screen dropdown in the DropDownHolder
2. using Redux to save current screen name, and
3. a Saga to listen to dispatched alerts and setting them to the appropriate screen

The two Saga cases are

1. If it's an Alert we know will be displayed now (e.g. validation), we show it on the currently set screen from Redux
2. If it's Alert that will happen some time in the future (e.g. onSuccess or onError from a server request), then we save that Alert to Redux as PendingRequests, and on screen change (a Redux action), we check if there are any pending alerts, and display them

To answer the OP, his use case would be 1.

[lewatt23]

@madandrija please could you provide a code example of what you did ? am having the same problem . thanks

[madandrija]

@madandrija please could you provide a code example of what you did ? am having the same problem . thanks

I've made the gist out of our code, it should be clear what's going on

[kevindessely]

The simplest way to do it, it's to use Wix's RNN overlay with the options interceptTouchOutside: false. So that the touches on the outside can still work as per normal.

// the file where you bootstrap all your screens
export const dropdownAlert = (passProps = {}) => {
  Navigation.showOverlay({
    component: {
      name: 'wix.DropdownAlert',
      passProps,
      options: {
        overlay: {
          interceptTouchOutside: false,
        },
      },
    },
  });
};

// another file `wix.DropdownAlert` component says called <WixDropdownAlert/>
...
componentDidMount() {
  const type = _.get(this.props, 'type');
  const title = _.get(this.props, 'title');
  const message = _.get(this.props, 'message');

  this.dropdownRef.alertWithType(type, title, message);
}
...

wix.DropdownAlert is a component where it contains DropdownAlert. Do your configuration in this component or it can be entirely configured or override from Wix's RNN passProps, wherever you call this function from.

It should also listen for onClose and onCancel. This is where you handle Navigation.dismissOverlay(this.props.componentId);

Keep calling this function whenever you needed from any place. Just ensure that wix.DropdownAlert shouldn't take up the entire screen like style={{flex: 1}}.

[mtzfactory]

@kevindessely your solution works perfectly but I loss the interaction with the underlaying component... I can't scroll the ScrollView in the original screen...

I've tried with gestureHandlerRootHOC but it doesn't work...

[kevindessely]

Ensure your custom component for wix.DropdownAlert does not have flex: 1. For mine I wrap it with <View>

e.g

...
  render() {
    return (
      <View>
        <DropdownAlert
...

and also interceptTouchOutside: false

I just tested that my scroll view able to scroll fine.

[testshallpass]

Closing as I added @madandrija gist to README.