Search code examples
wix-react-native-navigation

react-native-navigation showModal Custom Size

I use wix react-native-navigation. Navigation.showModal open fullscreen size. Is it possible to open the custom size? where do I find all the properties list about navigation layouts? Documentation is too meager...

Solution

  • Modal is always full screen. You can control your view's dimensions in jsx. Instead of flex: 1 - use a predefined width and height according to your needs.

    render() {
  return (
    <View style={{width: '80%', height: 150}}>
    { /* render Modal content */ }
    </View.
  );
}

    Alternatively, if you need to interact with the UI behind the Modal you should use a Navigation.showOverlay

    Navigation.showOverlay({
  component: {
    name: 'example.Overlay',
    options: {
      overlay: {
        interceptTouchOutside: false // this make touch events pass through the invisible parts of the overlay
      }
    }
  }
});

    For more examples on Overlay used you can see code examples in the playground app