search

stripe / stripe-react-native

React Native library for Stripe.
https://stripe.dev/stripe-react-native
MIT License
1.26k stars 263 forks source link

I am using cardFeild component in a modal which crashes my app #1584

Open divyanshkumarsharma opened 9 months ago

divyanshkumarsharma commented 9 months ago

This is the code for modal in which we have used cardFeild and when this modal opens my app crashes I am not getting the issue please check ???? <Modal animationType="slide" transparent={true} visible={modalVisible} onRequestClose={() => { setModalVisible(false); }}

                <View style={styles.loaderContainer}>
                    <ActivityIndicator
                        animating={loading}
                        color={'gray'}
                        size="large"
                        style={{
                            alignItems: 'center',
                            height: 80,
                        }}
                    />
                </View>

                <View style={styles.inputCont}>
                    <FormInput placeholder={'Name on Card'} value={name} onChangeText={text => changeTextFieldvalueWithValidation(text, setName)} />
                </View>

                <View style={{ borderWidth: 1, borderColor: '#dadae8', borderRadius: scale(5), marginBottom: 10, padding: moderateScale(1) }}>
                    <CardField
                        postalCodeEnabled={isPostalCodeEnabled}
                        countryCode={countryCode}
                        placeholders={{
                            number: '4242 4242 4242 4242',
                        }}
                        cardStyle={{
                            backgroundColor: '#FFFFFF',
                            textColor: '#000000',
                        }}
                        style={{
                            width: 280,
                            height: moderateScale(40),

                        }}
                        onCardChange={(cardDetails) => {
                            console.log('card details', cardDetails);
                            fetchCardDetail(cardDetails)
                        }}
                    />
                </View>

                <View style={styles.inputCont}>
                    <FormInput placeholder={'Address'} value={address} onChangeText={text => changeTextFieldvalueWithValidation(text, setAddress)} />
                </View>

                <View style={[styles.inputCont, styles.row]}>
                    <View style={[styles.halfCont, { marginRight: 10 }]}>
                        <DropDownNative options={allCountries} value={country} setValue={(text) => {
                            setCountry(text)
                            setState("")
                        }} placeholder={'Country'} />
                    </View>
                    <View style={styles.halfCont}>
                        {
                            allStates.length ?
                                <DropDownNative options={allStates} value={state} setValue={setState} placeholder={'State'} />
                                :
                                <FormInput placeholder={'State'} value={state} onChangeText={text => changeTextFieldvalueWithValidation(text, setState)} />
                        }
                    </View>
                </View>

                <View style={[styles.inputCont, styles.row]}>
                    <View style={[styles.halfCont, { marginRight: 10 }]}>
                        <FormInput placeholder={'City'} value={city} onChangeText={text => changeTextFieldvalueWithValidation(text, setCity)} />
                    </View>
                    <View style={styles.halfCont}>
                        <FormInput placeholder={'Zipcode'} keyboardType={'numeric'} value={zipCode} onChangeText={text => changeTextFieldvalueWithValidation(text, setZipCode)} onSubmitEditing={() => handleInputChange(zipCode)} onBlur={() => handleInputChange(zipCode)} />
                    </View>
                </View>

                <View
                    style={{
                        flexDirection: 'row',
                        alignItems: 'center',
                        justifyContent: 'space-around',
                        marginTop: moderateVerticalScale(15)
                    }}
                >

                    <View style={[styles.btn, { backgroundColor: brandColor }]}>
                        <TouchableOpacity>
                            <Text
                                onPress={() => {
                                    setLoading(false)
                                    setModalVisible(!modalVisible)
                                    setCardInfo(null)
                                    onCancel();
                                }}
                                style={{ color: '#fff', fontSize: scale(16), }}
                            >
                                Cancel
                            </Text>
                        </TouchableOpacity>
                    </View>
                    <View style={[styles.btn, { backgroundColor: brandColor, opacity: cardInfo && name && address && state && country && city && zipCode ? 1 : 0.7 }]}>
                        <TouchableOpacity
                            disabled={!cardInfo}
                            onPress={() => {
                                if (cardInfo.expiryYear > year) {
                                    dispatch({
                                        type: SET_ALERT, payload: {
                                            setShowAlert: true,
                                            data: {
                                                message: 'Please enter valid expiry year of your card',
                                                showCancelButton: true,
                                                onCancelPressed: () => {
                                                    dispatch({ type: SET_ALERT, payload: { setShowAlert: false } })
                                                },
                                            }
                                        }
                                    }
                                    )
                                } else if (loading == false && cardInfo.complete && name && address && state && country && city && zipCode) {
                                    onDone(cardInfo)
                                }
                            }}>
                            <Text style={{ color: '#fff', fontSize: scale(16) }}>
                                Done
                            </Text>
                        </TouchableOpacity>
                    </View>
                </View>

            </View>
        </View>
    </Modal>

