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.

Content enableOnAndroid is not working when container has flex set to 1

See original GitHub issue

I have gone through these following points

Issue Description

node, npm, react-native, react and native-base version, expo version if used, xcode version

  • node 12.13.1
  • npm 6.12.1
  • expo 3.11.1
  • native-base ^2.13.8
  • react native ~0.61.4

Expected behaviour

The TextInput filed should be visible when user is trying to enter some data in text field. (keyboardAvoidView functionality should work)

Actual behaviour

The inputs fileds were hidden when the keyboard pops in.

Steps to reproduce

Snack link to reproduce the issue

Is the bug present in both iOS and Android or in any one of them?

I have checked only on Android

Any other additional info which would help us debug the issue quicker.

When i have removed flex:1 styling from the content this is working as expected. ###Important

If you want your issue to be looked at quicker, attach a snack reproducible with your issue. Makes it easier for us!

Snack link to reproduce the issue

Issue Analytics

  • State:closed
  • Created 4 years ago
  • Comments:6 (2 by maintainers)

github_iconTop GitHub Comments

2reactions
awkward-minioncommented, Mar 12, 2020

This is how I solved my issue i.e, a temporary workaround

  1. Completely removed NativeBase Content and Container components at-least for this screen
  2. Used ReactNative’s components
<KeyboardAvoidingView behavior='padding' style={styles.container}>
          <ScrollView>
                 <Form>
                    // ..... Other UI components
                 </Form>
          </ScrollView>
          <ButtonComponent />
</KeyboardAvoidingView>

@hanykumar Thanks for the support, Let me know if have any other solutions to solve this in a better way (apart from using additional libraries)

0reactions
awkward-minioncommented, Mar 12, 2020

I don’t want to incur additional libraries, as I am having this issue at one place.

Read more comments on GitHub >

github_iconTop Results From Across the Web

react-native-keyboard-aware-scroll-view not working properly
What worked for me was ensuring enableOnAndroid = true and setting a marginBottom inside the keyboardAwareScrollView. <KeyboardAwareScrollView ...
Read more >
flex - CSS: Cascading Style Sheets - MDN Web Docs
The flex CSS shorthand property sets how a flex item will grow or shrink to fit the space available in its flex container....
Read more >
Taming React Native's ScrollView with flex | by Peter Piekarczyk
It will apply styles to the content container as if there were a View ... is why setting flex: 1 didn't work the...
Read more >
`flex-grow` is weird. Or is it? - CSS-Tricks
I thought that all flex items with flex-grow set to 1 would have an ... As it turns out, the problem wasn't the...
Read more >
How to use react-native-keyboard-aware-scroll-view - Tabnine
viewStyle} contentContainerStyle={styles. ... render() { return ( <KeyboardAwareScrollView style={{ flex: 1, ... flexGrow} enableOnAndroid={true}.
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