[v4] Modal Not avoiding keyboard about react-native-bottom-sheet

[github-actions]

@amorimcode: hello! 👋

This issue is being automatically closed because it does not follow the issue template.

[Desintegrator]

@amorimcode have you found solution?

[amorimcode]

Yes @Desintegrator

you should use the library input on bottom sheet

https://ui.gorhom.dev/components/bottom-sheet/components/bottomsheettextinput/

i did some working arround with react-native-paper input

import { BottomSheetTextInput } from "@gorhom/bottom-sheet";
import { useState } from "react";
import { TextInputProps, TextStyle } from "react-native";
import { TextInput } from "react-native-paper";

import { Input } from "./styles";

import Theme from "@/src/styles/theme";

interface CustomInputProps extends TextInputProps {
  label?: string;
  mode?: "outlined" | "flat";
  style?: TextStyle;
  disabled?: boolean;
  error?: boolean;
  autoCapitalize?: "none" | "sentences" | "words" | "characters";
  numberOfLines?: number;
  keyboardType?:
    | "default"
    | "number-pad"
    | "decimal-pad"
    | "numeric"
    | "email-address"
    | "phone-pad";
  type?: "text" | "password";
  onModal?: boolean;
}

const AdvancedInput = (props: CustomInputProps) => {
  const [hidePassword, setHidePassword] = useState(true);

  return (
    <Input
      {...(props as any)}
      numberOfLines={props.numberOfLines}
      disabled={props.disabled}
      label={props.label}
      mode={props.mode ?? "outlined"}
      style={{
        backgroundColor: props.disabled ? Theme.colors.grayLightest : "white",
        ...props.style,
      }}
      error={props.error}
      autoCapitalize={props.autoCapitalize ?? "none"}
      keyboardType={props.keyboardType ?? "default"}
      render={
        props.onModal
          ? (innerProps) => <BottomSheetTextInput {...(innerProps as any)} />
          : undefined
      }
      secureTextEntry={props.type === "password" && hidePassword}
      right={
        props.type === "password" ? (
          <TextInput.Icon
            icon={!hidePassword ? "eye-off" : "eye"}
            onPress={() => setHidePassword(!hidePassword)}
          />
        ) : undefined
      }
    />
  );
};

export default AdvancedInput;