Controlador de Teclado

// app/_layout.tsx - provider uma vez na raiz
import { Stack } from "expo-router";
import { KeyboardProvider } from "react-native-keyboard-controller";
 
export default function RootLayout() {
  return (
    <KeyboardProvider>
      <Stack />
    </KeyboardProvider>
  );
}

// app/contact.tsx - scroll + toolbar para um formulário curto
import { StyleSheet, TextInput, View } from "react-native";
import { KeyboardAwareScrollView, KeyboardToolbar } from "react-native-keyboard-controller";
 
export default function ContactScreen() {
  return (
    <>
      <KeyboardAwareScrollView
        bottomOffset={48}
        contentContainerStyle={styles.container}
        keyboardShouldPersistTaps="handled"
      >
        <TextInput placeholder="Nome" style={styles.input} />
        <TextInput placeholder="Email" keyboardType="email-address" style={styles.input} />
        <TextInput placeholder="Mensagem" multiline style={styles.multiline} />
      </KeyboardAwareScrollView>
      <KeyboardToolbar />
    </>
  );
}
 
const styles = StyleSheet.create({
  container: { padding: 16, gap: 12 },
  input: {
    borderWidth: 1,
    borderColor: "#d1d5db",
    borderRadius: 8,
    paddingHorizontal: 12,
    paddingVertical: 10,
    fontSize: 16,
  },
  multiline: { minHeight: 120, textAlignVertical: "top" },
});

// app/(auth)/sign-up.tsx - formulário ciente do teclado conectado ao react-hook-form
import { zodResolver } from "@hookform/resolvers/zod";
import { useForm } from "react-hook-form";
import { Pressable, StyleSheet, Text, View } from "react-native";
import {
  KeyboardAwareScrollView,
  KeyboardToolbar,
} from "react-native-keyboard-controller";
import { z } from "zod";
import { TextField } from "../../components/form/TextField";
 
const SignUpSchema = z
  .object({
    fullName: z.string().trim().min(1, "O nome é obrigatório"),
    email: z.string().email("Insira um email válido"),
    password: z.string().min(8, "Mínimo de 8 caracteres"),
  });
 
type SignUpValues = z.infer<typeof SignUpSchema>;
 
export default function SignUpScreen() {
  const {
    control,
    handleSubmit,
    setFocus,
    formState: { isSubmitting },
  } = useForm<SignUpValues>({
    resolver: zodResolver(SignUpSchema),
    defaultValues: { fullName: "", email: "", password: "" },
    mode: "onTouched",
  });
 
  async function onSubmit(values: SignUpValues) {
    await fetch("https://api.example.com/v1/sign-up", {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify(values),
    });
  }
 
  return (
    <>
      <KeyboardAwareScrollView
        bottomOffset={72}
        contentContainerStyle={styles.scroll}
        keyboardShouldPersistTaps="handled"
      >
        <Text style={styles.title}>Criar conta</Text>
 
        <TextField
          control={control}
          name="fullName"
          label="Nome completo"
          autoComplete="name"
          returnKeyType="next"
          onSubmitEditing={() => setFocus("email")}
        />
 
        <TextField
          control={control}
          name="email"
          label="Email"
          keyboardType="email-address"
          autoCapitalize="none"
          autoComplete="email"
          returnKeyType="next"
          onSubmitEditing={() => setFocus("password")}
        />
 
        <TextField
          control={control}
          name="password"
          label="Senha"
          secureTextEntry
          returnKeyType="done"
          onSubmitEditing={handleSubmit(onSubmit)}
        />
 
        <Pressable
          onPress={handleSubmit(onSubmit)}
          disabled={isSubmitting}
          style={styles.button}
        >
          <Text style={styles.buttonText}>{isSubmitting ? "Criando…" : "Cadastrar-se"}</Text>
        </Pressable>
      </KeyboardAwareScrollView>
 
      <KeyboardToolbar />
    </>
  );
}
 
const styles = StyleSheet.create({
  scroll: { padding: 16, gap: 16, paddingBottom: 32 },
  title: { fontSize: 22, fontWeight: "700" },
  button: {
    backgroundColor: "#2563eb",
    borderRadius: 8,
    paddingVertical: 12,
    alignItems: "center",
    marginTop: 8,
  },
  buttonText: { color: "#fff", fontWeight: "600" },
});

// app/chat.tsx - elevação sincronizada com frames para um composer acima de FlatList
import { FlatList, StyleSheet, TextInput, View } from "react-native";
import Animated, { useAnimatedStyle, useSharedValue } from "react-native-reanimated";
import { useKeyboardHandler } from "react-native-keyboard-controller";
import { MessageBubble } from "../../components/MessageBubble";
 
const messages = [{ id: "1", text: "Olá" }];
 
function useKeyboardSpacer() {
  const height = useSharedValue(0);
 
  useKeyboardHandler(
    {
      onMove: (event) => {
        "worklet";
        height.value = Math.max(event.height, 0);
      },
    },
    []
  );
 
  return height;
}
 
export default function ChatScreen() {
  const keyboardHeight = useKeyboardSpacer();
 
  const spacerStyle = useAnimatedStyle(() => ({
    height: keyboardHeight.value,
  }));
 
  return (
    <View style={styles.container}>
      <FlatList
        data={messages}
        keyExtractor={(item) => item.id}
        renderItem={({ item }) => <MessageBubble message={item} />}
        contentContainerStyle={styles.list}
        keyboardDismissMode="interactive"
      />
      <TextInput placeholder="Mensagem" style={styles.composer} />
      <Animated.View style={spacerStyle} />
    </View>
  );
}
 
const styles = StyleSheet.create({
  container: { flex: 1 },
  list: { padding: 16, gap: 8 },
  composer: {
    marginHorizontal: 16,
    marginBottom: 8,
    borderWidth: 1,
    borderColor: "#d1d5db",
    borderRadius: 20,
    paddingHorizontal: 16,
    paddingVertical: 10,
  },
});

npx expo install react-native-keyboard-controller react-native-reanimated

import { useSafeAreaInsets } from "react-native-safe-area-context";
 
const insets = useSafeAreaInsets();
const TOOLBAR_HEIGHT = 44;
 
<KeyboardAwareScrollView
  bottomOffset={insets.bottom + TOOLBAR_HEIGHT}
  ...
/>

export default {
  expo: {
    android: {
      softwareKeyboardLayoutMode: "pan",
    },
  },
};

import type { KeyboardAwareScrollViewProps } from "react-native-keyboard-controller";
 
type FormScrollProps = Pick<
  KeyboardAwareScrollViewProps,
  "bottomOffset" | "keyboardShouldPersistTaps"
>;
 
const formScrollDefaults: FormScrollProps = {
  bottomOffset: 48,
  keyboardShouldPersistTaps: "handled",
};