How can i implement Ui kitten in my patern?

106 Views Asked by At

Im a newbiew, and still dont know the best structuring the this one. im read a tutorial for making a appcontainer with switchnavigator where the switch nav load the container and stack nav. I want to use Ui kitten starkit. How to make my code to like this

the result i want

export default () => (
  <ApplicationProvider {...eva} theme={eva.light}>
    <HomeScreen />
  </ApplicationProvider>
);

my app.js

const AppContainer = createStackNavigator(
  {
    default:createBottomTabNavigator(
      {
          Home: {
            screen: HomeScreen,
            navigationOptions:{
              tabBarIcon: ({tintColor}) => <Ionicons name="ios-home" size={20} color={tintColor}/>
            }
          },
       //and more.... {  ... }
        Profile: {
          screen: ProfileScreen,
          navigationOptions:{
            tabBarIcon: ({tintColor}) => <Ionicons name="ios-person" size={24} color={tintColor}/>
          }
        }
      },  
      {
        defaultNavigationOptions:{
          tabBarOnPress : ({navigation, defaultHandler}) =>{
            if(navigation.state.key === "Post"){
              navigation.navigate("postModal");
            }else{
              defaultHandler()
            }
          }
        },
        tabBarOptions:{
          activeTintColor: "#161F3D",
          inactiveTintColor:"#BBBBC4",
          showLabel: false
        }
      }
    ),
    postModal:{
      screen :PostScreen
    }
  },
  {
    mode : "modal",
    headerMode : "none"
  }
  
)

const AuthStack = createStackNavigator({
  Login:LoginScreen,
  Register:RegisterScreen
})
export default createAppContainer(
  createSwitchNavigator(
    {
      Loading: LoadingScreen,
      App : AppContainer,
      Auth : AuthStack
    },
    {
      initialRouteName :"Loading"
    }
  )
);
1

There are 1 best solutions below

0
On

I did try like this may be you can try this as well:-

 <Provider store={store}>
  <ApplicationProvider {...eva} theme={eva.light}>
  <StackNavigation/>
  </ApplicationProvider>
</Provider>