TextInput auto scroll to bottom in multiline in react native

Question

I have a TextInput component, and i want to make text visible when keyboard is on, by default, android will have this, but i don't know why the multiline TextInput just scroll down to the bottom of the text exact the same behavior of single line ( also the cursor at the lastest text)

Here is the code of it

<SafeAreaView style={{ margin: spacingWidth[3], flex: 1 }}>
      <View row centerV style={HEADER}>. //just set margin
        <TouchableOpacity onPress={() => nav.goBack()}>
          <BackArrow name="arrowleft" size={onePercentWidth * 6} />
        </TouchableOpacity>

        <TouchableOpacity
          onPress={() => {
            editAndSaveFirebase();
            nav.goBack();
            dispatch(switchReloadOn());
            dispatch(fetchNote(userInfo.email)).then(() =>
              dispatch(switchReloadOff())
            );
            // saveAndNavBack();
          }}
        >
          <Text style={SAVE_NOTE_BT}>Save</Text>
        </TouchableOpacity>
      </View>

      <TextInput
        onChangeText={(text) => setNoteHeader(text)}
        value={noteHeader}
        placeholder="Meaningful header"
        style={HEADER_INPUT}
      />

      <ScrollView 
        showsVerticalScrollIndicator={false}
        style={{
          flex: 1,
        }}
        contentContainerStyle={{
          flexGrow: 1,
        }}
      >  ====> the problem here
        <TextInput
          scrollEnabled={false}
          textAlignVertical={Platform.OS === "android" ? "top" : ""}
          onChangeText={(text) => setNoteEdit(text)}
          placeholder="Type your secret here..."
          value={noteEdit}
          multiline
          style={NOTE_INPUT}. // i just set the fontSize
        />
      </ScrollView>
    </SafeAreaView>
  );

Here is the behavior i talked about

https://stackoverflow.com/questions/29685421/hide-keyboard-in-react-native?rq=1 — Dobromir Kirov, Jan 20 '22 at 12:29
@DobromirKirov sadly it not my intent, i mean, i want the cursor blink at the text i click not, not mean hide the keyboard — normalDev, Jan 20 '22 at 12:47

score 0 · Answer 1 · answered Dec 27 '22 at 10:39

You should set scrollEnabled: false only for iOS. If you still don't reach the expected behaviour, you can pass ref to the scrollView and scrollToEnd on TextInput focus.

const scrollViewRef = useRef<ScrollView>(null)

const handleInputFocus = () => {
    if (isAndroid) {
      setTimeout(() => scrollViewRef.current?.scrollToEnd({ animated: true }), 200)
    }
  }

<ScrollView ref={scrollViewRef}>
  <TextInput
    {...otherInputProps}
    onFocus={handleInputFocus}
    scrollEnabled={isAndroid}
  />
</ScrollView>

TextInput auto scroll to bottom in multiline in react native

1 Answers1