React Native Teleport

https://kirillzyusko.github.io/react-native-teleport/docs
Admin
React Native Teleport brings true native portals to React Native, allowing you to render components...
Tokens:13,004
Snippets:92
Trust Score:8.3
Update:7 months ago
Show doc for...
Tokens:
Raw
### Install react-native-teleport using Expo CLI

Source: https://kirillzyusko.github.io/react-native-teleport/docs/installation

Installs the react-native-teleport package using the Expo CLI. This command is suitable for projects managed with Expo.

```bash
npx expo install react-native-teleport
```

--------------------------------

### Example Test Case with react-native-teleport

Source: https://kirillzyusko.github.io/react-native-teleport/docs/recipes/jest-testing-guide

This example demonstrates a basic Jest test case for a component using react-native-teleport. It renders a component that utilizes PortalProvider, PortalHost, and Portal, and then asserts that the rendered output matches a snapshot. This requires @testing-library/react-native.

```javascript
import { render, screen } from "@testing-library/react-native";

import { View } from "react-native";

import { PortalProvider, PortalHost, Portal } from "react-native-teleport";

function TestComponent() {
  return (
    <PortalProvider>
      <PortalHost name="app" />
      <View>
        <Portal hostName="app" name="modal">
          <View />
        </Portal>
      </View>
    </PortalProvider>
  );
}

describe("portal rendering", () => {
  it("should render without errors", () => {
    render(<TestComponent />);

    expect(screen.toJSON()).toMatchSnapshot();
  });
});
```

--------------------------------

### PortalHost Usage Example in React Native

Source: https://kirillzyusko.github.io/react-native-teleport/docs/api/components/portal-host

This example demonstrates how to integrate PortalHost within a React Native application. It shows the necessary provider components (PortalProvider, SafeAreaProvider) and how to render a PortalHost with a specific name and style. Ensure that PortalHost has defined dimensions to avoid rendering issues.

```javascript
import { StyleSheet, View } from "react-native";
import { PortalHost, PortalProvider } from "react-native-teleport";
import {
  initialWindowMetrics,
  SafeAreaProvider,
} from "react-native-safe-area-context";
import RootStack from "./navigation";

export default function App() {
  return (
    <SafeAreaProvider initialMetrics={initialWindowMetrics}>
      <PortalProvider>
        <RootStack />
        <PortalHost style={StyleSheet.absoluteFillObject} name="overlay" />
      </PortalProvider>
    </SafeAreaProvider>
  );
}
```

--------------------------------

### Install react-native-teleport using Yarn

Source: https://kirillzyusko.github.io/react-native-teleport/docs/installation

Installs the react-native-teleport package using the Yarn package manager. This is a standard command for adding dependencies to a React Native project.

```bash
yarn add react-native-teleport
```

--------------------------------

### Wrap App with PortalProvider

Source: https://kirillzyusko.github.io/react-native-teleport/docs/api/components/portal-provider

This example demonstrates how to wrap your main application component with PortalProvider. This setup is necessary to utilize the portal API and manage Portals throughout your React Native application.

```javascript
import { PortalProvider } from "react-native-teleport";

export default function App() {
  return (
    <PortalProvider>
      {/* your main application code goes here */}
    </PortalProvider>
  );
}
```

--------------------------------

### Install react-native-teleport using NPM

Source: https://kirillzyusko.github.io/react-native-teleport/docs/installation

Installs the react-native-teleport package using the NPM package manager. The --save flag ensures the dependency is added to the project's package.json file.

```bash
npm install react-native-teleport --save
```

--------------------------------

### Portal Component Usage Example in React Native

Source: https://kirillzyusko.github.io/react-native-teleport/docs/api/components/portal

This example demonstrates how to use the Portal component to conditionally render a View to a specified host. It utilizes React's useState hook to manage the visibility of the teleported content and includes basic styling for the container and the teleported box.

```javascript
import { useState } from "react";
import { View, StyleSheet, Button } from "react-native";
import { Portal } from "react-native-teleport";

export default function InstantRootExample() {
  const [shouldBeTeleported, setTeleported] = useState(true);

  return (
    <View style={styles.container}>
      {shouldBeTeleported && (
        <Portal hostName={"overlay"}>
          <View style={styles.box} testID={"touchable"} />
        </Portal>
      )}
      <Button
        title={shouldBeTeleported ? "Hide" : "Show"}
        onPress={() => setTeleported((t) => !t)}
      />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: "center",
    justifyContent: "center",
  },
  box: {
    width: 160,
    height: 160,
    marginVertical: 20,
    backgroundColor: "blue",
  },
});
```

--------------------------------

### App Setup with PortalProvider

Source: https://kirillzyusko.github.io/react-native-teleport/docs/guides/teleport

