Clarification on behaviour of `fullWidth`

[Arkar Kyaw Aung]

Hi,

I’m trying out Forms with react-hook-forms and I would like the clarify the behaviour of fullWdith property in LmInputRhf.

Currently, I wish to stretch the input form to the end of the screen. Using the fullWidth prop causes the input to actually overflow the screen. This is not just for iPhone simulator screens, but also for larger devices like iPad. Screenshot attached below:

I am currently following one of the snippets With Tamagui Form 2.

I have tried adding YStack with padding but the issue still persists. Code snippet for the above screenshot:

import React from 'react';
import { Stack, XStack, Paragraph, Form, YStack } from 'tamagui';
import { LmInputRhf } from '@tamagui-extras/form';
import { LmAlert, LmButton } from '@tamagui-extras/core';
import { useForm } from 'react-hook-form';

export default function TripForm(): React.JSX.Element {
  const { control, handleSubmit, reset } = useForm({
    defaultValues: {
      name: '',
      email: undefined,
      password: undefined,
    },
  });
  return (
    <YStack fullscreen padding="$4">
      <Form
        gap={'$3'}
        onSubmit={handleSubmit((data) => {
          console.log(data);
        })}
      >
        <LmAlert
          severity={'info'}
          outlined
          text='You can use `useForm` directly from "react-hook-form"'
        ></LmAlert>
        <LmInputRhf
          name={'name'}
          control={control}
          label={'Name'}
          placeholder={'Type your name...'}
          labelInline
          required
          fullWidth
        />
        <LmInputRhf
          name={'email'}
          control={control}
          label={'Name'}
          placeholder={'Type your email...'}
          labelInline
        />
        <LmInputRhf
          name={'password'}
          control={control}
          label={'Password'}
          isPassword
          placeholder={'Your password...'}
          labelInline
        />

        <XStack gap={'$3'}>
          <LmButton onPress={() => reset()}>Reset</LmButton>
          <Form.Trigger asChild>
            <LmButton colorVariant={'primary'}>Submit</LmButton>
          </Form.Trigger>
        </XStack>
      </Form>
    </YStack>
  );
}

Thanks!

[Egor]

Hi, I faced with the same issue. Please let us know if we do something wrong.

Thanks.

[Dominic Garms]

If this overflow happens, this means that the outer wrapping component might miss a flexGrow:1 or width:100% property to limit the total visible width