React-native-keyboard-aware-scroll-view: How to solve two inputs + multiline to scroll together

[durdevic]

I want to create a medium like editor for text, the problem I have is when I write in the multiline TextInput and it goes behind keyboard (because too much height on it) mu so I need to scroll up every time.

Any solutions?

Thanks!

<View style={{ flex: 1 }}>
  <View style={{ flexDirection: "row" }}>
    <Text>close</Text>
    <View style={{ flex: 1 }} />
    <TouchableOpacity onPress={() => console.log("do sn")}>
      <Text>preview</Text>
    </TouchableOpacity>
  </View>
  <KeyboardAwareScrollView
    innerRef={ref => {
      this.scroll = ref;
    }}
  >
    <View style={{ flex: 1 }}>
      <TextInput
        style={{ padding: 10, borderColor: "gray", borderWidth: 1 }}
        editable={true}
        maxLength={40}
        onChangeText={text => this.setState({ text })}
        value={this.state.text}
        placeholder="de si"
      />

      <TextInput
        ref={ref => console.log("not")}
        style={{
          padding: 10,
          borderColor: "gray",
          borderWidth: 1,
          flex: 1
        }}
        editable={true}
        multiline
        // onChangeText={text => this.onChange(text)}
        value={this.state.text}
        placeholder="de si"
        onContentSizeChange={event =>
          this._scrollToInput(findNodeHandle(event.target))
        }
      />
    </View>
  </KeyboardAwareScrollView>
</View>;

[mitevdev]

multiline prop of TextInput with dynamic height is not well supported yet

[durdevic]

Hey, @Bobozee I found today this solution by @baijunjie and works really nice for me. Maybe you guys can collaborate to create even better solution 💪

https://github.com/baijunjie/react-native-input-scroll-view

[mitevdev]

Hey, @Bobozee I found today this solution by @baijunjie and works really nice for me. Maybe you guys can collaborate to create even better solution 💪

https://github.com/baijunjie/react-native-input-scroll-view

Good work!
@durdevic Thank you for the hint.

[antoinerousseau]

Hello, any update on this?

[arrygoo]

I tried the package mentioned above but not able to get it working at all either on iOS or Android :(. Also KeyboardAvoidingView doesn't work for multiline textinputs. Would be so sweet if react-native-keyboard-aware-scroll-view could address this.

[arrygoo]

I tried react-native-input-scroll-view, but for me it doesn't work on Android at all :(

Opened an issue about it:
https://github.com/baijunjie/react-native-input-scroll-view/issues/45

[Ahmed-Imam]

This worked for me perfectly both for ios and android, hope it will help u

 <ScrollView ref={component => { this.myScrollView = component; }}>
    <TextInput 
       multiline
  onBlur={() => this.scrollView.scrollTo({ x: 0, y: 0, animated: true })}
       onFocus={() => this.myScrollView.scrollTo({ x: 0, y: 200, animated: true })} // <- your coordinates here
    />
  </ScrollView>

[klaytaybai]

Try to set your multiline TextInput's scrollEnabled to false.

[socialcode-rob1]

credit to @klaytaybai

Something like this should work. Item to keep in mind, I needed to consider extraScrollHeight to make sure the input showed up in the ideal spot.

<KeyboardAwareScrollView
  extraScrollHeight={20}
>
      <TextInput
        multiline={true}
        scrollEnabled={false}
      />
  </KeyboardAwareScrollView>