/**
 * Copyright (c) 2015-present, Facebook, Inc.
 * All rights reserved.
 *
 * This source code is licensed under the BSD-style license found in the
 * LICENSE file in the root directory of this source tree. An additional grant
 * of patent rights can be found in the PATENTS file in the same directory.
 *
 * @noflow
 */

/* eslint-disable no-use-before-define */

import React from 'react';
import Page from './Page';
import Block from './Block';
import {
  Animated,
  Button,
  I18nManager,
  Image,
  PanResponder,
  PixelRatio,
  Platform,
  ScrollView,
  StyleSheet,
  Text,
  TouchableWithoutFeedback,
  Switch,
  View
} from 'react-native';

const SCALE = PixelRatio.get();
const IMAGE_DIMENSION = 100 * SCALE;
const IMAGE_SIZE = [IMAGE_DIMENSION, IMAGE_DIMENSION];
const iconSource =
  'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0nMjAwJyBoZWlnaHQ9JzIwMCcgZmlsbD0iIzAwMDAwMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmVyc2lvbj0iMS4xIiB4PSIwcHgiIHk9IjBweCIgdmlld0JveD0iMCAwIDEwMCAxMDAiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDEwMCAxMDAiIHhtbDpzcGFjZT0icHJlc2VydmUiPjxnPjxwYXRoIGQ9Ik0yNS44NjcsNDguODUzQzMyLjgwNiw1MC4xNzYsNDYuNDYsNTIuNSw2MS4yMTUsNTIuNWgwLjAwNWM5LjcxLDAsMTguNDAxLTEuMDU3LDI1LjkzOC0yLjkxMyAgIGMwLjE1OS0wLjA0NiwwLjM1LTAuMTM1LDAuNTY1LTAuMTg3YzAuMjgyLTAuMDcyLDAuNTY1LTAuMTY0LDAuODQ0LTAuMjM4YzMuMTg0LTAuOTY0LDIuNTc3LTMuMDUxLDIuMTk5LTMuODUyICAgYy00LjE2Ni03LjcxOS0xNS4wODYtMjMuNDE1LTM1LjAyOC0yMy40MTVjLTIyLjE2OSwwLTMwLjI2MiwxMC42MzUtMzMuMTQsMTkuNTg5QzIyLjU0NSw0Mi4zMzMsMjIuNDA3LDQ3LjEzNSwyNS44NjcsNDguODUzeiAgICBNMjguNjc2LDM4LjAzMmMwLjAxMy0wLjAzNiwwLjYxNC0xLjYyNiwxLjkyMy0xLjAwOGMxLjEzMywwLjUzNSwwLjk2MSwxLjU2MywwLjg4NywxLjg1Yy0wLjAwNywwLjAyNC0wLjAxNCwwLjA0OC0wLjAyMSwwLjA3MyAgIGMwLDAuMDAxLTAuMDAxLDAuMDA0LTAuMDAxLDAuMDA0bDAsMGMtMC4yNDksMC45MjktMC40MDQsMi4wODYtMC4wMTcsMi44NmMwLjE2LDAuMzE5LDAuNDkyLDAuNzY4LDEuNTQyLDAuOTg3bDAuMzY2LDAuMDc3ICAgYzIwLjgxNiw0LjM2LDM2LDIuOTMzLDQ1LjY3OCwwLjYyNmwtMC4wMDQsMC4wMDJjMCwwLDAuMDA1LTAuMDAyLDAuMDA3LTAuMDAzYzAuMjEyLTAuMDUsMC40MjEtMC4xMDEsMC42MjgtMC4xNTIgICBjMC41MDktMC4wNSwxLjE3MywwLjA3OCwxLjM5OSwxYzAuMzUxLDEuNDI0LTAuOTczLDEuODk1LTEuMjE3LDEuOTY5Yy01LjMyNSwxLjI3OS0xMi4yNjYsMi4zMDYtMjAuODM1LDIuMzA3ICAgYy03LjUwNSwwLTE2LjI1NS0wLjc4Ny0yNi4yNTctMi44ODJsLTAuMzY0LTAuMDc3Yy0yLjEyLTAuNDQyLTMuMTExLTEuNjMzLTMuNTY5LTIuNTU1QzI3Ljk4NSw0MS40MjEsMjguMjgxLDM5LjQxNiwyOC42NzYsMzguMDMyICAgeiI+PC9wYXRoPjxjaXJjbGUgY3g9IjEwLjQ5MyIgY3k9IjIzLjQ1NSIgcj0iMC42MTkiPjwvY2lyY2xlPjxwYXRoIGQ9Ik0yLjA4LDI4LjMwOGMwLjY3Ni0wLjE3OCwwLjk4My0wLjM1MiwxLjE3NC0wLjVDNC42OSwyNi42OSw2LjUsMjcuNDgzLDcuNSwyOC4zNTd2MC4wMDJjMCwwLDEuNzExLDEuMjM1LDAuNzM3LDIuMjAyICAgYy0wLjk3NCwwLjk2NS0yLjMxOSwwLjAwNi0yLjMxOSwwLjAwNmwwLjAzNSwwLjAxNmMtMC4zMjctMC4yMDMtMC42LTAuNTYxLTAuNzgtMC41ODRjLTAuMzcsMC4yNi0wLjg3NiwwLjUtMS40NzYsMC41SDMuNyAgIGMwLDAtMS4zNDUsMC43MDksMC4xNzgsMS42NTJjMC4wMDEsMC4wMDEsMC4wMDIsMC4wNzIsMC4wMDQsMC4wNzNjMy45MzksMi4zNDIsOC4yNzEsNS43MDEsOC4yNzEsOC44OCAgIGMwLDAuNjkxLDAuMiwxNy4wNDIsMTcuNjI2LDI0LjczOWwwLjk2NywwLjQ0MmwtMC4xLDEuMDU5Yy0wLjQyMSw0LjM5LDEuMTQ1LDEwLjE5MSwxMC45OTMsMTIuODg4bDAuMTEzLDAuMDM4ICAgYzAuMDY3LDAuMDIzLDYuNzMyLDIuNDI5LDEwLjkwNywyLjQyOWMxLjU4NCwwLDIuMTU1LTAuMzUyLDIuMjQzLTAuNTYxYzAuMDg1LTAuMjAyLDAuNjEyLTIuMTY0LTYuMzMyLTkuMzg3bDAuMDAyLTAuMTgzICAgYzAsMC0yLjQ3Ny0zLjA3LDEuNTMzLTMuMDdjMC4wMSwwLDAuMDE5LDAsMC4wMjksMGMxLjI4NSwwLDIuNjA4LDAuMjE1LDMuOTgsMC4xODRjNC43NzEtMC4xMTcsOS4zMTYtMC40MjUsMTMuNTA2LTEuMDk2ICAgbDAuNDc0LTAuMDI4bDAuNjY4LDAuMTU4YzkuNjUxLDQuOTQ4LDE2LjczOCw3LjcxNiwxOS43MzgsNy43MTZ2MC4wMDZjMCwwLDAuMTY0LDAuMDExLDAuMjMsMC4wMDQgICBjLTAuMTg5LTAuNzIzLTIuMjMtMi44LTcuMjMtOS4wNzl2MC4wMjFjMCwwLTEuNTEyLTEuNjU4LDAuNzk3LTIuNjUzYzAuMDYzLTAuMDI2LDAuMDA4LDAuMDIzLDAuMDYtMC4wMDEgICBjOC42MzktMy41MDksMTMuNTAxLTguMjA0LDE1LjQxMS0xMS43NzVjMS4xNDUtMi4xMjksMC4yMDYtMi43ODQtMC42NTktMi45NzZjLTAuMzE3LTAuMDM4LTAuNjM0LTAuMDYyLTAuOTEyLTAuMDYyICAgYy0wLjIwNSwwLTAuMzc5LDAuMDEtMC41MjgsMC4wMjdsLTMuMTQzLDEuMjE0QzgzLjczMiw1My45MjYsNzMuMjE4LDU1LjUsNjEuMjIsNTUuNWMtMC4wMDIsMC0wLjAwNSwwLTAuMDA1LDAgICBjLTE1LjEyOCwwLTI5LjEwMS0yLjQzMi0zNi4wODMtMy43NzFsLTAuMTczLTAuMTExbC0wLjE2LTAuMTI2Yy01Ljg1OC0yLjY4MS01LjEzNy0xMC4yMDItNS4xMDMtMTAuNTE5bDAuMDYtMC4zICAgYzAuODk1LTIuODM4LDIuNDY3LTYuMzUyLDUuMjEzLTkuNzE5Yy0xLjgwOC0xLjM2OS00LjU5LTQuMTg4LTQuNDMtOC40OTRjMC4wNDYtMS4yNDQtMC40ODYtMi41MDgtMS40OTgtMy41NTkgICBjLTEuNDk4LTEuNTU1LTMuNzg1LTIuNDQ2LTYuMjc0LTIuNDQ2Yy0xLjc3LDAtMy41NTMsMC40NDItNS4yOTMsMS4zMTRjLTQuMDYxLDIuMDM1LTQuODU1LDQuNzM2LTUuNjkyLDcuNTk2ICAgYy0wLjEzNiwwLjQ2OC0wLjI4NCwwLjkzOS0wLjQzOCwxLjQxYy0wLjAwNiwwLjAxOS0wLjAyMiwwLjAzNS0wLjAyOCwwLjA1NkMwLjgzMywyOC40MjMsMS42OTEsMjguMzksMi4wOCwyOC4zMDh6IE0xMC40OTMsMTkuOTA4ICAgYzEuOTU2LDAsMy41NDgsMS41OTEsMy41NDgsMy41NDdjMCwxLjk1Ny0xLjU5MiwzLjU0OC0zLjU0OCwzLjU0OGMtMS45NTcsMC0zLjU0OC0xLjU5Mi0zLjU0OC0zLjU0OCAgIEM2Ljk0NCwyMS40OTksOC41MzYsMTkuOTA4LDEwLjQ5MywxOS45MDh6Ij48L3BhdGg+PC9nPjwvc3ZnPg==';

