React-native-navigation: How to make keyboard avoiding lightbox

[murat-mehmet]

Issue Description

When you put a multiline TextInput with 6+ lines in lightbox, Keyboard will cover the textinput. Even I tried to use KeyboardAvoidingView as root view of lightbox, it did not work. Any ideas?

Automatic center alignment option would be great so when the keyboard opens, the lightbox re-aligns itself to the center of screen available.

Environment

• React Native Navigation version: 1.1.79
• React Native version: 0.45.1
• Platform(s) (iOS, Android, or both?): tried only on Android but I'm sure both
• Device info (Simulator/Device? OS version? Debug/Release?): Simulator

[peteroid]

experienced on the same issue. @CoderProject any idea?

I am playing around with the option 3 mentioned in this article: https://medium.freecodecamp.org/how-to-make-your-react-native-app-respond-gracefully-when-the-keyboard-pops-up-7442c1535580

[murat-mehmet]

well, what I did was using a full screen transparent container KeyboardAvoidingView that wraps the modal. Heres the code:

var {height, width} = Dimensions.get('window');

the render method:

<KeyboardAvoidingView behavior='padding' style={styles.container}>
    <TouchableWithoutFeedback style={styles.fill} onPress={()=>Navigation.dismissLightBox()}>
        <View style={styles.fill} />
    </TouchableWithoutFeedback>
    <View style={styles.subContainer}>
            ...
    </View>
</KeyboardAvoidingView>

and style

const styles = StyleSheet.create({
   container: {
        height,
        width,
    alignItems: 'center',
    justifyContent: 'center',
  },
   fill: {    
        ...StyleSheet.absoluteFillObject,
  },
   subContainer: {
    width: 300,
    justifyContent: 'center',
        backgroundColor: '#ffffff',
  },
...

TouchableWithoutFeedback part is required to dismiss the modal on background tap. Hope that helps.

[alexsmartens]

I'm facing the same problem.
KeyboardAvoidingViewdoes not work for me for some reason

[guyca]

Hey guys, Lightbox is deprecated and was removed in v2 in favor of Overlay.
I'm closing as this issue will likely never be addressed.

[alexsmartens]

I found the solution.

My initial structure inside the LightBox screen:

class MyClass extends React.Component {
    constructor(props){
        super(props)
        this.state = {
          …
        }
        …
    }

     …

    render() {
        return (
            <View>

                 …

            </View>
        )
    }
}

export default MyClass 

You need to wrap your main View in KayboardAvoidingView and then wrap it in ScrollView for making keyboard avoiding lightbox. You might want to set background color of your ScrollView to transparent
Here is how the code looks with these changes

class MyClass extends React.Component {
    constructor(props){
        super(props)
        this.state = {
          …
        }
        …
    }

     …

    render() {
        return (
           <ScrollView contentContainerStyle={styles.scrollViewBackground}>
               <KeyboardAvoidingView style={{width: MyWidth}} behavior="padding" enabled>
                    <View>

                         …

                     </View>
               </KeyboardAvoidingView>
           </ScrollView >
        )
    }
}

const styles = StyleSheet.create({
    scrollViewBackground: 
    {
        backgroundColor: 'transparent', 
        flex: 1, 
        flexDirection:'column', 
        alignItems: 'center', 
        justifyContent: 'center'
    },
})

export default MyClass