Usage with react-native-action-button

[HZSamir]

Hello, I'm having a little trouble using this lib in conjunction with react-native-action-button as the overlay is displayed right in the middle of the screen while my floating button is actually on the bottom right of the screen. Is there any way to force an absolute positioning of the tour or else another way to solve this issue? Thank you.

[prscX]

Thanks @Unforgiven-wanda for raising your concern.

Can you please share the snippet of your source, also setTimeout value which you specified in order to show the app tour.

Thanks </ Pranav >

[HZSamir]

Thank you for taking the time. Here is my code:

My Floating action button component:

import React, { PureComponent } from "react";
import { StyleSheet } from "react-native";
import ActionButton from "react-native-action-button";
import Icon from "react-native-vector-icons/MaterialIcons";

class FAB extends PureComponent {
  render() {
    const { items, ...other } = this.props;
    return (
      <ActionButton offsetX={20} {...other}>
        {items.map((item, index) => (
          <ActionButton.Item
            key={index}
            buttonColor={item.color}
            title={item.title}
            onPress={item.call}
          >
            <Icon name={item.iconName} style={styles.actionButtonIcon} />
          </ActionButton.Item>
        ))}
      </ActionButton>
    );
  }
}

export default FAB;

const styles = StyleSheet.create({
  actionButtonIcon: {
    fontSize: 20,
    height: 22,
    color: "white"
  }
});

My example:

import React, { PureComponent } from "react";
import { View, Text } from "react-native";
import FAB from "../FAB";
import { AppTour, AppTourView } from "react-native-app-tour";

class Previsions extends PureComponent {
    componentDidMount() {
        const self = this;
        InteractionManager.runAfterInteractions(() => {
            setTimeout(() => {
                let appTourTarget = AppTourView.for(self.fabRef, {
                order: 12,
                title: "This is a target button 1",
                description: "We have the best targets, believe me",
                outerCircleColor: "#3f52ae",
                cancelable: false
                });
                AppTour.ShowFor(appTourTarget);
            }, 1000);
        });
    }

    // Other code

    render() {
        return (
            <View style={{ flex: 1 }} contentContainerStyle={{ flex: 1 }}>
                <FAB
                    ref={ref => (this.fabRef = ref)}
                    key={"FAB"}
                    title={"Bottom right"}
                    buttonColor="rgba(231,76,60,1)"
                    style={{ zIndex: 100 }}
                    offsetY={20}
                    offsetX={20}
                    items={[
                    {
                        title: "Button 1",
                        iconName: "link",
                        color: "#2196F3",
                        call: () => {
                        alert('Something')
                        }
                    },
                    {
                        title: "Button 2",
                        iconName: "lock",
                        color: "#ffc145",
                        call: () => {
                        alert('Something else')
                        }
                    }
                    ]}
                />
                <Text>Content</Text>
            </View>
        )
    }
}

This is what it looks like in my app

[prscX]

Thanks @Unforgiven-wanda for sharing the source.

Can you please take ref directly of ActionButton from FAB class and pass it to the main class. You can check example project for the same.

Please let me know your findings of the same.

Thanks </ Pranav >

[prscX]

I hope shared approach would have worked. Closing the issue.

Thanks </ Pranav >