This is my package.json file

{ "name": "MobileApp", "version": "0.0.1", "private": true, "scripts": { "postinstall": "patch-package", "android": "react-native run-android", "ios": "react-native run-ios", "lint": "eslint .", "start": "react-native start", "test": "jest" }, "dependencies": { "@dhairyasharma/react-native-encryption": "^1.0.0", "@epubjs-react-native/core": "^1.3.0", "@epubjs-react-native/file-system": "^1.0.0", "@notifee/react-native": "^7.8.0", "@react-native-async-storage/async-storage": "^1.21.0", "@react-native-clipboard/clipboard": "^1.12.1", "@react-native-community/cli": "^12.2.1", "@react-native-community/cli-platform-android": "^12.2.1", "@react-native-community/netinfo": "^11.2.0", "@react-native-community/progress-bar-android": "^1.0.5", "@react-native-community/progress-view": "^1.4.2", "@react-native-community/push-notification-ios": "^1.11.0", "@react-native-community/slider": "^4.4.4", "@react-native-firebase/app": "^18.7.2", "@react-native-firebase/messaging": "^18.7.2", "@react-navigation/bottom-tabs": "^6.5.11", "@react-navigation/drawer": "^6.6.6", "@react-navigation/native": "^6.1.9", "@react-navigation/stack": "^6.3.20", "@redux-devtools/extension": "^3.3.0", "@stripe/stripe-react-native": "^0.35.0", "axios": "^1.6.2", "date-fns": "^2.30.0", "date-fns-tz": "^2.0.0", "form-data": "^4.0.0", "moment": "^2.29.4", "moment-timezone": "^0.5.43", "native-base": "^3.4.28", "node-html-parser": "^6.1.11", "react": "^18.2.0", "react-native": "^0.73.0", "react-native-add-calendar-event": "^4.2.2", "react-native-awesome-alerts": "^2.0.0", "react-native-blob-util": "^0.19.6", "react-native-bootsplash": "^5.1.3", "react-native-circle-checkbox": "^0.1.6", "react-native-credit-card-input": "^0.4.1", "react-native-device-info": "^10.12.0", "react-native-document-picker": "^9.1.0", "react-native-exit-app": "^2.0.0", "react-native-fast-image": "^8.6.3", "react-native-file-viewer": "^2.1.5", "react-native-fs": "^2.20.0", "react-native-gesture-handler": "^2.14.0", "react-native-google-cast": "^4.6.2", "react-native-iap": "^12.12.0", "react-native-image-crop-picker": "^0.40.2", "react-native-image-slider": "^2.0.3", "react-native-immersive": "^2.0.0", "react-native-keyboard-aware-scroll-view": "^0.9.5", "react-native-linear-gradient": "^2.8.3", "react-native-material-dropdown": "^0.11.1", "react-native-material-menu": "^2.0.0", "react-native-modal": "^13.0.1", "react-native-nodemediaclient": "^0.2.21", "react-native-orientation-locker": "^1.6.0", "react-native-pdf": "^6.7.3", "react-native-permissions": "^4.0.0", "react-native-pip-android": "^1.0.1", "react-native-progress": "^5.0.1", "react-native-purchases": "^7.5.0", "react-native-push-notification": "^8.1.1", "react-native-reanimated": "^3.6.1", "react-native-render-html": "^6.3.4", "react-native-responsive-fontsize": "^0.5.1", "react-native-responsive-screen": "^1.4.2", "react-native-safe-area-context": "^4.8.1", "react-native-screens": "^3.29.0", "react-native-select-dropdown": "^3.4.0", "react-native-share": "^10.0.2", "react-native-size-matters": "^0.4.2", "react-native-snap-carousel": "^3.9.1", "react-native-splash-screen": "^3.3.0", "react-native-sqlite-storage": "^6.0.1", "react-native-status-bar-height": "^2.6.0", "react-native-svg": "^14.1.0", "react-native-svg-transformer": "^1.2.0", "react-native-system-navigation-bar": "^2.6.3", "react-native-uuid": "^2.0.1", "react-native-vast-client": "^2.5.1", "react-native-vector-icons": "^10.0.2", "react-native-version-check": "^3.4.7", "react-native-video": "^5.2.1", "react-native-webview": "^13.6.3", "react-native-xml2js": "^1.0.3", "react-redux": "^9.0.3", "redux-persist": "^6.0.0", "redux-thunk": "^3.1.0", "shorthash": "^0.0.2" }, "devDependencies": { "@babel/core": "^7.20.0", "@babel/preset-env": "^7.20.0", "@babel/runtime": "^7.20.0", "@react-native/babel-preset": "^0.73.18", "@react-native/eslint-config": "^0.73.1", "@react-native/metro-config": "^0.73.2", "@react-native/typescript-config": "^0.73.1", "@types/react": "^18.2.6", "@types/react-test-renderer": "^18.0.0", "babel-jest": "^29.6.3", "eslint": "^8.19.0", "jest": "^29.6.3", "patch-package": "^8.0.0", "prettier": "2.8.8", "react-test-renderer": "18.2.0", "typescript": "5.0.4" }, "engines": { "node": ">=18" } }

