react-native-floating

Table of Contents

• About
• Getting Started
• Usage
• Contributing

About

Library to generate picture-in-picture of any component within your applications, it will only be delimited by root

Getting Started

These instructions will help you set up your project correctly.

Prerequisites

What things you need to install the software and how to install them.

Using npm:

npm install react-native-screens@3.17.0 react-native-safe-area-context@4.3.3 react-native-reanimated@2.3.1 react-native-gesture-handler@2.2.0

Or using yarn

yarn add react-native-screens@3.17.0 react-native-safe-area-context@4.3.3 react-native-reanimated@2.3.1 react-native-gesture-handler@2.2.0

Installing

A step by step series of examples that tell you how to get a development env running.

npm install react-native-floating

Or yarn

yarn add react-native-floating

Project installation

babel.config.js

  module.exports = {
    presets: [
      ...
    ],
    plugins: [
      ...
      'react-native-reanimated/plugin',
    ],
  };

Android installation

buildscript {
    ext {
        ...
        // replace 29 to 30
        compileSdkVersion = 30
        ...
    }
    ...
}

import com.facebook.react.bridge.JSIModulePackage;
import com.swmansion.reanimated.ReanimatedJSIModulePackage;

private final ReactNativeHost mReactNativeHost =
  new ReactNativeHost(this) {
    ...

    //add this function
    @Override
    protected JSIModulePackage getJSIModulePackage() {
    return new ReanimatedJSIModulePackage();
    }
};

IOS installation

cd ios/ && pod install && cd ..

cd ios/ && arch -x86_64 pod install && cd ..

Usage

Add this line to the top:

import {FloatingHandleRootView, Floating} from "react-native-floating";

This is the container that delimits the scope of the floating-component

<FloatingHandleRootView>{children}</FloatingHandleRootView>

This is the floating-component

<Floating />

Import into the root of your project

import React from 'react';

import Navigation from './src/navigation';
import {FloatingHandleRootView, Floating} from 'react-native-floating';

const App = () => {
  return (
    <FloatingHandleRootView>
      <Navigation />
      <Floating />
    </FloatingHandleRootView>
  );
};

bufferConfig

Adjust the buffer settings. This prop takes an object with one or more of the properties listed below.