yarn add react-native-arrow-follow- For Native project:
yarn add react-native-svg
pod install- For Expo project:
expo install react-native-svgimport { 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
}}
/>
// ...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',
}See the contributing guide to learn how to contribute to the repository and the development workflow.
MIT