React-native: ScrollView inside KeyboardAvoidingView bottom padding bug?

[MovingGifts]

I've encountered an issue when using a ScrollView inside a KeyboardAvoidingView. In short, the keyboard opens and when it closes when I am scrolled all the way to the bottom of the ScrollView I get a whole lot of padding (the same space that the keyboard occupied). The extra padding space only disappears after a manual scroll of the ScrollView, as opposed to disappearing immediately.

Here's a demo of the issue (note the padding on the bottom once TextInput gains focus):

Here is a fiddle: https://rnplay.org/apps/_Kk6oA

Shouldn't KeyboardAvoidingView be able to handle this?

[anotherstarburst]

I've got this bug too. Stumbled across a few more besides. KeyboardAvoidingView is making life quite tricky :/

[maluramichael]

I got this problem on Android and found the cause of the problem in the onKeyboardChange method.

When the keyboard is closed the event argument is null and no layout animation fired so onLayout is never called again and this.frame is still the same as before when the keyboard was opened.

  onKeyboardChange(event: ?KeyboardChangeEvent) {
    if (!event) {
      this.setState({bottom: 0});
      return;
    }

    const {duration, easing, endCoordinates} = event;
    const height = this.relativeKeyboardHeight(endCoordinates);

    if (duration && easing) {
      LayoutAnimation.configureNext({
        duration: duration,
        update: {
          duration: duration,
          type: LayoutAnimation.Types[easing] || 'keyboard',
        },
      });
    }
    this.setState({bottom: height});
  },

  onLayout(event: LayoutEvent) {
    this.frame = event.nativeEvent.layout;
  },

[MovingGifts]

Thanks all for the feedback. Is there any chance this will be fixed in the next release?

[piotrblasiak]

Got this problem as well

[seaify]

same problem as well, any solution? i guess only need to listen to keyboard hide event, change the height back.

[neverlan]

Same problem

[DannyvanderJagt]

I've got a (possible) fix for this issue. It will need some more testing and I would like to get a few people to look at it before I submit it as a PR. The PR should be up this week.

[blaues0cke]

@DannyvanderJagt Nice. We (me and @maluramichael) are ready to help you with testing.

[DannyvanderJagt]

We could not reproduce this issue for the padding behavior, however we could for the height behavoir. The problem is that this.frame within onLayout only contains the full height of the frame before the keyboard is triggered for the first time. We patched this internally by storing the first value of this.frame separately and using this as a reference when we subtract the keyboard height during rendering. I created a branch off my own react-native fork, see this branch, or see the changes here.

Let me know if this is working for you guys.
If anyone knows a better / other solution please do share :)

Tested on: Iphone 6 IOS 10.1 & Android Nexus 5 Api 25. React-Native: 0.39.2

[jgkim]

I guess the issue raised by @MovingGifts is caused by the scroll position. Even if the bottom padding of the ScrollView changes, the scroll position does not change automatically. Because of this, if you scroll down after the ScrollView shrinks and dismiss the keyboard, the scroll position stays there so you can see some space in the inner container. To fix this, it's needed to change the scroll position when the keyboard disappears. I think this is not a problem of KeyboardAvoidingView. Maybe we need KeyboardAvoidingScrollView or something.

[woshi82]

@DannyvanderJagt it's still not work , i have modified KeyboardAvoidingView.js according to https://github.com/DannyvanderJagt/react-native/pull/1/files ,then clean and run my project,but it's not work.

below is my code

<ScrollView style={styles.container}>
    <KeyboardAvoidingView behavior="padding" style={{flex: 1}}>
        <TextInput/>
        ....
        many  TextInput
        .....
    </KeyboardAvoidingView>
</ScrollView>

the result
when the Keyboard show, i scroll the view to the bottom,i can see the last TextInput. everything goes all right.
when the Keyboard hidden, there appeared some white space in the bottom, and did not disappeared
Tested on: Iphone 6s IOS 10.1 React-Native: 0.40.0

[austincline09]

I added style={{flexGrow: 1}} to mine and it seemed to fix the white space issue when I hide the keyboard

[grundmanise]

@austincline09 hey, on what element did you add flexGrow I've tried adding it on the ScrollView, KeyboardAvoidingView, wrappers... nothing solved this issue.

[austincline09]

