When I run the app with expo and use my DateFormInput component the Keyboard covers TextInput. I tried to use I , "@pietile-native-kit/keyboard-aware-scrollview", "@types/react-native-keyboard-spacer", "react-native-keyboard-aware-scroll-view" and "react-native-keyboard-spacer", but none of them worked on either IOS or Android.
Here is the component I where I render my TextInput (DateFormInput):
import React from 'react';import { Text, StyleSheet, View, KeyboardAvoidingView, ScrollView,} from 'react-native';import Box from './Box';import Button from './Button';import DateFormInput from './DateFormInput';import { isValidDate } from '../util';import strings from '../strings';interface Props { handleSubmit: (formName: string) => void; handleOnChange: (formName: string, input: string) => void; handleCancelButton: (formName: string) => void; toggleInputError: (formName: string, clear?: boolean) => void; inputFormText: string; inputError: boolean; formName: string;}export const DDCAndDTNInputForm: React.FC<Props> = (props: Props) => { return (<Box style={styles.box}><Text> {props.formName === 'DrugTest' ? strings.DrugTestDate : strings.DDCDate}</Text><View style={{ flex: 1 }}><KeyboardAvoidingView behavior="padding" style={styles.box}><ScrollView style={{ flex: 1 }}><DateFormInput type={'datetime'} options={{ format: 'MM/DD/YYYY' }} placeholder={'MM/DD/YYYY'} value={props.inputFormText} error={props.inputError} onChangeText={text => props.handleOnChange(props.formName, text)} onBlur={e => { isValidDate(props.inputFormText) ? props.handleSubmit(props.formName) : props.toggleInputError(props.formName, true); }} /></ScrollView></KeyboardAvoidingView></View><Text style={{ color: 'red' }}> {props.inputError ? 'Type a valid date' : null}</Text><View style={{ flexDirection: 'row', justifyContent: 'space-around', }}><Button viewStyle={styles.linkButton} title={'CANCEL'} onPress={() => { props.handleCancelButton(props.formName); }} /><Button viewStyle={styles.linkButton} title={'SAVE DATE'} onPress={() => { isValidDate(props.inputFormText) ? props.handleSubmit(props.formName) : props.toggleInputError(props.formName, true); }} /></View></Box> );};export default DDCAndDTNInputForm;const styles = StyleSheet.create({ linkButton: { paddingVertical: 8, paddingHorizontal: 16, marginVertical: 8, flex: 1, }, box: { padding: 24, marginBottom: 16, flex: 1, },});This is my custom InputText (DateFormInput):
import React from 'react';import { Text, StyleProp, TextStyle, StyleSheet, KeyboardType, View, NativeSyntheticEvent, TextInputFocusEventData,} from 'react-native';import { TextInputMask } from 'react-native-masked-text';import { textStyle, colors } from '../styles';const styles = StyleSheet.create({ input: { marginVertical: 8, padding: 16, borderWidth: 2, borderColor: colors.sectionBackground, borderRadius: 8, backgroundColor: colors.white, },});export default (props: { label: string; value: string; labelStyle: StyleProp<TextStyle>; keyboardType?: KeyboardType; onChangeText: (text: string) => void; onBlur?: (e: NativeSyntheticEvent<TextInputFocusEventData>) => void; error?: boolean; defaultValue?: string;}) => (<View style={{ flexDirection: 'column', alignContent: 'stretch' }}><Text style={[textStyle.formLabel, props.labelStyle]}>{props.label}</Text><TextInputMask type={'datetime'} options={{ format: 'MM/DD/YYYY' }} placeholder={'MM/DD/YYYY'} style={[styles.input, props.error ? { borderColor: colors.red } : null]} value={props.value} onChangeText={props.onChangeText} onBlur={props.onBlur} /></View>);