Menu height problem in ios

[mihaidaviddev]

I needed an autocomplete component for the project I'm working on, so I decided to use the Menu component to built this component. Later I found the status bar height bug #970 and decided to create PaperMenu component forked from Menu with a small fix (using a default height of 40)

TextInputAutocomplete.tsx

import React, { Component } from "react";
import { Keyboard, ScrollView } from "react-native";
import { Menu, TextInput, Theme } from "react-native-paper";
import PaperMenu from "./PaperMenu";

export interface TextInputAutocompleteProps {
  width: number;
  items: string[];
  value: string;
  theme: Theme;
  label: string;
  onChange: (value: string) => void;
}

interface TextInputAutocompleteState {
  filteredItems: string[];
  value: string;
  showMenu: boolean;
}

export default class TextInputAutocomplete extends Component<
  TextInputAutocompleteProps,
  TextInputAutocompleteState
> {
  state = {
    filteredItems: [] as string[],
    value: "",
    showMenu: false
  };
  componentDidMount = () => this.updateStateFromProps(this.props);

  componentWillReceiveProps = (props: TextInputAutocompleteProps) =>
    this.updateStateFromProps(props);

  updateStateFromProps = (props: TextInputAutocompleteProps) =>
    this.setState({ value: props.value });

  filterItems = value => {
    const filteredItems =
      value.trim() !== ""
        ? this.props.items.filter(
            item =>
              item !== value &&
              item.toUpperCase().startsWith(value.toUpperCase())
          )
        : [];
    const showMenu = filteredItems.length > 0;
    this.setState({
      showMenu,
      filteredItems
    });
  };

  onTextInputFocus = () => this.filterItems(this.state.value);

  onTextInputBlur = () => this.setState({ showMenu: false });

  onMenuDismiss = () => {
    this.setState({ showMenu: false });
    Keyboard.dismiss();
  };

  onItemPress = (item: string) => {
    this.onMenuDismiss();
    this.setState({ value: item });
    this.props.onChange(item);
  };

  onTextInputChange = value => {
    this.setState({ value });
    this.filterItems(value);
  };

  render() {
    const menuItems = this.state.filteredItems.map((item, i) => {
      const onPress = () => this.onItemPress(item);
      return (
        <Menu.Item
          style={{ minWidth: this.props.width, maxWidth: this.props.width }}
          onPress={onPress}
          key={i}
          title={item}
        />
      );
    });
    return (
      <PaperMenu
        style={{ marginTop: 50, width: this.props.width }}
        visible={this.state.showMenu}
        onDismiss={this.onMenuDismiss}
        anchor={
          <TextInput
            label={this.props.label}
            mode="outlined"
            theme={this.props.theme}
            value={this.state.value}
            onChangeText={this.onTextInputChange}
            onFocus={this.onTextInputFocus}
            onBlur={this.onTextInputBlur}
          />
        }
      >
        <ScrollView
          scrollEnabled={true}
          showsVerticalScrollIndicator={true}
          keyboardShouldPersistTaps="always"
          style={{ height: 135 }}
        >
          {menuItems}
        </ScrollView>
      </PaperMenu>
    );
  }
}

It was working fine in android simulator/device, but in ios it was working only in simulator. When I tested the build on device, the height was messed up. I thought it was possible to be a ScrollView bug so I decided to wrap the ScrollView in a View.

Tested again on device and sometimes it was working, sometimes it wasn't. Then I removed the animation from the menu component and now everything is working fine.

Any ideea what might be causing this problem ?
Is this a bug related to Animated.View ?

[ferrannp]

Should be fixed on 2.15.2.