Skip to content

feat: realistic instance hiding #1898

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
mdjastrzebski merged 4 commits into from
Apr 16, 2026
+246 −0
Merged

feat: realistic instance hiding #1898

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
498ef37
implement realistic hiding elements
mdjastrzebski Mar 2, 2026
88120d1
test hidden instance props
mdjastrzebski Apr 13, 2026
7c260e1
test tweaks
mdjastrzebski Apr 15, 2026
2440978
more tests
mdjastrzebski Apr 15, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
231 changes: 231 additions & 0 deletions src/__tests__/render.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,40 @@ import { Text, View } from 'react-native';
import { render, screen } from '..';
import { _console, logger } from '../helpers/logger';

function MaybeSuspend({
children,
promise,
suspend,
}: {
children: React.ReactNode;
promise: Promise<unknown>;
suspend: boolean;
}) {
if (suspend) {
React.use(promise);
}

return children;
}

function TestSuspenseWrapper({
children,
promise,
suspend,
}: {
children: React.ReactNode;
promise: Promise<unknown>;
suspend: boolean;
}) {
return (
<React.Suspense fallback={<Text>Loading...</Text>}>
<MaybeSuspend promise={promise} suspend={suspend}>
{children}
</MaybeSuspend>
</React.Suspense>
);
}

test('renders a simple component', async () => {
const TestComponent = () => (
<View testID="container">
Expand Down Expand Up @@ -77,6 +111,203 @@ describe('render options', () => {
});
});

describe('hidden instance props', () => {
test('does not retain hidden UI when the component suspends on initial render', async () => {
const promise = new Promise<unknown>(() => {});

await render(
<TestSuspenseWrapper promise={promise} suspend>
<View testID="hidden-target">
<Text>Ready</Text>
</View>
</TestSuspenseWrapper>,
);

expect(screen.getByText('Loading...')).toBeOnTheScreen();
expect(screen.queryByTestId('hidden-target')).not.toBeOnTheScreen();
expect(screen.queryByTestId('hidden-target', { includeHiddenElements: true })).toBeNull();
expect(screen.toJSON()).toMatchInlineSnapshot(`
<Text>
Loading...
</Text>
`);
});

test('sets hidden suspended elements with no style to display none', async () => {
const promise = new Promise<unknown>(() => {});

await render(
<TestSuspenseWrapper promise={promise} suspend={false}>
<View testID="hidden-target">
<Text>Ready</Text>
</View>
</TestSuspenseWrapper>,
);

expect(screen.getByText('Ready')).toBeOnTheScreen();

await screen.rerender(
<TestSuspenseWrapper promise={promise} suspend>
<View testID="hidden-target">
<Text>Ready</Text>
</View>
</TestSuspenseWrapper>,
);

expect(screen.getByText('Loading...')).toBeOnTheScreen();
expect(
screen.getByTestId('hidden-target', { includeHiddenElements: true }).props.style,
).toEqual({
display: 'none',
});
expect(screen.toJSON()).toMatchInlineSnapshot(`
<>
<View
style={
{
"display": "none",
}
}
testID="hidden-target"
>
<Text>
Ready
</Text>
</View>
<Text>
Loading...
</Text>
</>
`);
});

test('appends display none when suspending an element with existing style', async () => {
const promise = new Promise<unknown>(() => {});

await render(
<TestSuspenseWrapper promise={promise} suspend={false}>
<View style={{ opacity: 0.5 }} testID="hidden-target">
<Text>Ready</Text>
</View>
</TestSuspenseWrapper>,
);

expect(screen.getByText('Ready')).toBeOnTheScreen();

await screen.rerender(
<TestSuspenseWrapper promise={promise} suspend>
<View style={{ opacity: 0.5 }} testID="hidden-target">
<Text>Ready</Text>
</View>
</TestSuspenseWrapper>,
);

expect(screen.getByText('Loading...')).toBeOnTheScreen();
expect(
screen.getByTestId('hidden-target', { includeHiddenElements: true }).props.style,
).toEqual([{ opacity: 0.5 }, { display: 'none' }]);
expect(screen.toJSON()).toMatchInlineSnapshot(`
<>
<View
style={
[
{
"opacity": 0.5,
},
{
"display": "none",
},
]
}
testID="hidden-target"
>
<Text>
Ready
</Text>
</View>
<Text>
Loading...
</Text>
</>
`);
});

test('applies hidden styles to multiple direct child views when suspending', async () => {
const promise = new Promise<unknown>(() => {});

await render(
<TestSuspenseWrapper promise={promise} suspend={false}>
<View testID="hidden-target-1">
<Text>First</Text>
</View>
<View style={{ opacity: 0.5 }} testID="hidden-target-2">
<Text>Second</Text>
</View>
</TestSuspenseWrapper>,
);

expect(screen.getByText('First')).toBeOnTheScreen();
expect(screen.getByText('Second')).toBeOnTheScreen();

await screen.rerender(
<TestSuspenseWrapper promise={promise} suspend>
<View testID="hidden-target-1">
<Text>First</Text>
</View>
<View style={{ opacity: 0.5 }} testID="hidden-target-2">
<Text>Second</Text>
</View>
</TestSuspenseWrapper>,
);

expect(screen.getByText('Loading...')).toBeOnTheScreen();
expect(
screen.getByTestId('hidden-target-1', { includeHiddenElements: true }).props.style,
).toEqual({
display: 'none',
});
expect(
screen.getByTestId('hidden-target-2', { includeHiddenElements: true }).props.style,
).toEqual([{ opacity: 0.5 }, { display: 'none' }]);
expect(screen.toJSON()).toMatchInlineSnapshot(`
<>
<View
style={
{
"display": "none",
}
}
testID="hidden-target-1"
>
<Text>
First
</Text>
</View>
<View
style={
[
{
"opacity": 0.5,
},
{
"display": "none",
},
]
}
testID="hidden-target-2"
>
<Text>
Second
</Text>
</View>
<Text>
Loading...
</Text>
</>
`);
});
});

describe('component rendering', () => {
test('render accepts RCTText component', async () => {
await render(React.createElement('RCTText', { testID: 'text' }, 'Hello'));
Expand Down
15 changes: 15 additions & 0 deletions src/render.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
import * as React from 'react';
import type { StyleProp } from 'react-native';
import {
createRoot,
type HostElement,
Expand Down Expand Up @@ -39,6 +40,10 @@ export async function render<T>(element: React.ReactElement<T>, options: RenderO
const rendererOptions: RootOptions = {
textComponentTypes: HOST_TEXT_NAMES,
publicTextComponentTypes: ['Text'],
transformHiddenInstanceProps: ({ props }) => ({
...props,
style: withHiddenStyle(props.style as StyleProp<StyleLike>),
}),
};

const wrap = (element: React.ReactElement) => (Wrapper ? <Wrapper>{element}</Wrapper> : element);
Expand Down Expand Up @@ -117,3 +122,13 @@ function makeDebug(renderer: Root): DebugFunction {
}
return debugImpl;
}

type StyleLike = Record<string, unknown>;

function withHiddenStyle(style: StyleProp<StyleLike>): StyleProp<StyleLike> {
if (style == null) {
return { display: 'none' };
}

return [style, { display: 'none' }];
}
Loading