Sets up the root of a React Native application to use react-native-teleport. It includes necessary providers like SafeAreaProvider, GestureHandlerRootView, and PortalProvider, and defines a PortalHost for rendering teleported components.

```typescript
import { StyleSheet, View } from "react-native";
import { PortalHost, PortalProvider } from "react-native-teleport";
import {
  initialWindowMetrics,
  SafeAreaProvider,
} from "react-native-safe-area-context";
import { NavigationContainer } from "@react-navigation/native";
import RootStack from "./navigation";
import { GestureHandlerRootView } from "react-native-gesture-handler";

export default function App() {
  return (
    <SafeAreaProvider initialMetrics={initialWindowMetrics}>
      <GestureHandlerRootView style={styles.container}>
        <PortalProvider>
          <>{/* Deeply nested <Teleport /> component goes here */}</>
          <PortalHost style={StyleSheet.absoluteFillObject} name="overlay" />
        </PortalProvider>
      </GestureHandlerRootView>
    </SafeAreaProvider>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
});
```

--------------------------------

### Teleporting a Lottie Animation with State Preservation

Source: https://kirillzyusko.github.io/react-native-teleport/docs/guides/teleport

Demonstrates how to use the Portal component from react-native-teleport to move a LottieView to a different part of the hierarchy (specifically, to an 'overlay' host). The example shows how the component's state, including animations, is preserved after teleportation.

```typescript
import LottieView from "lottie-react-native";
import { useRef, useState } from "react";
import {
  View,
  Text,
  ScrollView,
  TouchableWithoutFeedback,
  StyleSheet,
  Animated,
  useAnimatedValue,
  Easing,
  Pressable,
} from "react-native";
import { BlurView } from "@react-native-community/blur";
import { Portal } from "react-native-teleport";

const messages = [
  { text: "Hello, how are you", sender: true },
  { text: "Hello, not too bad! You?", sender: false },
  { text: "I'm fine, thanks", sender: true },
  { text: "What is your plan for evening today?", sender: true },
  { text: "I'm not sure yet... Any ideas?", sender: false },
  { text: "Sure, let's go for a walk?", sender: true },
];

const Message = ({ sender, text }) => {
  return (
    <View
      style={{
        flexDirection: "row",
        width: "100%",
        justifyContent: sender ? "flex-end" : "flex-start",
      }}
    >
      <Text
        style={{
          opacity: 1,
          color: "black",
          padding: 10,
          backgroundColor: sender ? "#38f269" : "#38c7f2",
          margin: 10,
          borderRadius: 10,
        }}
      >
        {text}
      </Text>
    </View>
  );
};

export default function Messenger() {
  const viewRef = useRef<View | null>(null);
  const opacity = useRef(new Animated.Value(0)).current;
  const [teleport, setTeleported] = useState(false);
  const [style, setStyle] = useState(null);

  const handleClick = () => {
    Animated.timing(opacity, {
      toValue: 1,
      duration: 250,
      easing: Easing.inOut(Easing.ease),
      useNativeDriver: true,
    }).start();
    viewRef.current?.measureInWindow((x, y) => {
      setTeleported(true);
      setStyle({
        paddingTop: y,
      });
    });
  };

  return (
    <View style={{ flex: 1 }}>
      <ScrollView>
        {messages.map((item) => (
          <Message key={item.text} {...item} />
        ))}
        <View
          ref={viewRef}
          style={{
            width: "100%",
            justifyContent: "flex-start",
            flexDirection: "row",
          }}
        >
          <Portal hostName={teleport ? "overlay" : undefined}>
            <Pressable onPress={handleClick} style={style ?? {}}>
              <LottieView
                source={require("../../assets/lottie/bear.json")}
                style={[{ width: 200, height: 200 }]}
                autoPlay
                loop
              />
            </Pressable>
          </Portal>
        </View>
      </ScrollView>
      <Animated.View
        style={[StyleSheet.absoluteFillObject, { opacity: opacity }]}
        pointerEvents="none"
      >
        <BlurView
          style={StyleSheet.absoluteFillObject}
          pointerEvents="none"
          blurType="light"
          blurAmount={16}
        />
      </Animated.View>
    </View>
  );
}
```

--------------------------------

### Use Unique PortalHost Names for Modals (React Native)

Source: https://kirillzyusko.github.io/react-native-teleport/docs/recipes/modals

This example illustrates the best practice of using unique names for PortalHost instances when dealing with multiple modals or screens that require their own portal destinations. This prevents naming conflicts and ensures that portals are directed to the correct host within their respective modal's window hierarchy.

```javascript
// In ModalA
<PortalHost name="modal-a-overlay" />

// In ModalB
<PortalHost name="modal-b-overlay" />
```

--------------------------------

