winoteam / react-router-navigation

⛵️ A complete navigation library for React Native, React DOM and React Router

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

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',
  },
})}