Skip to content

[SET] Migrate SET examples to SETBoundary #9132

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

Open
bartlomiejbloniarz wants to merge 7 commits into
base: @bartlomiejbloniarz/set-boundary-2
Choose a base branch
from
Open

[SET] Migrate SET examples to SETBoundary #9132

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
4b8acc6
[SET] Migrate SET examples to SETBoundary
bartlomiejbloniarz Mar 2, 2026
14ebe72
[SET] Update react navigation for correct useIsFocused timing (#9053)
satya164 Mar 12, 2026
08ffa74
Hide shared elements on inactive boundaries
bartlomiejbloniarz Mar 12, 2026
efa05b9
Fix android
bartlomiejbloniarz Mar 13, 2026
5a0d175
Update shouldWork
bartlomiejbloniarz Mar 13, 2026
c722dff
handle snapshots on iOS
bartlomiejbloniarz Mar 13, 2026
d376b2f
Missing memo
bartlomiejbloniarz Mar 19, 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
10 changes: 5 additions & 5 deletions apps/common-app/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,11 +24,11 @@
"@react-native-async-storage/async-storage": "2.2.0",
"@react-native-clipboard/clipboard": "1.16.3",
"@react-native-masked-view/masked-view": "0.3.2",
"@react-navigation/bottom-tabs": "7.4.8",
"@react-navigation/drawer": "7.5.9",
"@react-navigation/native": "7.1.18",
"@react-navigation/native-stack": "7.3.27",
"@react-navigation/stack": "7.4.9",
"@react-navigation/bottom-tabs": "7.15.5",
"@react-navigation/drawer": "7.9.4",
"@react-navigation/native": "7.1.33",
"@react-navigation/native-stack": "7.14.4",
"@react-navigation/stack": "7.8.4",
"@shopify/flash-list": "2.1.0",
"axios": "1.10.0",
"d3-shape": "3.2.0",
Expand Down
8 changes: 6 additions & 2 deletions apps/common-app/src/apps/reanimated/examples/SharedElementTransitions/BorderRadii.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@ import * as React from 'react';
import { Button, StyleSheet, View } from 'react-native';
import Animated, { SharedTransition } from 'react-native-reanimated';
import photo from './assets/image.jpg';
import { withSharedTransitionBoundary } from './withSharedTransitionBoundary';

const Stack = createNativeStackNavigator();

Expand All @@ -14,7 +15,7 @@ const transition = undefined;
// SharedTransitionType.ANIMATION
// );

function Screen1({ navigation }: NativeStackScreenProps<ParamListBase>) {
function Screen1Content({ navigation }: NativeStackScreenProps<ParamListBase>) {
return (
<View style={styles.flexOne}>
<Button
Expand All @@ -37,7 +38,7 @@ function Screen1({ navigation }: NativeStackScreenProps<ParamListBase>) {
);
}

function Screen2({ navigation }: NativeStackScreenProps<ParamListBase>) {
function Screen2Content({ navigation }: NativeStackScreenProps<ParamListBase>) {
return (
<View style={styles.flexOne}>
<Button title="go back" onPress={() => navigation.popTo('Screen1')} />
Expand All @@ -56,6 +57,9 @@ function Screen2({ navigation }: NativeStackScreenProps<ParamListBase>) {
);
}

const Screen1 = withSharedTransitionBoundary(Screen1Content);
const Screen2 = withSharedTransitionBoundary(Screen2Content);

export default function CustomTransitionExample() {
return (
<Stack.Navigator>
Expand Down
18 changes: 10 additions & 8 deletions apps/common-app/src/apps/reanimated/examples/SharedElementTransitions/Card.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,15 +4,12 @@ import type {
} from '@react-navigation/native-stack';
import { createNativeStackNavigator } from '@react-navigation/native-stack';
import * as React from 'react';
import {
Pressable,
StyleSheet,
TouchableNativeFeedback,
View,
} from 'react-native';
import { Pressable, StyleSheet, View } from 'react-native';
import Animated from 'react-native-reanimated';
import photo from './assets/image.jpg';

import { withSharedTransitionBoundary } from './withSharedTransitionBoundary';

type ParamList = {
Screen1?: object;
Screen2: {
Expand Down Expand Up @@ -76,7 +73,9 @@ function Card({
);
}

function Screen1({ navigation }: NativeStackScreenProps<ParamList, 'Screen1'>) {
function Screen1Content({
navigation,
}: NativeStackScreenProps<ParamList, 'Screen1'>) {
return (
<Animated.ScrollView style={styles.flexOne}>
{[...Array(6)].map((_, i) => (
Expand All @@ -92,7 +91,7 @@ function Screen1({ navigation }: NativeStackScreenProps<ParamList, 'Screen1'>) {
);
}

function Screen2({
function Screen2Content({
route,
navigation,
}: NativeStackScreenProps<ParamList, 'Screen2'>) {
Expand All @@ -111,6 +110,9 @@ function Screen2({
);
}

const Screen1 = withSharedTransitionBoundary(Screen1Content);
const Screen2 = withSharedTransitionBoundary(Screen2Content);

export default function CardExample() {
return (
<Stack.Navigator
Expand Down
14 changes: 10 additions & 4 deletions apps/common-app/src/apps/reanimated/examples/SharedElementTransitions/ChangeTheme.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,8 @@ import Animated, {
withSpring,
} from 'react-native-reanimated';

import { withSharedTransitionBoundary } from './withSharedTransitionBoundary';

const Stack = createNativeStackNavigator();
const Context = createContext({
theme: true,
Expand Down Expand Up @@ -83,7 +85,7 @@ function getTheme(theme: boolean, disabled: boolean) {
return { style, transition };
}

function Screen1({ navigation }: NativeStackScreenProps<ParamListBase>) {
function Screen1Content({ navigation }: NativeStackScreenProps<ParamListBase>) {
const { theme, disabled, modals, toggleTheme, toggleDisabled, toggleModals } =
useContext(Context);
const { style, transition } = useMemo(
Expand Down Expand Up @@ -157,7 +159,7 @@ function Screen1({ navigation }: NativeStackScreenProps<ParamListBase>) {
);
}

function Screen2({ navigation }: NativeStackScreenProps<ParamListBase>) {
function Screen2Content({ navigation }: NativeStackScreenProps<ParamListBase>) {
const { theme, disabled, toggleTheme, toggleDisabled } = useContext(Context);
const { style, transition } = useMemo(
() => getTheme(theme, disabled),
Expand Down Expand Up @@ -216,7 +218,7 @@ function Screen2({ navigation }: NativeStackScreenProps<ParamListBase>) {
);
}

function Screen3({ navigation }: NativeStackScreenProps<ParamListBase>) {
function Screen3Content({ navigation }: NativeStackScreenProps<ParamListBase>) {
const { theme, disabled, toggleTheme, toggleDisabled } = useContext(Context);
const { style, transition } = useMemo(
() => getTheme(theme, disabled),
Expand Down Expand Up @@ -275,7 +277,11 @@ function Screen3({ navigation }: NativeStackScreenProps<ParamListBase>) {
);
}

export default function ReducedMotionSharedExample() {
const Screen1 = withSharedTransitionBoundary(Screen1Content);
const Screen2 = withSharedTransitionBoundary(Screen2Content);
const Screen3 = withSharedTransitionBoundary(Screen3Content);

export default function ChangeThemeExample() {
const [theme, setTheme] = useState(true);
const [disabled, setDisabled] = useState(false);
const [modals, setModals] = useState(false);
Expand Down
9 changes: 7 additions & 2 deletions apps/common-app/src/apps/reanimated/examples/SharedElementTransitions/CustomTransition.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,8 @@ import Animated, {
withSpring,
} from 'react-native-reanimated';

import { withSharedTransitionBoundary } from './withSharedTransitionBoundary';

const Stack = createNativeStackNavigator();

const transition = undefined;
Expand Down Expand Up @@ -40,7 +42,7 @@ const transition = undefined;
// })
// .defaultTransitionType(SharedTransitionType.ANIMATION);

function Screen1({ navigation }: NativeStackScreenProps<ParamListBase>) {
function Screen1Content({ navigation }: NativeStackScreenProps<ParamListBase>) {
return (
<Animated.ScrollView style={styles.flexOne}>
<Animated.View
Expand All @@ -56,7 +58,7 @@ function Screen1({ navigation }: NativeStackScreenProps<ParamListBase>) {
);
}

function Screen2({ navigation }: NativeStackScreenProps<ParamListBase>) {
function Screen2Content({ navigation }: NativeStackScreenProps<ParamListBase>) {
return (
<View style={styles.flexOne}>
<Animated.View
Expand All @@ -69,6 +71,9 @@ function Screen2({ navigation }: NativeStackScreenProps<ParamListBase>) {
);
}

const Screen1 = withSharedTransitionBoundary(Screen1Content);
const Screen2 = withSharedTransitionBoundary(Screen2Content);

export default function CustomTransitionExample() {
return (
<Stack.Navigator>
Expand Down
26 changes: 22 additions & 4 deletions apps/common-app/src/apps/reanimated/examples/SharedElementTransitions/DuplicateTags.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@ import Animated, { useAnimatedStyle } from 'react-native-reanimated';

import firstPhoto from './assets/doge.jpg';
import secondPhoto from './assets/angry-doge.jpg';
import { withSharedTransitionBoundary } from './withSharedTransitionBoundary';

const Stack = createNativeStackNavigator();

Expand Down Expand Up @@ -98,7 +99,10 @@ function DogeScreen({
);
}

function Screen1({ route, navigation }: NativeStackScreenProps<ParamListBase>) {
function Screen1Content({
route,
navigation,
}: NativeStackScreenProps<ParamListBase>) {
return (
<DogeScreen
route={route}
Expand All @@ -110,7 +114,10 @@ function Screen1({ route, navigation }: NativeStackScreenProps<ParamListBase>) {
);
}

function Screen2({ route, navigation }: NativeStackScreenProps<ParamListBase>) {
function Screen2Content({
route,
navigation,
}: NativeStackScreenProps<ParamListBase>) {
return (
<DogeScreen
route={route}
Expand All @@ -122,7 +129,10 @@ function Screen2({ route, navigation }: NativeStackScreenProps<ParamListBase>) {
);
}

function Screen3({ route, navigation }: NativeStackScreenProps<ParamListBase>) {
function Screen3Content({
route,
navigation,
}: NativeStackScreenProps<ParamListBase>) {
return (
<DogeScreen
route={route}
Expand All @@ -134,7 +144,10 @@ function Screen3({ route, navigation }: NativeStackScreenProps<ParamListBase>) {
);
}

function Screen4({ route, navigation }: NativeStackScreenProps<ParamListBase>) {
function Screen4Content({
route,
navigation,
}: NativeStackScreenProps<ParamListBase>) {
return (
<DogeScreen
route={route}
Expand All @@ -146,6 +159,11 @@ function Screen4({ route, navigation }: NativeStackScreenProps<ParamListBase>) {
);
}

const Screen1 = withSharedTransitionBoundary(Screen1Content);
const Screen2 = withSharedTransitionBoundary(Screen2Content);
const Screen3 = withSharedTransitionBoundary(Screen3Content);
const Screen4 = withSharedTransitionBoundary(Screen4Content);

export default function DuplicateTagsExample() {
return (
<Stack.Navigator>
Expand Down
11 changes: 9 additions & 2 deletions apps/common-app/src/apps/reanimated/examples/SharedElementTransitions/FlatList.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,8 @@ import {
import Animated from 'react-native-reanimated';
import photo from './assets/image.jpg';

import { withSharedTransitionBoundary } from './withSharedTransitionBoundary';

type Optional<T, K extends keyof T> = Pick<Partial<T>, K> & Omit<T, K>;

type Item = {
Expand Down Expand Up @@ -66,7 +68,9 @@ const Item = ({ item, parentItem, onPress }: ItemProps) => (
</TouchableOpacity>
);

function Screen1({ navigation }: NativeStackScreenProps<ParamList, 'Screen1'>) {
function Screen1Content({
navigation,
}: NativeStackScreenProps<ParamList, 'Screen1'>) {
const renderItem = ({ item, parentItem }: ListItemWithParent<Item>) => {
return (
<Item
Expand Down Expand Up @@ -103,7 +107,7 @@ function Screen1({ navigation }: NativeStackScreenProps<ParamList, 'Screen1'>) {
);
}

function Screen2({
function Screen2Content({
route,
navigation,
}: NativeStackScreenProps<ParamList, 'Screen2'>) {
Expand All @@ -119,6 +123,9 @@ function Screen2({
);
}

const Screen1 = withSharedTransitionBoundary(Screen1Content);
const Screen2 = withSharedTransitionBoundary(Screen2Content);

export default function FlatListExample() {
return (
<Stack.Navigator>
Expand Down
8 changes: 6 additions & 2 deletions apps/common-app/src/apps/reanimated/examples/SharedElementTransitions/Gallery.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@ import Animated, { FadeIn, cubicBezier } from 'react-native-reanimated';
import florence from './assets/florence.jpg';
import countryside from './assets/countryside.jpg';
import dawn from './assets/dawn.jpg';
import { withSharedTransitionBoundary } from './withSharedTransitionBoundary';

type StackParamList = {
Home: undefined;
Expand Down Expand Up @@ -38,7 +39,7 @@ const gallery = {

type Tag = keyof typeof gallery;

function HomeScreen({
function HomeScreenContent({
navigation,
}: NativeStackScreenProps<StackParamList, 'Home'>) {
const chips = ['Italy', 'Tourism', 'Nature'];
Expand Down Expand Up @@ -111,7 +112,7 @@ function HomeScreen({
);
}

function DetailsScreen({
function DetailsScreenContent({
route,
navigation,
}: NativeStackScreenProps<StackParamList, 'Details'>) {
Expand Down Expand Up @@ -149,6 +150,9 @@ function DetailsScreen({
);
}

const HomeScreen = withSharedTransitionBoundary(HomeScreenContent);
const DetailsScreen = withSharedTransitionBoundary(DetailsScreenContent);

export default function GalleryExample() {
return (
<Stack.Navigator
Expand Down
11 changes: 8 additions & 3 deletions apps/common-app/src/apps/reanimated/examples/SharedElementTransitions/ImageStack.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@ import Animated from 'react-native-reanimated';
import florence from './assets/florence.jpg';
import countryside from './assets/countryside.jpg';
import dawn from './assets/dawn.jpg';
import { withSharedTransitionBoundary } from './withSharedTransitionBoundary';

type ParamList = {
Screen1?: object;
Expand Down Expand Up @@ -74,7 +75,7 @@ export function ImageStack({
);
}

export function ScreenOne({
export function ScreenOneContent({
navigation,
}: NativeStackScreenProps<ParamList, 'Screen1'>) {
return (
Expand All @@ -94,7 +95,7 @@ export function ScreenOne({
);
}

export function ScreenTwo({
export function ScreenTwoContent({
navigation,
}: NativeStackScreenProps<ParamList, 'Screen2'>) {
return (
Expand All @@ -114,7 +115,7 @@ export function ScreenTwo({
);
}

export function ScreenThree({
export function ScreenThreeContent({
navigation,
route,
}: NativeStackScreenProps<ParamList, 'Screen3'>) {
Expand All @@ -131,6 +132,10 @@ export function ScreenThree({
);
}

const ScreenOne = withSharedTransitionBoundary(ScreenOneContent);
const ScreenTwo = withSharedTransitionBoundary(ScreenTwoContent);
const ScreenThree = withSharedTransitionBoundary(ScreenThreeContent);

export default function ImageStackExample() {
return (
<Stack.Navigator>
Expand Down
Loading
Loading