Created
July 22, 2023 12:15
-
-
Save bryanltobing/40138ad7fb486d804c46e7631239dee2 to your computer and use it in GitHub Desktop.
React native soft keyboard input repro view being scrolled when it is not needed on android
This file contains 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 { View, TextInput, Text } from 'react-native'; | |
import { verticalScale, horizontalScale, moderateScale } from '@/utils/sizing'; | |
export function Input(props: { placeholder: string; label: string; isNumPad?: boolean }) { | |
return ( | |
<View | |
style={{ | |
backgroundColor: '#F8FAFC', | |
paddingTop: verticalScale(8), | |
paddingHorizontal: horizontalScale(16), | |
borderRadius: moderateScale(12), | |
borderWidth: 1, | |
borderColor: '#F8FAFC', | |
}}> | |
<Text style={{ fontSize: moderateScale(12), color: '#475569' }}>{props.label}</Text> | |
<TextInput | |
placeholder={props.placeholder} | |
placeholderTextColor="#94A3B8" | |
keyboardType={props.isNumPad ? 'number-pad' : undefined} | |
style={{ | |
color: '#475569', | |
paddingTop: verticalScale(2), | |
fontSize: moderateScale(16), | |
paddingBottom: verticalScale(8), | |
}} | |
/> | |
</View> | |
); | |
} |
This file contains 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 { useHeaderHeight } from '@react-navigation/elements'; | |
import { useFocusEffect } from 'expo-router'; | |
import { useCallback } from 'react'; | |
import { ImageBackground, Pressable, ScrollView, Text, View } from 'react-native'; | |
import { AvoidSoftInput } from 'react-native-avoid-softinput'; | |
import { useSafeAreaInsets } from 'react-native-safe-area-context'; | |
import { Input } from '@/components/Input'; | |
import { verticalScale, moderateScale, horizontalScale } from '@/utils/sizing'; | |
export default function Screen() { | |
const headerHeight = useHeaderHeight(); | |
const safeAreaInsets = useSafeAreaInsets(); | |
const onFocusEffect = useCallback(() => { | |
// This should be run when screen gains focus - enable the module where it's needed | |
AvoidSoftInput.setShouldMimicIOSBehavior(true); | |
AvoidSoftInput.setEnabled(true); | |
return () => { | |
// This should be run when screen loses focus - disable the module where it's not needed, to make a cleanup | |
AvoidSoftInput.setEnabled(false); | |
AvoidSoftInput.setShouldMimicIOSBehavior(false); | |
}; | |
}, []); | |
useFocusEffect(onFocusEffect); // register callback to focus events | |
return ( | |
<> | |
<View | |
style={{ paddingTop: headerHeight, flex: 1, backgroundColor: 'black' }}> | |
<Text | |
style={{ | |
color: 'white', | |
paddingTop: verticalScale(8), | |
paddingBottom: verticalScale(18), | |
fontSize: moderateScale(14), | |
textAlign: 'center', | |
}}> | |
Tell us about the occasion. | |
</Text> | |
<View | |
style={{ | |
flex: 1, | |
backgroundColor: 'white', | |
borderTopStartRadius: moderateScale(12), | |
borderTopEndRadius: moderateScale(12), | |
gap: verticalScale(16), | |
}}> | |
<ScrollView | |
contentContainerStyle={{ | |
paddingHorizontal: horizontalScale(16), | |
paddingTop: verticalScale(24), | |
}} | |
bounces={false}> | |
<View style={{ gap: verticalScale(16) }}> | |
<Input placeholder="What's happening?" label="Occasion" /> | |
<Input placeholder="What's happening?" label="Occasion" /> | |
<Input placeholder="What's happening?" label="Occasion" /> | |
<Input placeholder="What's happening?" label="Occasion" /> | |
<Input placeholder="What's happening?" label="Occasion" /> | |
<Input placeholder="What's happening?" label="Occasion" /> | |
<Input placeholder="What's happening?" label="Occasion" /> | |
<Input placeholder="What's happening?" label="Occasion" /> | |
<Input placeholder="What's happening?" label="Occasion" /> | |
<Input placeholder="What's happening?" label="Occasion" /> | |
<Pressable | |
style={{ | |
backgroundColor: '#1A9DC5', | |
paddingHorizontal: horizontalScale(16), | |
height: verticalScale(56), | |
justifyContent: 'center', | |
alignItems: 'center', | |
borderRadius: moderateScale(12), | |
}}> | |
<Text style={{ color: 'white', fontSize: moderateScale(18) }}>Send Code</Text> | |
</Pressable> | |
</View> | |
<View style={{ height: verticalScale(24) + safeAreaInsets.bottom }} /> | |
</ScrollView> | |
</View> | |
</ImageBackground> | |
</> | |
); | |
} |
This file contains 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 { Dimensions } from 'react-native'; | |
const { width, height } = Dimensions.get('window'); | |
const guidelineBaseWidth = 360; | |
const guidelineBaseHeight = 800; | |
/** | |
* @description width, marginLeft, marginRight, marginHorizontal, paddingLeft, paddingRight, paddingHorizontal, likewise | |
*/ | |
const horizontalScale = (size: number) => (width / guidelineBaseWidth) * size; | |
/** | |
* @description height, marginTop, marginBottom, marginVertical, lineHeight, paddingTop, paddingBottom, paddingVertical, likewise | |
*/ | |
const verticalScale = (size: number) => (height / guidelineBaseHeight) * size; | |
/** | |
* @description fontSize, borderRadius, likewise | |
*/ | |
const moderateScale = (size: number, factor = 0.5) => | |
size + (horizontalScale(size) - size) * factor; | |
export { horizontalScale, verticalScale, moderateScale }; |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment