stripe-react-native icon indicating copy to clipboard operation
stripe-react-native copied to clipboard

CardField followed by TextInput makes app crash on Android pressing enter

Open skogby opened this issue 8 months ago • 1 comments
trafficstars

Describe the bug CardField makes app crash on Android when there is a TextInput on the same screen and user presses enter.

To Reproduce Steps to reproduce the behavior:

  1. Start app with CardField and TextInput
  2. Enter any number in CardField like 42
  3. Press enter on hardware or custom keyboard
  4. See error

Expected behavior The app not to crash

Code

import { CardField } from '@stripe/stripe-react-native';
import React, { Component } from 'react';
import { TextInput, View } from 'react-native';

export interface RootProps {}
interface RootState {}

class Root extends Component<RootProps, RootState> {
  render() {
    return (
      <View style={{ flex: 1, marginVertical: 100 }}>
        <CardField
          style={{
            height: 56,
            marginHorizontal: 0,
          }}
        />
        <TextInput placeholder="Nickname" />
      </View>
    );
  }
}
export default Root;

Smartphone (please complete the following information):

  • Device: Pixel 8
  • OS: Android API 34
  • Version stripe-react-native 0.41.0 && 0.42.0
  • ReactNative: 0.76.1

Additional context Default on-screen keyboard does not have any enter button, but using a hardware keyboard or custom keyboard it has a enter button.

If I add the following code between CardField and TextInput, it does not crash: <Pressable onPress={() => {}}><Text> </Text></Pressable>

This is the error I see in logcat:

Exception java.lang.IllegalStateException: focus search returned a view that wasn't able to take focus!
  at android.widget.TextView.onKeyUp (TextView.java:9646)
  at android.view.KeyEvent.dispatch (KeyEvent.java:2952)
  at android.view.View.dispatchKeyEvent (View.java:15591)

skogby avatar Mar 05 '25 09:03 skogby