function ListItem(props) {
  return (
    <View style={styles.row}>
      <View style={styles.column1}>
        <Image source={props.imageSource} style={styles.icon} />
      </View>
      <View style={styles.column2}>
        <View style={styles.textBox}>
          <Text>Text Text Text</Text>
        </View>
      </View>
      <View style={styles.column3}>
        <Button onPress={() => {}} style={styles.smallButton} title="Button" />
      </View>
    </View>
  );
}

function TextAlignmentExample(props) {
  return (
    <Block description={props.description} title={props.title}>
      <View>
        <Text style={props.style}>Left-to-Right language text alignment.</Text>
        <Text style={props.style}>
          {'\u0645\u0646 \u0627\u0644\u064A\u0645\u064A\u0646 ' +
            '\u0625\u0644\u0649 \u0627\u0644\u064A\u0633\u0627\u0631 ' +
            '\u0627\u0644\u0644\u063A\u0629 \u062F\u0648\u0646 ' +
            '\u0645\u062D\u0627\u0630\u0627\u0629 \u0627\u0644\u0646\u0635'}
        </Text>
        <Text style={props.style}>
          {'\u05DE\u05D9\u05DE\u05D9\u05DF \u05DC\u05E9\u05DE\u05D0\u05DC ' +
            '\u05D4\u05E9\u05E4\u05D4 \u05D1\u05DC\u05D9 ' +
            '\u05D9\u05D9\u05E9\u05D5\u05E8 \u05D8\u05E7\u05E1\u05D8'}
        </Text>
      </View>
    </Block>
  );
}

