Last active
July 28, 2021 07:13
-
-
Save louicoder/0954b562c73f20697662c55d2c5af7e1 to your computer and use it in GitHub Desktop.
A sticky View for react native that sticks at the bottom of screen
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import React from 'react'; | |
import { StyleSheet, KeyboardAvoidingView, Platform, NativeModules } from 'react-native'; | |
const { StatusBarManager } = NativeModules; | |
let statusBarHeight = 0; | |
if (Platform.OS === 'ios') { | |
StatusBarManager.getHeight((statusBarFrameData) => { | |
statusBarHeight = statusBarFrameData.height; | |
}); | |
} | |
// Could be nav bar height? | |
// Magic number but is necessary to work properly | |
const IOS_OFFSET = 44; | |
const getVerticalOffset = () => | |
Platform.select({ | |
ios: statusBarHeight + IOS_OFFSET, | |
android: 0 | |
}); | |
const KeyboardStickyView = ({ style, children, ...other }) => ( | |
<KeyboardAvoidingView | |
style={[ styles.container, style ]} | |
behavior={Platform.OS === 'ios' ? 'padding' : 'height'} | |
keyboardVerticalOffset={getVerticalOffset()} | |
{...other} // can receive other view props | |
> | |
{children} | |
</KeyboardAvoidingView> | |
); | |
const styles = StyleSheet.create({ | |
container: { | |
position: 'absolute', | |
bottom: 0, | |
width: '100%', | |
alignItems: 'center' | |
} | |
}); | |
export default KeyboardStickyView; |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment