Как остановить взаимодействие React-Native FlatList с другими компонентами

У меня есть простое приложение React-Native, которое использует FlatList с Redux. Проблема в том, что когда список становится длинным и достигает нижней части экрана, где существуют элементы ввода, он нарушает эти элементы ввода, даже если они находятся в другом компоненте и контейнере. Я испробовал миллион исправлений для этого, но, похоже, ничего не работает.

Как я могу сделать что-то вроде того, чтобы FlatList занимал только 2/3 экрана?

Это снимок экрана проблемы (когда элементы достигают полей ввода, поля ввода сжимаются и разрушаются):

Это файл приложения, который содержит все мои компоненты:

export default class App extends Component {
  render() {
    return (
  <Provider store={createStore(reducers)}>
    <View style={{ flex: 1 }}>
        <ItemsList />
        <AddItem />
    </View>
  </Provider>
    );
  }
}

Это компонент, который использует FlatList:

class ItemsList extends Component {

    render() {
        return (
            <List>
                <FlatList
                    data={this.props.items} 
                    renderItem={({ item }) => (
                        <ListItem 
                            name={item.item} id={item.id}
                        />
                    )}
                    keyExtractor={item => item.id.toString() }
                />
            </List>
          );

        }
    }

  const mapStateToProps = state => {
    return { items:  state.items };
  };


export default connect(mapStateToProps)(ItemsList);

Код для addItem:

class AddItem extends Component {

    state = {
        item: "",
        quantity: ""
    }

    onButtonPress() {
        this.props.addItem(this.state)
        this.setState({
            item: "",
            quantity: 0
        })
    }

    render() {

    const { input, container, add, addText } = styles;
        return (
            <View style={container}>
                <TextInput placeholder="add item" 
                    placeholderTextColor="rgba(0, 0, 0, 0.5)" 
                    style={input} 
                    onChangeText={item => this.setState({ item })}
                    value={this.state.item}
                />
                <TextInput placeholder="add item" 
                    placeholderTextColor="rgba(0, 0, 0, 0.5)" 
                    style={input} 
                    onChangeText={quantity => this.setState({ quantity })}
                />
                <TouchableOpacity style={add} onPress={this.onButtonPress.bind(this)}>
                    <Text style={addText}>Add Item</Text>
                </TouchableOpacity>
            </View>
        );
    }
}

export default connect(null, {addItem})(AddItem);

const styles = {
    input: {
        backgroundColor: 'rgb(208, 240, 238)',
        paddingVertical: 15,
        paddingHorizontal: 10,
        marginBottom: 5
        },
    add: {
        backgroundColor: 'black',
        paddingVertical: 15,
    },
    addText: {
        textAlign: 'center',
        color: 'white'
    },
    container: {
        padding: 20,
        flex: 1,
        justifyContent: 'flex-end'
    }
  };