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 = ({
name,
label,
control,
min,
max,
step = 1,
rules,
icon,
}) => {
const [isSliding, setIsSliding] = useState(false);
const screenWidth = Dimensions.get('window').width;
return (
{icon}
{label}
<Controller
control={control}
name={name}
rules={rules}
render={({
field: { onChange, value = [min, max] },
fieldState: { error },
}) => (
<>
<KeyboardAvoidingView
behavior={Platform.OS === 'ios' ? 'padding' : undefined}
>
<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).
The sliding effect should work consistently regardless of the phone's language settings.
The sliding effect works in reverse when the phone's language is set to RTL languages such as Arabic.
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]
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!
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 = ({
name,
label,
control,
min,
max,
step = 1,
rules,
icon,
}) => {
const [isSliding, setIsSliding] = useState(false);
const screenWidth = Dimensions.get('window').width;
return (
{icon}
{label}
<Controller
control={control}
name={name}
rules={rules}
render={({
field: { onChange, value = [min, max] },
fieldState: { error },
}) => (
<>
<KeyboardAvoidingView
behavior={Platform.OS === 'ios' ? 'padding' : undefined}
>
<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'
/>
);
};
export default RHFRangeSlider;
Test the component with different languages set in the phone settings (e.g., English and Arabic).
The sliding effect should work consistently regardless of the phone's language settings.
The sliding effect works in reverse when the phone's language is set to RTL languages such as Arabic.
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]
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!