Using exceljs in my React Native application causes the app to get stuck at the splash screen when initializing a hook from React Query #2889

amtw123456 · 2025-02-18T10:04:18Z

amtw123456
Feb 18, 2025

I need to create a a way for our Mobile Application made with React-Native to generate excel files and I already have a function that will let me generate a .xlsx file using the library of exceljs. Initially this function works as intended and I was able to generate the .xlsx file. However when introducing an initialization of a Hook from React Query my mobile application gets stuck at the splash screen or sometimes prompt a blank screen. There is no error log coming from the terminal. Basically, No errors are showing since I'm getting a succesfull build.

This is a sample code for generating a .xlsx file.

import * as exceljs from 'exceljs'

export const generateExcelTaxReport = async (
    companyInformation: CompanyInformation
) => {
    const workbook = new exceljs.Workbook()
    const worksheet = workbook.addWorksheet('Sheet1')

        """Code for Generating Excel"""

}

This is a sample React Query Hook for a specific api call that will be used for initialization of a hook.

import { API_ROUTES, API_VERSION } from '@/constants/api'
import { useBanner } from '@/contexts/BannerContext'
import { createGenericMutation } from '@/hooks/createGenericMutation'
import { CreateOrderDTO, Order } from '@/types/order'

export const useCreateOrder = () => {
    const { setBanner } = useBanner()

    return createGenericMutation<Order, CreateOrderDTO>({
        resourceName: 'orders',
        endpoint: `/${API_VERSION}/${API_ROUTES.ORDERS}`,

        onSuccess: (e) => {
            console.log('create order', e)
        },

        onError: (error) => {
            console.error('Failed to create order:', error.response)
            setBanner({
                bannerContent: 'Error creating order'
            })
        }
    })()
}

This is the base generic mutation hook where the react query hooks used are based from.

import { ApiError } from '@/types/api'
import {
    protectedAxiosInstance,
    unprotectedAxiosInstance
} from '@/utils/axios-instances'
import { useMutation, useQueryClient } from '@tanstack/react-query'
import { AxiosError } from 'axios'

type HttpMethod = 'POST' | 'PUT' | 'PATCH' | 'DELETE'

type MutationConfig<TData, TVariables> = {
    resourceName: string
    endpoint: string
    method?: HttpMethod
    useUnprotectedAxios?: boolean
    onMutate?: (variables: TVariables) => Promise<TVariables> | unknown
    beforeMutation?: (variables: TVariables) => Promise<TVariables>
    onSuccess?: (data: TData) => void
    onError?: (error: AxiosError<ApiError>) => void
    invalidateQueries?: string[]
    successMessage?: string
}

export const createGenericMutation = <TData, TVariables>(
    config: MutationConfig<TData, TVariables>
) => {
    return () => {
        const queryClient = useQueryClient()
        const method = config.method || 'POST'

        const axiosInstance = config.useUnprotectedAxios
            ? unprotectedAxiosInstance
            : protectedAxiosInstance

        return useMutation<TData, AxiosError<ApiError>, TVariables>({
            mutationFn: async (variables) => {
                // Run any pre-mutation operations (like image upload)
                const finalData = config.beforeMutation
                    ? await config.beforeMutation(variables)
                    : variables

                const { data } = await axiosInstance.request<Promise<TData>>({
                    method,
                    url: config.endpoint,
                    data: finalData
                })

                return data
            },
            onMutate: async (variables) => {
                return config.onMutate
                    ? await config.onMutate(variables)
                    : undefined
            },
            onSuccess: (data) => {
                if (config.invalidateQueries) {
                    config.invalidateQueries.forEach((query) =>
                        queryClient.invalidateQueries({ queryKey: [query] })
                    )
                }

                config.onSuccess?.(data)
            },
            onError: (error) => {
                config.onError?.(error)
            }
        })
    }
}

I'm guessing the main cause of the error is the exceljs package because when I remove code using it. The React-Native app works as intended. But as much as possible I dont want to use another package for generating excel reports. It can also be that my problem is unrelated to React Query. If you have any insights or possible solutions please tell me as I've been stuck with this problem for days.

What I have tried was create a package where the excel file will be generated - Did not work.
I have already tried downgrading the exceljs version upto 3.0.0 and React Query version to 4.6.2 - Did not work.
Removing an initailization of a React Query Hook from a specific page allows me to generate excel files but those hooks are needed so this is not an option.

Update: Was finally able to display an error. The error came from android studios log cat but I'm not sure where to go from here.

