https://github.com/rodsarhan/react-native-image-editor-ui
https://github.com/rodsarhan/react-native-image-editor-ui
Last synced: about 1 year ago
JSON representation
- Host: GitHub
- URL: https://github.com/rodsarhan/react-native-image-editor-ui
- Owner: RodSarhan
- License: mit
- Created: 2025-03-06T14:08:55.000Z (about 1 year ago)
- Default Branch: main
- Last Pushed: 2025-03-06T14:11:30.000Z (about 1 year ago)
- Last Synced: 2025-03-06T15:25:12.386Z (about 1 year ago)
- Language: TypeScript
- Size: 1.32 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
Awesome Lists containing this project
README
# React Native Image Editor UI
JS based image editor ui for react native that relies on reanimated and gesture handler
## Installation
```sh
npm install react-native-image-editor-ui
```
## Usage
```tsx
import {ImageManipulationView, type ImageManipulationMethods} from 'react-native-image-editor-ui';
// This is just an example, you can use some other image editing library
import {ImageManipulator} from 'expo-image-manipulator';
const App = () => {
const [savedImageUri, setSavedImageUri] = useState();
const imageManipulationRef = useRef(null);
const onPressReset = imageManipulationRef.current?.reset();
const onFlipX = imageManipulationRef.current?.flipX();
const onFlipY = imageManipulationRef.current?.flipY();
const onPressRotateRight = imageManipulationRef.current?.rotateRight();
const onPressSave = useCallback(async () => {
const editResults = await imageManipulationRef.current?.save();
if (!editResults) return;
// You can use any other library
// The order of transformations matters and follow this
// Flip -> Rotate -> Crop
const context = ImageManipulator.manipulate(sampleUri);
if (editResults.isFlippedX) {
context.flip('horizontal');
}
if (editResults.isFlippedY) {
context.flip('vertical');
}
if (editResults.rotation !== 0) {
context.rotate(editResults.rotation);
}
context.crop({
height: editResults.cropHeight,
width: editResults.cropWidth,
originX: editResults.cropLeftOffset,
originY: editResults.cropTopOffset,
});
const renderResult = await context.renderAsync();
const image = await renderResult.saveAsync();
// Do something with the resulting image
setSavedImageUri(image.uri);
}, []);
return (
{/* you can add your custom buttons */}
)
}
```
## TODO
- [ ] Fix rotations for aspect ratios other than 1
- [ ] Improve zooming functionality and moving the image around
- [ ] Document the features and limitations
- [ ] Publish to npm
## Contributing
See the [contributing guide](CONTRIBUTING.md) to learn how to contribute to the repository and the development workflow.
## License
MIT
---
Made with [create-react-native-library](https://github.com/callstack/react-native-builder-bob)