Multiline TextInput is not aware of the keyboard expanding

[hallee9000]

The ScrollView automatically scrolls to the TextInput to prevent keyboard obstruction, but multiline TextInput doesn't respond to keyboard expansion.

Screen.Recording.2026-02-13.at.10.51.54.mov

Here is the code.

import Button from "@/components/common/Button";
import SubPageNavbar from "@/components/navbars/SubPage";
import { ThemedText } from "@/components/ThemedText";
import { Colors } from "@/constants/Colors";
import { useRef, useState } from "react";
import { SafeAreaView, StyleSheet, TextInput, View } from "react-native";
import ActionSheet,{ ActionSheetRef, ScrollView } from "react-native-actions-sheet";

function TestScreen() {
  const [name, setName] = useState('');
  const [description, setDescription] = useState('');
  const actionSheetRef = useRef<ActionSheetRef>(null);

  return (
    <SafeAreaView style={styles.container}>
      <SubPageNavbar
        title="test"
      />
      <View style={styles.content}>
        <Button title="Open action sheet" onPress={() => actionSheetRef.current?.show()} />
        <ActionSheet
          gestureEnabled
          ref={actionSheetRef}
          containerStyle={{ borderTopLeftRadius: 32, borderTopRightRadius: 32, backgroundColor: Colors.light.surfaceBase }}
          indicatorStyle={{ backgroundColor: Colors.light.textTertiary }}
        >
          <ScrollView showsVerticalScrollIndicator={false} alwaysBounceVertical>
            <View style={{ gap: 8, padding: 20 }}>
              <ThemedText type="title1" isEmphasized>Add new person</ThemedText>
              <ThemedText>Style the main container in the action sheet that wraps your content. Note: You can set most styles here except maxHeight, marginBottom and paddingBottom. These are used internally. You can do this instead:</ThemedText>
              <ThemedText>Style the main container in the action sheet that wraps your content. Note: You can set most styles here except maxHeight, marginBottom and paddingBottom. These are used internally. You can do this instead:</ThemedText>
              <ThemedText>Style the main container in the action sheet that wraps your content. Note: You can set most styles here except maxHeight, marginBottom and paddingBottom. These are used internally. You can do this instead:</ThemedText>
              <ThemedText>Style the main container in the action sheet that wraps your content. Note: You can set most styles here except maxHeight, marginBottom and paddingBottom. These are used internally. You can do this instead:</ThemedText>
              <TextInput placeholder="Name" value={name} onChangeText={setName} style={styles.input} />
              <TextInput placeholder="Description" value={description} onChangeText={setDescription} multiline style={styles.textarea} />
              <Button title="Close" onPress={() => actionSheetRef.current?.hide()} />
            </View>
          </ScrollView>
        </ActionSheet>
      </View>
    </SafeAreaView>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: Colors.light.surfaceBase,
  },
  content: {
    flex: 1,
    padding: 20,
  },
  input: {
    backgroundColor: Colors.light.fillRaised,
    borderRadius: 20,
    paddingHorizontal: 20,
    paddingVertical: 16,
    fontSize: 17,
  },
  textarea: {
    backgroundColor: Colors.light.fillRaised,
    borderRadius: 20,
    paddingHorizontal: 20,
    paddingVertical: 16,
    fontSize: 17,
    minHeight: 100,
  },
});

export default TestScreen;