Change the position of a Component on keyboard did show - KeyboardAvoidingView not working - [React Native]

Question

I have my code setup as such:

export default class HomeScreen extends Component {

  constructor() {
      super();
  }

  componentDidMount () {
      this.keyboardDidShowListener = Keyboard.addListener('keyboardDidShow', this._keyboardDidShow);
      this.keyboardDidHideListener = Keyboard.addListener('keyboardDidHide', this._keyboardDidHide);
  }

  _keyboardDidShow = () => {
      console.log('keyboard did show')
  }
  _keyboardDidHide = () => {
      console.log('keyboard did hide')

  }

  render() {
      return (
         <Container styles={styles.container} >
             <Content styles={styles.content} contentContainerStyle={marginLeft=this.state.marginLeft}>
                 <Image
                    style={styles.bgImg}
                    source={Images.bgImg}
                 >
                 </Image>
                 <Image
                    style={styles.logo}
                    source={Images.logo}
                 >
                 </Image>
                 <Text style={styles.slogan}>This is the title</Text>

                 <Form style={styles.search_form}>
                      <Item rounded floatingLabel style={styles.search}>
                           <Label style={styles.search_label}>Where are you headed?</Label>
                           <Input style={styles.search_input} />

                           <Button full rounded style={styles.search_btn}>
                               <Icon name="search"></Icon>
                           </Button>
                      </Item>
                 </Form>

          </Content>
      </Container>
    );
  }
}

I want basically the Content component of native-base to avoid the keyboard. I have my logo at the top, the slogan below it and the form at the bottom of the screen by giving some absolute positioning. At this point, the content component moves way up the screen which I don't want. What I want is the logo and the slogan staying right at the top of the screen but the form which is at the bottom of the page; to move up.

Here's what I've researched so far:

Found out that there is actually a component from react native called KeyboardAvoidingView and I played around with it but keeping the Logo, background image and the rest of the content inside the KeyboardAvoidingView made all the content not show in the screen.
Later I found out that the native base component 'Content' itself extends KeyboardAvoidingView, so there was no need to use it in the first place. But I don't think KeyboardAvoidingView is working with my versions of react native and native base.
So at last, I decided that this was a bug and I would use the Keyboard module of the react native instead to do some custom work, which is where I'm at right now, code-wise.

The Question

The console logging inside _keyboardDidShow and _keyboardDidHide are working, which means now I just need to know how to change the style of a component on keyboardDidShow and keyboardDidHide. Any help is appreciated, of course! I'm really new to react native so any suggestions to better improve my workflow will be taken seriously.

score 1 · Accepted Answer · answered Aug 22 '18 at 17:36

I have already stumbled across the same problem! I'd recommend you save the keyboard width on state, with, for example:

keyboardDidShow = e => this.setState(p => ({ ...p, height: e.endCoordinates.height })
keyboardDidHide = () => this.setState(p => ({ ...p, height: 0 })

then, having this height, you can make your UI depend on that value. After you make sure that is working, in order for it not to jump between positions, use Animated to have a seamless transition between the positions. Hope this helps!

Change the position of a Component on keyboard did show - KeyboardAvoidingView not working - [React Native]

1 Answers1