refactor: updated presets types (#61)

* chore: updated presets config type namings * docs: added migration section * docs: updated usage in readme * docs: added preset configurations section
gorhom · Jul 18, 2020 · 3485cb3 · 3485cb3
1 parent 4d38cf8
commit 3485cb3
Show file tree

Hide file tree

Showing 24 changed files with 284 additions and 103 deletions.
diff --git a/README.md b/README.md
@@ -22,9 +22,10 @@ A **60FPS** animated tab bar with a variety of cool animation presets 😎
    1. [Bubble Preset](./docs/bubble-preset.md)
    2. [Flashy Preset](./docs/flashy-preset.md)
    3. [Material Preset](./docs/material-preset.md)
-6. [To Do](#to-do)
-7. [Credits](#built-with)
-8. [License](#license)
+6. [Migration](#migration)
+7. [To Do](#to-do)
+8. [Credits](#built-with)
+9. [License](#license)
 
 ## Features
 
@@ -60,9 +61,9 @@ Now the library export two main components:
 ```tsx
 import React, { useState } from 'react';
 import { View, Text, StyleSheet } from 'react-native';
-import AnimatedTabBar, {TabsConfig, BubbleTabConfig} from '@gorhom/animated-tabbar';
+import AnimatedTabBar, {TabsConfig, BubbleTabBarItemConfig} from '@gorhom/animated-tabbar';
 
-const tabs: TabsConfig<BubbleTabConfig> = {
+const tabs: TabsConfig<BubbleTabBarItemConfig> = {
   Home: {
     labelStyle: {
       color: '#5B37B7',
@@ -135,9 +136,9 @@ export default function App() {
 import React from 'react';
 import { NavigationContainer } from '@react-navigation/native';
 import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
-import AnimatedTabBar, {TabsConfig, BubbleTabConfig} from '@gorhom/animated-tabbar';
+import AnimatedTabBar, {TabsConfig, BubbleTabBarItemConfig} from '@gorhom/animated-tabbar';
 
-const tabs: TabsConfig<BubbleTabConfig> = {
+const tabs: TabsConfig<BubbleTabBarItemConfig> = {
   Home: {
     labelStyle: {
       color: '#5B37B7',
@@ -202,7 +203,7 @@ import React from 'react';
 import {createAppContainer} from 'react-navigation';
 import {createBottomTabNavigator} from 'react-navigation-tabs';
 import {SafeAreaProvider} from 'react-native-safe-area-context';
-import AnimatedTabBar, {TabsConfig, BubbleTabConfig} from '@gorhom/animated-tabbar';
+import AnimatedTabBar, {TabsConfig, BubbleTabBarItemConfig} from '@gorhom/animated-tabbar';
 
 const tabs: TabsConfig<BubbleTabConfig> = {
   Home: {
@@ -274,6 +275,76 @@ export default () => (
 | `isRTL`              | Tab bar layout and animation direction.                                                             | NO       | boolean                                                                                                   | false    |
 | `onLongPress`        | Callback on item long press, `by default it is integrated with React Navigation`.                   | NO       | (index: number) => void                                                                                   | noop     |
 
+### Preset Configurations
+
+Some presets will have its own configurations - like `material` - which they will be added the root view props.
+
+<details>
+
+  <summary>Material Preset Example</summary>
+
+notice here we added `animation`, `inactiveOpacity` & `inactiveScale` to the root view.
+
+```tsx
+
+import React from 'react';
+import { NavigationContainer } from '@react-navigation/native';
+import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
+import AnimatedTabBar, {TabsConfig, MaterialTabBarItemConfig} from '@gorhom/animated-tabbar';
+
+const tabs: TabsConfig<MaterialTabBarItemConfig> = {
+Home: {
+  icon: {
+    component: /* ICON COMPONENT */,
+    color: 'rgba(255,255,255,1)',
+  },
+  ripple: {
+    color: '#5B37B7',
+  },
+},
+Profile: {
+  icon: {
+    component: /* ICON COMPONENT */,
+    color: 'rgba(255,255,255,1)',
+  },
+  ripple: {
+    color: '#1194AA',
+  },
+},
+};
+
+const Tab = createBottomTabNavigator();
+
+export default function App() {
+return (
+  <NavigationContainer>
+    <Tab.Navigator
+      tabBar={props => (
+        <AnimatedTabBar
+          tabs={tabs}
+          animation="iconWithLabelOnFocus"
+          inactiveOpacity={0.25}
+          inactiveScale={0.5}
+          {...props}
+        />
+      )}
+    >
+      <Tab.Screen
+        name="Home"
+        component={HomeScreen}
+      />
+      <Tab.Screen
+        name="Profile"
+        component={ProfileScreen}
+      />
+    </Tab.Navigator>
+  </NavigationContainer>
+)
+}
+```
+
+</details>
+
 ## Presets
 
 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.
@@ -290,6 +361,21 @@ Originally `Animated TabBar` started with `Bubble` as the only animation preset
 
 <a href="./docs/material-preset.md"><img height="200" src="./docs/previews/material-1.gif" /></a>
 
+## Migration
+
+<details>
+
+  <summary>V1 to V2</summary>
+
+Due to extend the library functionality, I had to rename existing interfaces as following:
+
+- `BubbleTabConfig` to `BubbleTabBarItemConfig`
+- `BubbleTabIconProps` to `BubbleTabBarIconProps`
+- `FlashyTabConfig` to `FlashyTabBarItemConfig`
+- `FlashyTabIconProps` to `FlashyTabBarIconProps`
+
+</details>
+
 ## To Do
 
 - [x] Add accessibility support.

diff --git a/docs/bubble-preset.md b/docs/bubble-preset.md
@@ -2,9 +2,15 @@
 
 > This preset is inspired by [Aurélien Salomon](https://dribbble.com/aureliensalomon) works on [Dribbble](https://dribbble.com/shots/5925052-Google-Bottom-Bar-Navigation-Pattern-Mobile-UX-Design).
 
-![Bubble Preview](/docs/previews/bubble.gif)
+<img alt="Default" height="200" src="../docs/previews/bubble.gif" />
 
-## BubbleTabConfig
+## Interfaces
+
+### BubbleTabBarConfig
+
+> no preset config
+
+### BubbleTabBarItemConfig
 
 | name             | description                                                  | required | type                | default |
 | ---------------- | ------------------------------------------------------------ | -------- | ------------------- | ------- |
@@ -17,12 +23,11 @@
 | `├activeColor`   | Background active color.                                     | YES      | string              |         |
 | `└inactiveColor` | Background inactive color.                                   | YES      | string              |         |
 
-## Interfaces
-
-### `BubbleTabConfig`
+<details>
+  <summary>TypeScript Interface</summary>
 
 ```ts
-export interface BubbleTabConfig {
+export interface BubbleTabBarItemConfig {
   /**
    * Tab bar item label style.
    * @type {TextStyle}
@@ -40,11 +45,12 @@ export interface BubbleTabConfig {
   icon: {
     /**
      * Tab bar item icon component, this could be a function or class component.
-     * @type {React.FC<BubbleTabIconProps> | React.ComponentClass<BubbleTabIconProps>}
+     * @type {React.FC<BubbleTabBarIconProps> | React.ComponentClass<BubbleTabBarIconProps>}
      */
     component:
-      | React.FC<BubbleTabIconProps>
-      | React.ComponentClass<BubbleTabIconProps>;
+      | React.FC<BubbleTabBarIconProps>
+      | React.ComponentClass<BubbleTabBarIconProps>
+      | React.ReactNode;
 
     /**
      * Icon active color.
@@ -72,12 +78,37 @@ export interface BubbleTabConfig {
 }
 ```
 
-### `BubbleTabIconProps`
+</details>
+
+### BubbleTabBarIconProps
+
+| name            | description                        | required | type                           | default |
+| --------------- | ---------------------------------- | -------- | ------------------------------ | ------- |
+| `animatedFocus` | Tab bar item animated focus value. | YES      | `Animated.Node<number>`        |
+| `color`         | Tab bar item animated icon color.  | YES      | `Animated.Node<number|string>` |         |
+| `size`          | Tab bar item icon size.            | YES      | number                         |         |
+
+<details>
+  <summary>TypeScript Interface</summary>
 
 ```ts
-export interface BubbleTabIconProps {
+export interface MaterialTabBarIconProps {
+  /**
+   * Tab bar item animated focus value.
+   * @type {Animated.Node<number>}
+   */
   animatedFocus: Animated.Node<number>;
+  /**
+   * Tab bar item animated icon color.
+   * @type {Animated.Node<string | number>}
+   */
   color: Animated.Node<string | number>;
+  /**
+   * Tab bar item icon size.
+   * @type {number}
+   */
   size: number;
 }
 ```
+
+</details>
diff --git a/docs/flashy-preset.md b/docs/flashy-preset.md
@@ -2,9 +2,15 @@
 
 > This preset is inspired by [Cuberto](https://dribbble.com/cuberto) works on [Dribbble](https://dribbble.com/shots/5605168-Toolbar-icons-animation).
 
-![Flashy Preview](/docs/previews/flashy.gif)
+<img alt="Default" height="200" src="../docs/previews/flashy.gif" />
 
-## FlashyTabConfig
+## Interfaces
+
+## FlashyTabBarConfig
+
+> no preset config
+
+### FlashyTabBarItemConfig
 
 | name         | description                                                  | required | type                | default       |
 | ------------ | ------------------------------------------------------------ | -------- | ------------------- | ------------- |
@@ -17,12 +23,11 @@
 | `├size`      | Indicator size.                                              | NO       | number              | 6             |
 | `└color`     | Indicator color.                                             | NO       | string              | `label color` |
 
-## Interfaces
+<details>
+  <summary>TypeScript Interface</summary>
 
-### `FlashyTabConfig`
-
-```ts
-export interface FlashyTabConfig {
+```tsx
+export interface FlashyTabBarItemConfig {
   /**
    * Tab bar item label style.
    * @type {TextStyle}
@@ -40,12 +45,12 @@ export interface FlashyTabConfig {
   icon: {
     /**
      * Tab bar item icon component, this could be a function or class component.
-     * @type {React.FC<FlashyTabIconProps> | React.ComponentClass<FlashyTabIconProps>}
+     * @type {React.FC<FlashyTabBarIconProps> | React.ComponentClass<FlashyTabBarIconProps>}
      */
     component:
-      | React.FC<FlashyTabIconProps>
-      | React.ComponentClass<FlashyTabIconProps>;
-
+      | React.FC<FlashyTabBarIconProps>
+      | React.ComponentClass<FlashyTabBarIconProps>
+      | React.ReactNode;
     /**
      * Icon color.
      * @type {string}
@@ -80,12 +85,37 @@ export interface FlashyTabConfig {
 }
 ```
 
-### `FlashyTabIconProps`
+</details>
+
+### FlashyTabBarIconProps
+
+| name            | description                        | required | type                    | default |
+| --------------- | ---------------------------------- | -------- | ----------------------- | ------- |
+| `animatedFocus` | Tab bar item animated focus value. | YES      | `Animated.Node<number>` |
+| `color`         | Tab bar item icon color.           | YES      | number                  |         |
+| `size`          | Tab bar item icon size.            | YES      | number                  |         |
+
+<details>
+  <summary>TypeScript Interface</summary>
 
 ```ts
-export interface FlashyTabIconProps {
+export interface FlashyTabBarIconProps {
+  /**
+   * Tab bar item animated focus value.
+   * @type {Animated.Node<number>}
+   */
   animatedFocus: Animated.Node<number>;
+  /**
+   * Tab bar item icon color.
+   * @type {string}
+   */
   color: string;
+  /**
+   * Tab bar item icon size.
+   * @type {number}
+   */
   size: number;
 }
 ```
+
+</details>
diff --git a/docs/material-preset.md b/docs/material-preset.md
@@ -4,15 +4,15 @@
 
 ### Icon with label
 
-<img height="200" src="../docs/previews/material-1.gif" />
+<img alt="Icon with label" height="200" src="../docs/previews/material-1.gif" />
 
 ### Icon only
 
-<img height="200" src="../docs/previews/material-2.gif" />
+<img alt="Icon only" height="200" src="../docs/previews/material-2.gif" />
 
 ### Icon with label on focus
 
-<img height="200" src="../docs/previews/material-3.gif" />
+<img alt="Icon with label on focus" height="200" src="../docs/previews/material-3.gif" />
 
 ## Interfaces
 

diff --git a/example/src/screens/Bubble.tsx b/example/src/screens/Bubble.tsx
@@ -2,7 +2,7 @@ import React from 'react';
 import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
 import AnimatedTabBar, {
   TabsConfig,
-  BubbleTabConfig,
+  BubbleTabBarItemConfig,
 } from '@gorhom/animated-tabbar';
 import DummyScreen from './Dummy';
 import HomeSVG from '../svg/HomeSVG';
@@ -13,7 +13,7 @@ import { MainTabsParams } from './types';
 
 const Tab = createBottomTabNavigator<MainTabsParams>();
 
-const tabs: TabsConfig<BubbleTabConfig, MainTabsParams> = {
+const tabs: TabsConfig<BubbleTabBarItemConfig, MainTabsParams> = {
   Home: {
     labelStyle: {
       color: '#5B37B7',

diff --git a/example/src/screens/BubbleRTL.tsx b/example/src/screens/BubbleRTL.tsx
@@ -2,7 +2,7 @@ import React from 'react';
 import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
 import AnimatedTabBar, {
   TabsConfig,
-  BubbleTabConfig,
+  BubbleTabBarItemConfig,
 } from '@gorhom/animated-tabbar';
 import DummyScreen from './Dummy';
 import HomeSVG from '../svg/HomeSVG';
@@ -13,7 +13,7 @@ import { MainTabsParams } from './types';
 
 const Tab = createBottomTabNavigator<MainTabsParams>();
 
-const tabs: TabsConfig<BubbleTabConfig, MainTabsParams> = {
+const tabs: TabsConfig<BubbleTabBarItemConfig, MainTabsParams> = {
   Home: {
     labelStyle: {
       color: 'white',