React Native FloatingBox Component

Overview

FloatingBox is a React component designed for use in React Native applications. It leverages the react-native-gesture-handler and react-native-reanimated libraries to provide an interactive box that can be scaled and moved across the screen using gestures. This component is well-suited for applications where interactive, resizable, and movable UI elements are required, such as photo editors, interactive dashboards, or custom layout editors.

Features

• Scalable and Movable: The FloatingBox can be resized using pinch gestures and moved across the screen with pan gestures.
• Bounds Limiting: Incorporates logic to prevent the box from scaling beyond the screen size or moving outside the visible area.
• Customizable: Allows for custom children to be rendered inside the box and supports customizable styling.

Installation

To integrate the FloatingBox into your project, follow these steps:

1. Ensure you have react-native-gesture-handler and react-native-reanimated installed in your project. If not, install them using npm or yarn:

   npm install react-native-gesture-handler react-native-reanimated

   or

   yarn add react-native-gesture-handler react-native-reanimated

2. Import the FloatingBox component into your project file:

   import FloatingBox from 'rn-float-box';

Usage

Here is a basic example of how to use the FloatingBox component in a React Native application:

import React from 'react';
import { View, Text } from 'react-native';
import FloatingBox from 'rn-float-box';

const App = () => {
  return (
    <View style={{ flex: 1 }}>
      <FloatingBox
        height={100}
        width={100}
        initialProps={{ visible: true, panGestureEnabled: true, pinchGestureEnabled: true }}
        containerStyle={{ backgroundColor: 'blue' }}
      >
        <Text>Content goes here</Text>
      </FloatingBox>
    </View>
  );
};

export default App;

Props

The following table lists the props available for the FloatingBox component:

Prop	Type	Description	Default Value
height	number	The initial height of the box.	None
width	number	The initial width of the box.	None
initialProps	TInitialProps	Initial visibility and gesture states.	{}
children	ReactNode	The content to be rendered inside the box.	null
containerStyle	ViewStyle	Additional styling for the box's container.	{}
maxScale	number	Maximum scale factor for the box.	None
moveAnimationDuration	number	Duration of the move animation in milliseconds.	350
scaleAnimationDuration	number	Duration of the scale animation in milliseconds.	500
boxProps	TBoxProps	Constraints for box resizing.	{}
scaleProps	TScaleProps	Constraints for box scaling.	{}

Initial Props

The initialProps prop accepts an object of type TInitialProps, which can contain the following properties:

Property	Type	Description	Default Value
visible	boolean	Initial visibility of the box.	true
panGestureEnabled	boolean	Initial state of the pan gesture.	true
pinchGestureEnabled	boolean	Initial state of the pinch gesture.	true

Box Props

The boxProps prop accepts an object of type TBoxProps, which can contain the following properties:

Property	Type	Description	Default Value
minHeightClamp	number	Minimum height for the box.	height / 2
minWidthClamp	number	Minimum width for the box.	width / 2
maxHeightClamp	number	Maximum height for the box.	Screen Height
maxWidthClamp	number	Maximum width for the box.	Screen Width

Scale Props

The scaleProps prop accepts an object of type TScaleProps, which can contain the following properties:

Property	Type	Description	Default Value
minScaleClamp	number	Minimum scale factor for the box.	0.5
maxScaleClamp	number	Maximum scale factor for the box.	2

API Methods

FloatingBox exposes the following methods, which can be accessed using the component's ref:

Method	Parameters	Description
move	position: TFloatingBoxOffset	Move the box to a new position.
setVisible	visibility: boolean	Set the visibility of the box.
getVisible	None	Get the current visibility of the box.
setSizes	height: number, width: number	Set the dimensions of the box.
getSize	None	Get the current dimensions of the box.
setPanGestureState	enabled: boolean	Enable or disable the pan gesture.
getPanGestureState	None	Get the current state of the pan gesture.
setPinchGestureState	enabled: boolean	Enable or disable the pinch gesture.
getPinchGestureState	None	Get the current state of the pinch gesture.

Contributing

Contributions are welcome! Feel free to open an issue or submit a pull request if you find a bug or have a feature request. See the contributing guide to learn how to contribute to the repository and the development workflow.

License

This project is licensed under the MIT License.