InputAccessoryView doesn't update its height when multiline TextInput grows in height

[davidpaulsson]

I'm using an InputAccessoryView to create a sticky TextInput. When using a growing multiline TextInput, the TextInput's height increases and grown down behind the keyboard.

Environment

Environment:
OS: macOS High Sierra 10.13.4
Node: 9.11.1
Yarn: 1.5.1
npm: 5.6.0
Watchman: 4.9.0
Xcode: Xcode 9.3 Build version 9E145
Android Studio: 3.0 AI-171.4443003

Packages: (wanted => installed)
react: 16.3.1 => 16.3.1
react-native: 0.55.2 => 0.55.2

Steps to Reproduce

Add multiline to a TextInput wrapped inside an InputAccessoryView.

Expected Behavior

InputAccessoryView's bottom edge is always sticky to the keyboard top and does not grow behind the keyboard.

Actual Behavior

[Jarred-Sumner]

I'm able to reproduce as well.

Two more bugs with <InputAccessoryView />:

• <InputAccessoryView /> renders above the bottom area of the <YellowBox />, which can make it impossible to close due to the z index:

• Refreshing the JS in development (via -R) while a <TextInput /> is focused inside the <InputAccessoryView /> leaves the <TextInput /> focused even when its not rendered on the page anymore:
  

[pozdena]

Also having this issue. Hopefully there is some path to a fix or workaround soon.

[steverob]

@pozdena How did you manage to get <InputAccessoryView> to work? Are you using 0.55.4? Or are you on master?

Thanks!

[gastonmorixe]

I am willing to pay $100 for this issue to be solved within June. If someone does, submit PR and ping me.

Same for android support.

Thank you

[VladyslavVasylenko1996]

try react-native-keyboard-input

[pribeh]

I'll double @gastonmorixe's bounty.

[fexx]

For I got to work, you have to set a minHeight and maxHeight in the view that has it. With a fixed size, for me to solve.

[pribeh]

@fexx thanks for the suggestion but do you mean the inputaccessoryview or the view which contains the inputaccessoryview? Could you share your code?

[fexx]

@pribeh I include in the view that wraps the inputAcessoryView. Here is my code. See if it helps.

import React, { Component } from "react";
import { View, StyleSheet, Dimensions, TextInput, Button } from "react-native";
const InputAccessoryView = require('InputAccessoryView');
var { width, height } = Dimensions.get('window');

export default class Message extends Component {
constructor(props) {
super(props);
}

render() {

return (
  <View style={styles.container}>
    <InputAccessoryView>
      <View style={styles.textInputView}>
        <TextInput
          placeholder="Escreva um comentário..."
          underlineColorAndroid="transparent"
          style={styles.textInput}
          multiline={true} 
          numberOfLines={1}
          />
        <Button style={styles.textInputButton} title="Enviar" onPress={() => {}}/>
      </View> 
    </InputAccessoryView>
  </View>
);

}

}

const styles = StyleSheet.create({
container: {
flex: 1
},
textInputView: {
padding: 8,
minHeight: 70,
maxHeight: 90,
width: width,
flexDirection: 'row',
justifyContent: 'space-between',
alignItems: 'center',

backgroundColor: '#FFF',
borderColor: '#EEE',
shadowOpacity: 0.5,
shadowRadius: 5,
shadowColor: '#001e29',
shadowOffset: { height: 0, width: 0 }

},
textInput: {
flexGrow: 1,
borderWidth: 1,
borderRadius: 10,
borderColor: '#CCC',
padding: 10,
fontSize: 16,
marginRight: 10,
},
textInputButton: {
flexShrink: 1,
}
});

[pribeh]

@fexx I see what you are doing and thanks for sharing. This doesn't resolve the issue but is a work around if your design can accommodate this.

We still need a proper fix to this problem and I can't seem to figure out any possible way via styling or positioning to resolve this.

[fexx]

It really is not a solution, it's a temporary adaptation I could use for this project until I had the solution.

[sampettersson]

For reference #21179 seems to fix this issue, doesn't seem like it has landed in any release yet tho.

[stale]

Hey there, it looks like there has been no activity on this issue recently. Has the issue been fixed, or does it still require the community's attention? This issue may be closed if no further activity occurs. You may also label this issue as a "Discussion" or add it to the "Backlog" and I will leave it open. Thank you for your contributions.

[stale]

Hey there, it looks like there has been no activity on this issue recently. Has the issue been fixed, or does it still require the community's attention? This issue may be closed if no further activity occurs. You may also label this issue as a "Discussion" or add it to the "Backlog" and I will leave it open. Thank you for your contributions.

[stale]

Hey there, it looks like there has been no activity on this issue recently. Has the issue been fixed, or does it still require the community's attention? This issue may be closed if no further activity occurs. You may also label this issue as a "Discussion" or add it to the "Backlog" and I will leave it open. Thank you for your contributions.

[stale]

Hey there, it looks like there has been no activity on this issue recently. Has the issue been fixed, or does it still require the community's attention? This issue may be closed if no further activity occurs. You may also label this issue as a "Discussion" or add it to the "Backlog" and I will leave it open. Thank you for your contributions.

[stale]

Hey there, it looks like there has been no activity on this issue recently. Has the issue been fixed, or does it still require the community's attention? This issue may be closed if no further activity occurs. You may also label this issue as a "Discussion" or add it to the "Backlog" and I will leave it open. Thank you for your contributions.

[stale]

Hey there, it looks like there has been no activity on this issue recently. Has the issue been fixed, or does it still require the community's attention? This issue may be closed if no further activity occurs. You may also label this issue as a "Discussion" or add it to the "Backlog" and I will leave it open. Thank you for your contributions.

[github-actions]

This issue is stale because it has been open 180 days with no activity. Remove stale label or comment or this will be closed in 7 days.

[Ashoat]

I don't seem to have the ability to edit labels anymore, but this issue is not stale.

[github-actions]

This issue is stale because it has been open 180 days with no activity. Remove stale label or comment or this will be closed in 7 days.

[github-actions]

This issue was closed because it has been stalled for 7 days with no activity.

[markedwards]

This is listed as a known issue in the official docs (https://reactnative.dev/docs/inputaccessoryview). How can it possibly be stale?