wix / react-native-ui-lib

UI Components Library for React Native

Home Page:https://wix.github.io/react-native-ui-lib/

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Issues With Android Keyboard within Dialogs

esaulopezTek opened this issue · comments

Description

Using an android device, I am utilizing the the Picker Component.
I am rendering a custom Header and Modal.
For the Modal I am using Incubator.Dialog.
I have a search box in my dialog, we are using it for filtering.

The main issue is that the keyboard avoiding view dose not work when setting,

modalProps={{ statusBarTranslucent: true}}

Without this prop, it works just fine with the exception of the status bar remaining white.

Related to

  • Components

Steps to reproduce

use custom dialog in picker with android and keyboard avoiding view,

Set the line below within the props of the dialog.
modalProps={{ statusBarTranslucent: true}}

Expected behavior

Keyboard avoiding view would work the same as without.

Actual behavior

Keyboard avoiding view dose not work.

More Info

Code snippet

<Incubator.Dialog
ref={modalRef}
visible={visible}
onDismiss={() => {
onDone();
toggleModal(false);
}}
width="100%"
height='25%'
position={'bottom'}
bottom
migrate
modalProps={{ useKeyboardAvoidingView: true,statusBarTranslucent:true }}
// eslint-disable-next-line react-native/no-inline-styles
containerStyle={{ backgroundColor: 'white', marginBottom: 0 }}
direction={PanningProvider.Directions.DOWN}
headerProps={{
leadingAccessory: header,
showKnob: false,
showDivider: false
}}


### Screenshots/Video


### Environment
 


- React Native UI Lib version:

### Affected platforms

- [ ] Android