App wallpaper behind NavBar
jjenzz opened this issue · comments
I'm trying to achieve something similar to #64 and the Thousand Ways to Navigate in React Native example but don't appear to be able to.
I've created a simplified Snack where you can see the background colour is not visible. Is this a bug or am I doing something wrong?
In my app my background is a gradient image so I am trying to have the NavBar
sit on top of it and be transparent.
import { Text } from 'react-native';
import { NativeRouter } from 'react-router-native';
import { Navigation, Card } from 'react-router-navigation';
export const App = () => (
<View style={{ backgroundColor: 'red', flexGrow: 1 }}>
<NativeRouter>
<Navigation
navBarStyle={{
backgroundColor: 'transparent',
borderBottomWidth: 0,
}}
cardStyle={{
backgroundColor: 'transparent',
shadowOpacity: 0,
}}>
<Card exact path="/" render={() => <Text>Home</Text>} />
<Card path="/another" render={() => <Text>Another</Text>} />
</Navigation>
</NativeRouter>
</View>
);
I've figured this out.... Adding the following to <Navigation />
solves it:
transitionConfig={() => ({
containerStyle: {
backgroundColor: 'transparent',
},
})}