I am stuck please help

### Tasks
- [ ] Add a draft title or issue reference here
seanzhang-stripe commented 9 months ago

Hi @divyanshkumarsharma Can you paste the crash stacktrace log here? This doc tells you how to access native logs.

Wasi-Ayub commented 8 months ago
Screenshot 2024-01-09 at 8 19 05 PM

this error facing when using Stripe component inside of react-native-modal

ansh-7980 commented 8 months ago

Hi @divyanshkumarsharma can u please tell me how you made a build on Android , I am unable to make a build with react native 0.73.0 and stripe version 0.35.0 , but working fine on iOS , please help me with this.

ammar-madni commented 7 months ago

@seanzhang-stripe here's the crash stacktrace from android studio:

2024-02-17 11:35:55.861  7815-7815  unknown:ReactModalHost  com.app.my                   E  Updating existing dialog with context: com.app.my.MainActivity@e85f00e@243658766
2024-02-17 11:35:55.864  7815-7815  ScrollView              com.app.my                   D  initGoToTop
2024-02-17 11:35:55.882  7815-7815  unknown:ReactNative     com.app.my                   E  Exception in native call
                                                                                                    java.lang.IllegalStateException: ViewTreeLifecycleOwner not found from android.widget.FrameLayout{e851a2 V.E...... .......D 0,0-1440,2932}
                                                                                                        at androidx.compose.ui.platform.WindowRecomposer_androidKt.createLifecycleAwareWindowRecomposer(WindowRecomposer.android.kt:352)
                                                                                                        at androidx.compose.ui.platform.WindowRecomposer_androidKt.createLifecycleAwareWindowRecomposer$default(WindowRecomposer.android.kt:325)
                                                                                                        at androidx.compose.ui.platform.WindowRecomposerFactory$Companion$LifecycleAware$1.createRecomposer(WindowRecomposer.android.kt:168)
                                                                                                        at androidx.compose.ui.platform.WindowRecomposerPolicy.createAndInstallWindowRecomposer$ui_release(WindowRecomposer.android.kt:224)
                                                                                                        at androidx.compose.ui.platform.WindowRecomposer_androidKt.getWindowRecomposer(WindowRecomposer.android.kt:300)
                                                                                                        at androidx.compose.ui.platform.AbstractComposeView.resolveParentCompositionContext(ComposeView.android.kt:244)
                                                                                                        at androidx.compose.ui.platform.AbstractComposeView.ensureCompositionCreated(ComposeView.android.kt:251)
                                                                                                        at androidx.compose.ui.platform.AbstractComposeView.onAttachedToWindow(ComposeView.android.kt:283)
                                                                                                        at android.view.View.dispatchAttachedToWindow(View.java:23198)
                                                                                                        at android.view.ViewGroup.dispatchAttachedToWindow(ViewGroup.java:3694)
                                                                                                        at android.view.ViewGroup.dispatchAttachedToWindow(ViewGroup.java:3701)
                                                                                                        at android.view.ViewGroup.dispatchAttachedToWindow(ViewGroup.java:3701)
                                                                                                        at android.view.ViewGroup.dispatchAttachedToWindow(ViewGroup.java:3701)
                                                                                                        at android.view.ViewGroup.dispatchAttachedToWindow(ViewGroup.java:3701)
                                                                                                        at android.view.ViewGroup.dispatchAttachedToWindow(ViewGroup.java:3701)
                                                                                                        at android.view.ViewGroup.dispatchAttachedToWindow(ViewGroup.java:3701)
                                                                                                        at android.view.ViewGroup.addViewInner(ViewGroup.java:5548)
                                                                                                        at android.view.ViewGroup.addView(ViewGroup.java:5324)
                                                                                                        at com.facebook.react.views.view.ReactViewGroup.addView(ReactViewGroup.java:514)
                                                                                                        at com.facebook.react.views.modal.ReactModalHostView$DialogRootViewGroup.addView(ReactModalHostView.java:516)
                                                                                                        at android.view.ViewGroup.addView(ViewGroup.java:5264)
                                                                                                        at com.facebook.react.views.modal.ReactModalHostView.addView(ReactModalHostView.java:118)
                                                                                                        at com.facebook.react.uimanager.ViewGroupManager.addView(ViewGroupManager.java:38)
                                                                                                        at com.facebook.react.uimanager.NativeViewHierarchyManager.manageChildren(NativeViewHierarchyManager.java:533)
                                                                                                        at com.swmansion.reanimated.layoutReanimation.ReanimatedNativeHierarchyManager.manageChildren(ReanimatedNativeHierarchyManager.java:300)
                                                                                                        at com.facebook.react.uimanager.UIViewOperationQueue$ManageChildrenOperation.execute(UIViewOperationQueue.java:217)
                                                                                                        at com.facebook.react.uimanager.UIViewOperationQueue$1.run(UIViewOperationQueue.java:926)
                                                                                                        at com.facebook.react.uimanager.UIViewOperationQueue.flushPendingBatches(UIViewOperationQueue.java:1037)
                                                                                                        at com.facebook.react.uimanager.UIViewOperationQueue.-$$Nest$mflushPendingBatches(Unknown Source:0)
                                                                                                        at com.facebook.react.uimanager.UIViewOperationQueue$DispatchUIFrameCallback.doFrameGuarded(UIViewOperationQueue.java:1097)
                                                                                                        at com.facebook.react.uimanager.GuardedFrameCallback.doFrame(GuardedFrameCallback.java:29)
                                                                                                        at com.facebook.react.modules.core.ReactChoreographer$ReactChoreographerDispatcher.doFrame(ReactChoreographer.java:175)
                                                                                                        at com.facebook.react.modules.core.ChoreographerCompat$FrameCallback$1.doFrame(ChoreographerCompat.java:85)
                                                                                                        at android.view.Choreographer$CallbackRecord.run(Choreographer.java:1648)
                                                                                                        at android.view.Choreographer$CallbackRecord.run(Choreographer.java:1659)
                                                                                                        at android.view.Choreographer.doCallbacks(Choreographer.java:1129)
                                                                                                        at android.view.Choreographer.doFrame(Choreographer.java:1045)
                                                                                                        at android.view.Choreographer$FrameDisplayEventReceiver.run(Choreographer.java:1622)
                                                                                                        at android.os.Handler.handleCallback(Handler.java:958)
                                                                                                        at android.os.Handler.dispatchMessage(Handler.java:99)
                                                                                                        at android.os.Looper.loopOnce(Looper.java:230)
                                                                                                        at android.os.Looper.loop(Looper.java:319)
                                                                                                        at android.app.ActivityThread.main(ActivityThread.java:8893)