2025-02-18 19:36:07.455 6426-6426 unknown:co...agerHelper pos.kulay.pos            
E Unhandled SoftException com.facebook.react.bridge.ReactNoCrashSoftException: Cannot get UIManager because the context doesn't contain an active CatalystInstance.

at com.facebook.react.uimanager.UIManagerHelper.getUIManager(UIManagerHelper.java:76)
at com.facebook.react.uimanager.UIManagerHelper.getEventDispatcher(UIManagerHelper.java:127)
at com.facebook.react.uimanager.UIManagerHelper.getEventDispatcherForReactTag(UIManagerHelper.java:105)
at com.swmansion.rnscreens.ScreenStackHeaderConfig.onDetachedFromWindow(ScreenStackHeaderConfig.kt:98)
at android.view.View.dispatchDetachedFromWindow(View.java:21417)
at android.view.ViewGroup.dispatchDetachedFromWindow(ViewGroup.java:3957)
at android.view.ViewGroup.dispatchDetachedFromWindow(ViewGroup.java:3949)
at android.view.ViewGroup.dispatchDetachedFromWindow(ViewGroup.java:3949)
at android.view.ViewGroup.removeViewInternal(ViewGroup.java:5573)
at android.view.ViewGroup.removeViewInternal(ViewGroup.java:5544)
at android.view.ViewGroup.removeView(ViewGroup.java:5475)
at com.swmansion.rnscreens.ScreenContainer.removeView(ScreenContainer.kt:62)
at com.swmansion.rnscreens.ScreenStack.removeView(ScreenStack.kt:271)
at androidx.fragment.app.SpecialEffectsController$Operation$State.applyState(SpecialEffectsController.java:452)
at androidx.fragment.app.SpecialEffectsController$1.run(SpecialEffectsController.java:211)
at androidx.fragment.app.SpecialEffectsController$Operation.complete(SpecialEffectsController.java:695)
at androidx.fragment.app.SpecialEffectsController$FragmentStateManagerOperation.complete(SpecialEffectsController.java:744)
at androidx.fragment.app.SpecialEffectsController$Operation.cancel(SpecialEffectsController.java:597)
at androidx.fragment.app.SpecialEffectsController.forceCompleteAllOperations(SpecialEffectsController.java:332)
at androidx.fragment.app.FragmentManager.dispatchStateChange(FragmentManager.java:3132)
at androidx.fragment.app.FragmentManager.dispatchDestroy(FragmentManager.java:3107)
at androidx.fragment.app.FragmentController.dispatchDestroy(FragmentController.java:334)
at androidx.fragment.app.FragmentActivity.onDestroy(FragmentActivity.java:330)
at androidx.appcompat.app.AppCompatActivity.onDestroy(AppCompatActivity.java:283)
at com.facebook.react.ReactActivity.onDestroy(ReactActivity.java:64)
at android.app.Activity.performDestroy(Activity.java:8599)
at android.app.Instrumentation.callActivityOnDestroy(Instrumentation.java:1452)
at android.app.ActivityThread.performDestroyActivity(ActivityThread.java:5412)
at android.app.ActivityThread.handleDestroyActivity(ActivityThread.java:5458)
at android.app.servertransaction.DestroyActivityItem.execute(DestroyActivityItem.java:47)
at android.app.servertransaction.ActivityTransactionItem.execute(ActivityTransactionItem.java:45)
at android.app.servertransaction.TransactionExecutor.executeLifecycleState(TransactionExecutor.java:179)
at android.app.servertransaction.TransactionExecutor.execute(TransactionExecutor.java:97)
at android.app.ActivityThread$H.handleMessage(ActivityThread.java:2307)
at android.os.Handler.dispatchMessage(Handler.java:106)
at android.os.Looper.loopOnce(Looper.java:201)
at android.os.Looper.loop(Looper.java:288)
at android.app.ActivityThread.main(ActivityThread.java:7924)
at java.lang.reflect.Method.invoke(Native Method)
at com.android.internal.os.RuntimeInit$MethodAndArgsCaller.run(RuntimeInit.java:548)
at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:936)

2025-02-18 19:36:07.456 6426-6426 unknown:co...agerHelper pos.kulay.pos            
E Unhandled SoftException com.facebook.react.bridge.ReactNoCrashSoftException: Cannot get UIManager because the context doesn't contain an active CatalystInstance.

