Title Image

March 05, 2021

Hola. 👋🏾

Allowing your mobile app to maintain a positive user experience when a user sets their phone to use a larger font size can be tricky. The content that used to fit neatly on their screen, may now flow off screen. If your app isn't set up properly, that may now mean that the user can't see some of the content you'd like them to see.

The way I fixed this problem was by making a custom component using a KeyboardAvoidingView and ScrollView. This component then wraps your root screen so that all of its capabilities can be passed down.

1import React from 'react'
2import { KeyboardAvoidingView, ScrollView, Text } from 'react-native'
3const KAV_BEHAVIOR = 'padding'
4const KAV_OFFSET = 40
5const KAV_STYLE = { flex: 1 }
6const SV_INSET = { bottom: 50 }
7
8const KeyboardAvoidingWrapper = ({ behavior, contentInset, keyboardVerticalOffset, style }, props) => (
9 <KeyboardAvoidingView
10 behavior={behavior || KAV_BEHAVIOR}
11 keyboardVerticalOffset={keyboardVerticalOffset || KAV_OFFSET}
12 style={style || KAV_STYLE}
13 {...props}
14 >
15 <ScrollView contentInset={SV_INSET}>
16 {children}
17 </ScrollView>
18 </KeyboardAvoidingView>
19)
20
21const App = () => (
22 <KeyboardAvoidingWrapper>
23 <Text>
24 {`This is my app!`}
25 </Text>
26 </KeyboardAvoidingWrapper>
27)
28
29export default App

See you next time. 🙃