Feature-rich Photo Editing Component For React Native

Description:

The react-native-picture-editor component provides extensive image editing features for React Native applications.

Users can draw on images, add stickers, import photos, and apply various edits directly within the app.

It supports adding and manipulating images and stickers, drawing with multiple colors, scaling, and rotating objects, and saving edited images locally.

How to use it:

1. Install and import the component.

# Yarn
$ yarn add @gorhom/bottom-sheet @shopify/react-native-skia react-native-fs react-native-gesture-handler react-native-image-picker react-native-reanimated react-native-share react-native-svg react-native-picture-editor-v1
# NPM
$ npm install @gorhom/bottom-sheet @shopify/react-native-skia react-native-fs react-native-gesture-handler react-native-image-picker react-native-reanimated react-native-share react-native-svg react-native-picture-editor-v1
import {RNPictureEditor} from 'react-native-picture-editor-v1';

2. Add the picture editor to the app.

function App(): React.JSX.Element {
  return (
    <GestureHandlerRootView style={{flex: 1}}>
      <SafeAreaView style={styles.container}>
        <RNPictureEditor />
      </SafeAreaView>
    </GestureHandlerRootView>
  );
}
const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
});

Preview:

Feature-rich Photo Editing Component For React Native

Add Comment