feat: add alternative api

Author: kacperkapusciak

README.md

@@ -20,14 +20,12 @@ Add `spin` style object to an `Animated` component add a linear spinning animati
 
 <img src="https://github.com/user-attachments/assets/d3a87650-83f4-476b-bf85-832a3a2d0fea" alt="Spin animation demo" align="right" width="275" />
 
-```typescript
+```jsx
 import { spin } from 'react-native-css-animations';
 import Animated from 'react-native-reanimated';
 
 function App() {
-  return (
-    <Animated.View style={[styles.spinner, spin]}/>
-  )
+  return <Animated.View style={[styles.spinner, spin]} />;
 }
 ```
 
@@ -37,14 +35,12 @@ Add `ping` style object to an `Animated` component to make the element scale and
 
 <img src="https://github.com/user-attachments/assets/51c604b4-621b-4821-ab9a-f289f15e07ae" alt="Ping animation demo" align="right" width="275" />
 
-```typescript
+```jsx
 import { ping } from 'react-native-css-animations';
 import Animated from 'react-native-reanimated';
 
 function App() {
-  return (
-    <Animated.View style={[styles.notification, ping]}/>
-  )
+  return <Animated.View style={[styles.notification, ping]} />;
 }
 ```
 
@@ -54,14 +50,12 @@ Add `pulse` style object to an `Animated` component to make it fade in and out.
 
 <img src="https://github.com/user-attachments/assets/d36924b1-f4f8-4bd4-b3dd-a298d3b2f4b6" alt="Pulse animation demo" align="right" width="275"/>
 
-```typescript
+```jsx
 import { pulse } from 'react-native-css-animations';
 import Animated from 'react-native-reanimated';
 
 function App() {
-  return (
-    <Animated.View style={[styles.skeleton, pulse]}/>
-  )
+  return <Animated.View style={[styles.skeleton, pulse]} />;
 }
 ```
 
@@ -71,14 +65,28 @@ Add `bounce` style object to an `Animated` component to make it bounce up and do
 
 <img src="https://github.com/user-attachments/assets/81e75ed0-b7ec-4f56-a06a-c593a626cb39" alt="Bounce animation demo" align="right" width="275" />
 
-```typescript
+```jsx
 import { bounce } from 'react-native-css-animations';
 import Animated from 'react-native-reanimated';
 
+function App() {
+  return <Animated.View style={[styles.arrow, bounce]} />;
+}
+```
+
+## Alternative API
+
+The following animations are also available in a form of React Native components.
+
+```jsx
+import { Spin, Ping, Pulse, Bounce } from 'react-native-css-animations';
+
 function App() {
   return (
-    <Animated.View style={[styles.arrow, bounce]}/>
-  )
+    <Bounce>
+      <ArrowIcon />
+    </Bounce>
+  );
 }
 ```
 

src/index.tsx

@@ -20,9 +20,13 @@
 // OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
 // SOFTWARE.
 
-import { cubicBezier } from 'react-native-reanimated';
+import Animated, { cubicBezier } from 'react-native-reanimated';
 import type { CSSStyleDeclaration } from 'react-native-reanimated/lib/typescript/css/types';
 
+interface CSSAnimationProps {
+  style?: CSSStyleDeclaration;
+}
+
 export const spin: CSSStyleDeclaration = {
   animationName: {
     to: {
@@ -34,6 +38,18 @@ export const spin: CSSStyleDeclaration = {
   animationIterationCount: 'infinite',
 };
 
+export function Spin({
+  style,
+  children,
+  ...rest
+}: React.PropsWithChildren<CSSAnimationProps>): JSX.Element {
+  return (
+    <Animated.View style={[spin, style]} {...rest}>
+      {children}
+    </Animated.View>
+  );
+}
+
 export const ping: CSSStyleDeclaration = {
   animationName: {
     '75%, 100%': {
@@ -46,6 +62,18 @@ export const ping: CSSStyleDeclaration = {
   animationIterationCount: 'infinite',
 };
 
+export function Ping({
+  style,
+  children,
+  ...rest
+}: React.PropsWithChildren<CSSAnimationProps>): JSX.Element {
+  return (
+    <Animated.View style={[ping, style]} {...rest}>
+      {children}
+    </Animated.View>
+  );
+}
+
 export const pulse: CSSStyleDeclaration = {
   animationName: {
     '50%': {
@@ -57,6 +85,18 @@ export const pulse: CSSStyleDeclaration = {
   animationIterationCount: 'infinite',
 };
 
+export function Pulse({
+  style,
+  children,
+  ...rest
+}: React.PropsWithChildren<CSSAnimationProps>): JSX.Element {
+  return (
+    <Animated.View style={[pulse, style]} {...rest}>
+      {children}
+    </Animated.View>
+  );
+}
+
 export const bounce: CSSStyleDeclaration = {
   animationName: {
     '0%, 100%': {
@@ -71,3 +111,15 @@ export const bounce: CSSStyleDeclaration = {
   animationDuration: '1s',
   animationIterationCount: 'infinite',
 };
+
+export function Bounce({
+  style,
+  children,
+  ...rest
+}: React.PropsWithChildren<CSSAnimationProps>): JSX.Element {
+  return (
+    <Animated.View style={[bounce, style]} {...rest}>
+      {children}
+    </Animated.View>
+  );
+}