No transparent background in the navigated routing Components

[Benjamin5050]

I have a very basic app and I am using ex-navigation for navigation.

App.js (note the backgroundColor):

export default class App extends Component {
    render() {
        return (
            <View style={{flex: 1, backgroundColor: 'lightblue'}}>
                <TabEntry/>
            </View>
        );
    }
}

TabEntry:

const Router = createRouter(() => ({
    notification: () => Notification,
}));

const defaultRouteConfig = {
    navigationBar: {
        title: 'notify',
        tintColor: 'blue',
        backgroundColor: 'green',
    },
};

export default class TabEntry extends React.Component {
    render() {
        return (
            <NavigationProvider router={Router}>
                <StackNavigation
                    initialRoute={Router.getRoute('notification')}
                    defaultRouteConfig={defaultRouteConfig}
                />
            </NavigationProvider>
        )
    }
}

class Notification extends React.Component {
    render() {
        return (
            <View>
                <Text>NOTIFICATION!!!</Text>
            </View>
        )
    }
}

Since, there is a backgroundColor in the parent Component, but no backgroundColor in its child component, it should have displayed a lightblue background. But instead the background is white. How can I make it transparent?

[ranjeev75]

#402 I get the same issue

[pawlowskim]

I have exactly the same problem. As you can see above, I made PR for this issue. Hope it will be investigated asap.