2024-02-17 11:35:55.882  7815-7815  unknown:ReactNative     com.app.my                   E      at java.lang.reflect.Method.invoke(Native Method)
                                                                                                        at com.android.internal.os.RuntimeInit$MethodAndArgsCaller.run(RuntimeInit.java:608)
                                                                                                        at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:1103)
2024-02-17 11:35:55.886  7815-7815  ViewRootIm...nActivity] com.app.my                   I  registerCallbackForPendingTransactions
2024-02-17 11:35:55.887  7815-8004  ViewRootIm...nActivity] com.app.my                   I  mWNT: t=0xb400006ed077c300 mBlastBufferQueue=0xb400006ecee0f700 fn= 2 caller= android.view.ViewRootImpl$6.onFrameDraw:5539 android.view.ViewRootImpl$2.onFrameDraw:2103 android.view.ThreadedRenderer$1.onFrameDraw:788 
2024-02-17 11:35:55.892  7815-7815  InsetsSourceConsumer    com.app.my                   D  applyRequestedVisibilityToControl: visible=true, type=1
2024-02-17 11:35:55.892  7815-7815  InsetsSourceConsumer    com.app.my                   D  applyRequestedVisibilityToControl: visible=true, type=2
2024-02-17 11:35:55.897  7815-7815  AndroidRuntime          com.app.my                   D  Shutting down VM
2024-02-17 11:35:55.907  7815-7815  AndroidRuntime          com.app.my                   E  FATAL EXCEPTION: main
                                                                                                    Process: com.app.my, PID: 7815
                                                                                                    java.lang.IllegalStateException: ViewTreeLifecycleOwner not found from android.widget.FrameLayout{e851a2 V.E...... ........ 0,0-1440,2932}
                                                                                                        at androidx.compose.ui.platform.WindowRecomposer_androidKt.createLifecycleAwareWindowRecomposer(WindowRecomposer.android.kt:352)
                                                                                                        at androidx.compose.ui.platform.WindowRecomposer_androidKt.createLifecycleAwareWindowRecomposer$default(WindowRecomposer.android.kt:325)
                                                                                                        at androidx.compose.ui.platform.WindowRecomposerFactory$Companion$LifecycleAware$1.createRecomposer(WindowRecomposer.android.kt:168)
                                                                                                        at androidx.compose.ui.platform.WindowRecomposerPolicy.createAndInstallWindowRecomposer$ui_release(WindowRecomposer.android.kt:224)
                                                                                                        at androidx.compose.ui.platform.WindowRecomposer_androidKt.getWindowRecomposer(WindowRecomposer.android.kt:300)
                                                                                                        at androidx.compose.ui.platform.AbstractComposeView.resolveParentCompositionContext(ComposeView.android.kt:244)
                                                                                                        at androidx.compose.ui.platform.AbstractComposeView.ensureCompositionCreated(ComposeView.android.kt:251)
                                                                                                        at androidx.compose.ui.platform.AbstractComposeView.onMeasure(ComposeView.android.kt:288)
                                                                                                        at android.view.View.measure(View.java:28531)
                                                                                                        at android.view.ViewGroup.measureChildWithMargins(ViewGroup.java:7386)
                                                                                                        at android.widget.FrameLayout.onMeasure(FrameLayout.java:194)
                                                                                                        at android.view.View.measure(View.java:28531)
                                                                                                        at android.view.ViewGroup.measureChildWithMargins(ViewGroup.java:7386)
                                                                                                        at android.widget.LinearLayout.measureChildBeforeLayout(LinearLayout.java:1608)
                                                                                                        at android.widget.LinearLayout.measureHorizontal(LinearLayout.java:1240)
                                                                                                        at android.widget.LinearLayout.onMeasure(LinearLayout.java:723)
                                                                                                        at android.view.View.measure(View.java:28531)
                                                                                                        at android.view.ViewGroup.measureChildWithMargins(ViewGroup.java:7386)
                                                                                                        at android.widget.FrameLayout.onMeasure(FrameLayout.java:194)
                                                                                                        at android.view.View.measure(View.java:28531)
                                                                                                        at com.reactnativestripesdk.CardFieldView.mLayoutRunnable$lambda$27(CardFieldView.kt:376)
                                                                                                        at com.reactnativestripesdk.CardFieldView.$r8$lambda$tO4Ku94GLM16x8NhrR7Up5q0VFs(Unknown Source:0)
                                                                                                        at com.reactnativestripesdk.CardFieldView$$ExternalSyntheticLambda2.run(Unknown Source:2)
                                                                                                        at android.os.Handler.handleCallback(Handler.java:958)
                                                                                                        at android.os.Handler.dispatchMessage(Handler.java:99)
                                                                                                        at android.os.Looper.loopOnce(Looper.java:230)
                                                                                                        at android.os.Looper.loop(Looper.java:319)
                                                                                                        at android.app.ActivityThread.main(ActivityThread.java:8893)
                                                                                                        at java.lang.reflect.Method.invoke(Native Method)
                                                                                                        at com.android.internal.os.RuntimeInit$MethodAndArgsCaller.run(RuntimeInit.java:608)
                                                                                                        at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:1103)
2024-02-17 11:35:55.922  7815-7815  Process                 com.app.my                   I  Sending signal. PID: 7815 SIG: 9
---------------------------- PROCESS ENDED (7815) for package com.app.my ----------------------------
magouyaware commented 3 months ago

This bug is likely related to an issue I just filed with Stripe's Android SDK... They changed the Card Brand icon to a Jetpack Compose Compsable view in Android v20.36.0.

See this issue for more details