Skip to content

Commit 4da5b0b

Browse files
committed
fix: prevent animation memory leaks and improve documentation
- Add proper cleanup for VerticalStick animation on unmount - Fix license badge URL to point to correct repository - Enhance README with better examples and autofill description
1 parent 6801a6d commit 4da5b0b

File tree

2 files changed

+21
-7
lines changed

2 files changed

+21
-7
lines changed

README.MD renamed to README.md

Lines changed: 8 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44
[![npm](https://img.shields.io/npm/dm/react-native-otp-entry.svg?&kill_cache=1)]()
55
[![install size](https://packagephobia.com/badge?p=react-native-otp-entry)](https://packagephobia.com/result?p=react-native-otp-entry)
66
[![cov](https://anday013.github.io/react-native-otp-entry/badges/coverage.svg?&kill_cache=1)](https://github.com/anday013/react-native-otp-entry/actions)
7-
[![License](https://img.shields.io/badge/license-MIT-blue.svg?&kill_cache=1)](https://github.com/your-username/react-native-otp-entry/blob/main/LICENSE)
7+
[![License](https://img.shields.io/badge/license-MIT-blue.svg?&kill_cache=1)](https://github.com/anday013/react-native-otp-entry/blob/main/LICENSE)
88

99
`react-native-otp-entry` is a simple and highly customizable React Native component for entering OTP (One-Time Password) on iOS, Android, and Web. It provides an intuitive and user-friendly interface for inputting one-time passwords in your React Native applications.
1010

@@ -16,7 +16,7 @@
1616

1717
- Simple and easy-to-use OTP input component.
1818
- Highly customizable appearance and styling.
19-
- Supports autofill
19+
- Supports autofill and placeholder text.
2020
- Effortlessly integrates with **React Native**, **Expo**, and **React Native Web** platforms.
2121
- Fully typed with TypeScript.
2222
- Fully covered with unit tests.
@@ -53,7 +53,11 @@ yarn add react-native-otp-entry
5353
2. Render the `OtpInput` component in your screen/component:
5454

5555
```jsx
56-
<OtpInput numberOfDigits={6} onTextChange={(text) => console.log(text)} />
56+
<OtpInput
57+
numberOfDigits={6}
58+
onTextChange={(text) => console.log(text)}
59+
onFilled={(text) => console.log(`OTP completed: ${text}`)}
60+
/>
5761
```
5862

5963
3. Customize the styling as per your requirements:
@@ -149,7 +153,7 @@ The `react-native-otp-entry` component exposes these functions with `ref`:
149153

150154
## License
151155

152-
This project is licensed under the [MIT License](https://github.com/your-username/react-native-otp-entry/blob/main/LICENSE).
156+
This project is licensed under the [MIT License](https://github.com/anday013/react-native-otp-entry/blob/main/LICENSE).
153157

154158
## Contributing
155159

src/OtpInput/VerticalStick.tsx

Lines changed: 13 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -12,9 +12,10 @@ interface VerticalStickProps {
1212
export const VerticalStick: React.FC<VerticalStickProps> = memo(
1313
({ focusColor, style, focusStickBlinkingDuration = 350 }) => {
1414
const opacityAnim = useRef(new Animated.Value(1)).current;
15+
const animationRef = useRef<Animated.CompositeAnimation | null>(null);
1516

1617
useEffect(() => {
17-
Animated.loop(
18+
animationRef.current = Animated.loop(
1819
Animated.sequence([
1920
Animated.timing(opacityAnim, {
2021
toValue: 0,
@@ -30,8 +31,17 @@ export const VerticalStick: React.FC<VerticalStickProps> = memo(
3031
{
3132
iterations: -1,
3233
}
33-
).start();
34-
}, []);
34+
);
35+
36+
animationRef.current.start();
37+
38+
return () => {
39+
if (animationRef.current) {
40+
animationRef.current.stop();
41+
opacityAnim.setValue(1);
42+
}
43+
};
44+
}, [focusStickBlinkingDuration]);
3545

3646
return (
3747
<Animated.View style={{ opacity: opacityAnim }}>

0 commit comments

Comments
 (0)