CODEWITHSUNDEEP
react-nativereact-navigation
dlimes
dlimes

Reputation: 105

Use the same custom header in all pages in React Native using AppContainer problems

I'm using react-native with react-navigation, and I'm hitting this issue with my screens not rendering correctly. I'm referencing this link to use the same disappearing header as a wrapper around my AppContainer: https://medium.com/appandflow/react-native-scrollview-animated-header-10a18cb9469e

The first screen AuthLoadingScreen shows up fine, and then is supposed to navigate to the either of the stack's based on whether the user is verified. But for some reason, nothing shows up after the user is verified or not. I have a console.log upon entering both stacks and they both fire fine, just nothing gets rendered... any ideas are appreciated.

Here are some snippets of code that I have so far:

<- App.js ->

<View style={styles.fill}>
        <Animated.ScrollView
          style={styles.fill}
          scrollEventThrottle={1}
          onScroll={Animated.event(
            [{ nativeEvent: { contentOffset: { y: this.state.scrollY } } }],
            { useNativeDriver: true },
          )}
        >
          <-----My AppContainer----->
          <AppContainer /> 
          <------------------------->
        </Animated.ScrollView>
        <Animated.View
          pointerEvents="none"
          style={[
            styles.header,
            { transform: [{ translateY: headerTranslate }] },
          ]}
        >
          <Animated.Image
            style={[
              styles.backgroundImage,
              {
                opacity: imageOpacity,
                transform: [{ translateY: imageTranslate }],
              },
            ]}
            source={require('./assets/images/casino/casino-10.jpg')}
          />
        </Animated.View>
      </View>

<-My App Container consists of->:

import AuthLoadingScreen from '../screens/AuthLoadingScreen';

const AppStack = createStackNavigator({
  Home: { screen: HomeScreen },
  Settings: { screen: SettingsScreen },
  OfferCategories: { screen: OfferCategoriesScreen },
});

const AuthStack = createStackNavigator({
  Login: LoginScreen
});

export default createAppContainer({createSwitchNavigator({
  AuthLoading: AuthLoadingScreen,
  App: AppStack,
  Auth: AuthStack,
})});

Upvotes: 1

Views: 418

Answers (1)

Hussam Kurd
Hussam Kurd

Reputation: 9206

You can do it with two options: Warp in the AppContainer, or define the header section inside the top level of navigators:

lets start with the first option: you can do 

const AppContainerNavigator = createAppContainer({createSwitchNavigator({
  AuthLoading: AuthLoadingScreen,
  App: AppStack,
  Auth: AuthStack,
})});
export default class AppContainer extends Component {
 render() {
  return (
    <YOUR_HEADER_COMPONENT>
     <AppContainerNavigator
       ref={nav => {
         this.navigator = nav;
       }}
      />
    </YOUR_HEADER_COMPONENT>
      )
  }
 }

Or the other one is to pass the header component to your navigator while define it something like the following:

let MY_HEADER_COMPONENT = {
  headerLeft: () => {
    return null;
  },
  header: () => {
    return <YOUR_HEADER_COMPONENT></YOUR_HEADER_COMPONENT>;
  },
  headerRight: () => {
    return null;
  }
};
export default createStackNavigator({
 AuthLoading:{
    screen: AuthLoadingScreen,
    navigationOptions: ({
      navigation
    }) => (MY_HEADER_COMPONENT)},

    App:{
    screen: AppStack,
    navigationOptions: ({
      navigation
    }) => (MY_HEADER_COMPONENT)},
....
})

Hopefully this answers your question

Upvotes: 1

Related Questions