function AnimationBlock(props) {
  return (
    <View style={styles.block}>
      <TouchableWithoutFeedback onPress={props.onPress}>
        <Animated.Image
          source={{ uri: 'https://picsum.photos/130/130/?image=909' }}
          style={[styles.img, props.imgStyle]}
        />
      </TouchableWithoutFeedback>
    </View>
  );
}

function withRTLState(Component) {
  return class extends React.Component {
    constructor(...args) {
      super(...args);
      this.state = {
        isRTL: false
      };
    }

    render() {
      const isRTL = Platform === 'ios' ? this.state.isRTL : I18nManager.isRTL;
      const setRTL = isRTL => this.setState({ isRTL: isRTL });
      return <Component isRTL={isRTL} setRTL={setRTL} />;
    }
  };
}

const RTLToggler = ({ isRTL, setRTL }) => {
  if (Platform.OS !== 'ios') {
    return <Text style={styles.rtlToggler}>{isRTL ? 'RTL' : 'LTR'}</Text>;
  }

  const toggleRTL = () => setRTL(!isRTL);
  return (
    <Button
      accessibilityLabel="Change layout direction"
      color="gray"
      onPress={toggleRTL}
      title={isRTL ? 'RTL' : 'LTR'}
    />
  );
};

const PaddingExample = withRTLState(({ isRTL, setRTL }) => {
  const color = 'teal';

  return (
    <Block title={'padding{Start,End}'}>
      <Text style={styles.bold}>Styles</Text>
      <Text>paddingStart: 50,</Text>
      <Text>paddingEnd: 10</Text>
      <Text />
      <Text style={styles.bold}>Demo: </Text>
      <Text>The {color} is padding.</Text>
      <View
        style={{
          backgroundColor: color,
          paddingStart: 50,
          paddingEnd: 10,
          borderWidth: 1,
          borderColor: color,
          direction: isRTL ? 'rtl' : 'ltr'
        }}
      >
        <View
          style={{
            backgroundColor: 'white',
            paddingTop: 5,
            paddingBottom: 5,
            borderLeftWidth: 1,
            borderRightWidth: 1,
            borderColor: 'gray'
          }}
        >
          <RTLToggler isRTL={isRTL} setRTL={setRTL} />
        </View>
      </View>
    </Block>
  );
});

