how I can use it with createBottomTabNavigator navigation

[Appsido]

can you please help me to make it working with createBottomTabNavigator ? I want to show it in the Tabs to give more information

[RichardLitt]

Hey @Appsido - I might be missing something, but I couldn't find the term createBottomTabNavigator anywhere in this repo. Can you explain a bit further what you'd like help with? Thanks.

[baqirhabsyi]

@RichardLitt Hi Richard, I think what he meant is how to use the Copilot with react-navigation's bottom tab bar. Hope this helps!

[RichardLitt]

Ah, cool. Thanks @baqirhabsyi! That clarifies it a bit for me. @Appsido I wish I could help, but I'm not sure how to get those both working together.

[Appsido]

hello @baqirhabsyi and @RichardLitt, thank you for the Answers, yes I mean the createBottomTabNavigator instance of the react-navigation, because in this Issue #55 I see the Example is with tab navigations, and I tried many ways to make the Copilot working with the react-navigation but all times I had Errors,

I'm happy if any body can help me to make it working, because in the #55 I see it's working, but I don't know how I can do it.

best regards

[mallelapavank]

The way I did it is by using tabBarIcon to show custom icons for each tab on which you can wrap CopilotStep.
Then override the whole tab bar component using tabBarComponent.
Something like this in your tab bar config:

tabBarComponent: (props, state) => (
    <View style={{ height: 49 }}> //this height works only for phones.
      <BottomNavigation {...props} {...state} />
    </View>
  )

BottomNavigation is the component that will start copilot.

[Appsido]

hello @mallelapavank, thank you very much for the Help, I will try it, and I hope it's working

[Appsido]

hello @mallelapavank, thank you, I did it, and it's working.

thanks again for your tip for your time

[mallelapavank]

@Appsido glad it worked.

[deepakverma4]

@Appsido @mallelapavank can you please share an working example of same?

[MarioCerdan]

@Appsido I am trying to add it too but cannot make it work. Can you share a working example? Thanks!

[anabeatrizzz]

@deepakverma4 @MarioCerdan

My similiar solution:

App.tsx

import React from "react"
import MyTooltip from "./src/components/MyTooltip";
import { CopilotProvider } from "react-native-copilot";
import { NavigationContainer } from "@react-navigation/native";
import Tab from "./src/routes/Tab";

const App = () => {
  return (
      <CopilotProvider tooltipComponent={MyTooltip}>
        <NavigationContainer>
          <Tab />
        </NavigationContainer>
      </CopilotProvider>
    );
}

export default App

Tab.tsx

import React from "react";
import {
  createBottomTabNavigator,
  BottomTabBar,
  BottomTabBarProps,
} from "@react-navigation/bottom-tabs";
import { Text, View } from "react-native";
import { CopilotStep, useCopilot, walkthroughable } from "react-native-copilot";
import { Ionicons } from "@expo/vector-icons";

const { Navigator, Screen } = createBottomTabNavigator();

const Tab = () => {
  return (
    <Navigator
      initialRouteName="Home"
      screenOptions={{ headerShown: false }}
      tabBar={(props: BottomTabBarProps) => <BottomTabBar {...props} />}
    >
      <Screen
        name={"Home"}
        component={SomeComponent}
        options={{
          tabBarLabel: () => null,
          tabBarIcon: () => {
            const CopilotView = walkthroughable(View);

            return (
              <CopilotStep
                text={null}
                name={"name"}
                order={SomeOrderNumber}
              >
                <CopilotView copilot={null}>
                  <Ionicons name={"route.iconName"} size={20} />
                  <Text>textBottomBar</Text>
                </CopilotView>
              </CopilotStep>
            );
          },
        }}
      />
    </Navigator>
  );
};

export default Tab;

[amit13091992]

@anabeatrizzz I need custom tooltip component where i can pass text as prop for different views and screen has bottom tab as well.

Could you please help me out on this?