react-native-surround-view

A surround view based on svg

Installation

npm install react-native-surround-view

Demo

https://user-images.githubusercontent.com/5210019/120792911-d6b3d800-c553-11eb-8a2b-95a7a4f9e4e3.mp4

Usage

import SurroundView from "react-native-surround-view";

// ...

<SurroundView width={200} height={35}>
  <Text>{'Press and hold'}</Text>
</SurroundView>

Props

• width
• height
• strokeColor
• strokeWidth
• duration
• onSurround
• onRelease
• startPoint
• style
• containerStyle

width

sets width of the Surround View.

| Type | Required | | ---------- | -------- | | number | Yes |

height

sets height of the Surround View.

| Type | Required | | ---------- | -------- | | number | Yes |

strokeColor

sets stroke color of the Surround View.

| Type | Required | | ---------- | -------- | | color | No |

strokeWidth

sets stroke width of the Surround View.

| Type | Required | | ---------- | -------- | | number | No |

duration

sets duration for the animation to complete.

| Type | Required | | ---------- | -------- | | number(milliseconds) | No |

onSurround

Callback function that gets called once surrounded.

| Type | Required | | ---------- | -------- | | Function | No |

onRelease

Callback function that gets called once released.

| Type | Required | | ---------- | -------- | | Function | No |

startPoint

String to determine the position to start the animation.

| Type | Required | | ---------- | -------- | | 'TOP_START' | 'TOP_END' | 'BOTTOM_START' | 'BOTTOM_END' | No |

style

Used to style the Surround View.

| Type | Required | | ---------- | -------- | | ViewStyle | No |

containerStyle

Used to style the View insdie svg where children is there.

| Type | Required | | ---------- | -------- | | ViewStyle | No |

Contributing

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

License

MIT