Question : does this library only work for buttons ?

[Boubaker93]

As the title said, does AppTourView.foronly works with Buttons. because i tried it with a View and a Text component and it gives me this error : Tour view does not have React Internal Fiber .

Thanks for your help

[prscX]

Thanks @Boubaker93 for raising the query.

It works for all type of views. Are you facing this problem for Android?

Thanks </ Pranav >

[Boubaker93]

Hello @prscX thanks for your quick response,

Yes i'm facing this problem on android (did not try it on iOS)

My react-native version is 0.58.6 My test device is using android 6.0 The app-tour version i used is 0.0.18

Thanks

[prscX]

Hi: Please refer issues section of README for the fix. Let me know in case it didn't worked out.

Thanks </ Pranav >

[Boubaker93]

Hello @prscX I tried the collapsable:false in my view like in this exemple :

<View
        key='Top Left'
        collapasable={false}
        ref={ref => {
            if (!ref) return
            const props = {
                order: 11,
                title: 'This is a target button 2',
                description: 'We have the best targets, believe me',
                backgroundPromptColor: '#3f52ae',
                outerCircleColor: '#f24481',
                targetRadius: 100
            }
            if (addAppTourTarget) {
                addAppTourTarget(AppTourView.for(ref, { ...props }))
            }·
        }}>
        <Text style={style}>some text</Text>
 </View>

and it sill gives me the same error (for this peace of code AppTourView.for(ref, { ...props }) )

Error: Error: Tour view does not have React Internal Fiber

Note that if i change the View with a Button component it works properly

EDIT: It also worked with TouchableOpacity and TouchableHighlight

Thanks for your help

[ljuborados]

I'm having the same issue on both iOS and Android - tried 0.0.18 and 0.0.17 @Boubaker93 have you managed to make it work with views?

[Boubaker93]

I'm having the same issue on both iOS and Android - tried 0.0.18 and 0.0.17 @Boubaker93 have you managed to make it work with views?*

@ljuborados no still did not found a solution :/

[Boubaker93]

Hello @prscX is there any updates about this issue ?

[temraz]

I am still facing the same issue on android if i used it on a view it only make a small circle on it not on all the view but on IOS it's okay

[RishavKumar-3796]

The same Issue is repeated. Working on OS platform android temporarily, and it's not working appropriately. Also, the focus is not on the whole view it renders a small circle with some ripple effects. How can I extend it to the whole view?

[danieljgp2]

Does anyone find a way to used it on anything than buttons ?

[Boubaker93]

@danieljgp2 No you cant directly use it on anything other than buttons. But i found a work around : You can just wrap your element into a touchableOpacity and set the disabled key to true like in this exemple :

<TouchableOpacity
    disabled
    key='exemple'
    ref={ref => {
         ...
      }} >
      <Text>some text to target</Text>
</TouchableOpacity >

[danieljgp2]

@Boubaker93 Do you know if there is a way to add custom buttons inside the tours circles?

[Boubaker93]

@danieljgp2 i don't know, i did not try that out honestly.

[danieljgp2]

@Boubaker93 Hello, im having a problem on Android, when i set targetTransparent to False the content of the touchableOpacity goest to the back and the target overlays it.

[danieljgp2]

@temraz @RishavKumar-3796 Im facing the same issue on android, you guys can check it here https://github.com/prscX/react-native-app-tour/issues/78 anyone found a solution to this issue ?

[ntcong91]

For anyone have faced with this issue.

• please change connect react redux to

  // connect(mapStateToProps, mapDispatch)(YourComponent)
  connect(mapStateToProps, mapDispatch, null, { forwardRef: true })(YourComponent);

  this will fix the issue "React Internal Fiber not found" for ref.

[ntcong91]

I think this issue should be closed @prscX

[Doha26]

@ntcong91 your proposition did'nt work for me. (RN:0.61, react:16.9.0 , APTOUR:1.0.3)

[phatlaunchdeck]

For anyone who is still facing this issue on React Native 0.60+ (when they switched to use forwardRef on basic components like View and TouchableOpacity, etc.), here's my dirty workaround:

Create a placeholder View which extends React.Component (or PureComponent depends on your use) like this:

import React, { Component } from 'react';
import { View } from 'react-native';

export default class DefaultView extends Component
{
    render()
    {
        return(
            <View {...this.props}>
                {this.props.children}
            </View>
        );
    }
}

and wrap your app tour target inside it like this example and it will work:

I found out about this when I was using the library perfectly fine with TouchableOpacity on RN 0.59.10, then I upgraded my project to RN 0.62 a few days ago and the library stopped working.

[igachmov]

@phatlaunchdeck This does not work with addAppTourTarget(AppTourView.for(ref, { ...props })). Do you have any idea how it can be done? And can you give the full example with DefaultView in action ?