Skip to content
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
12 changes: 8 additions & 4 deletions README.MD → README.md
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@
[![npm](https://img.shields.io/npm/dm/react-native-otp-entry.svg?&kill_cache=1)]()
[![install size](https://packagephobia.com/badge?p=react-native-otp-entry)](https://packagephobia.com/result?p=react-native-otp-entry)
[![cov](https://anday013.github.io/react-native-otp-entry/badges/coverage.svg?&kill_cache=1)](https://github.com/anday013/react-native-otp-entry/actions)
[![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)
[![License](https://img.shields.io/badge/license-MIT-blue.svg?&kill_cache=1)](https://github.com/anday013/react-native-otp-entry/blob/main/LICENSE)

`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.

Expand All @@ -16,7 +16,7 @@

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

```jsx
<OtpInput numberOfDigits={6} onTextChange={(text) => console.log(text)} />
<OtpInput
numberOfDigits={6}
onTextChange={(text) => console.log(text)}
onFilled={(text) => console.log(`OTP completed: ${text}`)}
/>
```

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

## License

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

## Contributing

Expand Down
16 changes: 13 additions & 3 deletions src/OtpInput/VerticalStick.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -12,9 +12,10 @@ interface VerticalStickProps {
export const VerticalStick: React.FC<VerticalStickProps> = memo(
({ focusColor, style, focusStickBlinkingDuration = 350 }) => {
const opacityAnim = useRef(new Animated.Value(1)).current;
const animationRef = useRef<Animated.CompositeAnimation | null>(null);

useEffect(() => {
Animated.loop(
animationRef.current = Animated.loop(
Animated.sequence([
Animated.timing(opacityAnim, {
toValue: 0,
Expand All @@ -30,8 +31,17 @@ export const VerticalStick: React.FC<VerticalStickProps> = memo(
{
iterations: -1,
}
).start();
}, []);
);

animationRef.current.start();

return () => {
if (animationRef.current) {
animationRef.current.stop();
opacityAnim.setValue(1);
}
};
}, [focusStickBlinkingDuration]);

return (
<Animated.View style={{ opacity: opacityAnim }}>
Expand Down