A simple view that animates the border using a fill animation. Built with reanimated 2.3.
- Double fill start from bottom center finish top center
export interface AnimatedBorderViewProps {
style?: StyleProp<ViewStyle>;
children: React.ReactNode;
startAnimation: Boolean;
color?: string; // default green
animationWidth?: number; // default 2
animationDuration?: number; // default 1500
}
npm install react-native-animated-border
import AnimatedBorderView from "react-native-animated-border";
// ...
<AnimatedBorderView
startAnimation={ready}
style={styles.box}
children={
<Text style={{ textAlign: 'center', margin: 10 }}>Testing </Text>
}
></AnimatedBorderView>
- Undo Functionality
- Implements new fill animations
- Double fill start from middle bottom
- One way fill
- Choose a corner to start fill
See the contributing guide to learn how to contribute to the repository and the development workflow.
MIT