### Use Reusable Modal Container with Portal (React Native)

Source: https://kirillzyusko.github.io/react-native-teleport/docs/recipes/modals

This example shows how to use the reusable ModalContainer component to render a modal with teleportation capabilities. It demonstrates passing a unique `portalHostName` to the container and then using a Portal component with the same name to render content within that modal's specific window hierarchy. This approach simplifies the implementation of teleportation in modals.

```javascript
import { ModalContainer } from "./components/ModalContainer";
import { Text } from "react-native";
import { Portal } from "react-native-teleport";

function MyModal() {
  return (
    <ModalContainer portalHostName="my-modal-overlay">
      <Text>Modal content here</Text>
      <Portal hostName="my-modal-overlay">
        <TooltipComponent />
      </Portal>
    </ModalContainer>
  );
}
```

--------------------------------

### Configure Jest Mock for react-native-teleport

Source: https://kirillzyusko.github.io/react-native-teleport/docs/recipes/jest-testing-guide

This code snippet configures Jest to use the built-in mock for the react-native-teleport library. It should be added to your Jest setup file. This mock allows for easier testing of components that utilize the teleport functionality.

```javascript
jest.mock("react-native-teleport", () => require("react-native-teleport/jest"));
```

--------------------------------

### Define Post Data Structure (TypeScript)

Source: https://kirillzyusko.github.io/react-native-teleport/docs/recipes/instagram-shared-transitions

Defines a TypeScript type `PostType` for feed items, which can contain either a video or a photo. It includes properties for author, text, likes, comments, date, and a `sent` timestamp. An example array `posts` is provided, demonstrating how to structure data for posts, including requiring a video file.

```typescript
export type PostType = {
  id: number;
  author: string;
  text: string;
  likes: number;
  comments: number;
  video?: ReturnType<typeof require>;
  photo?: string;
  date: string;
  sent: number;
};

export const posts: PostType[] = [
  {
    id: 1,
    author: "kirillzyusko",
    text: "Magic forest",
    likes: 126,
    comments: 12,
    sent: 31,
    video: require("./videos/forest.mp4"),
    date: "29 October",
  },
  // ... more posts
];

```

--------------------------------

### Measure View Position with useMeasure Hook (TypeScript)

Source: https://kirillzyusko.github.io/react-native-teleport/docs/recipes/instagram-shared-transitions

The useMeasure hook takes a ref to a React Native View and returns a function to measure its position in the window. It accounts for Android's edge-to-edge mode by adding the safe area insets to the y-coordinate. This hook is essential for determining the starting point of animations.

```typescript
import { Platform, type View } from "react-native";
import { useSafeAreaInsets } from "react-native-safe-area-context";

const useMeasure = (viewRef: React.RefObject<View | null>) => {
  const insets = useSafeAreaInsets();

  return (callback: (x: number, y: number) => void) => {
    viewRef.current?.measureInWindow((x, y) => {
      // Android edge-to-edge mode can produce incorrect offsets
      if (Platform.OS === "android") {
        return callback(x, y + insets.top);
      }
      return callback(x, y);
    });
  };
};

export default useMeasure;
```

--------------------------------

### Create Reusable Modal Wrapper with PortalHost (React Native)

Source: https://kirillzyusko.github.io/react-native-teleport/docs/recipes/modals

This code defines a reusable ModalContainer component in React Native that encapsulates the modal's content and includes a PortalHost. This pattern promotes code reusability by abstracting the setup of the PortalHost within a modal, making it easier to manage teleportation in multiple modal components. The component accepts a `portalHostName` prop to allow for unique naming.

```typescript
import { StyleSheet, View, ViewProps } from "react-native";
import { PortalHost } from "react-native-teleport";

interface ModalContainerProps extends ViewProps {
  portalHostName: string;
  children: React.ReactNode;
}

export function ModalContainer({
  portalHostName,
  children,
  style,
  ...props
}: ModalContainerProps) {
  return (
    <View style={[styles.container, style]} {...props}>
      {children}
      <PortalHost style={StyleSheet.absoluteFillObject} name={portalHostName} />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
});
```

--------------------------------

### Set Up Root PortalHost for Transitions (React Native)

Source: https://kirillzyusko.github.io/react-native-teleport/docs/recipes/instagram-shared-transitions

This code demonstrates how to set up the root PortalHost in your App.tsx file. It must be placed after the NavigationContainer to ensure it renders above all screens, which is crucial for overlaying transitions managed by react-native-teleport.

```typescript
import { StyleSheet } from "react-native";
import { PortalHost, PortalProvider } from "react-native-teleport";
import { NavigationContainer } from "@react-navigation/native";
import { GestureHandlerRootView } from "react-native-gesture-handler";

export default function App() {
  return (
    <GestureHandlerRootView style={styles.container}>
      <PortalProvider>
        <NavigationContainer>
          <RootStack />
        </NavigationContainer>
        {/* This host renders ABOVE all screens — perfect for the transition */}
        <PortalHost name="overlay" style={StyleSheet.absoluteFillObject} />
      </PortalProvider>
    </GestureHandlerRootView>
  );
}
```

--------------------------------

### Configure React Navigation Options for Screens

Source: https://kirillzyusko.github.io/react-native-teleport/docs/recipes/instagram-shared-transitions

Sets up screen options for a React Navigation stack. It configures header visibility and presentation modes. Specifically, the 'Reels' screen is set to `headerShown: false`, `animation: "none"` to allow custom animations, and `presentation: "transparentModal"` to keep the background screen visible during transitions.

```javascript
// Screen options
const options = {
  Feed: {
    headerShown: false,
  },
  Reels: {
    headerShown: false,
    animation: "none", // we handle animations ourselves
    presentation: "transparentModal", // keeps feed visible behind
  },
};
```

--------------------------------

### Add PortalHost to Reels Screen in React Native Teleport

Source: https://kirillzyusko.github.io/react-native-teleport/docs/recipes/instagram-shared-transitions

This snippet shows how to add a `<PortalHost>` to the `FullScreenReel` component to receive teleported videos. It distinguishes between the first reel (which hosts the portal) and subsequent reels. The `portal` prop controls whether a `<PortalHost>` or a `<Video>` is rendered. Action buttons are also portaled to an overlay during transitions.

```typescript
import { View, StyleSheet } from "react-native";
import Video from "react-native-video";
import { Portal, PortalHost } from "react-native-teleport";
import {
  SCREEN_HEIGHT,
  SCREEN_WIDTH,
  FLOATING_ELEMENTS_DESTINATION,
} from "../constants";
import { useTransition } from "../hooks/useTransition";
import Reanimated, { useAnimatedStyle } from "react-native-reanimated";

function FullScreenReel({ post, active, portal = false }) {
  const progress = useTransition((state) => state.progress);
  const destination = useTransition((state) => state.destination);

  const icons = useAnimatedStyle(
    () => ({
      opacity: progress.value,
    }),
    [],
  );

  return (
    <View style={styles.container}>
      {portal ? (
        // This host RECEIVES the teleported video from the feed
        <PortalHost name="reels" style={styles.container} />
      ) : (
        // Other reels render their own video directly
        <Video
          source={{ uri: post.video }}
          style={styles.video}
          paused={!active}
          resizeMode="cover"
        />
      )}
      {/* Action buttons (like, comment, share) */}
      <Portal
        hostName={
          portal && destination === "overlay"
            ? FLOATING_ELEMENTS_DESTINATION
            : undefined
        }
      >
        <Reanimated.View style={[styles.icons, icons]}>
          {/* ... like, comment, share buttons ... */}
        </Reanimated.View>
      </Portal>
    </View>
  );
}

export default FullScreenReel;

```

--------------------------------

### Create Animated Reels Header with Back Navigation (React Native)

Source: https://kirillzyusko.github.io/react-native-teleport/docs/recipes/instagram-shared-transitions

Implements a custom animated header for a Reels screen in React Native. It uses react-native-safe-area-context for padding, react-navigation for navigation, and react-native-reanimated for animations. The header fades in and slides down, synchronizing with navigation actions. It also handles the Android hardware back button.

```typescript
import {
  View,
  Text,
  TouchableOpacity,
  StyleSheet,
  BackHandler,
} from "react-native";
import { useSafeAreaInsets } from "react-native-safe-area-context";
import { useNavigation } from "@react-navigation/native";
import Reanimated, {
  interpolate,
  useAnimatedStyle,
} from "react-native-reanimated";
import { Portal } from "react-native-teleport";
import { FLOATING_ELEMENTS_DESTINATION } from "../constants";
import { useTransition } from "../hooks/useTransition";
import { useCallback, useEffect } from "react";

function ReelsHeader() {
  const insets = useSafeAreaInsets();
  const navigation = useNavigation();
  const { goToFeed, progress, y } = useTransition();

  const onGoBack = useCallback(() => {
    goToFeed(navigation.goBack);
  }, [goToFeed, navigation]);

  // Handle Android hardware back button
  useEffect(() => {
    const subscription = BackHandler.addEventListener(
      "hardwareBackPress",
      () => {
        onGoBack();
        return true; // prevent default behavior
      },
    );
    return () => subscription.remove();
  }, [onGoBack]);

  const style = useAnimatedStyle(
    () => ({
      opacity: progress.value,
      transform: [{ translateY: interpolate(progress.value, [0, 1], [y, 0]) }],
    }),
    [y],
  );

  return (
    <Portal hostName={FLOATING_ELEMENTS_DESTINATION} style={styles.container}>
      <Reanimated.View style={[{ paddingTop: insets.top }, style]}>
        <View style={styles.header}>
          <Text style={styles.title}>Reels</Text>
          <TouchableOpacity onPress={onGoBack}>
            {/* back chevron icon */}
          </TouchableOpacity>
        </View>
      </Reanimated.View>
    </Portal>
  );
}

export default ReelsHeader;

```

