isPassword pressable doesn't support RTL view about tamagui-kitchen-sink HOT 4 CLOSED

@Carbowix could you open a PR which provides a fix? I honestly don't have any setup in place to handle RTL views . I honestly think that this might be needed on multiple places? Otherwise if its only the right prop that fix could be easily handled via a prop at this component

from tamagui-kitchen-sink.

@dohomi doesn't really need a special setup, tamagui is already perfectly aligning the elements according to the direction and I only just use the direction={languageDirection} on stacks and input fields. i18n already provides a function to detect the language's favored direction which makes it easy to manage over the whole user interface.
I did a small test with your repo and it works alright I guess, but I'm not sure if there are any other edits needed, because I barely have enough knowledge to traverse mono-repos already.

Here's a small glimpse of the edits:
It should be enough to fix the icon positioning. I'll be happy to PR it if the edits are fine.

// features/playground.tsx
// Just a test and to showcase the rtl
 <LmInputRhf direction='rtl' isPassword={true} name={'textfield'} label={'Textfield'} />

// form/src/LmInput.tsx
// Added the direction property
export function LmInput({
 direction,
 required,
 ....,
 })
 
 let isRTL = direction == 'rtl'
 // Further into the jsx elements
 <Input
           direction={direction}
           {...currentInputProps}
           secureTextEntry={!show}
           autoCapitalize="none"
           placeholderTextColor={rest.placeholderTextColor as InputProps['placeholderTextColor']}
         />
         <Pressable
           style={{
             position: 'absolute',
             top: '50%',
             transform: [{ translateY: -0.5 * 20 }],
             height: 20,
             [isRTL ? 'left' : 'right']: 15
           }}
           onPress={() => {
             setShow((state) => !state)
           }}
         >
          {show ? (
             <EyeSlashRegular {...passwordIconProps} />
           ) : (
             <EyeRegular {...passwordIconProps} />
           )}
         </Pressable>

from tamagui-kitchen-sink.

@Carbowix I followed your example and added the changes in the new release. I append an example to Storybook:
https://tamagui-extras.vercel.app/?path=/story/form-input--password-right-to-left

from tamagui-kitchen-sink.

Thank you. I'll update and report if any issues appear in the future.

from tamagui-kitchen-sink.