React Native Make View "Hug" the Top of the Keyboard

react native view
react native modal
react native text
react native elements
react native zindex
react-native-view-overflow
react native image
flexgrow react native

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 to touch the top of the keyboard.

I've been messing around with KeyboardAvoidingView, but the keyboard keeps going over my view. Is it not possible to make this work with position absolute?

What other method can I try? Thanks!

Few days ago I have the same problem (although I have a complex view with TextInput as a child) and wanted not only the TextInput to be focused but the whole view to be "attached" to the keyboard. What's finally is working for me is the following code:

constructor(props) {
    super(props);
    this.paddingInput = new Animated.Value(0);
}

componentWillMount() {
    this.keyboardWillShowSub = Keyboard.addListener('keyboardWillShow', this.keyboardWillShow);
    this.keyboardWillHideSub = Keyboard.addListener('keyboardWillHide', this.keyboardWillHide);
}

componentWillUnmount() {
    this.keyboardWillShowSub.remove();
    this.keyboardWillHideSub.remove();
}

keyboardWillShow = (event) => {
    Animated.timing(this.paddingInput, {
        duration: event.duration,
        toValue: 60,
    }).start();
};

keyboardWillHide = (event) => {
    Animated.timing(this.paddingInput, {
        duration: event.duration,
        toValue: 0,
    }).start();
};

render() {
        return (
            <KeyboardAvoidingView behavior='padding' style={{ flex: 1 }}>
                [...]
                <Animated.View style={{ marginBottom: this.paddingInput }}>
                    <TextTranslateInput />
                </Animated.View>
            </KeyboardAvoidingView>
        );
    }

where [..] you have other views.

React Native - View, I'm trying to make a layout as per below with React Native. enter image description here. How do I specify the position of B relative to A? With iOS  How to Create Custom Triangle Shape View in React Native admin October 8, 2017 October 8, 2017 React Native Triangle shape view also known as Pyramid View is very important in educational applications, where developer needs to explain all the triangular formulas.

@jazzdle example works great! Thank you for that! Just one addition - in keyboardWillShow method, one can add event.endCoordinates.height so paddingBottom is exact height as keyboard.

    keyboardWillShow = (event) => {
    Animated.timing(this.paddingInput, {
        duration: event.duration,
        toValue: event.endCoordinates.height,
    }).start();
}

In React Native, how do I put a view on top of another view, with part , React Native uses Yoga to achieve Flexbox style layout, which helps us set up </View> ) } }const styles = StyleSheet.create({ container: { flex: 1, alignItems:  All dimensions in React Native are unitless, and represent density-independent pixels.

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

  render() {
    return (
      <View style={styles.container}>
        <View style={styles.top}/>
        <View style={styles.bottom}>
          <View style={styles.input}>
            <TextInput/>
          </View>
        </View>
      </View>
    );
  }

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

Position element at the bottom of the screen using Flexbox in React , Our Scripbox mobile app is completely re-written with React Native to support both Android and iOS. When we started building our app, we had to hand-roll  You can use react-native-view-overflow plugin for placing a view on top of another. It works like the CSS z-index property. It works like the CSS z-index property.

How to hide a <View> component in React Native, Each view's flexDirection is set to colum by default but setting it to 'row' will change Mastering these simple Flexbox recipes will make you a React Native UI  Android Fragment is the part of the activity, it is also known as sub-activity. There can be more than one fragment in an activity. Fragments represent multiple screens inside one activity. There is nothing like a Fragment Component in React Native to make a view like the Android Fragment for Android and IOS.

Understanding Flexbox in React Native, Flexbox layout's only available for use on View components. You've already seen Flexbox used in many of the examples. It makes laying out  By default, React Native lays out with LTR layout direction. In this mode start refers to left and end refers to right. LTR (default value) Text and children are laid out from left to right. Margin and padding applied to the start of an element are applied on the left side.

In-Depth Styling with React Native and Flexbox, Various ways to do this - flex: 1 on a view whose container does not react-​native-bot added the Resolution: Locked label on Jul 21, 2018. formSheet covers narrow-width view centered (only on larger devices) overFullScreen covers the screen completely, but allows transparency Default is set to overFullScreen or fullScreen depending on transparent property.

Comments
  • it is possible use position:absolute and bottom:0 if your app is not full screen
  • I am happy to hear that :)
  • Can confirm, this is a really slick solution. Thanks for taking the time to post this!
  • Thanks for this! Just an FYI to others building for Android, there are some restrictions to using keyboardWillShow vs keyboardDidShow. If you are building for Android, be sure to be aware of them: facebook.github.io/react-native/docs/keyboard
  • If you do that you have to remove behavior='padding' from the KeyboardAvoidingView
  • It is not required to use KeyboardAvoidingView. You can have a view that is position absolutely and just modify/animate its bottom value.