at com.facebook.react.uimanager.UIManagerHelper.getUIManager(UIManagerHelper.java:76)
at com.facebook.react.uimanager.UIManagerHelper.getUIManager(UIManagerHelper.java:46)
at com.facebook.react.animated.NativeAnimatedNodesManager.handleEvent(NativeAnimatedNodesManager.java:593)
at com.facebook.react.animated.NativeAnimatedNodesManager.onEventDispatch(NativeAnimatedNodesManager.java:571)
at com.facebook.react.uimanager.events.EventDispatcherImpl.dispatchEvent(EventDispatcherImpl.java:119)
at com.swmansion.rnscreens.ScreenStackHeaderConfig.onDetachedFromWindow(ScreenStackHeaderConfig.kt:99)
at android.view.View.dispatchDetachedFromWindow(View.java:21417)
at android.view.ViewGroup.dispatchDetachedFromWindow(ViewGroup.java:3957)
at android.view.ViewGroup.dispatchDetachedFromWindow(ViewGroup.java:3949)
at android.view.ViewGroup.dispatchDetachedFromWindow(ViewGroup.java:3949)
at android.view.ViewGroup.removeViewInternal(ViewGroup.java:5573)
at android.view.ViewGroup.removeViewInternal(ViewGroup.java:5544)
at android.view.ViewGroup.removeView(ViewGroup.java:5475)
at com.swmansion.rnscreens.ScreenContainer.removeView(ScreenContainer.kt:62)
at com.swmansion.rnscreens.ScreenStack.removeView(ScreenStack.kt:271)
at androidx.fragment.app.SpecialEffectsController$Operation$State.applyState(SpecialEffectsController.java:452)
at androidx.fragment.app.SpecialEffectsController$1.run(SpecialEffectsController.java:211)
at androidx.fragment.app.SpecialEffectsController$Operation.complete(SpecialEffectsController.java:695)
at androidx.fragment.app.SpecialEffectsController$FragmentStateManagerOperation.complete(SpecialEffectsController.java:744)
at androidx.fragment.app.SpecialEffectsController$Operation.cancel(SpecialEffectsController.java:597)
at androidx.fragment.app.SpecialEffectsController.forceCompleteAllOperations(SpecialEffectsController.java:332)
at androidx.fragment.app.FragmentManager.dispatchStateChange(FragmentManager.java:3132)
at androidx.fragment.app.FragmentManager.dispatchDestroy(FragmentManager.java:3107)
at androidx.fragment.app.FragmentController.dispatchDestroy(FragmentController.java:334)
at androidx.fragment.app.FragmentActivity.onDestroy(FragmentActivity.java:330)
at androidx.appcompat.app.AppCompatActivity.onDestroy(AppCompatActivity.java:283)
at com.facebook.react.ReactActivity.onDestroy(ReactActivity.java:64)
at android.app.Activity.performDestroy(Activity.java:8599)
at android.app.Instrumentation.callActivityOnDestroy(Instrumentation.java:1452)
at android.app.ActivityThread.performDestroyActivity(ActivityThread.java:5412)
at android.app.ActivityThread.handleDestroyActivity(ActivityThread.java:5458)
at android.app.servertransaction.DestroyActivityItem.execute(DestroyActivityItem.java:47)
at android.app.servertransaction.ActivityTransactionItem.execute(ActivityTransactionItem.java:45)
at android.app.servertransaction.TransactionExecutor.executeLifecycleState(TransactionExecutor.java:179)
at android.app.servertransaction.TransactionExecutor.execute(TransactionExecutor.java:97)
at android.app.ActivityThread$H.handleMessage(ActivityThread.java:2307)
at android.os.Handler.dispatchMessage(Handler.java:106)
at android.os.Looper.loopOnce(Looper.java:201)
at android.os.Looper.loop(Looper.java:288)
at android.app.ActivityThread.main(ActivityThread.java:7924)
at java.lang.reflect.Method.invoke(Native Method)
at com.android.internal.os.RuntimeInit$MethodAndArgsCaller.run(RuntimeInit.java:548)
at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:936)

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Using exceljs in my React Native application causes the app to get stuck at the splash screen when initializing a hook from React Query #2889

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{editor}}'s edit

{{editor}}'s edit

Uh oh!

Replies: 0 comments

Select a reply

Uh oh!

Using exceljs in my React Native application causes the app to get stuck at the splash screen when initializing a hook from React Query #2889

Uh oh!

Uh oh!

amtw123456 Feb 18, 2025

Replies: 0 comments

amtw123456
Feb 18, 2025