Copilot w/React-navigation, any idea how wrap a const with the copilot prop?

[YisusMB]

Actually i have this progress (?) using this library w/react-navigation, exactly createBottomTabNavigator but the problem(s) are this: 1: This method (createBottomTabNavigator ) only works exporting a const 2: I dont know how to export this const with the copilot prefix (example: export default copilot()(CustomConst) If anyone knows how i can do this thing probably save my entire project My code:

import React, {Component} from 'react'
import { Image, View, SafeAreaView, StyleSheet, Text, AsyncStorage } from 'react-native'
import HomeScreen from '../screens/home/HomeScreen'
import {createBottomTabNavigator} from 'react-navigation-tabs'
import { Icon } from 'native-base'
import StatsStack from './StatsStack';
import ScannerScreen from '../screens/scanner/ScannerScreen';
import {
  heightPercentageToDP as hp,
} from 'react-native-responsive-screen'
import { copilot, walkthroughable, CopilotStep } from 'react-native-copilot';

const WalkthroughableText = walkthroughable(Text);
const WalkthroughableImage = walkthroughable(Image);

class Null extends Component{
  render(){
    return <View/>
  }
}

const nav = createBottomTabNavigator({
  Home: {
    screen: HomeScreen,
    navigationOptions: () => ({
          tabBarIcon: ({tintColor})=> {
            return (
              <CopilotStep text="This is your home screen.  Here you can check past workouts, future workouts, and most importantly, today's suggested workout.." order={1} name="home">
                <WalkthroughableText>
                  <Icon name={'home-outline'} type='MaterialCommunityIcons' style={{color: tintColor, fontSize: hp('4.5%')}}/>
                </WalkthroughableText>
              </CopilotStep>
            )
          }
        }
    )
  },
  Scanner: {
    screen: ScannerScreen,
    navigationOptions: ( ) => ({
      header: null,
      tabBarVisible: false,
      tabBarIcon: ({tintColor})=> {
        return (
          <CopilotStep text="This is the session screen.  Here you can activate EvenLift cameras and start your workout. Check www.evenlift.io/usage for detailed instructions." order={2} name="lift">
            <WalkthroughableImage
              small source={require('../assets/images/Logos/escanear-icon.png')}
              style={{width: hp('8%'), height: hp('8%'), marginBottom: hp('3.5%')}}
            >
            </WalkthroughableImage>
          </CopilotStep>
        )
      }
    })
  },
  Stats: {
    screen: StatsStack,
    navigationOptions: () => ({
          tabBarIcon: ({tintColor})=> {
            return (
              <CopilotStep text="This is the analysis screen, showing detailed summaries of your progress so far." order={3} name="ChartInfo">
                <WalkthroughableText>
                  <Icon name={'chart-line'} type='MaterialCommunityIcons' style={{color: tintColor,fontSize: hp('4.5%')}}/>
                </WalkthroughableText>
              </CopilotStep>
            )
          }
        }
    )
  }
}, {
  tabBarOptions: {
    style: {
      backgroundColor: '#433650',
      height: hp('6.5%')
    },
    activeTintColor: '#90D16B',
    inactiveTintColor: '#312740',
    showLabel: false,
    scrollEnabled: true
  },
  initialRouteName: 'Home'
})

export default nav

// export default copilot({animated: true, stepNumberComponent: Null})(nav) Maybe something like this??

If anyone have questions about how i can divide the routes feel free to ask here in the comment box, actually if i export nav without the copilot react-native throw this errror TypeError: Cannot read property 'getCurrrentStep' of undefined

anyone help me pls :C

[ahmetozalp]

problem fixed?

[YisusMB]

@ahmetozalp i find a workaround but isn't a solution btw the workaround is making another view without react-navigation and copilot these view, when the copilot was finished navigate to the bottomstack :)

[ahmetozalp]

@YisusMB I'm having the same problem, but I don't know how to fix it, if you fix it, can you give me a little piece of code here?

[YisusMB]

@ahmetozalp the only way i found to solution this is create a "false" intro view that shows exactly the same as the REAL bottomTabNavigation, and when the tour was finished redirect to the real bottomTabNavigation if you need more explanation let me know

[ahmetozalp]

thank you. @YisusMB