New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

How to solve two inputs + multiline to scroll together #312

Open
durdevic opened this Issue Sep 14, 2018 · 6 comments

Comments

Projects
None yet
4 participants
@durdevic
Copy link

durdevic commented Sep 14, 2018

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

This comment has been minimized.

Copy link

mitevdev commented Oct 1, 2018

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

@durdevic

This comment has been minimized.

Copy link

durdevic commented Oct 1, 2018

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

This comment has been minimized.

Copy link

mitevdev commented Oct 2, 2018

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

This comment has been minimized.

Copy link

antoinerousseau commented Dec 13, 2018

Hello, any update on this?

@arrygoo

This comment has been minimized.

Copy link

arrygoo commented Dec 16, 2018

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

This comment has been minimized.

Copy link

arrygoo commented Dec 30, 2018

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

Opened an issue about it:
baijunjie/react-native-input-scroll-view#45

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment