react-native-arrow-follow
Version:
Arrow follow type schema in SVG
104 lines (79 loc) • 2.34 kB
Markdown
<img src=".github/image/preview.gif?raw=true" height="280" />
```sh
yarn add react-native-arrow-follow
```
- For Native project:
```sh
yarn add react-native-svg
pod install
```
- For Expo project:
```sh
expo install react-native-svg
```
```tsx
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
}}
/>
// ...
```
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 | |
| start | start arrow | * | | {corner:CORNER, direction: DIRECTION} |
| end | end arrow | * | | {corner:CORNER, direction: DIRECTION} |
```ts
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](CONTRIBUTING.md) to learn how to contribute to the repository and the development workflow.
MIT