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 [email protected] [email protected] [email protected] [email protected]

Or using yarn

yarn add [email protected] [email protected] [email protected] [email protected]

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

android/build.gradle

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

android/app/src/main/java[Your Packages]/MainApplication.java

add these two line to the top:

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

Add the ReactNativeHost

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

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

IOS installation

Mac Intel

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

Mac M1

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.

Property | Type | Description --------------------|-----------------------------------------------------|------------------------------------------------------------------- width | number | The default setting for the float component width is 200. height | number | The default setting for the float component height is 130. position | 'left-top' 'left-bottom' 'right-top' 'right-bottom' | The setting determines for the position of the left-top float component. item | React.Element | It has no elements by default just a container to wrap its element.