does not work with react-native-confirmation-code-field library

[adamshels1]

Feature request

Hello everyone, soft input does not want to work with the react-native-confirmation-code-field library, how can I make it work?

<CodeField ref={ref} {...confirmationCodeProps} value={code} onChangeText={onChangeCode} cellCount={data.CODE_VERIFICATION_LENGTH} keyboardType="number-pad" textContentType="oneTimeCode" renderCell={renderCell} />

[mateusz1913]

hey @adamshels1, could you provide an example repo where you use that library?

[adamshels1]

@mateusz1913
`import React, { FC, useCallback } from 'react';
import { AvoidSoftInput } from 'react-native-avoid-softinput';
import { CodeField, Cursor, useBlurOnFulfill, useClearByFocusCell } from 'react-native-confirmation-code-field';
import { data } from '@constants/index';
import { useKeyboard } from '@react-native-community/hooks';
import { useFocusEffect } from '@react-navigation/native';

const { keyboardHeight } = useKeyboard();

const onFocusEffect = React.useCallback(() => {
	AvoidSoftInput.setShouldMimicIOSBehavior(true);
	AvoidSoftInput.setEnabled(true);
	AvoidSoftInput.setAvoidOffset(keyboardHeight - 100);

	return () => {
		AvoidSoftInput.setAvoidOffset(0);
		AvoidSoftInput.setEnabled(false);
		AvoidSoftInput.setShouldMimicIOSBehavior(false);
	};
}, [keyboardHeight]);

useFocusEffect(onFocusEffect);


const renderContent = useCallback(() => {
	return (
		<Flex paddingHorizontal={32}>
			<CodeField
				ref={ref}
				{...confirmationCodeProps}
				value={code}
				onChangeText={onChangeCode}
				cellCount={data.CODE_VERIFICATION_LENGTH}
				keyboardType="number-pad"
				textContentType="oneTimeCode"
				renderCell={renderCell}
			/>


			<Button
				text="Confirm"
				backgroundColor={StyleGuide.palette.blue}
				onPress={onCompleteTransfer}
				disabled={code?.length !== data.CODE_VERIFICATION_LENGTH}
			/>

			<Spacer height={10} />

			<Button
				text="Cancel"
				variant="tinted"
				borderColor={StyleGuide.palette.grey}
				textColor={StyleGuide.palette.grey}
				onPress={onCancel}
			/>

			<BottomSafeArea />
		</Flex>
	);
}, [
	code,
	confirmTransferViaSMS,
	confirmationCodeProps,
	isAuthenticator,
	loading,
	onCancel,
	onChangeCode,
	onChangeConfirmationSettings,
	onCompleteTransfer,
	onGenerateOTP,
	onResendCode,
	ref,
	renderCell,
	renderText,
]);

return <BottomSheetModalCustom forwardRef={forwardRef} renderContent={renderContent} isScrollView={false} />;

};
`

[adamshels1]

this is not the whole code, it's just for example

[mateusz1913]

@adamshels1 could you provide an example repo (the link so I can clone it) and not some arbitrary snippet of code?

[retyui]

Surprise Surprise...
react-native-confirmation-code-field is my library)

[retyui]

I tried to reproduce an issue in a demo project: (https://github.com/retyui/react-native-avoid-softinput-issues-183/blob/main/Test.tsx)

@adamshels1 can you confirm that it works the same for you

iOS	Android
Screen.Recording.2024-05-31.at.19.09.03.mov	screen-20240531-190033.mp4