I need to align a button, which is not at the bottom of the screen by design, to be in the middle of the screen. However, it should align to be on top of the keyboard for all devices.
If you check this screenshot :
For some devices, I managed to achieve this alignment, but on others, it's not perfectly aligned.
how can I manage this to work in all?
this is what I did so far :
<Padding paddingVertical={isKeyboardOpen ? Spacing.unit : Spacing.small}>
<Button
variant="solid"
label='Next'
style={styles.submitBtn}
/>
</Padding>
And isKeyboardOpen is just a method which will create a listner based on the platform return true if keyboard is open :
Keyboard.addListener(
Platform.OS === 'ios' ? 'keyboardWillShow' : 'keyboardDidShow',
true
);
And submitBrn css class is :
submitBtn: {
margin: Spacing.base,
},