docs: extracted animated icons into separate file

README.md

@@ -162,42 +162,7 @@ export default () => (
 
 </details>
 
-### Animated Icon
-
-In order to animate the tab icon color, you will need to use the provded prop `color` that will be provided to the icon.
-
-This example below should explain it better:
-
-```tsx
-import React from 'react';
-import Animated from 'react-native-reanimated';
-import Svg, { Path } from 'react-native-svg';
-
-const AnimatedPath = Animated.createAnimatedComponent(Path);
-
-interface AnimatedSVGProps {
-  color: Animated.Node<string>;
-  size: number;
-}
-
-const AnimatedSVG = ({ color, size }: AnimatedSVGProps) => {
-  return (
-    <Svg width={size} height={size} viewBox="0 0 20 22">
-      <AnimatedPath
-        d="M1 8l9-7 9 7v11a2 2 0 01-2 2H3a2 2 0 01-2-2V8z"
-        stroke={color}
-        strokeWidth={2}
-        fill="none"
-        fillRule="evenodd"
-        strokeLinecap="round"
-        strokeLinejoin="round"
-      />
-    </Svg>
-  );
-};
-
-export default AnimatedSVG;
-```
+> To configure animated icons, please have a look at [Animated Icons](./docs/animated-icons.md).
 
 ## Props
 
@@ -320,8 +285,8 @@ Tab bar layout and animation direction.
 Originally `Animated TabBar` started with `Bubble` as the only animation preset embedded. However, I felt the library structure could include many other variety of animation presets.
 
 <table>
-      <tr><td><a href="./docs/bubble-preset">Bubble Preset</a></td></tr>
-      <tr><td><a href="./docs/bubble-preset"><img src="./docs/previews/bubble.gif" /></a></td></tr>
+      <tr><td><a href="./docs/bubble-preset.md">Bubble Preset</a></td></tr>
+      <tr><td><a href="./docs/bubble-preset.md"><img src="./docs/previews/bubble.gif" /></a></td></tr>
 </table>
 
 ## To Do

docs/animated-icons.md

@@ -0,0 +1,50 @@
+# Animated Icons
+
+In order to animate the tab icon color, shape & size. You will need to use the provded props `color` & `animatedFocus` that will be provided to the icon.
+
+This example for `bubble` icon below should explain it better:
+
+```tsx
+import React from 'react';
+import Animated from 'react-native-reanimated';
+import Svg, { Path } from 'react-native-svg';
+
+const AnimatedPath = Animated.createAnimatedComponent(Path);
+
+interface AnimatedSVGProps {
+  /**
+   * The tab animated focus:
+   * 1 is active
+   * 0 is inactive
+   */
+  animatedFocus: Animated.Node<number>;
+
+  /**
+   * Animated color.
+   */
+  color: Animated.Node<string>;
+
+  /**
+   * Icon size.
+   */
+  size: number;
+}
+
+const AnimatedSVG = ({ animatedFocus, color, size }: AnimatedSVGProps) => {
+  return (
+    <Svg width={size} height={size} viewBox="0 0 20 22">
+      <AnimatedPath
+        d="M1 8l9-7 9 7v11a2 2 0 01-2 2H3a2 2 0 01-2-2V8z"
+        stroke={color}
+        strokeWidth={2}
+        fill="none"
+        fillRule="evenodd"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </Svg>
+  );
+};
+
+export default AnimatedSVG;
+```

docs/bubble-preset.md

@@ -32,7 +32,7 @@ Icon component, this could be a function or a react node.
 
 ```ts
 /**
- * @type {() => React.ReactNode | React.ReactNode}
+ * @type {(props: BubbleTabIconProps) => React.ReactNode | React.ReactNode}
  */
 ```
 
@@ -80,7 +80,9 @@ Background inactive color.
  */
 ```
 
-## Interface
+## Interfaces
+
+### `BubbleTabConfig`
 
 ```ts
 export interface BubbleTabConfig {
@@ -102,13 +104,10 @@ export interface BubbleTabConfig {
     /**
      * Tab bar item icon component, this could be a function or
      * a react node.
-     * @type {() => React.ReactNode | React.ReactNode}
+     * @type {(props: BubbleTabIconProps) => React.ReactNode | React.ReactNode}
      */
     component:
-      | ((props: {
-          color: Animated.Node<string | number>;
-          size: number;
-        }) => React.ReactNode)
+      | ((props: BubbleTabIconProps) => React.ReactNode)
       | React.ReactNode;
 
     /**
@@ -136,3 +135,13 @@ export interface BubbleTabConfig {
   };
 }
 ```
+
+### `BubbleTabIconProps`
+
+```ts
+export interface BubbleTabIconProps {
+  animatedFocus: Animated.Node<number>;
+  color: Animated.Node<string | number>;
+  size: number;
+}
+```