feat: implement rtl support for android picker (#243)

react-native-picker · Apr 12, 2021 · ce376c2 · ce376c2
1 parent d84059c
commit ce376c2
Show file tree

Hide file tree

Showing 4 changed files with 58 additions and 1 deletion.
diff --git a/android/src/main/java/com/reactnativecommunity/picker/ReactPicker.java b/android/src/main/java/com/reactnativecommunity/picker/ReactPicker.java
@@ -10,14 +10,17 @@
 import android.content.Context;
 import android.content.ContextWrapper;
 import android.content.res.Resources;
+import android.os.Build;
 import android.util.AttributeSet;
 import android.util.TypedValue;
 import android.view.View;
 import android.widget.AdapterView;
 import android.widget.Spinner;
+
 import androidx.appcompat.widget.AppCompatSpinner;
 import com.facebook.react.bridge.ReactContext;
 import com.facebook.react.common.annotations.VisibleForTesting;
+import com.facebook.react.modules.i18nmanager.I18nUtil;
 import com.facebook.react.uimanager.UIManagerModule;
 
 import javax.annotation.Nullable;
@@ -55,24 +58,42 @@ public interface OnSelectListener {
 
   public ReactPicker(Context context) {
     super(context);
+    handleRTL(context);
   }
 
   public ReactPicker(Context context, int mode) {
     super(context, mode);
     mMode = mode;
+    handleRTL(context);
   }
 
   public ReactPicker(Context context, AttributeSet attrs) {
     super(context, attrs);
+    handleRTL(context);
   }
 
   public ReactPicker(Context context, AttributeSet attrs, int defStyle) {
     super(context, attrs, defStyle);
+    handleRTL(context);
   }
 
   public ReactPicker(Context context, AttributeSet attrs, int defStyle, int mode) {
     super(context, attrs, defStyle, mode);
     mMode = mode;
+    handleRTL(context);
+  }
+
+  private void handleRTL(Context context) {
+    if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.JELLY_BEAN_MR1) {
+      boolean isRTL = I18nUtil.getInstance().isRTL(context);
+      if (isRTL) {
+        this.setLayoutDirection(View.LAYOUT_DIRECTION_RTL);
+        this.setTextDirection(View.TEXT_DIRECTION_RTL);
+      } else {
+        this.setLayoutDirection(View.LAYOUT_DIRECTION_LTR);
+        this.setTextDirection(View.TEXT_DIRECTION_LTR);
+      }
+    }
   }
 
   private final Runnable measureAndLayout = new Runnable() {

diff --git a/android/src/main/java/com/reactnativecommunity/picker/ReactPickerManager.java b/android/src/main/java/com/reactnativecommunity/picker/ReactPickerManager.java
@@ -8,19 +8,21 @@
 package com.reactnativecommunity.picker;
 
 import android.content.Context;
-import android.graphics.Color;
 import android.graphics.PorterDuff;
 import android.graphics.Typeface;
+import android.os.Build;
 import android.view.LayoutInflater;
 import android.view.View;
 import android.view.ViewGroup;
 import android.widget.BaseAdapter;
 import android.widget.Spinner;
 import android.widget.TextView;
+
 import com.facebook.infer.annotation.Assertions;
 import com.facebook.react.bridge.Arguments;
 import com.facebook.react.bridge.ReadableArray;
 import com.facebook.react.bridge.ReadableMap;
+import com.facebook.react.modules.i18nmanager.I18nUtil;
 import com.facebook.react.uimanager.*;
 import com.facebook.react.uimanager.annotations.ReactProp;
 import com.facebook.react.uimanager.events.EventDispatcher;
@@ -227,6 +229,17 @@ private View getView(int position, View convertView, ViewGroup parent, boolean i
         textView.setTypeface(face);
       }
 
+      if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.JELLY_BEAN_MR1) {
+        boolean isRTL = I18nUtil.getInstance().isRTL(convertView.getContext());
+        if (isRTL) {
+          convertView.setLayoutDirection(View.LAYOUT_DIRECTION_RTL);
+          convertView.setTextDirection(View.TEXT_DIRECTION_RTL);
+        } else {
+          convertView.setLayoutDirection(View.LAYOUT_DIRECTION_LTR);
+          convertView.setTextDirection(View.TEXT_DIRECTION_LTR);
+        }
+      }
+
       return convertView;
     }
 

diff --git a/example/android/app/src/main/AndroidManifest.xml b/example/android/app/src/main/AndroidManifest.xml
@@ -9,6 +9,7 @@
       android:icon="@mipmap/ic_launcher"
       android:roundIcon="@mipmap/ic_launcher_round"
       android:allowBackup="false"
+      android:supportsRtl="true"
       android:theme="@style/AppTheme">
       <activity
         android:name=".MainActivity"

diff --git a/example/src/App.tsx b/example/src/App.tsx
@@ -6,15 +6,31 @@ import {
   Text,
   View,
   SafeAreaView,
+  I18nManager,
+  Switch,
 } from 'react-native';
 
 import * as PickerExamples from './PickerExample';
 import * as PickerIOSExamples from './PickerIOSExample';
 
 export default function App() {
+  const [isRTL, setIsRTL] = React.useState(I18nManager.isRTL);
+  React.useEffect(() => {
+    I18nManager.allowRTL(true);
+  }, []);
   return (
     <SafeAreaView style={styles.main}>
       <ScrollView>
+        <View style={styles.rtlSwitchContainer}>
+          <Switch
+            value={isRTL}
+            onValueChange={(newValue) => {
+              setIsRTL(newValue);
+              I18nManager.forceRTL(newValue);
+            }}
+          />
+          <Text>{I18nManager.isRTL ? 'RTL' : 'LTR'}</Text>
+        </View>
         <View style={styles.container}>
           <Text style={styles.heading}>Picker Examples</Text>
           {PickerExamples.examples.map((element) => (
@@ -57,4 +73,10 @@ const styles = StyleSheet.create({
     fontSize: 22,
     color: 'black',
   },
+  rtlSwitchContainer: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    paddingHorizontal: 40,
+    paddingTop: 20,
+  },
 });