React Native - KeyboardAvoidingView with Sticky Footer

keyboardverticaloffset react native
react-navigation'; <keyboardavoidingview
react native keyboard push view up ios
keyboardavoidingview> </scrollview
keyboardavoidingview padding
react native fixed footer
keyboardavoidingview fixed footer
react-native get keyboard height

I'm trying to make a sticky footer with the KeyboardAvoidingView component in React Native. I'm very close to accomplishing this task, however, when they keyboard comes up, the footer is moving up but shrinking in height at the same time.

Here's what it looks like before the keyboard comes up:

And here's what it looks like after the keyboard comes up:

As you can see, the submit container is smaller than it is before there is a keyboard.

Here's my current code:

render() {    
  return (
    <KeyboardAvoidingView style={{ flex: 1 }} behavior="padding">
      <View style={{ flex: 1, }}>
        <TextInput
          placeholder="Username"
          value={this.state.username}
          style={Styles.textInput}
          onChangeText={(username) => this.setState({ username })}
          autoCorrect={false}
        />
        <TextInput
          style={Styles.textInput}
          placeholder="Email"
          value={this.state.email}
          onChangeText={(email) => this.setState({ email })}
          autoCorrect={false}
        />
      </View>
      <View style={{ height: 100, backgroundColor: 'blue' }}>
        <Text>Submit</Text>
      </View>
    </KeyboardAvoidingView>
  );

What am I doing wrong?

Are you using react-navigation? This might be affected by the header of the react-navigation. The height of the header is vary on different mobile screen size. You need to get the get the height of the header and pass into the keyboardVerticalOffset props.

import { Header } from 'react-navigation';

 <KeyboardAvoidingView
  keyboardVerticalOffset = {Header.HEIGHT + 20}
  style = {{ flex: 1 }}
  behavior = "padding" >

  <ScrollView>
    <TextInput/>
    <TextInput/>
    <TextInput/>
    <TextInput/>
    <TextInput/>
    <TextInput/>
  </ScrollView> 

</KeyboardAvoidingView>

react native KeyboardAvoidingView with sticked in page footer , I am using react-native's KeyboardAvoidingView with input at the bottom of the screen ( justifyContent:'flex-end' ). The keyboard still hides the  KeyboardAvoidingView. This is the distance between the top of the user screen and the react native view, may be non-zero in some use cases. Defaults to 0.

My app uses react-navigation. So Toh Ban Soon's answer I ended up doing

import { KeyboardAvoidingView } from 'react-native';
import { Constants } from 'expo';
import { Header } from 'react-navigation';

<KeyboardAvoidingView behavior="padding" keyboardVerticalOffset = {Header.HEIGHT + Constants.statusBarHeight} style={[sharedStyles.container, {justifyContent: 'center'}]}>

... Input components...

</KeyboardAvoidingView>

There is an issue about it here https://github.com/react-navigation/react-navigation/issues/3971

React Native - KeyboardAvoidingView with Sticky Footer, I'm trying to make a sticky footer with the KeyboardAvoidingView component in React Native. I'm very close to accomplishing this task, however, when they  react-native-sticky-header-footer-scroll-view. A <StickyHeaderFooterScrollView> wrapper that. Takes a scrollview or listview; Or any component and make it scrollable; Takes a header and/or a footer and make them sticky; Works on iOS and Android; Add it to your project. iOS and Android. yarn add react-native-sticky-header-footer-scroll-view. or

Stumbled across the same issue and wasn't able to solve it using the KeyboardAvoidingView. But here is a good alternative solution:

constructor() {
    super();
    this.state = {
        bottomHeight: 0
    }
}
componentDidMount() {
    this.keyboardDidShowListener = Keyboard.addListener('keyboardDidShow', this._keyboardDidShow.bind(this));
    this.keyboardDidHideListener = Keyboard.addListener('keyboardDidHide', this._keyboardDidHide.bind(this));
}
componentWillUnmount() {
    this.keyboardDidShowListener.remove();
    this.keyboardDidHideListener.remove();
}

_keyboardDidShow(e) {
    this.setState({ bottomHeight: e.endCoordinates.height - 50 })
}

_keyboardDidHide() {
    this.setState({ bottomHeight: 0 })
}

render() {
    return (
        <View style={{ flex: 1 }} behavior="padding">
            <View style={{ flex: 1, }}>
                <TextInput
                    placeholder="Username"
                    value={this.state.username}
                    style={Styles.textInput}
                    onChangeText={(username) => this.setState({ username })}
                    autoCorrect={false}
                />
                <TextInput
                    style={Styles.textInput}
                    placeholder="Email"
                    value={this.state.email}
                    onChangeText={(email) => this.setState({ email })}
                    autoCorrect={false}
                />
            </View>
            <View style={{ height: 100, backgroundColor: 'blue', position: 'absolute', left: 0, right: 0, bottom: this.state.bottomHeight }}>
                <Text>Submit</Text>
            </View>
        </View>

Hope this helps...

Keep footer fixed at the bottom of the screen when keyboard opens , Hey, I just released a new alpha 2.0.0-alpha.0 of the library. It's rewritten using react-native-gesture-handler and react-native-reanimated  A React Native Keyboard Accessory (View, Navigation) Component. Sticky views on keyboard. react react-native keyboard-accessory input-accessory sticky-views

Try using native base npm package it is the best UI solution available for react native checkout this native base docs

Set up the header and footer as you like with the content tag behaving like scrollview

import React, { Component } from 'react';
import { Container, Header, Title, Content, Footer, FooterTab, Button, Left, Right, Body, Icon, Text } from 'native-base';
export default class AnatomyExample extends Component {
  render() {
    return (
      <Container>
        <Header />
        <Content>
          <TextInput
           placeholder="Username"
           value={this.state.username}
           style={Styles.textInput}
           onChangeText={(username) => this.setState({ username })}
           autoCorrect={false}
         />
         <TextInput
          style={Styles.textInput}
          placeholder="Email"
          value={this.state.email}
          onChangeText={(email) => this.setState({ email })}
          autoCorrect={false}
        />
        </Content>
        <Footer style={{backgroundColor: 'blue' }}>
          <FooterTab>
            <Button full onPress={()=>console.log('submitted')}>
              <Text>Submit</Text>
            </Button>
          </FooterTab>
        </Footer>
      </Container>
    );
  }
}

facebook/react-native, React Native released <KeyboardAvoidingView /> anyone used it? I'm pretty sure I added it to my ScrollView component and it fixed the issue for me. ( <​View style={styles.footer}> { this.state.categories2 && this.state.main  Makes the sections headers sticky. The sticky behavior means that it will scroll with the content at the top of the section until it reaches the top of the screen, at which point it will stick to the top until it is pushed off the screen by the next section header. This property is not supported in conjunction with horizontal={true}. Only enabled by default on iOS because of typical platform standards.

Try following code, put footer at outer layer of scrollview and keyboardAvoidingView.

<ScrollView padder scrollEnabled={true}>
  <KeyboardAvoidingView
     behavior="padding"
     keyboardVerticalOffset={70}
  >
   <View style={{ flex: 1, }}>
     <TextInput
       placeholder="Username"
       value={this.state.username}
       style={Styles.textInput}
       onChangeText={(username) => this.setState({ username })}
       autoCorrect={false}
     />
     <TextInput
       style={Styles.textInput}
       placeholder="Email"
       value={this.state.email}
       onChangeText={(email) => this.setState({ email })}
       autoCorrect={false}
     />
   </View>
 </KeyboardAvoidingView>
</ScrollView>
<View style={{ height: 100, backgroundColor: 'blue' }}>
  <Text>Submit</Text>
</View>

KeyboardAvoidingView not working properly? Check your Flexbox , flex-start is the reason why your React native KeyboardAvoidingView is not working. Now the overflow issue has been fixed, but adding flex-end makes the​  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

KeyboardAvoidingView · React Native, It can automatically adjust either its height, position, or bottom padding based on the keyboard height. Example. import React, { Component } from 'react'; import  React Native gives us style attribute left, right, top, bottom and using them we can stick any view at a particular position on mobile phone screen. Bottom button is mostly used in application where developer needs to show a loading button or loading View at the base of application scree.

Sticky Footer — Solved by Flexbox, Sticky Footer. Click the button below to hide the contents of this page. Notice how the footer sticks to the bottom of the window even when there's not enough  A component which enables customization of the keyboard input accessory view on iOS. The input accessory view is displayed above the keyboard whenever a `TextInput` has focus. This component can be used to create custom toolbars.

How to make your React Native app respond gracefully when the , The first thing you have to do is replace the container View with the KeyboardAvoidingView and then add a behavior prop to it. If you look at the  List footer support. Item separator support. Section header support. Section separator support. Heterogeneous data and item rendering support. Pull to Refresh. Scroll loading. If you don't need section support and want a simpler interface, use <FlatList>. Quick Examples:

Comments
  • You never mentioned any intended behavior. What do you want to happen? With the way you wrote the code, it's doing exactly what it should be doing.
  • I want it to push the footer up, without resizing it to be smaller than it is when the keyboard is down @MichaelCheng
  • If the height of the bottom view (the blue one) was only 30, it would be hidden by the keyboard @MichaelCheng