React Native Align button on top of keyboard for all devices

Question

So I need to align a button Which is not at bottom om screen by design should be at middle of screen but it should align to be on top of the keyboard for all de

Answer 1

First import this packages

import {
  Button,
  ScrollView,
  KeyboardAvoidingView,
  TextInput,
} from 'react-native';

Render method

<KeyboardAvoidingView
  behavior={'padding'}
  style={styles.container}>
  <ScrollView style={styles.scrollView}>
    <TextInput style={styles.input} placeholder="Tap here" />
  </ScrollView>
  <Button title="Next" />
</KeyboardAvoidingView>

This are the styles

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  scrollView: {
    paddingHorizontal: 20,
  },
  input: {
    marginBottom: 20,
    borderBottomWidth: 2,
    borderColor: '#dbdbdb',
    padding: 10,
  },
});

Make sure the button is outside the scrollview.

NOTE: You may need to adjust the offset prop of KeyboardAvoidingView if the keyboard has got autocomplete enabled.

Stick button at the bottom of the screen demo

Answer 2

YOu can use react native modal

 <KeyboardAvoidingView
    keyboardVerticalOffset={Platform.OS == "ios" ? 10 : 0}
    behavior={Platform.OS == "ios" ? "padding" : "height"} style={{ flex: 1         }} >
    <Modal>

       <ScrollView>  
      <Content><-------Your content------></Content>
       </ScrollView>  

      <BottomButton   />
    </Modal>
  </KeyboardAvoidingView>