createAppContainer background cannot be transparent

[seaver-choy]

The issue tracker is reserved for bug reports only.

Current Behavior

1. When createAppContainer is coupled with or has a background, the backgroundImage won't show up, and it refuses to be transparent even if style={{ backgroundColor: 'transparent'}} has been passed.

import React, { Component } from 'react' // eslint-disable-line no-unused-vars
import { connect } from 'react-redux'
import tempNavigator from '../navigators/tempNavigator' // eslint-disable-line no-unused-vars
import { View, Platform, Linking, ImageBackground } from 'react-native' // eslint-disable-line no-unused-vars
import { createAppContainer } from 'react-navigation'

class ApplicationNavigatorContainer extends Component {
    constructor (props) {
        super(props)
    }

  render () {
      const Navigator = createAppContainer(tempNavigator) // eslint-disable-line no-unused-vars
      return (
          <ImageBackground source={require('../../assets/images/banner.png')} style={{ width: '100%', height: '100%' }}>
              <Navigator style={{backgroundColor: 'transparent'}}/>
          </ImageBackground>
      )
  }
}

export default connect(null, null)(
    ApplicationNavigatorContainer)

Expected Behavior

The ImageBackground shows the image.

How to reproduce

tempNavigator.js

import React from 'react'
import { createStackNavigator } from 'react-navigation-stack'
import Settings from '../../features/settings/components'
import * as screenNames from '../screenNames'

export default createStackNavigator(
    {
        [screenNames.SETTINGS]: {
        screen: Settings,
    },
        headerMode: 'none'
    }
)

Settings.js

import React, { Component } from 'react'
import { View, Text } from 'react-native'

import styles from './styles'

export default class Settings extends Component {
    render() {
        return (
            <View style={styles.background}>
                <Text>Hi</Text>
            </View>
        )
    }
}

Your Environment

| software | version
| Visual Code | 1.38.1
| react-navigation | 4.0.0
| react-native | 0.60.5
| node | 12.6.0
| npm or yarn | 6.9.0

[dmitov]

Noticed that during a package update on my app. I'm using react-navigation@3.11.1, but I guess it could be applied to 4.0.0 as-well.

{
  transparentCard: true,

  transitionConfig: () => ({
    containerStyle: {
      backgroundColor: 'transparent',
    },
    containerStyleLight: {
      backgroundColor: 'transparent',
    },
    containerStyleDark: {
      backgroundColor: 'transparent',
    },
  })
}

I believe it's related to 12.4 update on the simulators, which include some of the new iOS 13 dark/light modes. Anyways, this should be further addressed and the containerStyle prop should overwrite the Dark/Light styles in my opinion.

Hope this helps!

[rt2zz]

@dmitov great find thank you. Works for me (after seeing the same issue upon updating react-navigation)

[dmitov]

Finer explanation for the issue and workaround is here:
https://github.com/react-navigation/stack/issues/232

[alubeck]

@dmitov indeed the holy grail, thank you :) ... although types are not aware of this solution 🤔

export const RootStackNavigator = createStackNavigator(
  {
    Home: HomeScreen,
    Modal: ModalDialogScreen,
  },
  {
    mode: 'modal',
    headerMode: 'none',
    transparentCard: true,
    transitionConfig: () => ({
      containerStyle: {
        backgroundColor: 'transparent',
      },
      containerStyleLight: {
        backgroundColor: 'transparent',
      },
      containerStyleDark: {
        backgroundColor: 'transparent',
      },
    }),
    defaultNavigationOptions: {
      gesturesEnabled: false,
    },
  } as any,  // needs to be any to prevent type issues
);

[github-actions]

Hello 👋, this issue has been open for more than 2 months with no activity on it. If the issue is still present in the latest version, please leave a comment within 7 days to keep it open, otherwise it will be closed automatically. If you found a solution on workaround for the issue, please comment here for others to find. If this issue is critical for you, please consider sending a pull request to fix the issue.