const MarginExample = withRTLState(({ isRTL, setRTL }) => {
  return (
    <Block title={'margin{Start,End}'}>
      <Text style={styles.bold}>Styles</Text>
      <Text>marginStart: 50,</Text>
      <Text>marginEnd: 10</Text>
      <Text />
      <Text style={styles.bold}>Demo: </Text>
      <Text>The green is margin.</Text>
      <View
        style={{
          backgroundColor: 'green',
          borderWidth: 1,
          borderColor: 'green',
          direction: isRTL ? 'rtl' : 'ltr'
        }}
      >
        <View
          style={{
            backgroundColor: 'white',
            paddingTop: 5,
            paddingBottom: 5,
            marginStart: 50,
            marginEnd: 10,
            borderLeftWidth: 1,
            borderRightWidth: 1,
            borderColor: 'gray'
          }}
        >
          <RTLToggler isRTL={isRTL} setRTL={setRTL} />
        </View>
      </View>
    </Block>
  );
});

const PositionExample = withRTLState(({ isRTL, setRTL }) => {
  return (
    <Block title={'position: "start" | "end"'}>
      <Text style={styles.bold}>Styles</Text>
      <Text>start: 50</Text>
      <Text />
      <Text style={styles.bold}>Demo: </Text>
      <Text>The orange is position.</Text>
      <View
        style={{
          backgroundColor: 'orange',
          borderWidth: 1,
          borderColor: 'orange',
          direction: isRTL ? 'rtl' : 'ltr'
        }}
      >
        <View
          style={{
            backgroundColor: 'white',
            start: 50,
            borderColor: 'gray'
          }}
        >
          <RTLToggler isRTL={isRTL} setRTL={setRTL} />
        </View>
      </View>
      <Text />
      <Text style={styles.bold}>Styles</Text>
      <Text>end: 50</Text>
      <Text />
      <Text style={styles.bold}>Demo: </Text>
      <Text>The orange is position.</Text>
      <View
        style={{
          backgroundColor: 'orange',
          borderWidth: 1,
          borderColor: 'orange',
          direction: isRTL ? 'rtl' : 'ltr'
        }}
      >
        <View
          style={{
            backgroundColor: 'white',
            end: 50,
            borderColor: 'gray'
          }}
        >
          <RTLToggler isRTL={isRTL} setRTL={setRTL} />
        </View>
      </View>
    </Block>
  );
});

