The sliding effect works in reverse when the phone's language is set to RTL languages such as Arabic.

[iliassanati]

this is my code :

import React, { useState } from 'react'; import { Controller, Control } from 'react-hook-form'; import { Platform, Text, TextInput, View } from 'react-native'; import MultiSlider from '@ptomasroos/react-native-multi-slider'; import { Ionicons } from '@expo/vector-icons'; import { Dimensions, KeyboardAvoidingView } from 'react-native';

interface RHFRangeSliderProps { name: string; label: string; control: Control; min: number; max: number; step?: number; rules?: object; icon?: any; }

const RHFRangeSlider: React.FC<RHFRangeSliderProps> = ({ name, label, control, min, max, step = 1, rules, icon, }) => { const [isSliding, setIsSliding] = useState(false);

const screenWidth = Dimensions.get('window').width;

return ( <View className='my-2'> <View className='flex-row items-center gap-2 mb-2'> {icon} <Text className='text-md font-interSemiBold'>{label}</Text> </View> <Controller control={control} name={name} rules={rules} render={({ field: { onChange, value = [min, max] }, fieldState: { error }, }) => ( <> <KeyboardAvoidingView behavior={Platform.OS === 'ios' ? 'padding' : undefined} > <View className='flex-column h-fit'> <View className='flex-row justify-between '> <TextInput value={String(value[0])} onChangeText={(text) => { const newMin = Math.min( Math.max(Number(text), min), value[1] - step ); onChange([newMin, value[1]]); }} keyboardType='numeric' className='p-3 text-white font-interSemiBold rounded-lg bg-[#466379] w-fit' />

              <TextInput
                value={String(value[1])}
                onChangeText={(text) => {
                  const newMax = Math.max(
                    Math.min(Number(text), min),
                    value[0] + step
                  );
                  onChange([value[0], newMax]);
                }}
                keyboardType='numeric'
                className='p-3 text-white font-interSemiBold rounded-lg bg-[#466379] w-fit'
              />
            </View>
            <View className='flex-row justify-center'>
              <MultiSlider
                values={value}
                min={min}
                max={max}
                step={step}
                sliderLength={screenWidth - 80}
                onValuesChangeStart={() => setIsSliding(true)}
                onValuesChangeFinish={(values) => {
                  setIsSliding(false);
                  onChange(values);
                }}
                onValuesChange={onChange}
                selectedStyle={{
                  backgroundColor: '#466379',
                  height: 4,
                }}
                unselectedStyle={{
                  backgroundColor: '#BDBDBD',
                }}
                trackStyle={{
                  height: 4,
                }}
                markerStyle={{
                  height: 18,
                  width: 18,
                  marginTop: 5,
                  borderRadius: 10,
                  borderWidth: 2,
                  borderColor: '#466379',
                  backgroundColor: 'white',
                }}
              />
            </View>
          </View>
        </KeyboardAvoidingView>
        <View className='flex-row items-center mt-2'>
          {error && (
            <Ionicons
              name='close-circle'
              size={20}
              color='red'
              style={{ marginLeft: 10 }}
            />
          )}
        </View>
        {error && <Text style={{ color: 'red' }}>{error.message}</Text>}
      </>
    )}
  />
</View>

); };

export default RHFRangeSlider;

Test the component with different languages set in the phone settings (e.g., English and Arabic).

• Expected Behavior

The sliding effect should work consistently regardless of the phone's language settings.

• Actual Behavior

The sliding effect works in reverse when the phone's language is set to RTL languages such as Arabic.

• Environment

React Native version: [e.g., 0.72.3]

react-native-multi-slider version: [e.g., 2.3.0]

Platform: [e.g., iOS, Android]

Language Settings: [e.g., English, Arabic]

• Additional Comments

It seems that the slider behaves differently in RTL layouts. This issue might be related to how the component handles layout directions. Please let me know if there is a workaround or fix for this behavior.

Thank you!

[amitpdev]

@iliassanati give this library a try, supports RTL automatically and is super fast: https://www.npmjs.com/package/react-native-fast-range-slider