No RTL support

[armata99]

Hi. My app is on ForceRTL and the tooltip pops up on the opposite side of screen and also show a copy of my button there. any solution for this?

[jasongaare]

👋

hi could you provide screenshots and code reproduction please?

[armata99]

Yes here it is. I made it a bit simplified...

import React from 'react';
import {
  SafeAreaView,
  TouchableOpacity,
  Text,
  InteractionManager,
} from 'react-native';
import Ionicons from 'react-native-vector-icons/Ionicons';
import {primaryColor} from './contants/Colors';
import Tooltip from 'react-native-walkthrough-tooltip';

export default class ProfileScreen extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      controlsVisible: true,
      toolTipVisible: false,
    };
  }

  componentDidMount() {
    InteractionManager.runAfterInteractions(() => {
      this.setState({toolTipVisible: true});
    });
  }

  render() {
    const {controlsVisible, toolTipVisible} = this.state;
    return (
      <SafeAreaView style={{flex: 1, padding: 5}}>
        <Tooltip
          isVisible={toolTipVisible}
          content={<Text>My tooltip</Text>}
          placement="bottom"
          onClose={() => this.setState({toolTipVisible: false})}>
          <TouchableOpacity
            activeOpacity={0.7}
            style={{
              width: 52,
              height: 52,
              padding: 15,
              borderRadius: 200,
              backgroundColor: primaryColor,
              elevation: 5,
            }}
            onPress={() => {
              this.setState({controlsVisible: !controlsVisible});
            }}>
            <Ionicons
              name={controlsVisible ? 'eye' : 'eye-off'}
              size={22}
              color={'white'}
            />
          </TouchableOpacity>
        </Tooltip>
      </SafeAreaView>
    );
  }
}

and this is the result I get form the code:

RN info: react: 16.13.1 => 16.13.1 react-native: 0.63.3 => 0.63.3

Device info: Samsung galaxy A51 Android 11

[jasongaare]

Thanks for this!

I'm curious what version of this library you have, namely because I'm wondering if this PR that was merged recently would resolve this issue or not -- https://github.com/jasongaare/react-native-walkthrough-tooltip/pull/114

Alternatively, if you added alignItems: flex-start to the SafeAreaView does that change anything at all? (Forgive my ignorance with RTL set up, but I'm assuming the button is rendered on the right by default because of that)

If none of those help, do you have any insights on how to resolve this problem programmatically?

[Adam-AbJab]

1. in order to not show the icon(or element) that shows the tooltip after clicking you just use showChildInTooltip={false}
2. in order to align the tooltip its self RTL, just use flexDirection or alignContent in the tooltip styling and flip the align flexDirection: I18nManager.isRTL ? 'row-reverse' : 'row'

[HamdyOmran]

I forked the library and adjusted styles.js file to handle rtl, here's the link for my fork: https://github.com/HamdyOmran/react-native-walkthrough-tooltip/blob/master/src/styles.js

[AdhamMahmoud98]

@HamdyOmran Your solution works !! Thank you. For those who are still stuck please add transform: [{ scaleX: I18nManager.isRTL ? -1 : 1 }], To the container & content object in style.js

[HasanElfalt]

Is there a way to flip the position the highlighted icon according if I use Arabic or English, instead of using showChildInTooltip={false} ? @Adam-AbJab @HamdyOmran