diff --git a/packages/uniwind/src/components/native/useStyle.ts b/packages/uniwind/src/components/native/useStyle.ts index d7b8e866..b7d1aafc 100644 --- a/packages/uniwind/src/components/native/useStyle.ts +++ b/packages/uniwind/src/components/native/useStyle.ts @@ -10,10 +10,17 @@ export const useStyle = (className: string | undefined, componentProps: Record ({}), {}) const styleState = UniwindStore.getStyles(className, componentProps, state, uniwindContext) + const renderedSnapshot = UniwindListener.getSnapshot(styleState.dependencies) + useLayoutEffect(() => { if (__DEV__ || styleState.dependencies.length > 0) { const dispose = UniwindListener.subscribe(rerender, styleState.dependencies) + // Activity and Suspense can reconnect effects without rendering. + if (renderedSnapshot !== UniwindListener.getSnapshot(styleState.dependencies)) { + rerender() + } + return dispose } }, [styleState.dependencySum]) diff --git a/packages/uniwind/tests/native/components/activity-reconnection.test.tsx b/packages/uniwind/tests/native/components/activity-reconnection.test.tsx new file mode 100644 index 00000000..420f169b --- /dev/null +++ b/packages/uniwind/tests/native/components/activity-reconnection.test.tsx @@ -0,0 +1,56 @@ +import { act } from '@testing-library/react-native' +import * as React from 'react' +import View from '../../../src/components/native/View' +import { Uniwind } from '../../../src/core' +import { renderUniwind } from '../utils' + +describe('style reconnection', () => { + afterEach(() => { + act(() => Uniwind.setTheme('light')) + }) + + test('catches up with theme changes while Activity is hidden', () => { + // Keep the child stable so a parent render cannot repair stale styles. + const child = + const App = ({ hidden }: { hidden: boolean }) => {child} + const { getStylesFromId, rerender } = renderUniwind(