React Native Make View “Hug” the Top of the Keyboard

Question

Let\'s say I have a view that is positioned absolute at the bottom of the screen. This view contains a text input. When the text input is focused, I want the bottom of the view

Answer 1

You can use flexbox to bottom position the element. Here's simple example -

  render() {
    return (
      
        
        
          
            
          
        
      
    );
  }

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  top: {
    flex: .8,
  },
  bottom: {
    flex: .2,
  },
  input: {
    width: 200,
  },
});