--------------------------------

### Build Feed Screen in React Native

Source: https://kirillzyusko.github.io/react-native-teleport/docs/recipes/instagram-shared-transitions

The Feed screen displays a scrollable list of Post components. It uses a ScrollView and tracks the currently visible post to manage video playback, pausing videos of off-screen posts. For performance in real applications, FlatList or similar virtualization components are recommended.

```typescript
import { useState } from "react";
import { View, ScrollView, StyleSheet } from "react-native";
import { CARD_HEIGHT } from "./constants";
import { posts } from "./posts";
import Post from "./Post";

export default function Feed() {
  const [index, setIndex] = useState(0);

  const onScroll = (e) => {
    const { y } = e.nativeEvent.contentOffset;
    setIndex(Math.floor(y / (CARD_HEIGHT * 0.75)));
  };

  return (
    <View style={styles.container}>
      <ScrollView onScroll={onScroll}>
        {posts.map((post, i) => (
          <Post active={index === i} key={post.id} post={post} />
        ))}
      </ScrollView>
    </View>
  );
}

```

--------------------------------

### Define Screen Dimensions and Aspect Ratio (TypeScript)

Source: https://kirillzyusko.github.io/react-native-teleport/docs/recipes/instagram-shared-transitions

Defines constants for screen dimensions, aspect ratio, and video height based on screen width. It accounts for a maximum width of 540px on web to match Instagram's feed presentation. These constants are crucial for layout calculations in React Native.

```typescript
import { Dimensions } from "react-native";

export const SCREEN_HEIGHT = Dimensions.get("screen").height;
// instagram doesn't stretch video/images feed to full screen width on web
// so `540` max width for web
export const SCREEN_WIDTH = Math.min(Dimensions.get("screen").width, 540);
export const ASPECT_RATIO = 3 / 4;
export const VIDEO_HEIGHT = SCREEN_WIDTH / ASPECT_RATIO;
export const CARD_HEIGHT = VIDEO_HEIGHT + 100; // video + social section below

```

--------------------------------

### Build Post Component in React Native

Source: https://kirillzyusko.github.io/react-native-teleport/docs/recipes/instagram-shared-transitions

The Post component displays a video or image with a social section. It handles video playback and image display, pausing videos when not active to conserve resources. Dependencies include react-native and react-native-video.

```typescript
import { View, StyleSheet, Image } from "react-native";
import Video from "react-native-video";
import {
  VIDEO_HEIGHT,
  SCREEN_WIDTH,
  ASPECT_RATIO,
  CARD_HEIGHT,
} from "./constants";
import SocialSection from "./components/SocialSection";

const Post = ({ post, active }) => {
  return (
    <View style={{ height: CARD_HEIGHT }}>
      <View style={styles.container}>
        {post.video && (
          <Video
            source={{ uri: post.video }}
            style={styles.video}
            repeat
            paused={!active}
            controls={false}
            resizeMode="cover"
          />
        )}
        {post.photo && (
          <Image
            source={{ uri: post.photo }}
            style={{
              height: VIDEO_HEIGHT,
              width: SCREEN_WIDTH,
              aspectRatio: ASPECT_RATIO,
            }}
          />
        )}
      </View>
      <SocialSection post={post} />
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    height: VIDEO_HEIGHT,
    width: "100%",
  },
  video: {
    flex: 1,
    objectFit: "cover",
  },
});

export default Post;
```

--------------------------------

### Render Reels Header in Screen Component (React Native)

Source: https://kirillzyusko.github.io/react-native-teleport/docs/recipes/instagram-shared-transitions

Demonstrates how to include the custom `ReelsHeader` component within a screen's JSX in a React Native application. This ensures the header is rendered and positioned correctly on the screen, typically on top of other content.

```typescript
function Reels({ route }: Props) {
  return (
    <View style={styles.container}>
      {/* Old content, draw header on top of all elements */}
      <ReelsHeader />
    </View>
  );
}

```

--------------------------------

### Manage Animation State with Zustand Transition Store (TypeScript)

Source: https://kirillzyusko.github.io/react-native-teleport/docs/recipes/instagram-shared-transitions

