For some reason, anytime I touch anything that isn't a keyboard input, it dismisses the keyboard.

[codymurphyjones]

Is there a way to make it so that when I push a button it does not dismiss the keyboard away?

Is it possible to maybe use the handle keyboard events work around that we do for creating custom inputs and apply that to buttons?

I have a multi step flow in my bottom sheet and I want the bottom sheet to stay open when hitting the "Next" button, but it is dismissing the keyboard, and not registering the button press. It would be fine to dismiss the keyboard if it also accepted the button press but its currently forcing me to touch the button twice.

	(props: EventCreationSheetProps, ref: React.ForwardedRef<BottomSheetModal>) => {
		const { onNext } = props;
		const theme = useTheme();
		const bottomSheetModalRef = useRef<BottomSheetModal>(null);

		const carouselRef = useRef<Carousel<{ id: number; title: string }>>(null);
		const [snapPoints, setSnapPoints] = useState([400]);

		useImperativeHandle(ref, () => bottomSheetModalRef.current as BottomSheetModalMethods);

		function onNextAction() {
			console.log('test', 'test');
			if (carouselRef?.current) {
				carouselRef.current.snapToNext(true);
				onNext && onNext();
			}
		}

		function onBackAction() {
			if (typeof ref === 'function') {
				ref(null);
			} else if (ref?.current) {
				console.log('im dismissing');
				ref.current.dismiss();
			}
		}

		const renderItem = useCallback(
			({ item }) =>
				EventCreationReview({ title: item.title, onNext: onNextAction, onBack: onBackAction }),
			[onNextAction]
		);

		useEffect(() => {
			const keyboardDidHideListener = Keyboard.addListener('keyboardDidHide', () => {
				if (typeof ref === 'function') {
					ref(null);
				} else if (ref?.current) {
					ref.current?.expand();
				}
			});

			return () => {
				keyboardDidHideListener.remove();
			};
		}, []);

		return (
			<BottomSheetModal
				ref={bottomSheetModalRef}
				snapPoints={snapPoints}
				handleIndicatorStyle={{ backgroundColor: theme.text_slate_alt?.val }}
				backgroundStyle={{ backgroundColor: theme.background?.val }}
				handleStyle={{ backgroundColor: theme.background?.val, opacity: 0 }}
				enableContentPanningGesture={false}
				enableHandlePanningGesture={false}
				enableBlurKeyboardOnGesture={false}
			>
				<BottomSheetScrollView
					scrollEnabled={true}
					style={{ backgroundColor: theme.background?.val }}
				>
					<YStack justifyContent="space-between">
						<YStack paddingVertical={20} alignItems="flex-start">
							<H3 color={theme.text_slate_alt} fow="bold">
								Create Event Object
							</H3>
						</YStack>
						<YStack f={1} mb={40}>
							<Carousel
								ref={carouselRef}
								data={dummyData}
								renderItem={renderItem}
								sliderWidth={screenWidth}
								itemWidth={screenWidth}
								layout={'default'}
								vertical={false}
								enableSnap={true}
								scrollEnabled={false}
							/>
						</YStack>
					</YStack>
				</BottomSheetScrollView>
			</BottomSheetModal>```