prscX / react-native-app-tour

React Native: Native App Tour Library
Apache License 2.0
640 stars 119 forks source link

Undefined is not an object (evaluating '_this.appTourTargets.push') #71

Closed YisusMB closed 5 years ago

YisusMB commented 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 Screenshot_1559891138

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