InputAccessoryView renders on top of YellowBox warnings

[davidpaulsson]

When using InputAccessoryView to create a sticky input, it renders on top and covers the "dismiss" and other options, making it impossible to close.

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

Create a sticky keyboard input with InputAccessoryView, get a warning.

Expected Behavior

Yellowbox warning options (minimize, dismiss & dismiss all) should be reachable.

Actual Behavior

Here's a video (Dropbox, 4.9 MB)

[tapz]

If the navigation bar background is set to transparent, the yellowbox appears below the bar and is not clickable. One should be able to set the location or margin for the box to prevent this. Also, yellowbox does not respect iPhone X safe areas.

[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 "For Discussion" or "Good first issue" and I will leave it open. Thank you for your contributions.

[stale]

Closing this issue after a prolonged period of inactivity. If this issue is still present in the latest release, please feel free to create a new issue with up-to-date information.

[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 "For Discussion" or "Good first issue" and I will leave it open. Thank you for your contributions.

[orta]

Confirmed, still exists.

I used this in a new RN app:

import * as React from 'react';
import { Text, View, StyleSheet, InputAccessoryView, ScrollView, TextInput, Button } from 'react-native';

 class UselessTextInput extends React.Component {
  constructor(props) {
    super(props);
    this.state = {text: 'Placeholder Text'};
  }

  render() {
    const inputAccessoryViewID = "uniqueID";
    return (
      <View>
        <ScrollView keyboardDismissMode="interactive">
          <TextInput
            style={{
              padding: 10,
              paddingTop: 50,
            }}
            inputAccessoryViewID={inputAccessoryViewID}
            onChangeText={text => this.setState({text})}
            value={this.state.text}
          />
        </ScrollView>
        <InputAccessoryView nativeID={inputAccessoryViewID}>
          <View style={{height: 30, backgroundColor: "red"}}>
            <Button onPress={() => console.warn("OK")} title="Reset Text"
          />
          </View>
        </InputAccessoryView>
      </View>
    );
  }
}

export default class App extends React.Component {
  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.paragraph}>
          Change code in the editor and watch it change on your phone! Save to get a shareable url.
        </Text>
        <View>
          <UselessTextInput />
        </View>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    paddingTop: 20,
    backgroundColor: '#ecf0f1',
    padding: 8,
  },
  paragraph: {
    margin: 24,
    fontSize: 18,
    fontWeight: 'bold',
    textAlign: 'center',
  },
});

Looks like:

[davidleee]

And it also renders on top of any views wrapped within a <Modal>, any way to avoid this behavior?

[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]

Closing this issue after a prolonged period of inactivity. If this issue is still present in the latest release, please feel free to create a new issue with up-to-date information.