const BorderWidthExample = withRTLState(({ isRTL, setRTL }) => {
  return (
    <Block title={'border{Start,End}Width'}>
      <Text style={styles.bold}>Styles</Text>
      <Text>borderStartWidth: 10,</Text>
      <Text>borderEndWidth: 50</Text>
      <Text />
      <Text style={styles.bold}>Demo: </Text>
      <View style={{ direction: isRTL ? 'rtl' : 'ltr' }}>
        <View
          style={{
            borderStartWidth: 10,
            borderEndWidth: 50
          }}
        >
          <View>
            <RTLToggler isRTL={isRTL} setRTL={setRTL} />
          </View>
        </View>
      </View>
    </Block>
  );
});

const BorderColorExample = withRTLState(({ isRTL, setRTL }) => {
  return (
    <Block title={'border{Start,End}Color'}>
      <Text style={styles.bold}>Styles</Text>
      <Text>borderStartColor: 'red',</Text>
      <Text>borderEndColor: 'green',</Text>
      <Text />
      <Text style={styles.bold}>Demo: </Text>
      <View style={{ direction: isRTL ? 'rtl' : 'ltr' }}>
        <View
          style={{
            borderStartColor: 'red',
            borderEndColor: 'green',
            borderLeftWidth: 20,
            borderRightWidth: 20,
            padding: 10
          }}
        >
          <View>
            <RTLToggler isRTL={isRTL} setRTL={setRTL} />
          </View>
        </View>
      </View>
    </Block>
  );
});

const BorderRadiiExample = withRTLState(({ isRTL, setRTL }) => {
  return (
    <Block title={'border{Top,Bottom}{Start,End}Radius'}>
      <Text style={styles.bold}>Styles</Text>
      <Text>borderTopStartRadius: 10,</Text>
      <Text>borderTopEndRadius: 20,</Text>
      <Text>borderBottomStartRadius: 30,</Text>
      <Text>borderBottomEndRadius: 40</Text>
      <Text />
      <Text style={styles.bold}>Demo: </Text>
      <View style={{ direction: isRTL ? 'rtl' : 'ltr' }}>
        <View
          style={{
            borderWidth: 10,
            borderTopStartRadius: 10,
            borderTopEndRadius: 20,
            borderBottomStartRadius: 30,
            borderBottomEndRadius: 40,
            padding: 10
          }}
        >
          <View>
            <RTLToggler isRTL={isRTL} setRTL={setRTL} />
          </View>
        </View>
      </View>
    </Block>
  );
});

class LayoutRTLExample extends React.Component {
  constructor(props) {
    super(props);
    const pan = new Animated.ValueXY();

    this._panResponder = PanResponder.create({
      onStartShouldSetPanResponder: () => true,
      onPanResponderGrant: this._onPanResponderGrant,
      onPanResponderMove: Animated.event([null, { dx: pan.x, dy: pan.y }]),
      onPanResponderRelease: this._onPanResponderEnd,
      onPanResponderTerminate: this._onPanResponderEnd
    });

    const { doLeftAndRightSwapInRTL, isRTL } = I18nManager;

    this.state = {
      toggleStatus: {},
      pan,
      linear: new Animated.Value(0),
      isRTL,
      doLeftAndRightSwapInRTL,
      containerWidth: 0
    };

    this._linearTap = this._linearTap.bind(this);
    this._onContainerLayout = this._onContainerLayout.bind(this);
    this._onDirectionChange = this._onDirectionChange.bind(this);
    this._onPanResponderGrant = this._onPanResponderGrant.bind(this);
    this._onPanResponderEnd = this._onPanResponderEnd.bind(this);
    this._onSwapChange = this._onSwapChange.bind(this);
  }

