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.
- 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.
To integrate the FloatingBox
into your project, follow these steps:
-
Ensure you have
react-native-gesture-handler
andreact-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
-
Import the
FloatingBox
component into your project file:import FloatingBox from 'rn-float-box';
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}
initialPosition={{ x: 50, y: 50 }}
containerStyle={{ backgroundColor: 'blue' }}
>
<Text>Content goes here</Text>
</FloatingBox>
</View>
);
};
export default App;
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 |
initialPosition |
object | The initial x and y position of the box on the screen. | None |
children |
ReactNode | The content to be rendered inside the box. | null |
containerStyle |
object | Additional styling for the box's container. | {} |
FloatingBox
exposes the following methods, which can be accessed using the component's ref:
Method | Parameters | Description |
---|---|---|
move |
position: object |
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. |
scaleToFit |
None | Scale the box to fit within the screen without altering the aspect ratio. |
scaleToFull |
None | Scale the box to completely fill the screen. |
This project is licensed under the MIT License.