@grundmanise I'm pretty sure I added it to my ScrollView component and it fixed the issue for me. My KeyboardAvoidingView also had contentContainerStyle={{flex: 1}}

[grundmanise]

Thanks, but none of the solutions works for me...

[chrisharrison]

@austincline09 Did you have the ScrollView inside or outside the KeyboardAvoidingView? Do you think you could paste your JSX?

[jtewright]

In case it helps, this works a charm without making any changes to the component.
```
{...header}

{...rows}

{...footer}

[qrobin]

@jtewright Hi, this is what I can't fix now. Tried your variant. Any more suggestions?
Here is my code:

import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import { View, ScrollView, Text, Dimensions, TextInput, KeyboardAvoidingView } from 'react-native';
import { navigateTo, Router } from 'routes';
import { NavigationStyles } from '@exponent/ex-navigation';
import colors from 'colors';

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

export default class Chat extends Component {
    static route = {
        navigationBar: {
            title: 'Hello, Github',
        },
    }

    render() {
        return (
            <KeyboardAvoidingView behavior='padding' style={{ flex: 1 }}>
                <ScrollView>
                    <Text>
                        Hello
                    </Text>
                </ScrollView>
                <TextInput
                    style={styles.input}
                    placeholder='Введите текст сообщения...'
                    autoCorrect={false}
                    multiline />
            </KeyboardAvoidingView>
        )
    }
}

const styles = {
    container: {
        flex: 1,
    },
    kaView: {
        flex: 1,
        width: width,
        alignItems: 'center',
        justifyContent: 'center',
        backgroundColor: colors.body,
    },
    input: {
        position: 'relative',
        bottom: 0,
        left: 0,
        width: width,
        height: 50,
        fontSize: 16,
        borderWidth: 3,
        borderColor: colors.text_light,
        paddingHorizontal: 10,
    },
}

UPDATE

Found the problem. It was my ex-navigation's header. After hiding it all works fine.

[jtewright]

I think the keyboardVerticalOffset prop can help with that too, in case you're not already using it.

[qrobin]

@jtewright I tried, but if it's set, all content stays higher than it should be after the keyboard is closed.

[jtewright]

@ababba15 I think the solution is to remove the position, bottom, and left style attributes from your input. If it's after the ScrollView it should always be at the bottom. No need to set keyboardVerticalOffset, I've only needed that if the top of the KeyboardAvoidingView is not at the top of the actual screen, then you set it to whatever the difference is, e.g.:
```

{...stuff}

[brennanerbz]

Any update on this?

[brennanerbz]

@jtewright what happens when you scroll while the keyboard is up, then close by tapping the scrollview? do you see any weird padding / extra space issues?

[jtewright]

