Skip to main content

asWixScreen

Usage​

Please make sure you wrap your screens with asWixScreen HOC.
This HOC will apply our Navigation Style based on our internal logic and guidelines.

import {asWixScreen} from '@wix/wix-react-native-ui-lib'

Navigation.registerComponent('example.Screen', () => asWixScreen(Screen));
Navigation.registerComponent('example.Modal', () => asWixScreen(Screen));

Do not wrap RNN overlays with asWixScreen

This will provide you with common API out of the box like...

Options​

You can pass an options object to asWixScreen when wrapping your screens to get custom behaviors.

Navigation.registerComponent('example.Screen', () => asWixScreen(Screen, options));

useSafeArea​

Pass to add safe area paddings to the root view without worrying about it in your code.

connectivityBarProps​

Pass to have a custom UI for your screen offline connectivity bar

useGestureHandlerHOC​

pass to wrap your root screen with the gestureHandlerRootHOC.
This is mandatory for Android when using components that are based on react-native-gesture-handler library. (e.g. TabController) By default useGestureHandlerHOC is true

Injected Props​

isConnected​

boolean value representing the app's current connection state.

registerLifecycleMethods​

asWixScreen will pass the registerLifecycleMethods prop to your screen where you can register the followings

onDismissModal​

Implement to add custom logic before closing a modal (useful for sending BI events).
This will not prevent the modal from being closed (see shouldDismissModal).

shouldDismissModal​

Implement this method in order to control the modal dismissal.
should return true/false (true by default).
this is great for cases you need to prompt your users before closing the modal.

modalDidDismiss​

Implement to add custom logic after closing a modal (executed once the modal dismiss promise has been resolved).

onRegainConnectivity​

Implement to detect when app connectivity is back (from offline)

usage:

this.props.registerLifecycleMethods({
  onDismissModal: () => {},   // do whatever
  shouldDismissModal: () => {
    const {aprrovedByUser} = this.state;
    if (approvedByUser) {
      return true;
    } else {
      this.showConfirmationDialog();
      return false;
    }  
  },
  modalDidDismiss: () => {},   // do whatever
  onRegainConnectivity: () => {}
})

Global Imperative Actions​

By using asWixScreen you can use the following imperative actions to trigger global overlay components

Those APIs can be executed from anywhere in your code without the worry of actually render the component in your screen.
As long your screen is wrapped with asWixScreen it should work.

toggleToast​

You can use it from anywhere in your code, just import it from uilib
import {toggleToast} from '@wix/wix-react-native-ui-lib'
And pass it the same props that the Toast component accept.
toggleToast({visible: true, message: 'toast message', autoDismiss: 3000, position: 'bottom'})

openActionSheet​

Similar to toggleToast, you can open an ActionSheet from anywhere, just: 

import {openActionSheet} from '@wix/wix-react-native-ui-lib'

openActionSheet({
  headerProps: {title: 'My title'},
  options: [{label: 'Option 1', onPress: this.action1}]
});

Notice you don't need to pass the visible prop here.

dismissActionSheet​

Use to imperatively dismiss the action sheet.
(relevant to specific cases, by default the action sheet will dismiss itself when selecting an option)

import {dismissActionSheet} from '@wix/wix-react-native-ui-lib'

const reason = await dismissActionSheet();
// reason can be either action/canceled

showFooter​

Show a custom footer in your screen (the footer will be shown in all open screens)

import {showFooter} from '@wix/wix-react-native-ui-lib'

showFooter({
  renderFooter: () => {
    return (
      <View testID="globalFooter">
        <Text bodyBold center marginV-5>
          Uploading files 1/2 
        </Text>
      </View>
    );
  }
});

dismissFooter​

Dismiss current displayed footer

import {dismissFooter} from '@wix/wix-react-native-ui-lib'

dismissFooter();

openNativeInAppBrowser​

Open a browser within the app, based on wix-react-native-web-browser.

import {openNativeInAppBrowser} from '@wix/wix-react-native-ui-lib'

openNativeInAppBrowser(url, options);

warmUpNativeInAppBrowser [Android only]​

Pre-initialize the browser application to significantly speed up the URL opening in the browser. Based on wix-react-native-web-browser.

import {warmUpNativeInAppBrowser} from '@wix/wix-react-native-ui-lib'

warmUpNativeInAppBrowser(url);

showInAppBrowser​

The best practice for opening a browser within the app is using the openNativeInAppBrowser() method. However, in case you open a Wix site and need the user to stay logged in to his site, you will want to use this implementation.

import {showInAppBrowser} from '@wix/wix-react-native-ui-lib'

showInAppBrowser({source: {uri}});

dismissInAppBrowser​

Dismiss the in-app browser. This method is relevant only for browsers that opened with showInAppBrowser().

import {dismissInAppBrowser} from '@wix/wix-react-native-ui-lib'

dismissInAppBrowser();

Important​

  • Avoid using static get options(), use instead static options(). (it's also better cause it pass your props)
  • If you are listening to navigationButtonPressed() event, don’t forget to call Navigation.events().bindComponent(this);
  • Ids for the UILib-set navigation buttons can be accessed through import {Ids} from ‘wix-react-native-ui-lib’;
  • If using Redux, make sure you pass {forwardRef:true} in your connect function
    connect(mapStateToProps, mapDispatchToProps, mergeProps, {withRef: true})(YourComponent);
  • When using remx's connect HOC. pleas use asWixScreen before connect when exporting your components
    export default connect(mapStateToProps)(asWixScreen(MyScreen));