Quick Start

import { NavigationContainer } from "@react-navigation/native";
import Transition from "react-native-screen-transitions";
import { createBlankStackNavigator } from "react-native-screen-transitions/blank-stack";
import { View, Text, TouchableOpacity } from "react-native";

const Stack = createBlankStackNavigator();

function HomeScreen({ navigation }) {
  return (
    <View style={{ flex: 1, justifyContent: "center", alignItems: "center" }}>
      <TouchableOpacity onPress={() => navigation.navigate("Detail")}>
        <Text>Open Detail</Text>
      </TouchableOpacity>
    </View>
  );
}

function DetailScreen() {
  return (
    <View style={{ flex: 1, backgroundColor: "#fff", justifyContent: "center" }}>
      <Text>Detail Screen</Text>
    </View>
  );
}

export default function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen name="Home" component={HomeScreen} />
        <Stack.Screen name="Detail" component={DetailScreen} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

<Stack.Screen
  name="Detail"
  component={DetailScreen}
  options={{
    ...Transition.Presets.SlideFromBottom(),
  }}
/>

options={{
  ...Transition.Presets.SlideFromBottom(),
  gestureEnabled: true,
  gestureDirection: "vertical",
}}

<Stack.Screen
  name="Photo"
  component={PhotoScreen}
  options={{
    ...Transition.Presets.SharedIGImage({
      sharedBoundTag: "photo",
    }),
  }}
/>

<Transition.Pressable sharedBoundTag="photo" onPress={openPhoto}>
  <Image source={photo} />
</Transition.Pressable>

<Transition.View sharedBoundTag="photo">
  <Image source={photo} />
</Transition.View>