CODEWITHSUNDEEP
javascriptreact-nativereact-native-elements
Wes
Wes

Reputation: 1945

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

Upvotes: 3

Views: 10631

Answers (2)

Naruto Uzumaki
Naruto Uzumaki

Reputation: 622

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;

Upvotes: 0

Ehsan Hejazi
Ehsan Hejazi

Reputation: 196

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

Upvotes: 4

Related Questions