  render() {
    return (
      <ScrollView
        style={[
          styles.container,
          // `direction` property is not supported on Android.
          Platform.OS !== 'android' ? { direction: this.state.isRTL ? 'rtl' : 'ltr' } : null
        ]}
      >
        <Page title={'React Native: Right-to-Left (RTL) UI Layout'}>
          <Block title={'Current layout direction'}>
            <View style={styles.directionBox}>
              <Text style={styles.directionText}>
                {this.state.isRTL ? 'Right-to-Left' : 'Left-to-Right'}
              </Text>
            </View>
          </Block>
          <Block title={'Quickly test RTL layout'}>
            <View style={[styles.flexDirectionRow, styles.switchRow]}>
              <Text style={{ fontWeight: 'bold' }}>forceRTL</Text>
              <View>
                <Switch onValueChange={this._onDirectionChange} value={this.state.isRTL} />
              </View>
            </View>
            <View style={[styles.flexDirectionRow, styles.switchRow]}>
              <Text style={{ fontWeight: 'bold' }}>swapLeftAndRightInRTL</Text>
              <View>
                <Switch
                  onValueChange={this._onSwapChange}
                  value={this.state.doLeftAndRightSwapInRTL}
                />
              </View>
            </View>
          </Block>
          <TextAlignmentExample
            description={'Depends on the text content.'}
            style={styles.fontSizeSmall}
            title={'Default text alignment'}
          />
          <TextAlignmentExample
            style={[styles.fontSizeSmall, styles.textAlignLeft]}
            title={'textAlign: "left"'}
          />
          <TextAlignmentExample
            style={[styles.fontSizeSmall, styles.textAlignRight]}
            title={'textAlign: "right"'}
          />
          <TextAlignmentExample
            style={[styles.fontSizeSmall, styles.textAlignStart]}
            title={'textAlign: "start"'}
          />
          <TextAlignmentExample
            style={[styles.fontSizeSmall, styles.textAlignEnd]}
            title={'textAlign: "end"'}
          />
          <PaddingExample />
          <MarginExample />
          <PositionExample />
          <BorderColorExample />
          <BorderWidthExample />
          <BorderRadiiExample />

          <Block title={'A simple list-item layout'}>
            <View style={styles.list}>
              <ListItem imageSource={{ uri: 'https://picsum.photos/130/130?image=222' }} />
              <ListItem imageSource={{ uri: 'https://picsum.photos/130/130?image=250' }} />
            </View>
          </Block>

          <Block title={'Working with icons'}>
            <View style={[styles.flexDirectionRow, { justifyContent: 'space-around' }]}>
              <View style={{ alignItems: 'center' }}>
                <Image source={iconSource} style={styles.image} />
                <Text style={styles.fontSizeSmall}>No RTL flip</Text>
              </View>
              <View style={{ alignItems: 'center' }}>
                <Image
                  source={iconSource}
                  style={[styles.image, { transform: [{ scaleX: this.state.isRTL ? -1 : 1 }] }]}
                />
                <Text style={styles.fontSizeSmall}>RTL flip</Text>
              </View>
            </View>
          </Block>

          <Block
            description={'Animation direction according to layout'}
            title={'Controlling animation'}
          >
            <View onLayout={this._onContainerLayout} style={styles.view}>
              <AnimationBlock
                imgStyle={{
                  transform: [
                    { translateX: this.state.linear },
                    { scaleX: this.state.isRTL ? -1 : 1 }
                  ]
                }}
                onPress={this._linearTap}
              />
            </View>
          </Block>
        </Page>
      </ScrollView>
    );
  }

