rtl support

[iamhaaamed]

Hi, how can I use react-native-textinput-effects in rtl languages?

[ghost]

import {

I18nManager,

} from "react-native";

_margin_dir=({value})=>{ if(I18nManager.isRTL)return {marginLeft:value,paddingLeft: 0} else return {marginRight:value,paddingRight: 0} } _direction=({value})=>{ if(I18nManager.isRTL)return {left:value} else return {right:value} } render() { const { iconClass, iconColor, iconSize, passiveIconColor, iconName, label, style: containerStyle, inputStyle, height: inputHeight, labelStyle } = this.props; const { focusedAnim, value } = this.state; const AnimatedIcon = Animated.createAnimatedComponent(iconClass); const ANIM_PATH = PADDING + inputHeight; const NEGATIVE_ANIM_PATH = ANIM_PATH * -1;

return (
  <View
    style={[styles.container, containerStyle]}
    onLayout={this._onLayout}
  >
    <TouchableWithoutFeedback onPress={this.focus}>
      <AnimatedIcon
        name={iconName}
        color={iconColor}
        size={iconSize}
        style={{
          position: "absolute",
           ...this._direction({value:PADDING}),

          bottom: focusedAnim.interpolate({
            inputRange: [0, 0.5, 0.51, 0.7, 1],
            outputRange: [
              15,
              ANIM_PATH,
              NEGATIVE_ANIM_PATH,
              NEGATIVE_ANIM_PATH,
              24
            ]
          }),
          color: focusedAnim.interpolate({
            inputRange: [0, 0.5, 1],
            outputRange: [passiveIconColor, iconColor, iconColor]
          })
        }}
      />
    </TouchableWithoutFeedback>
    <View
      style={[
        styles.separator,
        {
          height: inputHeight,
          ...this._direction({value:ICON_WIDTH + 8}),

        }
      ]}
    />
    <TouchableWithoutFeedback onPress={this.focus}>
      <Animated.View
        style={{
          position: "absolute",
          ...this._direction({value:ICON_WIDTH + PADDING}),
          height: inputHeight,
          top: focusedAnim.interpolate({
            inputRange: [0, 0.5, 0.51, 0.7, 1],
            outputRange: [
              24,
              ANIM_PATH,
              NEGATIVE_ANIM_PATH,
              NEGATIVE_ANIM_PATH,
              PADDING / 2
            ]
          })
        }}
      >
        <Animated.Text
          style={[
            styles.label,
            {
              fontSize: focusedAnim.interpolate({
                inputRange: [0, 0.7, 0.71, 1],
                outputRange: [16, 16, 12, 12]
              }),
              color: focusedAnim.interpolate({
                inputRange: [0, 0.7],
                outputRange: ["#696969", "#a3a3a3"]
              })
            },
            labelStyle
          ]}
        >
          {label}
        </Animated.Text>
      </Animated.View>
    </TouchableWithoutFeedback>
    <TextInput
      ref="input"
      {...this.props}
      style={[
        styles.textInput,
        {
          ...this._margin_dir({value:ICON_WIDTH + PADDING})  

           ,
          color: iconColor
        },
        inputStyle
      ]}
      value={value}
      onBlur={this._onBlur}
      onFocus={this._onFocus}
      onChange={this._onChange}
      underlineColorAndroid={"transparent"}
    />
  </View>
);

} }

[ghost]

like abow example ... add I18nManager and some code in module files like Fumi .. 👍

[halilb]

PRs are welcomed for RTL support. I don't have time to implement it myself unfortunately.