Closed YisusMB closed 5 years ago
I have a problem with this, i try to implement this in my react navigator but this dosnt work it shows this error
My code in the navigator
export default class Navigate extends Component{ constructor(props) { super(props) this.appTourTargets = [] } componentWillMount() { this.registerSequenceStepEvent() this.registerFinishSequenceEvent() } componentDidMount() { setTimeout(() => { let appTourSequence = new AppTourSequence() this.appTourTargets.forEach(appTourTarget => { appTourSequence.add(appTourTarget) }) AppTour.ShowSequence(appTourSequence) }, 1000) } registerSequenceStepEvent = () => { if (this.sequenceStepListener) { this.sequenceStepListener.remove() } this.sequenceStepListener = DeviceEventEmitter.addListener( 'onShowSequenceStepEvent', (e: Event) => { console.log(e) } ) } registerFinishSequenceEvent = () => { if (this.finishSequenceListener) { this.finishSequenceListener.remove() } this.finishSequenceListener = DeviceEventEmitter.addListener( 'onFinishSequenceEvent', (e: Event) => { console.log(e) } ) }; render () { return ( <SafeAreaView> <BottomNavigator/> </SafeAreaView> ) } } const BottomNavigator = createBottomTabNavigator({ Home: { screen: HomeScreen, navigationOptions: () => ({ tabBarIcon: ({tintColor})=> { return ( <ChartIcon tintColor={tintColor} addAppTourTarget={appTourTarget => { this.appTourTargets.push(appTourTarget) }}/> ) } } ) }, Scanner: { screen: ScannerScreen, navigationOptions: ( ) => ({ header: null, tabBarVisible: false, tabBarIcon: ({tintColor})=> { return (<View style={{padding: 1, borderRadius: 100, marginBottom: 30}}> <Image small source={require('../assets/images/Logos/escanear-icon.png')} style={{width: hp('8%'), height: hp('8%')}} /> </View>) } }) }, Stats: { screen: StatsStack, navigationOptions: () => ({ tabBarIcon: ({tintColor})=> { return <Icon name={'chart-line'} type='MaterialCommunityIcons' style={{color: tintColor}}/> } } ) } }, { tabBarOptions: { style: { backgroundColor: '#433650', height: hp('6.5%') }, activeTintColor: '#90D16B', inactiveTintColor: '#312740', showLabel: false, scrollEnabled: true }, initialRouteName: 'Home' })
And the component :
import React, { Component } from 'react' import { StyleSheet, View, Button, Platform, TouchableOpacity } from 'react-native' import { AppTour, AppTourView } from 'react-native-app-tour' import {Icon} from "native-base"; class ChartIcon extends Component { render() { return ( <TouchableOpacity key={'Top Left'} title={'Top Left'} ref={ref => { if (!ref) return this.button1 = ref let props = { order: 12, title: 'This is a target button 1', description: 'We have the best targets, believe me', outerCircleColor: '#3f52ae', cancelable: false } this.props.addAppTourTarget && this.props.addAppTourTarget(AppTourView.for(ref, { ...props })) }} onPress={() => { let props = { order: 11, title: 'This is a target button 1', description: 'We have the best targets, believe me', outerCircleColor: '#f24481' } let targetView = AppTourView.for(this.button1, { ...props }) AppTour.ShowFor(targetView) }}> <Icon name={'chart-line'} type='MaterialCommunityIcons' style={{color: this.props.tintColor}}/> </TouchableOpacity > ) } } export default ChartIcon
Please help :C
I have a problem with this, i try to implement this in my react navigator but this dosnt work it shows this error
My code in the navigator
And the component :
Please help :C