isPassword pressable doesn't support RTL view

[Youssef Elmarakshy]

Hello, I've been using tamagui-extras and it has been a flawless experience but one issue that caught my eye is that when using localization that requires RTL view, the password pressable that views the password doesn't switch its place due to hardcoded direction. Would be neat if you do a little variable that respects the localization direction.

Small preview of whats happening:

[Dominic Garms]

@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

[Youssef Elmarakshy]

@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>

[Dominic Garms]

@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

[Youssef Elmarakshy]

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