0

I made screen with 3 input fields and button under them. After filling the inputs user have to click this button, but... When user click on one of inputs, keyboard appears and pushes button and compress inputs so that they as narrow that user can't determine letters there. So, what I need to do for avoiding such behavior? How I do such that button don't push up, but just stay behind keyboard and input fields aren't compressed? Here is some code snippet if it is useful:

<Container>
      <BottomLayout style={{ paddingHorizontal: 16, paddingTop: 35 }}>
        <FormContainer android={Platform.OS !== 'ios'}>
          <InputWrapper>
            <Controller
              render={({ onChange, onBlur, value }) => (
                <Input/>
              )}
              rules={{ required: true }}
            />
          </InputWrapper>
          <InputErrorField error={errors.lastName?.message} />
          <InputWrapper>
            <Controller
              render={({ onChange, onBlur, value }) => (
                <Input/>
              )}
              rules={{ required: true }}
            />
          </InputWrapper>

          <InputErrorField error={errors.date?.message} />
          <InputWrapper>
            <Controller
              render={({ onChange, onBlur, value }) => (
                <Input/>
              )}
              rules={{ required: true }}
            />
          </InputWrapper>
          <InputWrapper>
            <Controller
              render={({ onChange, onBlur, value }) => (
                <Input/>
              )}
              rules={{ required: true }}
            />
          </InputWrapper>
        </FormContainer>
        <ButtonWrapper>
          <Button title='Save' onPress={handleSubmit(onSubmit)} />
        </ButtonWrapper>
      </BottomLayout>
    </Container>

Such behavior on android only, on ios everything works fine.

xCTAPx
  • 119
  • 2
  • 10

0 Answers0