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