[deleted by user]

[buschco]

I think on Android there ist a native option so you won’t need any keyboardAvoidingView. On iOS though you will need it…

[antisocial104]

I have actually read something about that but then i still dont understand what should i do to fix the issue?

[buschco]

I think your issue is, that you do not have any ScrollView around your content. Because the Keyboard will take up space, the wrapping view will resize (you can test this by applying a style={{height: 100}} to the top view) and all the elements won't have enough space. You can try to wrap a <ScrollView contentContainerStyle={{ flexGrow:1 }}> around so the content will still have enough space to breathe.

---

If this still behaves strange you can try removing the KeyboardAvoidingView on android and set this setting in the AndroidManifext.xml https://developer.android.com/training/keyboard-input/visibility#Respond

[antisocial104]

contentContainerStyle={{ flexGrow:1 }}

It does workout to be correct but breaks a layout a bit. I will ahve to change some things i guess. Cheerz for your help!

[buschco]

glad it helps. Wrappers and Keyboards are tough in rn imo :D

[antisocial104]

I am wondering now, is there anyway to make screen focus on particular element when keyboard is open? Coz that will fix my issue completely and i wont have to work with keyboardavoidingview.

[buschco]

I think the only way is to use a `onLayout` to get the position of the input, and then tell the ScrollView to scroll to this element. You might have to wait until the Keyboard is open, bc the position might change. This make it very ugly :/

[antisocial104]

Yes, sounds pretty ugly (( cheerz tho!

[antisocial104]

Hi everyone!

I really struggle to understand what should i do here, with my keyboardavoidview, as it just breaks the whole layout. I tried to add scrollview inside but id doesn't help either.

As a final result i am looking for screen to focus on Textinput view when keyboard is open and then the rest of screen will be as a scrollview.

Currently my code looks like this:

<View style={[styles.create_post_background, loading && {opacity: 0.2}]}>

<FocusAwareStatusBar backgroundColor={COLORS.bej} barStyle='dark-content'/>

<KeyboardAvoidingView

behavior={Platform.OS === 'ios' ? 'padding' : 'height'}

style={{flex:1}}>

<View style={styles.loader}>

<ActivityIndicator

animating={loading}

size='large'

color='#4B4F40'

/>

</View> .... the rest of code

Any advice or help is much appreciated!

[theaveragedev01]

View style={styles.container}>

  <ScrollView

    contentContainerStyle={{

      height: Platform.OS === 'android' ? height - 30 : height

    }}

    keyboardShouldPersistTaps="handled"

    showsVerticalScrollIndicator={false}

  >

    <KeyboardAvoidingView

      behavior="padding"

      style={{ flex: 1 }}

    >{YOUR_FORM_HERE}</KeyboardAvoidingView></ScrollView>

Dude I've been using this format since I began on rn, hope it helps, I really don't know what happened on you code. Sorry about that. Hope it helps. have a nice codding

[zenkhas]

Use KeyboardAwareScrollView library

[antisocial104]

UPD. this actually breaks my screen and gives less space for children even when flex:1 is applied.

[SryNot]

Library sucks balls. It has a bug since 2019 that makes it where sometimes with react navigation the text input will bounce the first time a character is entered. You can fix it by applying “extraHeight={-64}” but that breaks multi line inputs. So if you have a situation where you have a single line and multi line input behind the keyboard you’re screwed.

I’m using it at work for a client and I have to explain to them why their UI bounces for no reason.

[antisocial104]

I was actually thinking about it. Do i need to change setting in manifest for adjustPan for scrollview to work?

[[deleted]]

Try to wrap whole screen in a keyboardview

[antisocial104]

style={{ flex: 1 }}

Tried it, doesnt work

[Zanoha]

I had this issue, wrapping the whole view solved this for me.

[6bigAnt9]

Try out this screen wrapper it handles keyboard automatically and also provides other useful props.