Search code examples
javascriptreact-nativereact-native-elements

How do I prevent keyboard from pushing overlay view up?


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>
    );
  }


Solution

  • 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>
            )
        }
    }