@brennanerbz nope I haven't noticed that. I haven't worked on this for a while so I've forgotten the contextual details, but I've pasted a full example of how we're implementing this with a scroll view below (removed irrelevant code):
```
render() {
return (

removeClippedSubviews={false}
ref='scrollView'
keyboardShouldPersistTaps={'always'}
contentContainerStyle={styles.scrollView}>



{irrelevantCondition ?
: null}

);
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: palette.white,
},
scrollView: {
paddingHorizontal: pad.mid
},
header: {
fontSize: text.action,
lineHeight: text.action,
fontFamily: fonts.regular,
color: palette.black,
paddingTop: pad.mid,
paddingBottom: pad.mid,
backgroundColor: 'transparent',
},
});

[felipecocco]

+1

I noticed this while trying to use this with behavior={"position"}, and I find that padding is added to the bottom of my view even when the keyboard is dismissed.

[zmGitHub]

+1

[dmr07]

+1

Padding is left after the scroll disappears. Used inside an absolutely positioned element.

<KeyboardAvoidingView
        behavior='padding'
        keyboardVerticalOffset={500} // requires ~500, or else it will still be covered by the keyboard.
        style={{flex: 1}}>

react-native v0.45.0

UDPATE
Instead of using behavior = padding, I used behavior=position. I then nested in the outermost absolutely positioned element, and it worked. Horray!

As far as I searched, the behavior property is not well documented. It was through sheer trial and error that I was able to get this working. Better documentation on the KeyboardAvoidingView would be appreciated.

[chapeljuice]

I'm still having this issue. Anyone have a good solution? behavior='position isn't cutting it either.

[commit-master]

Same issue, doesn't work using this code:
The TextInput goes up well, but the ScollView doesn't scroll to the bottom.

return (
      <KeyboardAvoidingView style={styles.HOME__mainContainer} behavior="padding">
        <LinearGradient
          start={{ x: 0.5, y: 0.75 }}
          end={{ x: 0.5, y: 1 }}
          colors={['rgba(255, 255, 255, 1)', 'rgba(255, 255, 255, 0)']}
          style={styles.HOME__header}>
          <Image
            source={{ uri: img }}
            style={styles.HOME__headerBubble} />
        </LinearGradient>

        <ScrollView
          contentContainerStyle={{ paddingTop: 50, paddingBottom: 50 }}
          onContentSizeChange={(contentWidth, contentHeight) => {
            this.scrollView.scrollToEnd({ animated: false });
          }}
          ref={ref => this.scrollView = ref}
          style={styles.HOME__chatContainer}>

          <Message author={false} />
          <Message author={true} />
          <Message author={false} message={"Some Content"} />
          <Message author={true} message={"Some Content"} />
          <Message author={false} message={"Some Content"} />
          <Message author={true} message={"Some Content"} />

        </ScrollView>


        <View style={styles.HOME__inputContainer}>
          <Icon style={[styles.CHAT__icon, { borderRightWidth: 1, borderRightColor: 'black' }]} name="chart-bubble" size={25} />
          <TextInput
            style={styles.CHAT__input}
            placeholderTextColor={"#96A1AF"}
            placeholder={"Enter a smart message here..."}
            returnKeyType={'send'} />
          <Icon style={[styles.CHAT__icon, { color: "#1A8CF0" }]} name="send" size={20} />
        </View>
      </KeyboardAvoidingView>
    )

Any ideas why?

[sakarit]

Did some research for this...

These events are keyboardDidShow and keyboardDidHide. On iOS the endCoordinates' height is 162 even though it should be zero for it to work. The component uses height for the calculation.

Don't know why this is.. it's probably a bug in RCTKeyboardObserver.

[sakarit]

You can use this workaround to fix it:

import {Platform, Keyboard} from 'react-native'

function fixEndCoordinatesHeight(event) {
  const {startCoordinates, endCoordinates} = event
  if (endCoordinates.screenY > startCoordinates.screenY) {
    endCoordinates.height = 0        
  }
  return event
}

if (Platform.OS === 'ios') {
  const {addListener} = Keyboard

  Keyboard.addListener = function(eventType, listener, context) {
    const newListener = event => listener(fixEndCoordinatesHeight(event))
    return addListener.call(this, eventType, newListener, context)
  } 
}

[oskarsliukis]

So, still no legit fix? It's sometimes hard to believe how things like this are ignored for such a long time.

[blaues0cke]

@oskarsliukis RN is open source - feel free to fix it and create a pull request.

[developer239]

https://blog.codinghorror.com/dont-like-it-code-it-yourself/

[johngoren]

It's always hilarious when you're told "code it yourself" to fix issues with a software package that claims to make app development so much easier. RN shouldn't be short on resources -- it's put out by a company belonging to literally the fourth-richest man in the USA.

[chrisharrison]

It's an open source project, so "code it yourself" makes perfect sense to
me.

On 4 December 2017 at 08:56, John Gorenfeld [e-mail]
wrote:

It's always hilarious when you're told "code it yourself" to fix issues
with a software package that claims to make app development so much easier.
RN shouldn't be short on resources -- it's put out by a company belonging
to literally the fourth-richest man in the USA.

—
You are receiving this because you commented.
Reply to this email directly, view it on GitHub
https://github.com/facebook/react-native/issues/10765#issuecomment-348898264,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AASE-ltdpVj9R-ijTnarnuU5rdu11K1Tks5s87OqgaJpZM4KqSbw
.

[quangduz]

Follow @dmr07 solution and its worked !

<KeyboardAvoidingView style={styles.screen} behavior="position" keyboardVerticalOffset={50}>
        <ScrollView style={styles.main}>
          <View style={styles.category}>
              // some <text />
          </View>
          <View style={styles.contentWrap}>
              // some <text />
          </View>
          <View style={styles.contentWrap}>
            <TextInput
              style={styles.textInput}
              placeholder={this.state.email}
              placeholderTextColor='gray'
              keyboardType='email-address'
              maxLength={100}
              autoCorrect={false}
              underlineColorAndroid='rgba(0,0,0,0)'
              onChangeText={(newEmail) => this.setState({newEmail})}
            />
          </View>
          <View style={styles.contentWrap}>
            <TouchableHighlight onPress={(this._confirmEmail.bind(this))} underlayColor='transparent'>
              <View style={styles.checknowButton}>
                <Icon name="find-in-page" size={27} color='white' />
                <Text style={styles.checknow}>Submit</Text>
              </View>
            </TouchableHighlight>
          </View>
        </ScrollView>
 </KeyboardAvoidingView>

[ishigamii]

Having the same problem and everything I tried is more or less working but always some strange behavior happening. Though this only happens in Android for me. IOS works perfectly.

[austincline09]

@ishigamii when I had this issue I noticed the android keyboard behaved inconsistently in debug mode, once I ran the release version it seemed to be fine

[ishigamii]

Sadly I get the same result with them and actually the behavior of KeyboardAvoidingView is still a mystery for me, even by trying them all it is still not making sense and the documentation on it is not very crowded.
I made a post and StackOverflow to explain my case : https://stackoverflow.com/questions/48503892/react-native-android-layoutanimation-keyboard-flatview-bug
I also tried to make it otherway by making sure the list has all the height needed by giving it the height of the screen - the top bar, I tried the flex too, but none works, the animation seems to use the space and don't let me use it anymore.

[cosmosof]

+1

[mojotti]

I have following setup:

<KeyboardAvoidingView
        behavior='padding'
        keyboardVerticalOffset={84}
   >
       <ScrollView>
           .....
       </ScrollView>
  </KeyboardAvoidingView>

Problem is that KeyboardAvoidingView creates a new View inside of it, and adds 'paddingBottom: 20' in it (20 comes from keyboardVerticalOffset - 64, I suppose).

This screen shot illustrates the problem:

That draws padding of 20 in the bottom of the screen, which is not nice. It can be easily overridden by having -20 margin in the bottom component after keyboard has been shown (0 before keyboard is shown), but it feels a kind of hacky solution.

Any suggestions?

[hramos]

This issue has been open for a while. Would someone volunteer to fill in all the fields required by the template? I will then edit the top post to link to your comment.

I find this necessary as over time, threads like these become a gathering place for similar but potentially unrelated issues. I'd like to ensure we are tracking one singular issue here, and encourage others to file a new issue. Otherwise this issue might never get addressed.

[ghost]

FYI... Here is the template, something that seldom makes it into a thread once an issue's already been created:

<!--
  We use GitHub Issues exclusively for tracking bugs in React Native.
  Questions? Visit http://facebook.github.io/react-native/help.html
  If this issue is about documentation or the website, please file it at:
  https://github.com/facebook/react-native-website/issues/new
-->

- [ ] I have reviewed the [documentation](https://facebook.github.io/react-native)
- [ ] I have searched [existing issues](https://github.com/facebook/react-native/issues)
- [ ] I am using the [latest React Native version](https://github.com/facebook/react-native/releases)

<!-- Describe your issue in detail. -->

## Environment
<!-- Required. Run `react-native info` in your terminal and paste its contents here. -->

## Steps to Reproduce
<!-- 
  Required. Let us know how to reproduce the issue. Include a code sample, share a project, 
  or share an app that reproduces the issue using [Snack](https://snack.expo.io/).
-->

## Expected Behavior
<!-- Write what you thought would happen. -->

## Actual Behavior
<!-- Write what happened. Include screenshots if needed. If this is a regression, let us know. -->

[react-native-bot]

This issue was marked as lacking information required by the issue template. There has been no activity on this issue for a while, so I will go ahead and close it.

If you found this thread after encountering the same issue in the latest release, please feel free to create a new issue with up-to-date information by clicking here.

If you are the author of this issue and you believe this issue was closed in error (i.e. you have edited your issue to ensure it meets the template requirements), please let us know.

[hegelstad]

Please reopen this!

[hramos]

Please open a new issue.

[gigby]

Solution by @dmr07 is working.

[rodrix]

Useful lib:
https://github.com/APSL/react-native-keyboard-aware-scroll-view
;*

[jayporta]

I've got it working without keybaordVerticalOffset

<SafeAreaView style={{ flex: 1 }}>
  <Header />
    <KeyboardAvoidingView behavior='position' style={{ flex: 1 }}>
      <ScrollView>...</ScrollView>
    </KeyboardAvoidingView>
</SafeAreaView>

[Generalomosco]

This is what i ended with, i listens to keyboard and scroll Content to bottom when keyboard is visabled...

keyboardDidAct=(toggle)=>{
  if(toggle==='show'){
  this.component._root.scrollToEnd()}
   }

  componentWillUnmount() {
    this.keyboardDidShowListener.remove();
    this.keyboardDidHideListener.remove();
  }
componentDidMount() {

    this.keyboardDidShowListener = Keyboard.addListener('keyboardDidShow', ()=>this.keyboardDidAct('show'));
    this.keyboardDidHideListener = Keyboard.addListener('keyboardDidHide', ()=>this.keyboardDidAct('hide'));
  }

      <Container>
        <Header>
          <Left>
            <Button transparent onPress={() => this.props.navigation.goBack()}>
              <Icon name="arrow-back" />
            </Button>
          </Left>
          <Body>
            <Title>{textLimit({text: this.state.fullname, limit: 1, type:'word'})}</Title>
          </Body>
          <Right />
        </Header>

          <Content ref={c => (this.component = c)}>
          <Text>gxttx</Text>
          <Text>gxttx</Text>
          <Text>gxttx</Text>
          <Text>gxhhhhhhttx</Text>
          <Text>gxttx</Text>
          <Text>gxttx</Text>
          <Text>gxttxd</Text>
          <Text>gxttxy</Text>
          <Text>gxttxuuu</Text>
          <Text>gxttxytytyty</Text>
          <Text>gxttxhfdfy</Text>
          <Text>gxttxiuytr</Text>
          <Text>gxttxhrfdt</Text>
          <Text>gxttxiyt</Text>
          <Text>gxttxiuf</Text>
          <Text>gxttxmjy7</Text>
          <Text>gxttxree</Text>
          <Text>gxttxiii</Text>
          <Text>gxttgx</Text>
          <Text>gxttxkuyy</Text>
          <Text>gxttxhy</Text>
          <Text>gxttjuuuux</Text>
          <Text>gxttxyyyy</Text>
          <Text>gxttxvvv</Text>
          <Text>gxttxffdd</Text>
          <Text>gxttxhy</Text>
          <Text>gxttxuu</Text>
          <Text>gxthhhhhtx</Text>
          <Text>gxttx</Text>
          <Text>gxttbhx</Text>
          <Text>gxttxendddd</Text>

    </Content>

        <Footer>
      <Input style={{
        borderWidth: 3,
        borderColor: 'blue'}}/>
        </Footer>
      </Container>

[matteocollina]

It works for me without any extra component:

<KeyboardAvoidingView style={{flex: 1}} behavior="position"  enabled>
                <ScrollView>
.....

[ghost]

@ababba15 I think the solution is to remove the position, bottom, and left style attributes from your input. If it's after the ScrollView it should always be at the bottom. No need to set keyboardVerticalOffset, I've only needed that if the top of the KeyboardAvoidingView is not at the top of the actual screen, then you set it to whatever the difference is, e.g.:

<View>
  <Header style={{height: 50}} />
  <KeyboardAvoidingView keyboardVerticalOffset={50} behavior={'padding'}>
    <ScrollView>
      {...stuff}
    </ScrollView>
    <Input />
  </KeyboardAvoidingView>
</View> 

This will work fine with little extra code:

componentDidMount() {
    this.keyboardSub = Keyboard.addListener('keyboardWillShow', ()=> {
      this.scrollView.scrollToEnd({ animated: true })
    })
  }

  componentWillUnmount() {
    this.keyboardSub.remove()
  }

[amitbravo]

I do not know why but keyboardVerticalOffset's value 64 on iOS and -189 on Android is working ok for me , however, I am skeptical about different screen sizes.
I am using react-native-router-flux whose navigation bar shown in screenshots (iphone)
````
render() {
const navBarHeight = (Platform.OS === 'ios') ? 64 : -189,
return (

    <FlatList
      ref="flatList"
      data={this.state.data}
      extraData={this.state}
      renderItem={({ item }) => (
          this.renderItem2(item)
      )}
      keyExtractor={item => item.key}
      inverted={this.state.reSubmission}
    />



  <View style={{ backgroundColor: '#d6d6d6'  }}>


      { this.state.download_percentage > 0 && (
        <ProgressBar progress={parseFloat(this.state.download_percentage)} width={width} borderRadius={0} borderWidth={0} />
      )}
      {this.state.loading && (
        <ActivityIndicator  style={{ padding: 6 ,  justifyContent: 'center', alignItems: 'center' }} size="large"  />
      )}


                      { this.state.author && ( this.state.main || this.state.reSubmission ) && (
                      <View style={styles.footer}>


                        { this.state.categories2 && this.state.main && (
                        <View style={{  backgroundColor: '#c1c1c1' }}>
                        <Animated.View style={[styles.toolbarView, {transform: [{translateY: this.state._animatedMenu}]}]}>
                          <View style={catbar.menuView}>
                            <ScrollView directionalLockEnabled={true}
                                        showsHorizontalScrollIndicator={false}
                                        horizontal={true}>
                              { this.state.categories2 && (
                                      this.state.categories2.map((category, i) => {
                                            return(<TouchableOpacity
                                              onPress={ ()=> { this.setState({ categoryActive2: category.key  }) } }
                                              key={category.key}
                                              style={[catbar.menuItemView, this.state.categoryActive2 == category.key ? catbar.menuItemActive : null]}>
                                              <Text
                                                style={[catbar.menuItem, this.state.categoryActive2 == category.key ? catbar.menuActiveText : null]}>
                                                {this.upCaseTitle(category.name) }
                                              </Text>
                                            </TouchableOpacity>);
                                      })

                              )}

                            </ScrollView>
                          </View>
                        </Animated.View>
                        </View>
                        )}




                          { this.state.commentSystem && (
                            <View style={{ flexDirection: 'row',  padding: 6, alignItems: 'center' }}>
                                <View style={{ flex: 1  }} />
                                <View style={{ flex: 4, flexDirection: 'row', justifyContent: 'flex-end' }}>
                                  <View style={{ flexDirection: 'row', alignItems: 'center' }}>
                                      { this.state.comments && (
                                        <View style={{ flexDirection: 'row', alignItems: 'center' }}>
                                        <Text style={{ fontSize: 16, paddingLeft: 8, paddingRight: 4 }}>Allow Media</Text>
                                        <Switch onValueChange={ (value) => { this.switchMedia(value) } } value={ this.state.allow_media } />
                                        </View>
                                      )}
                                      <View style={{ flexDirection: 'row', alignItems: 'center' }}>
                                      <Text style={{ fontSize: 16, paddingLeft: 5, paddingRight: 4 }}>Reply</Text>
                                      <Switch onValueChange={ (value) => { this.switchComments(value) } } value={ this.state.comments } />
                                      </View>
                                  </View>
                                </View>
                            </View>
                          )}



                          <View style={{ alignItems: 'center', justifyContent: 'space-around',  width: width, flexDirection: 'row', paddingVertical: 10, paddingHorizontal: 8 }}>

                            <View>
                              <View style={{ justifyContent: 'center', alignItems: 'center', width: 40, height: 40, borderRadius: 20, overflow: 'hidden', backgroundColor: 'rgba(0, 145, 234, 1)' }}>
                              { this.state.timePassed &&  (
                                <TouchableOpacity disabled={this.state.selectedimages.length > 0} onPress={() => this.openactionSheet()} >
                                  <Icon style={{ color: 'white' }} name="paperclip" size={23}  />
                                </TouchableOpacity>
                              )}
                              </View>
                            </View>

                            <TextInput
                              blurOnSubmit={true}
                              disabled={this.state.disableatloading || this.state.imageprogress > 0 }
                              value={this.state.notice_title}
                              style={[styles.input, { height: Math.min(86, this.state.height) }]}
                              multiline={true}
                              underlineColorAndroid="transparent"
                              placeholder="Type something nice"
                              onChangeText={(text) => this.setState({ notice_title: text }) }
                              onContentSizeChange={(event) => {
                                  if( event.nativeEvent.contentSize.height > this.state.height ){
                                    this.setState({ height: event.nativeEvent.contentSize.height })
                                  }
                                  else {
                                      if(event.nativeEvent.contentSize.height > this.state.defaultheight){
                                        this.setState({ height: event.nativeEvent.contentSize.height })
                                      }
                                      else {
                                          this.setState({ height: this.state.defaultheight })
                                      }

                                  }
                              }}
                            />

                            <View>
                              <View style={{ justifyContent: 'center', alignItems: 'center', width: 40, height: 40, borderRadius: 20, overflow: 'hidden', backgroundColor: this.state.notice_title.length < 2 || this.state.loading ? 'grey' : 'rgba(0, 145, 234, 1)' }}>
                              <TouchableOpacity disabled={ this.state.notice_title.length < 2 || this.state.loading } onPress={() => this.uploadSelectedFirebase()} >
                                <Icon style={{ color: 'white' }} name="paper-plane" size={20}  />
                              </TouchableOpacity>
                              </View>
                            </View>


                      </View>




                      </View>
                    )}
  </View>

</KeyboardAvoidingView>

);
}
}

....
....
container: {
flex: 1,
backgroundColor: '#e6e6e6',

},
footer: {

},
toolbarView: {
backgroundColor : Color.main,
width: width,
},
input: {
width: 200,
paddingRight: 10,
paddingLeft: 10,
paddingVertical: 2,
fontSize: 16,
borderWidth: 1,
borderRadius: 14,
backgroundColor: 'white',
borderColor: '#d6d6d6'
}
````

[hoshealee]

• use position behavior, contentStyle in outer wrapper. remember use flex: 1 for kav style.

return (
 <View style={{flex: 1, width: '100%', height: '100%'}}>
        <KeyboardAvoidingView behavior={"position"} style={{flex: 1}} contentContainerStyle={[styles.yourContainerStyle, {flex: 1, width: '100%', height: '100%'}]}>
        </KeyboardAvoidingView>
</View>

this method could handle most scene of kav and sv nested problem from me.

[killboard]

In case it helps, this works a charm without making any changes to the component.

<KeyboardAvoidingView behavior={'padding'} style={{flex: 1}}>
  {...header}
    <ScrollView>
      {...rows}
    </ScrollView>
  {...footer}
</KeyboardAvoidingView >

For me works fine adding the KeyboardAvoidingView before scroll view

[MuruganandaMukesh]

KeyboardAvoidingView not working with multiline input. Could anyone help me out if you have overcome this?

[jayporta]

I just switched to react-native-keyboard-aware-scroll-view

On Thu, Feb 7, 2019 at 8:03 AM Mukesh-iOS [e-mail] wrote:

KeyboardAvoidingView not working with multiline input. Could anyone help
me out if you have overcome this?

—
You are receiving this because you commented.
Reply to this email directly, view it on GitHub
https://github.com/facebook/react-native/issues/10765#issuecomment-461409714,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AOi1lHmjCJ6GOm34kOcPZLP6Nd_fkdhVks5vLCQNgaJpZM4KqSbw
.

[MuruganandaMukesh]

@jayporta Thanks for your information. It would be very helpful if you give an example with react-native-keyboard-aware-scroll-view for Multiline input. I am very new to this platform.

[raphaelakpan]

I think react-native-keyboard-aware-scroll-view is the way to go. The instructions to use are on the docs. Basically replace your existing ScrollView with KeyboardAwareScrollView. That's what worked for me @MuruganandaMukesh

import { KeyboardAwareScrollView } from 'react-native-keyboard-aware-scroll-view'

<KeyboardAwareScrollView>
  <View>
    <TextInput />
  </View>
</KeyboardAwareScrollView>

[bhdrk]

Hi all, this is working solution for me. I tested on Android. Can somebody also test it on IOS?

import Constants from "expo-constants";
import {KeyboardAvoidingView, ScrollView} from "react-native";

<ScrollView contentContainerStyle={{flexGrow: 1}}>
  <KeyboardAvoidingView style={{flex:1, paddingTop: Constants.statusBarHeight}} behavior="padding" enabled>
     {/* children */}
  </KeyboardAvoidingView>
</ScrollView>

[nkemcels]

Updating my AndroidManifest.xml and changing

windowSoftInputMode="adjustResize";

to

windowSoftInputMode="adjustPan"

Did the trick for me.

Source: This stack overflow post

[froston]

In my case adding ScrollView inside KeyboardAvoidingView fixed the problem.