question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

KeyboardAvoidingView not working with Overlay?

See original GitHub issue

Does anyone have issues with KeyboardAvoidingView not working with Overlay? The keyboard still passes over the overlay.

However, it seems like it works with the out of box Modal from React Native

I have a simple Overlay, with KeyboardAvoiding View like this

    <Overlay
        animationType="fade"
        transparent={true}
        isVisible={props.isDialogVisible}
        overlayStyle={{height:overlayHeight, width:wp('80%')}}
      	onBackdropPress={() => props.hideDialog()
      	}}>
            <KeyboardAvoidingView
                  behavior="padding"
                  enabled
                  style={{ flex: 1 }}
              >
                  <SafeAreaView style={{  flex: 1}}>
                      <TouchableWithoutFeedback onPress={Keyboard.dismiss}>

                      <View style={{ padding: 24,
                          flex: 1,
                          justifyContent: "flex-end"}}>

                          ..... (input code)
                      </View>
                   </TouchableWithoutFeedback>
                  </SafeAreaView>
              </KeyboardAvoidingView>
      </Overlay>

Issue Analytics

  • State:open
  • Created 3 years ago
  • Comments:9

github_iconTop GitHub Comments

1reaction
maduraherath8commented, Oct 28, 2021

@amifunny seems like this will not work on ios. an overlay will not move up with the keyboard.

0reactions
ttanimichicommented, Nov 12, 2022

This feature doesn’t work on iOS

Read more comments on GitHub >

github_iconTop Results From Across the Web

react native - KeyboardAvoidingView not working with overlay
Here is the solution to solve this problem. you can add your code. import React , {Component} from 'react'; import {View , Dimensions ......
Read more >
KeyboardAvoidingView not working with overlay-React Native
[Solved]-KeyboardAvoidingView not working with overlay-React Native. Search. score:0. import React , {Component} from 'react'; import {View , Dimensions ...
Read more >
KeyboardAvoidingView - React Native
KeyboardAvoidingView. This component will automatically adjust its height, position, or bottom padding based on the keyboard height to ...
Read more >
Developers - KeyboardAvoidingView not working with Overlay? -
Does anyone have issues with KeyboardAvoidingView not working with Overlay? The keyboard still passes over the overlay. However, it seems like it works...
Read more >
KeyboardAvoidingView - NativeBase
KeyboardAvoidingView. Provides a view that moves out of the way of virtual keyboard automatically. It solves the common problem of views needing to...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found