react-native-arrow-follow

Installation

- Installing:

yarn add react-native-arrow-follow

- Installing dependencies:

• For Native project:

yarn add react-native-svg

pod install

• For Expo project:

expo install react-native-svg

Usage

import { ArrowFollow, CORNER, DIRECTION } from "react-native-arrow-follow";

// ...

  <ArrowFollow //
    width={200}
    height={200}
    color={"#000000"}
    size={14}
    start={{
      corner: CORNER.TOP_RIGHT,
      direction: DIRECTION.HORIZONTAL
    }}
    end={{
      corner: CORNER.BOTTOM_LEFT,
      direction: DIRECTION.HORIZONTAL
    }}
  />

// ...

Documentation:

A React node that will be most likely wrapping your whole app.

| Name | Description | Require | Default | Type | | ---------- | ------------------ | -------- | -------- | ---------------------------------------- | | height | height rectangle | * | | number | | width | width rectangle | * | | number | | size | size line | | 12 | number | | color | color code | | #000000 | string | | start | start arrow | * | | {corner:CORNER, direction: DIRECTION} | | end | end arrow | * | | {corner:CORNER, direction: DIRECTION} |

type IProps = {
  height: number;
  width: number;
  size?: number;
  color?: string;
  start: {
    corner: ICorner;
    direction: IDirection
  };
  end: {
    corner: ICorner;
    direction: IDirection
  };
};
type ICorner = CORNER | keyof typeof CORNER; //`${VERTICAL}_${HORIZONTAL}`;
type IDirection = DIRECTION | keyof typeof DIRECTION;

enum DIRECTION {
  HORIZONTAL = 'HORIZONTAL',
  VERTICAL = 'VERTICAL',
}
enum CORNER {
  TOP_LEFT = 'TOP_LEFT',
  TOP_RIGHT = 'TOP_RIGHT',
  BOTTOM_LEFT = 'BOTTOM_LEFT',
  BOTTOM_RIGHT = 'BOTTOM_RIGHT',
}

Contributing

See the contributing guide to learn how to contribute to the repository and the development workflow.

License

MIT