The useTransition hook, built with Zustand, manages the state required for orchestrating animations. It tracks destination, item ID, screen position, and animation progress, providing methods to control the transition between different states like 'reels' and 'feed'. It utilizes react-native-reanimated for smooth, UI-thread animations.

```typescript
import {
  makeMutable,
  withSpring,
  type SharedValue,
} from "react-native-reanimated";
import { scheduleOnRN } from "react-native-worklets";
import { create } from "zustand";

interface Transition {
  destination?: string; // where the portal renders: undefined | "overlay" | "reels"
  id?: number; // which post is currently animating
  y: number; // the tapped video's Y position on screen
  progress: SharedValue<number>; // 0 = feed position, 1 = full-screen
  setDestination: (destination?: string) => void;
  setId: (id: number) => void;
  goToReels: (y: number) => void;
  goToFeed: (onFinish?: () => void) => void;
}

const SPRING_CONFIG = { mass: 3, damping: 500, stiffness: 1000 };

export const useTransition = create<Transition>((set, get) => ({
  destination: undefined,
  id: undefined,
  y: 0,
  progress: makeMutable(0),
  setDestination: (destination) => set({ destination }),
  setId: (id) => set({ id }),
  goToReels: (y) => {
    set({ destination: "overlay", y });
    const moveToReels = () => {
      set({ destination: "reels" });
    };
    get().progress.set(
      withSpring(1, SPRING_CONFIG, () => {
        scheduleOnRN(moveToReels);
      }),
    );
  },
  goToFeed: (onFinish) => {
    set({ destination: "overlay" });
    const moveToFeed = () => {
      set({ destination: undefined, y: 0 });
      onFinish?.();
    };
    get().progress.set(
      withSpring(0, SPRING_CONFIG, () => {
        scheduleOnRN(moveToFeed);
      }),
    );
  },
}));
```

--------------------------------

### Build Reels Screen Component in React Native

Source: https://kirillzyusko.github.io/react-native-teleport/docs/recipes/instagram-shared-transitions

Implements the Reels screen as a vertical pager using React Native's ScrollView. It utilizes props like `snapToInterval`, `decelerationRate`, and `bounces` for snapping behavior. The component filters posts to display videos and manages the active reel index based on scroll position. Dependencies include React Native core components and local constants/data.

```typescript
import { useState } from "react";
import { View, ScrollView, StyleSheet } from "react-native";
import { SCREEN_HEIGHT } from "./constants";
import { posts } from "./posts";
import FullScreenReel from "./components/FullScreenReel";

export default function Reels({ route }) {
  const post = route.params.post;
  const reels = posts.filter((p) => p.id !== post.id && p.video);
  const [index, setIndex] = useState(0);

  const onScroll = (e) => {
    const { y } = e.nativeEvent.contentOffset;
    setIndex(Math.round(y / SCREEN_HEIGHT));
  };

  return (
    <View style={styles.container}>
      <ScrollView
        snapToInterval={SCREEN_HEIGHT}
        decelerationRate="fast"
        showsVerticalScrollIndicator={false}
        onScroll={onScroll}
        bounces={false}
      >
        <FullScreenReel post={post} active={index === 0} />
        {reels.map((p, i) => (
          <FullScreenReel key={p.id} post={p} active={index === i + 1} />
        ))}
      </ScrollView>
    </View>
  );
}
```

--------------------------------

### Add Tap Handling to Post Component in React Native

Source: https://kirillzyusko.github.io/react-native-teleport/docs/recipes/instagram-shared-transitions

Enhances a 'Post' component to make video posts navigable. It uses `useNavigation` from `@react-navigation/native` and `TouchableWithoutFeedback` to detect taps. When a video post is tapped, it navigates to the 'Reels' screen, passing the post data as a parameter. It prevents navigation if the post is a photo.

```typescript
import { useNavigation } from "@react-navigation/native";
import { TouchableWithoutFeedback } from "react-native";

const Post = ({ post, active }) => {
  const navigation = useNavigation();

  const onPress = () => {
    if (post.photo) return; // only videos open Reels
    navigation.navigate("Reels", { post });
  };

  return (
    <View style={{ height: CARD_HEIGHT }}>
      <TouchableWithoutFeedback onPress={onPress}>
        <View style={styles.container}>
          {/* old code that displays the video/image content */}
        </View>
      </TouchableWithoutFeedback>
      <SocialSection post={post} />
    </View>
  );
};
```

--------------------------------

### Manage Portals Imperatively with usePortal Hook (React Native)

Source: https://kirillzyusko.github.io/react-native-teleport/docs/api/hooks/use-portal

The `usePortal` hook provides an imperative way to manage portals. It takes a `hostName` as an argument and returns a `removePortal` function. This function allows you to remove a specific portal by its name from the host container. Note that removing a portal does not prevent a new portal with the same name from being added later.

