RTL Fix in android (Persian and English and Arabic)

[miladmrk94]

Only by adding: I18nManager , transform: [{ scaleX: I18nManager.allowRTL ? -1 : 1 }]

import React from "react";
import {
  StyleSheet,
  Text,
  View,
  StatusBar,
  Image,
  I18nManager,
} from "react-native";
import AppIntroSlider from "react-native-app-intro-slider";
import {
  responsiveHeight,
  responsiveWidth,
  responsiveFontSize,
} from "react-native-responsive-dimensions";

const data = [
  {
    title: "Welcome To Park Here 1",
    text: "Find the best possible parking space nearby\n your desired destination",
    image: require("../assets/Intro/carIntro.png"),
    bg: "#59b2ab",
  },
  {
    title: "Title 2",
    text: "Other cool stuff",
    image: require("../assets/Intro/carIntro.png"),
    bg: "#febe29",
  },
  {
    title: "Rocket guy",
    text: "I'm already out of descriptions\n\nLorem ipsum bla bla bla",
    image: require("../assets/Intro/carIntro.png"),
    bg: "#22bcb5",
  },
];

export default function test() {
  const renderItem = ({ item }) => {
    return (
      <View style={styles.slider}>
        <Image source={item.image} style={styles.imageSlider} />
        <View>
          <Text style={styles.title}>{item.title}</Text>
          <View style={{ marginVertical: 10 }} />
          <Text style={styles.test}>{item.text}</Text>
        </View>
      </View>
    );
  };

  const keyExtractor = (item) => item.title;

  const renderDoneButton = () => {
    return (
      <View style={styles.fix}>
        <Text>Done</Text>
      </View>
    );
  };
  const renderNextButton = () => {
    return (
      <View style={styles.fix}>
        <Text>Next</Text>
      </View>
    );
  };
  const renderPrevButton = () => {
    return (
      <View style={styles.fix}>
        <Text>Prev</Text>
      </View>
    );
  };

  return (
    <View
      style={{
        flex: 1,
        transform: [{ scaleX: I18nManager.allowRTL ? -1 : 1 }],
      }}
    >
      <StatusBar translucent backgroundColor="transparent" />
      <AppIntroSlider
        keyExtractor={keyExtractor}
        renderItem={renderItem}
        renderDoneButton={renderDoneButton}
        renderNextButton={renderNextButton}
        renderPrevButton={renderPrevButton}
        showPrevButton
        data={data}
        style={{}}
      />
    </View>
  );
}

const styles = StyleSheet.create({
  slider: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center",
    transform: [{ scaleX: I18nManager.isRTL ? -1 : 1 }],
  },
  imageSlider: {
    marginVertical: 60,
    width: responsiveWidth(70),
    height: responsiveHeight(30),
  },
  title: {
    textAlign: "center",
    fontFamily: "Gil",
    fontSize: responsiveFontSize(2.5),
  },
  test: {
    textAlign: "center",
    fontFamily: "Sans",
    fontSize: responsiveFontSize(1.8),
    color: "#8193AE",
  },
  fix: {
    transform: [{ scaleX: I18nManager.isRTL ? -1 : 1 }],
  },
});

https://user-images.githubusercontent.com/71356858/120070262-de303880-c09e-11eb-8b30-c33d76cbbc5f.mp4