Skip to content

Instantly share code, notes, and snippets.

@mostlygeek

mostlygeek/demo.tsx

Created June 11, 2025 00:25
Show Gist options
  • Save mostlygeek/82c08218c659a9b24543e4654f47e119 to your computer and use it in GitHub Desktop.
Save mostlygeek/82c08218c659a9b24543e4654f47e119 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. mostlygeek created this gist Jun 11, 2025.
    46 changes: 46 additions & 0 deletions demo.tsx
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,46 @@
    import { KeyboardAvoidingView, TextInput, StyleSheet, View } from "react-native";
    import Animated, { useAnimatedKeyboard, useAnimatedStyle } from "react-native-reanimated";
    import { Text } from "@/themes";
    import { useState } from "react";

    export default function Screen() {
    const [content, setContent] = useState(() => {
    return Array.from({ length: 100 }, (_, i) => `Line ${i + 1}`).join("\n");
    });
    const keyboard = useAnimatedKeyboard();
    const scrollViewStyle = useAnimatedStyle(() => ({
    flex: 1,
    marginBottom: keyboard.height.value,
    }));

    return (
    <KeyboardAvoidingView style={{ flex: 1 }}>
    <View style={{ height: 50, borderWidth: 1, borderColor: "white" }}>
    <Text>Hi</Text>
    </View>
    <Animated.ScrollView style={scrollViewStyle} automaticallyAdjustKeyboardInsets={false}>
    <TextInput
    style={styles.textInput}
    placeholder="Enter extremely long text"
    placeholderTextColor="grey"
    multiline
    scrollEnabled={false}
    value={content}
    onChangeText={setContent}
    />
    </Animated.ScrollView>
    </KeyboardAvoidingView>
    );
    }

    const styles = StyleSheet.create({
    textInput: {
    width: "100%",
    height: "auto",
    borderColor: "white",
    borderWidth: 1,
    borderRadius: 3,
    padding: 12,
    backgroundColor: "white",
    },
    });