I don't want the keyboard to push the view up when typing. There's enough space for the keyboard to not push the overlay but it's still doing it. I've tried using keyboardavoidingview positioning and padding in and outside of the overlay but no luck.

  render() {
    return (
        <Overlay
          isVisible={this.state.isVisible}
          width="auto"
          height="auto"
          overlayStyle={{ width: "90%", height: "50%", marginBottom: "70%" }}
        >
          <View>
            <Text>Schedule</Text>
            <TextInput
              label="Event"
              style={{ width: "95%", margin: "3%" }}
              theme={{ colors: { primary: Themes.primaryTheme } }}
            />
            <TextInput
              label="Date & Time"
              style={{ width: "95%", margin: "3%" }}
              theme={{ colors: { primary: Themes.primaryTheme } }}
            />
            <TextInput
              label="Location"
              style={{ width: "95%", margin: "3%" }}
              theme={{ colors: { primary: Themes.primaryTheme } }}
            />
            <View style={{ flexDirection: "row" }}>
              <Button
                mode="text"
                style={{ width: "40%", margin: "3%" }}
                onPress={() => this.setState({ isVisible: false })}
              >
                Cancel
              </Button>
              <Button
                mode="contained"
                style={{ width: "40%", margin: "3%" }}
                onPress={() => this.setState({ isVisible: false })}
              >
                Create
              </Button>
            </View>
          </View>
        </Overlay>
    );
  }

I don't want the keyboard to push the view up when typing. There's enough space for the keyboard to not push the overlay but it's still doing it. I've tried using keyboardavoidingview positioning and padding in and outside of the overlay but no luck.

  render() {
    return (
        <Overlay
          isVisible={this.state.isVisible}
          width="auto"
          height="auto"
          overlayStyle={{ width: "90%", height: "50%", marginBottom: "70%" }}
        >
          <View>
            <Text>Schedule</Text>
            <TextInput
              label="Event"
              style={{ width: "95%", margin: "3%" }}
              theme={{ colors: { primary: Themes.primaryTheme } }}
            />
            <TextInput
              label="Date & Time"
              style={{ width: "95%", margin: "3%" }}
              theme={{ colors: { primary: Themes.primaryTheme } }}
            />
            <TextInput
              label="Location"
              style={{ width: "95%", margin: "3%" }}
              theme={{ colors: { primary: Themes.primaryTheme } }}
            />
            <View style={{ flexDirection: "row" }}>
              <Button
                mode="text"
                style={{ width: "40%", margin: "3%" }}
                onPress={() => this.setState({ isVisible: false })}
              >
                Cancel
              </Button>
              <Button
                mode="contained"
                style={{ width: "40%", margin: "3%" }}
                onPress={() => this.setState({ isVisible: false })}
              >
                Create
              </Button>
            </View>
          </View>
        </Overlay>
    );
  }

• javascript
• react-native
• react-native-elements

• 1 There is weird behaviour of keyboardavoidingview in android, you can create a custom keyboardavoidingview and use a simple View for android. – Pooya Haratian Commented Dec 1, 2019 at 4:53
• @PooyaHaratian How would I do that? Would it be more of a hassle? – Wes Commented Dec 1, 2019 at 4:56
• Yeah, I always have some trouble with keyboard stuff. I'm not sure if Overlay uses KeyboardAvoidingView inside or not (if it has I guess you should forget about it). If not, you can try check device os, and use KeyboardAvoiding for ios, and use View for android. or just try to find a proper behavior for each of them. The main problem is that they don't work similar in each os. – Pooya Haratian Commented Dec 1, 2019 at 5:03

2 Answers 2

My solution to this problem :

import React , {Component} from 'react';
import {View , Dimensions,ScrollView} from 'react-native';

const windowHeight = Dimensions.get('window').height;

export default class Items extends Component {
    render(){
        return(
            <View  style={{flex:1}}>
                <ScrollView style={{flex:1}}>
                    <View style={{width:'100%', height:windowHeight }}>
                       /*Every thing inside this will shift up with out changing style */
                    </View>
                </ScrollView>
            </View>
        )
    }
}

import {KeyboardAvoidingView} from 'react-native'

<KeyboardAvoidingView style={styles.container} 
behavior={Platform.OS == "ios" ? "padding" : "height"} enabled={false}>

use it at the top of you render();

add prop enable={false} to it;

and behavior like so;