React-native-screens: Unable to tap Touchable components inside the screen when transparentCard config is true in Stack Navigator - Android only

[DaniAkash]

I have been using the transparentCard property from https://reactnavigation.org/docs/en/stack-navigator.html#stacknavigatorconfig to make the screens transparent to implement modals and action sheets. However, after using react-native-screens, transparency is not working

[romant37]

+1, Same problem

[nanthawat]

try
https://github.com/kmagiera/react-native-screens/issues/61#issuecomment-525418749

[romant37]

Finally I resolve this issue, just add (containerStyleLight and containerStyleDark) in transitionConfig function

containerStyle: {
  backgroundColor: 'transparent',
},
containerStyleLight: {
  backgroundColor: 'transparent',
},
containerStyleDark: {
  backgroundColor: 'transparent',
},

Solution was found in react-navigation-stack https://github.com/react-navigation/stack/issues/232

[DaniAkash]

@romant37 thanks for the solution. However, now I'm facing a weird problem which prevents me from clicking any <TouchableOpacity/> component inside my screens when transparentCard config is active (only on Android). I'm only enabling transparent card for iOS at the moment.

[romant37]

@DaniAkash if you use useScreens() function, try to remove it
https://reactnavigation.org/docs/en/react-native-screens.html
related issue https://github.com/kmagiera/react-native-screens/issues/79

[Lipo11]

@kmagiera is there any update on this issue?

[ukasiu]

Hey @Lipo11,

try to use https://github.com/kmagiera/react-native-screens/blob/master/createNativeStackNavigator.js for the navigator with transparentCard enabled. It solved the problem for me :)

[Lipo11]

Hey @ukasiu

Yep, i know, but I'm using the custom animations ( param transitionConfig ), which is not supported into createNativeStackNavigator.js
So, the best option for me is fix the issue.

For now, I use react-native-screens only for iOS.
Thank you!

[WoLewicki]

Does the issue still exist in the newest version? If so, can you provide a repo with minimal configuration needed to recreate the issue?

[WoLewicki]

I am closing it due to no response in more than 30 days. Feel free to comment to reopen it.

[fawazahmed-makeen]

Issue seems to be fixed with react-navigation v4.4.0, since there is no prop transparentCard and just use the cardStyle.
import { createStackNavigator, TransitionPresets } from 'react-navigation-stack';
Use defaultNavigationOptions for stack navigator config.

createStackNavigator({
  // routes
}, {
// other config
defaultNavigationOptions: ({ navigation }) => {
    return {
      gesturesEnabled: false,
      cardStyle: {
        shadowColor: 'transparent',
        backgroundColor: 'transparent',
        opacity: 1,
      },
      ...TransitionPresets.ModalSlideFromBottomIOS, // or whichever
    }
  },
})