React navigation implements transparent pop-up window

In React Native development, if you want to achieve the pop-up effect, the usual solution is to use the official Modal component. However, the official Modal component will have some defects, such as not being able to display full screen on the Android side, and on the iOS side, when a new ViewController is opened, it will be overwritten by the Modal component, etc. Therefore, in the development of React Native applications, in order to shield these compatibility issues, we can use the RootSiblings component provided by the react-native-root-siblings plugin.

In fact, the RootSiblings component is a further encapsulation of the official Modal component, which can effectively solve some display problems of the Modal component, and the usage is similar to the Modal component, as shown below.

 import RootSiblings from 'react-native-root-siblings';

const alertShare = (onItemPress, onCancel, title) => {
  if (global.siblingShare) {
    global.siblingShare.destroy();
    onCancel();
    global.siblingShare = undefined;
  } else {
    global.siblingShare = new RootSiblings( (
        <SharePanel
          onItemPress={onItemPress}
          onCancel={onCancel}
          title={title}/>
      ) ); }
};

//调用分享方法
alertShare(onItemPress, () => {
   startAnimation(setShow(false));
})

As you can see, you only need to use the RootSiblings component to wrap the content that needs to be shared to complete the sharing function.

In addition, we can also use react navigation to implement the shopping cart pop-up window. The principle is to make the background of the route page of react navigation transparent. The code is directly below. If you don’t know what React Navigation uses, you can refer to the basic usage of React Navigation 5.x. The latest 6.x version is used in a similar way.

First, let's take a look at the code of navigation's index.js.

 const RootStack = createStackNavigator();

const Navigator = () => {
    return (
        <>
            <NavigationContainer ref={navigationRef}>
                <RootStack.Navigator mode="modal" initialRouteName="Main">
                    <RootStack.Screen
                        name="Main"
                        component={MainStackScreen}
                        options={{headerShown: false}} />
                    <RootStack.Screen
                        name="MyModal"
                        component={ModalScreen}
                        options={{
                            headerShown: false,
                            cardStyle: {
                                backgroundColor: 'transparent',
                                shadowColor:'transparent'
                            },
                            cardStyleInterpolator: ({current: {progress}}) => {
                                return {
                                    overlayStyle: {
                                        opacity: progress.interpolate({
                                            inputRange: [0, 1],
                                            outputRange: [0, 0.5],
                                            extrapolate: 'clamp',
                                        }),
                                    },
                                }
                            },
                        }}
                    />
              
                </RootStack.Navigator>
            </NavigationContainer>
        </>
    );
};

export default Navigator;

It can be seen that in order to use the routing method to achieve the transparent effect, we are configuring the options parameters of RootStack.Screen , especially the two parameters cardStyle and cardStyleInterpolator. It is recommended to directly copy the contents of the options. Next is the code of ModalsScreen.js:

 const ModalStack = createStackNavigator()

export default function ModalsScreen() {
    return (
        <ModalStack.Navigator headerMode='none'>
            <ModalStack.Screen name='ShopingCartScreen' component={ShopingCartScreen} options={{
                headerShown: false,
                cardStyle: { backgroundColor: 'transparent' },
                cardOverlayEnabled: true,
            }}/>
        </ModalStack.Navigator>
    )
}

In addition to setting the background of ModalScreen to be transparent, it is also necessary to set the background of specific business pages to be transparent. As you can see, in the above code, we also set the background of the ShoppingCartScreen page to be transparent. Next, use navigate to perform the jump where you need to jump.

 navigate('MyModal', {screen: 'ShopingCartScreen'})

Then you can see the effect.

refer to:
React navigation transparent background implementation
Transparent background for screen in React Navigation5.x