Skip to content

Instantly share code, notes, and snippets.

@phuochau
Last active May 9, 2020 02:57
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save phuochau/2c6b8f4982dc30c3b3f034f482199df2 to your computer and use it in GitHub Desktop.
Save phuochau/2c6b8f4982dc30c3b3f034f482199df2 to your computer and use it in GitHub Desktop.
Fix Keyboard Avoiding issue on Expo
import React from 'react'
import { View, ScrollView, KeyboardAvoidingView, Platform, StyleSheet } from "react-native";
import { KeyboardAwareScrollView } from "react-native-keyboard-aware-scroll-view";
import { getStatusBarHeight, getSafeBottomHeight } from "~/Utils";
const styles = StyleSheet.create({
safeContainer: {
flex: 1,
backgroundColor: Colors.background,
paddingTop: getStatusBarHeight(true),
paddingBottom: getSafeBottomHeight(),
paddingHorizontal: Metrics.space
},
scrollContainer: {
flex: 1,
backgroundColor: Colors.background
},
androidSafeScrollContainer: {
backgroundColor: Colors.background,
paddingTop: getStatusBarHeight(true),
paddingBottom: getSafeBottomHeight(),
minHeight: "100%"
},
avoidingView: {
paddingHorizontal: Metrics.space,
minHeight: "100%"
}
});
export const SafeScrollKeyboardContainer = props => {
const { children, style, contentContainerStyle, ...others } = props;
if (Platform.OS === "android") {
return (
<ScrollView
keyboardShouldPersistTaps="always"
{...others}
style={[styles.scrollContainer, style]}
contentContainerStyle={[
styles.androidSafeScrollContainer,
contentContainerStyle
]}
>
<KeyboardAvoidingView behavior={null} style={styles.avoidingView}>
{children}
</KeyboardAvoidingView>
</ScrollView>
);
}
return (
<KeyboardAwareScrollView
keyboardShouldPersistTaps="always"
{...others}
style={[styles.scrollContainer, style]}
contentContainerStyle={[styles.safeContainer, contentContainerStyle]}
>
{children}
</KeyboardAwareScrollView>
);
};
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment