Setting an Expo LinearGradient as background of the whole react native app

user_7626547 0
Viewed 4176

I am using react-navigation and I have a drawerNavigator with a stackNavigator nested in it, how can I set a gradient background to the whole application using Expo LinearGradient without having to wrap each screen component with <LinearGradient> in its render method?

P.S: I've tried to wrap <MyApp /> component with <LinearGradient> component in app.js but it appears that <MyApp /> component is covering the whole screen with its own background so the linear gradient couldn't be seen.

Navigator Code

const HomeStack = createStackNavigator({
  Home: {
    screen: Home
  },
  Results: {
    screen: Results
  },
}, {
  navigationOptions: {
    header: null
  }
})


const MyApp = createDrawerNavigator({
  Home: {
    screen: HomeStack,
    navigationOptions: {
      title: '...'
    }
  },
  Info: {
    screen: Info,
    navigationOptions: {
      title: '.....'
    }
  },
}, {
  drawerPosition: '....',
  contentOptions: {
    itemStyle: {
      alignSelf: '....',
    },
    labelStyle: {
      fontFamily: '....'
    }
  }
})
linear-gradients react-navigation expo react-native
1 Answers

This worked for me in my App.js:

return (
  <LinearGradient colors={myGradientColor} style={{ flex: 1}}>
    <MainNavigator />
  </LinearGradient>
);

Try simplifying your Navigator to a few screens, then introduce the nested Navigator, then introduce the entire horror.

I've had to modify subsequent screens within the MainNavigator to exclude any kind of LinearGradient background, and also to work within the flex: 1 style.

user_52655990
Related