react-native-popout

Warning

This library is still in development. It is not yet ready for production use.

A popout-style transition using reanimated, react-native-skia and react-native-gesture-handler.
The animation runs smooth at 60+ FPS on my iPhone and iOS simulator. Android runs at 50+ FPS on my emulator at the moment.

Demo video (download to get a proper feel of the smoothness, as the Github video player runs at a lower FPS);

RPReplay_Final1706561083.mp4

Features

• Smooth transitions thanks to Reanimated and react-native-skia.
• Custom renderings in both the tile and popout.
• Popout animates from- and to the tile.
• Drag the popout more than 200px down to close it.
• Optional blur of the entire screen behind the popout.
• Optional blurred image background for the popout.

Libraries used;

• reanimated for the transition animation
• react-native-skia for image effects.
• react-native-gesture-handler for dragging the popout
• react-native-safe-area-context to ensure the popout renders below a notch, if applicable

Inspired by the Netflix, Balance and App Store iOS apps.

I find this transition to be natural and visually pleasing. Using the reanimated library, it is possible to create a smooth transition between the tile and the popout. Using the react-native-skia library, it is possible to add a blur effect to the background of the popout. This makes the popout stand out from the rest of the app, and makes it easier to focus on the popout. The 'react-native-gesture-handler' library is used to make the popout draggable. This makes it possible to close the popout by dragging it down.

Installation

To install the library, navigate to your project directory and run:

npm install --save react-native-popout

or if you are using Yarn:

yarn add react-native-popout

and if not yet present in your project, install the following packages;

yarn add react-native-reanimated react-native-gesture-handler react-native-safe-area-context @shopify/react-native-skia

Make sure you add the following to your info.plist file dict, in order to support 120hz ProMotion iPhone performance:

<key>CADisableMinimumFrameDurationOnPhone</key>
<true/>

Usage

API specification can be found here.

Here's a minimal example of how to use the library:

Your App.tsx / index.js file

import PopoutRootView from "react-native-popout";
import { SafeAreaProvider } from "react-native-safe-area-context";
import Screen from "./Screen";

const App = () => {
  return (
    <SafeAreaProvider style={{ backgroundColor: "black" }}>
      <PopoutRootView>
        <Screen />
      </PopoutRootView>
    </SafeAreaProvider>
  );
};

export default App;

Your Screen.tsx file (or a name of your choice)

import React, {useContext} from 'react';
import {SafeAreaView, ScrollView, Text, View} from 'react-native';
import {PopoutTile, PopoutContext, PopoutTileType} from 'react-native-popout';
import {useSafeAreaInsets} from 'react-native-safe-area-context';

const TEST_ITEM = {
  id: 0,
  title: 'Test',
  image: 'https://images.unsplash.com/photo-1682685797208-c741d58c2eff?q=80&w=3540&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDF8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',
}: PopoutTileType;

const Screen = () => {
  const insets = useSafeAreaInsets();

  return (
    <View style={{paddingTop: insets.top}}>
      <PopoutTile
        item={TEST_ITEM}
        OverlayComponent={() => (
          <View style={{margin: 20}}>
            <Text style={{color: 'white'}}>{TEST_ITEM.title}</Text>
          </View>
        )}
      />
    </View>
  );
};

export default Screen;

Contributing

See the contributing guide to learn how to contribute to the repository and the development workflow.

License

MIT

---

Made with create-react-native-library