Keyboard covers input text (one long vertical input), text also runs off the screen without actively being scrolled to (react native)

Question

It's been 7 hours, I've read all the docs and similar SO questions, so any help would be appreciated.

My goal: have an app screen where the top 1/3 of the screen is made up of custom components (not the problem), and then the bottom 2/3 of the screen is a giant full-width super-long scrollable textfield for the user to enter several paragraphs (the problem)

The problem: Either the on-screen keyboard covers the text from the textfield, the textfield isn't scrollable, or when typing and you go off the bottom of the screen you aren't scrolled along with what you're typing - or a mix of all the 3.

Here is a rough image of what I desire:

Currently, my code looks like this:

export default function Post() {

    const [text, setText] = useState("");
    return (

        <TouchableWithoutFeedback onPress={Keyboard.dismiss}>
        <SafeAreaView >
        <KeyboardAvoidingView enabled behavior='height' keyboardVerticalOffset={40} >

                <View>
                    <TextInput scrollEnabled={true} placeholderTextColor={LIGHT} maxLength={300000} placeholder="enter text" multiline={true} onChangeText={(newVal) => setText(prev => {prev + newVal})} value={text}/>
                </View>
           
        </KeyboardAvoidingView>

        </SafeAreaView>
        </TouchableWithoutFeedback>

    );
}

const styles = StyleSheet.create({
    container: {
      flex: 1,
      backgroundColor: WHITE,
      alignItems: 'center',
      justifyContent: 'flex-center',
      alignItems: "center",
      marginHorizontal: 15,
    //   height: "100%",
    },
    textfield: {
        textAlign: "left",
        textAlignVertical: "top",
        backgroundColor: "lavender",
        height: "100%",
        flex: 1,
    },
    scroll: {
        // width: "100%"
    }
});

Answer 1

Couple of issues with your approach and code in general.

textfield isn't scrollable

Placing anything scrollable inside a touchable is really weird and rarely behaves as you expect it, so avoid if possible, or if you really need it then pass a onStartShouldSetResponder={() => true} to your inner scroll view. But in your case, I suspect you don't actually want the keyboard to close if the user clicks inside the textInput, do you? He probably wants to add a word to a previous sentence or fix a type. Instead I suggest catching the touch outside of the textInput only, eg in your top third. Something like this (scrabble snack) should work:

import React, { useState } from 'react';
import { Text, View, StyleSheet, Touchable, TouchableWithoutFeedback, SafeAreaView, KeyboardAvoidingView, TextInput, Keyboard } from 'react-native';

export default function App() {
    const [text, setText] = useState("");
    return (
      <KeyboardAvoidingView style={{flex: 1, marginTop: 45}} behavior="padding">
          <View style={styles.upperContainer} onTouchStart={Keyboard.dismiss}>
            <Text>My content in top third </Text>
          </View>
          <View style={styles.lowerContainer}>
            <TextInput 
              scrollEnabled={true} 
              placeholderTextColor={"lightgrey"} 
              maxLength={300000} 
              placeholder="enter text" 
              multiline={true} 
              onChangeText={(newVal) => setText(prev => {prev + newVal})} 
              value={text}
            />
          </View>
      </KeyboardAvoidingView>
    );
}

const styles = StyleSheet.create({
  upperContainer: {
    flex: 1, 
    borderWidth: 2, 
    borderColor: "grey", 
    alignItems: "center", 
    justifyContent: "center"
  },
  lowerContainer: {
    flex: 2, 
    borderColor: "black", 
    borderWidth: 2, 
    padding: 10
  }
})

Notice how I pass flex 1 and 2 to the two child views to style them how you required it. The border is just added for better visibility.