```javascript
import { usePortal } from "react-native-teleport";

export default function App() {
  const { removePortal } = usePortal("root");

  return (
    <View style={{ flex: 1 }}>
      <Button title="Remove" onPress={() => removePortal("portal")} />
    </View>
  );
}
```

```typescript
/**
 * @param hostName - `name` of the `<PortalHost />` component
 */
type usePortal = (hostName: string = "root") => {
  /**
   * Remove portal from host container. Subsequent re-renders will not restore portal,
   * but if you mount a new portal with the same name it will be shown (i. e. hook doesn't
   * prevent new portal from being added).
   * @param name - `name` of `<Portal />` component.
   */
  removePortal: (name: string) => void;
};

```

--------------------------------

### Update Post Component with React Native Teleport

Source: https://kirillzyusko.github.io/react-native-teleport/docs/recipes/instagram-shared-transitions

The Post component utilizes react-native-teleport's Portal to manage content transitions. It wraps video or image content within a Portal whose hostName changes based on the transition state, allowing the content to 'teleport' between different destinations. Animations are handled by react-native-reanimated, interpolating height and translateY based on the transition progress and position.

```typescript
import { View, StyleSheet, Image } from "react-native";
import Video, { ViewType } from "react-native-video";
import { Portal } from "react-native-teleport";
import { TouchableWithoutFeedback } from "react-native-gesture-handler";
import Reanimated, {
  interpolate,
  useAnimatedStyle,
} from "react-native-reanimated";
import { useNavigation } from "@react-navigation/native";
import { useRef } from "react";
import { useTransition } from "./hooks/useTransition";
import useMeasure from "../../hooks/useMeasure";
import { VIDEO_HEIGHT, SCREEN_HEIGHT, CARD_HEIGHT } from "./constants";
import SocialSection from "./components/SocialSection";

const Post = ({ post, active }) => {
  const videoRef = useRef(null);
  const navigation = useNavigation();
  const measure = useMeasure(videoRef);

  // Subscribe to only the state slices this post needs
  const shouldMove = useTransition((state) => state.id === post.id);
  const setId = useTransition((state) => state.setId);
  const progress = useTransition((state) => state.progress);
  const goToReels = useTransition((state) => state.goToReels);
  const destination = useTransition((state) =>
    shouldMove ? state.destination : undefined,
  );
  const y = useTransition((state) => (shouldMove ? state.y : 0));

  const onPress = () => {
    if (post.photo) return;
    setId(post.id);
    measure((_x, _y) => {
      navigation.navigate("Reels", { post });
      goToReels(_y);
    });
  };

  // Animate height and position based on progress
  const frame = useAnimatedStyle(
    () => ({
      height: shouldMove
        ? interpolate(progress.value, [0, 1], [VIDEO_HEIGHT, SCREEN_HEIGHT])
        : VIDEO_HEIGHT,
      transform: [
        {
          translateY: shouldMove
            ? interpolate(progress.value, [0, 1], [0, -y])
            : 0,
        },
      ],
    }),
    [shouldMove, y],
  );

  return (
    <View style={{ height: CARD_HEIGHT }}>
      <TouchableWithoutFeedback onPress={onPress}>
        <View ref={videoRef} style={styles.container}>
          <Portal hostName={shouldMove ? destination : undefined}>
            <Reanimated.View style={[{ width: "100%" }, frame]}>
              {post.video && (
                <Video
                  source={{ uri: post.video }}
                  style={[styles.video, { top: shouldMove ? y : 0 }]}
                  repeat
                  paused={!active}
                  controls={false}
                  resizeMode="cover"
                  viewType={ViewType.TEXTURE}
                />
              )}
              {post.photo && (
                <Image source={{ uri: post.photo }} style={styles.photo} />
              )}
            </Reanimated.View>
          </Portal>
        </View>
      </TouchableWithoutFeedback>
      <SocialSection post={post} />
    </View>
  );
};

export default Post;

```

--------------------------------

### Add PortalHost to Modal Screen (React Native)

Source: https://kirillzyusko.github.io/react-native-teleport/docs/recipes/modals

This code snippet demonstrates how to add a PortalHost within a modal screen component. This is necessary because modals create a separate native window hierarchy, and the PortalHost needs to be within that hierarchy for teleported components to render correctly. The PortalHost is configured with a specific name to target portals.

```javascript
import { StyleSheet, View } from "react-native";
import { PortalHost } from "react-native-teleport";

function ModalScreen() {
  return (
    <View style={styles.container}>
      {/* Your modal content */}
      <YourModalContent />

      {/* Add a PortalHost for this modal's window */}
      <PortalHost style={StyleSheet.absoluteFillObject} name="modal-overlay" />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
});
```

--------------------------------

