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.