CODEWITHSUNDEEP
reactjsreact-nativereact-native-iosreact-native-flatlist
Belgin Android
Belgin Android

Reputation: 307

Problem Using KeyBoard avoiding view in Overlay

Can Any One Help Me with This Problem Actually I Am New To React Native I have tried a couple of ways to overcome this problem but nothing worked out please help me with this I don't want the keyboard to interfere with the overlay

enter image description here enter image description here 

            <View style={{height:"9%"}}>

                <Button title="Add A New ToDO" onPress={this.onPressOpenOverLay}  buttonStyle={{height:"100%",borderBottomLeftRadius:30,borderBottomRightRadius:30}}/>

                <Overlay isVisible={this.state.setVisible} 
                onBackdropPress={this.onPressCloseOverLay} 
                animationType="fade" 
                overlayStyle={{height:"70%",width:"90%",borderRadius:20,alignItems:"center",paddingTop:"15%"}}>

                        <Text style={{fontSize:19,color:"#0288D1",fontWeight:"bold"}}>Add A New ToDo</Text>

                        <TextInput style={styles.input} 
                            placeholder="Email ID"
                            autoCapitalize="none" 
                            underlineColorAndroid="transparent"
                            onChangeText={email => this.setState({ email })}
                            value={this.state.email}
                            >

                        </TextInput>

                </Overlay>


            </View>

            <FlatList

                style={{marginTop:"2%"}}
                data={this.state.data}
                renderItem={this._renderMyList}
               keyExtractor={(item, index) => index.toString()}
               bounces={true}

            />

            </SafeAreaView>
    )
}

}

Upvotes: 0

Views: 322

Answers (1)

Al Ped
Al Ped

Reputation: 197

If you set your width or height with percentage, then it is prone to change when some changes in UI layout like a keyboard appearing happens. so you need to give them pixel values. Moreover, you could use the import {Dimension} from 'react-native' to give you the width and height of the device and then calculate the percentage of those values and give them to your view.

Upvotes: 1

Related Questions