### Define Platform-Specific Floating Element Destination (React Native)

Source: https://kirillzyusko.github.io/react-native-teleport/docs/recipes/instagram-shared-transitions

Configures the destination for floating elements based on the platform in a React Native application. It uses `Platform.select` to determine whether to use `undefined` for iOS (natural rendering) or a string like "root" for Android (explicit portaling).

```typescript
import { Platform } from "react-native";

export const FLOATING_ELEMENTS_DESTINATION = Platform.select({
  ios: undefined, // renders naturally above the modal
  default: "root", // needs explicit portaling on Android
});

```

--------------------------------

### Build Social Section Component in React Native

Source: https://kirillzyusko.github.io/react-native-teleport/docs/recipes/instagram-shared-transitions

The SocialSection component displays social interaction elements for a post, including likes, comments, shares, and bookmarks. It also shows the author's name, post description, and date. Dependencies include react-native and @react-native-vector-icons/fontawesome6.

```typescript
import { FontAwesome6 } from "@react-native-vector-icons/fontawesome6";
import { View, Text, StyleSheet } from "react-native";
import type { PostType } from "../posts";

type SocialSectionProps = {
  post: PostType;
};

function SocialSection({ post }: SocialSectionProps) {
  return (
    <View style={styles.container}>
      <View style={styles.row}>
        <View style={styles.iconGroup}>
          <View style={styles.icon}>
            <FontAwesome6 name="heart" size={24} />
            <Text style={styles.iconText}>{post.likes}</Text>
          </View>
          <View style={styles.icon}>
            <FontAwesome6 name="comments" size={24} />
            <Text style={styles.iconText}>{post.comments}</Text>
          </View>
          <FontAwesome6 name="paper-plane" size={24} />
        </View>
        <FontAwesome6 name="bookmark" size={24} />
      </View>
      <View style={styles.authorSection}>
        <Text style={styles.author}>{post.author}</Text>
        <Text style={styles.description}>{post.text}</Text>
      </View>
      <Text style={styles.date}>{post.date}</Text>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    margin: 12,
  },
  row: {
    flexDirection: "row",
    justifyContent: "space-between",
  },
  iconGroup: {
    flexDirection: "row",
    gap: 14,
    alignItems: "center",
  },
  icon: {
    flexDirection: "row",
    alignItems: "center",
    gap: 6,
  },
  iconText: {
    fontWeight: "600",
  },
  description: {
    fontWeight: "400",
    color: "black",
  },
  date: { paddingTop: 4, color: "#5c5c5c" },
  authorSection: {
    paddingTop: 8,
    flexDirection: "row",
  },
  author: {
    fontWeight: "700",
    paddingRight: 4,
  },
});

export default SocialSection;
```

--------------------------------

### Fixed Container Height for ScrollView Stability

Source: https://kirillzyusko.github.io/react-native-teleport/docs/recipes/instagram-shared-transitions

The outer View component maintains a fixed height (`CARD_HEIGHT`) even when its child content (like a video) is teleported away. This is essential for preventing the parent ScrollView from reflowing and jumping, which would disrupt the scroll position and potentially change which item is currently active.

```jsx
<View style={{ height: CARD_HEIGHT }}>
```

--------------------------------

### Disable Scroll During Transitions in Feed Screen (React Native Reanimated)

Source: https://kirillzyusko.github.io/react-native-teleport/docs/recipes/instagram-shared-transitions

This snippet demonstrates how to disable scrolling in a `Reanimated.ScrollView` during transitions. The `scrollEnabled` prop is controlled by the animation progress, ensuring scrolling is only active when the feed is fully visible (progress === 0).

```typescript
import Reanimated, { useAnimatedProps } from "react-native-reanimated";
import { useTransition } from "./hooks/useTransition";

export default function Feed() {
  const progress = useTransition((state) => state.progress);

  const animatedProps = useAnimatedProps(
    () => ({
      scrollEnabled: progress.value === 0, // only scroll when fully on feed
    }),
    [],
  );

  return (
    <Reanimated.ScrollView animatedProps={animatedProps}>
      {/* posts */}
    </Reanimated.ScrollView>
  );
}

```

--------------------------------

### Disable Scroll During Transitions in Reels Screen (React Native Reanimated)

Source: https://kirillzyusko.github.io/react-native-teleport/docs/recipes/instagram-shared-transitions

This snippet shows how to disable scrolling in the Reels screen during transitions using `react-native-reanimated`. The `scrollEnabled` prop is set based on the animation progress, allowing scrolling only when the reels view is fully active (progress === 1).

```typescript
const animatedProps = useAnimatedProps(
  () => ({
    scrollEnabled: progress.value === 1, // only scroll when fully on reels
  }),
  [],
);

```
Tokens:
Raw