react-native-image-tagging

React Native Image Tagging

Tag your images with a responsive package that returns x & y coordinates respectively. Supports RTL.

Installation

• Install React Native Image Tagging package.

  yarn add react-native-image-tagging
  # or using npm
  npm install react-native-image-tagging --save
  

• Install React Native Vector Icons package and make sure fonts are included on the native project - more info: https://github.com/oblador/react-native-vector-icons

  yarn add react-native-vector-icons
  # or using npm
  npm install react-native-vector-icons --save
  

Example:

import Tagging from "react-native-image-tagging";

const [tags, setTags] = useState([]);
const [availablePersons, setAvailablePersons] = useState([
  { id: 1, name: "John Doe" },
  { id: 2, name: "Jane Doe" },
  { id: 3, name: "John Doe 2" },
  { id: 4, name: "Jane Doe 2" },
]);

return (
  <View style={{ flex: 1, justifyContent: "center" }}>
    <Tagging
      tagsState={[tags, setTags]}
      availablePersonsState={[availablePersons, setAvailablePersons]}
    >
      <Image
        style={{
          height: WP(100),
          width: WP(100),
          resizeMode: "contain",
        }}
        source={require("./image.png")}
      />
    </Tagging>
  </View>
);

Pass tags & available persons state and setter as tagsState & availablePersonsState. Pass an image as the child for the Tagging JSX