Crash when focusing on an input

[bmorales-broditec]

Describe the bug
I'm using KeyboardProvider and KeyboardToolbar to wrap screens that use inputs, when focusing on an input my application crashes and closes. This error happens often, but not always.

Monosnap.screencast.2024-12-18.10-26-10.mp4

Code snippet

import React from 'react';

import {KeyboardProvider, KeyboardToolbar} from 'react-native-keyboard-controller';

import {KeyboardHandlerProps} from './keyboard-handler.interface';
import {useTranslation} from '@/shared/locales';

export const KeyboardHandler = ({children, showNavigation = false}: KeyboardHandlerProps) => {
  const {getLocalizedText} = useTranslation();

  return (
    <KeyboardProvider>
      {children}
      <KeyboardToolbar doneText={getLocalizedText('done')} showArrows={showNavigation} />
    </KeyboardProvider>
  );
};

Example:

    <KeyboardHandler showNavigation>
      <SafeAreaContainer contentContainerStyle={styles.container} edges={['top']}>
        <View style={styles.content}>
          <Typography color="purpleMain" style={styles.title} variant="xxlBold">
            {getLocalizedText('changeYourPassword')}
          </Typography>
          <Typography color="grayDark" style={styles.description} variant="mRegular">
            {getLocalizedText('secureYourAccountWithANewPassword')}
          </Typography>

          <Controller
            control={control}
            name="password"
            render={({field: {onChange, onBlur, value}}) => (
              <View style={styles.changeTemporalPasswordFieldContainer}>
                <PasswordField
                  containerStyle={styles.changeTemporalPasswordField}
                  error={!!errors?.password}
                  helperText={errors?.password?.message}
                  label={getLocalizedText('password')}
                  maxLength={50}
                  placeholder={getLocalizedText('password')}
                  required
                  showStrongPasswordIndicators
                  value={value}
                  onBlur={onBlur}
                  onChangeText={onChange}
                />
              </View>
            )}
            rules={{
              validate: {
                required: v => requiredValidation(v) || getLocalizedText('requiredField'),
                isValidPassword: v => isValidPassword(v),
              },
            }}
          />
          <Button fullWidth onPress={handleSubmit(onUpdatePassword)}>
            {getLocalizedText('updatePassword')}
          </Button>
        </View>

        <Button fontColor="purpleMain" fullWidth variant="text" onPress={handleSignOut}>
          {getLocalizedText('signOut')}
        </Button>

        <ConfirmModal
          title="areYouSureYouWantToSignOut"
          visible={showSignOutConfirmationModal}
          onCancel={handleCancelSignOut}
          onConfirm={signOut}
        />
      </SafeAreaContainer>
    </KeyboardHandler>

Expected behavior
When typing in an input the application should show the keyboard with the option to close the keyboard and the actions to be able to move between inputs (The latter is not really necessary but would improve the experience).

Monosnap.screencast.2024-12-18.10-28-09.mp4

Smartphone (please complete the following information):

• Device: OnePlus AC2003
• OS: Android 12
• RN version: 0.76.5
• RN architecture: new
• JS engine: Hermes
• Library version: ^1.15.0

Additional context
#735

[kirillzyusko]

Hello @bmorales-broditec

Would it be possible to provide a minimal reproduction example?

I understand the problem and I have a workaround, but it'll just fix a crash (not the root problem what caused this crash) 😔

[kirillzyusko]

I merged a fix - at least it should prevent a crash (but may lead to unexpected/inconsistent UI state: #740 (comment)

Let me know if you encounter any further issues. If you can prepare a reproduction example that would be a dope, since we can manage to discover a root problem and provide a fix 🤞

[bmorales-broditec]

I merged a fix - at least it should prevent a crash (but may lead to unexpected/inconsistent UI state: #740 (comment)

Let me know if you encounter any further issues. If you can prepare a reproduction example that would be a dope, since we can manage to discover a root problem and provide a fix 🤞

Thank you very much, I'm going to try the new release because I couldn't replicate the issue in another project.

[kirillzyusko]

Thank you very much, I'm going to try the new release because I couldn't replicate the issue in another project.

Yes, it seems like it can happen only in heavy apps, so simple reproduction might not be able to show the problem 🤷‍♂️

Anyway, let me know how it's going - whether a new fix resolves the problem or you can spot UI issues 👀