  _onContainerLayout(e) {
    this.setState(() => ({ containerWidth: e.nativeEvent.layout.width }));
  }

  _onDirectionChange() {
    I18nManager.forceRTL(!this.state.isRTL);
    this.setState({ isRTL: !this.state.isRTL });
  }

  _onSwapChange() {
    I18nManager.swapLeftAndRightInRTL(!this.state.doLeftAndRightSwapInRTL);
    this.setState({
      doLeftAndRightSwapInRTL: !this.state.doLeftAndRightSwapInRTL
    });
  }

  _linearTap(refName, e) {
    this.setState({
      toggleStatus: {
        ...this.state.toggleStatus,
        [refName]: !this.state.toggleStatus[refName]
      }
    });
    const offset = IMAGE_SIZE[0] / SCALE / 2 + 10;
    const toMaxDistance = (this.state.isRTL ? -1 : 1) * (this.state.containerWidth / 2 - offset);
    Animated.timing(this.state.linear, {
      toValue: this.state.toggleStatus[refName] ? toMaxDistance : 0,
      duration: 2000,
      useNativeDriver: false
    }).start();
  }

  _onPanResponderGrant(e, gestureState) {
    this.state.pan.stopAnimation(value => {
      this.state.pan.setOffset(value);
    });
  }

  _onPanResponderEnd(e, gestureState) {
    this.state.pan.flattenOffset();
    Animated.sequence([
      Animated.decay(this.state.pan, {
        velocity: { x: gestureState.vx, y: gestureState.vy },
        deceleration: 0.995
      }),
      Animated.spring(this.state.pan, { toValue: { x: 0, y: 0 } })
    ]).start();
  }
}

export default function LayoutRTL() {
  return <LayoutRTLExample />;
}

const styles = StyleSheet.create({
  container: {
    backgroundColor: '#e9eaed'
  },
  directionBox: {
    flex: 1,
    backgroundColor: '#f8f8f8',
    borderWidth: 0.5,
    borderColor: 'black'
  },
  directionText: {
    padding: 10,
    fontSize: 16,
    textAlign: 'center',
    fontWeight: 'bold'
  },
  switchRow: {
    alignItems: 'center',
    justifyContent: 'space-between',
    paddingVertical: 5
  },
  list: {
    height: 120,
    marginBottom: 5,
    borderTopWidth: 0.5,
    borderLeftWidth: 0.5,
    borderRightWidth: 0.5,
    borderColor: '#e5e5e5'
  },
  row: {
    height: 60,
    flexDirection: 'row',
    borderBottomWidth: 0.5,
    borderColor: '#e5e5e5'
  },
  column1: {
    width: 60,
    padding: 6
  },
  column2: {
    flex: 1,
    padding: 6
  },
  column3: {
    justifyContent: 'center',
    padding: 6
  },
  icon: {
    width: 48,
    height: 48,
    borderWidth: 0.5,
    borderColor: '#e5e5e5'
  },
  image: {
    width: 48,
    height: 48
  },
  img: {
    width: IMAGE_SIZE[0] / SCALE,
    height: IMAGE_SIZE[1] / SCALE
  },
  view: {
    flex: 1
  },
  block: {
    padding: 10,
    alignItems: 'center'
  },
  smallButton: {
    height: 24,
    width: 64
  },
  fontSizeSmall: {
    fontSize: 14
  },
  fontSizeExtraSmall: {
    fontSize: 12
  },
  textAlignLeft: {
    textAlign: 'left'
  },
  textAlignRight: {
    textAlign: 'right'
  },
  textAlignStart: {
    textAlign: 'start'
  },
  textAlignEnd: {
    textAlign: 'end'
  },
  flexDirectionRow: {
    flexDirection: 'row'
  },
  bold: {
    fontWeight: 'bold'
  },
  rtlToggler: {
    color: 'gray',
    padding: 8,
    textAlign: 'center',
    fontWeight: '500'
  }
});
