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