undefined on NavigationComponent

damathryx commented 7 years ago

What kind of Issue is this?

(x) Bug Report
() Question / Problem
() Discussion / Feature Request

How are you using the Bottom Navigation?

(x) I use the Bottom Navigation together with react-navigation; the Issue is not appearing when I'm using react-navigation's TabBar instead.
() I use the standalone version.

Expected behavior

Will show tabbar with icons

Actual behavior

getting error undefined on render method of navigationComponent screen shot 2017-10-29 at 3 36 34 pm

Additional description and resources

export const SignedIn = TabNavigator(
  {
    Home: {
      screen: Home,
      navigationOptions: {
        tabBarLabel: "Home",
        tabBarIcon: ({ tintColor }) =>
          <FontAwesome name="home" size={30} color={tintColor} />
      }
    },
    Profile: {
      screen: Profile,
      navigationOptions: {
        tabBarLabel: "Profile",
        tabBarIcon: ({ tintColor }) =>
          <FontAwesome name="user" size={30} color={tintColor} />
      }
    }
  },
  {
    tabBarComponent: NavigationComponent,
    tabBarPosition: 'bottom',
    tabBarOptions: {
      bottomNavigationOptions: {
        labelColor: 'white',
        rippleColor: 'white',
        tabs: {
          Home: {
            barBackgroundColor: '#37474F'
          },
          Profile: {
            barBackgroundColor: '#00796B'
          },
        }
      },
      style: {
        paddingTop: Platform.OS === "android" ? StatusBar.currentHeight : 0
      }
    }
  }
);

export const createRootNavigator = (signedIn = false) => {
  return StackNavigator(
    {
      SignedIn: {
        screen: SignedIn,
        navigationOptions: {
          gesturesEnabled: false
        }
      },
      SignedOut: {
        screen: SignedOut,
        navigationOptions: {
          gesturesEnabled: false
        }
      }
    },
    {
      headerMode: "none",
      mode: "modal",
      initialRouteName: signedIn ? "SignedIn" : "SignedOut"
    }
  );
};

What did you do to find a solution?

I tried the example but this also happens

Environment

React Native versions: 0.49.5
react-native-material-bottom-navigation version: 0.5.2
react-navigation version: {1.0.0-beta.15}
I tested this with: {Android}

timomeh commented 7 years ago

The BottomNavigation can't find your icon definitions, or rather your navigationOptions.

Are you sure you can put navigationOptions inside the RouteConfigs? To my knowledge, the navigationOptions have to be a static inside your screen class, cf.:

https://github.com/timomeh/react-native-material-bottom-navigation/blob/87adbe633b61260e77cfd4865e603c03aff939ae/example/ReactNavigationBottomNavigation.js#L12-L16

Try moving navigationOptions to your screens.

Also I'm a bit curious: you stated you tried it with react-navigation's own TabBar. Did it work with the TabBar? Using navigationOptions inside the RouteConfig sounds new to me.

damathryx commented 7 years ago

@timomeh Yes, it was working with TabBar and actually its working now. I’m using functional components for screens. I don’t know what happened. I might have done something wrong. Anyway, its fine now. Thanks for your awesome work.

timomeh / react-native-material-bottom-navigation