From 343a255549f13015a406b5afa57af583f417d49b Mon Sep 17 00:00:00 2001 From: Mo Gorhom Date: Wed, 20 May 2020 17:56:57 +0200 Subject: [PATCH] feat: support standalone usage (#38) * chore: extract tabbar view from default animated tabbar * chore: remove react-navigation dependencies * chore: updated space interface * refactor: updated bubble preset styling * chore: added outer space flashy preset * chore: updated examples and add standalone * chore: updated svg icons * chore: updated bubble standalone example * chore: added itemcontainerwidth prop * docs: updated contributing doc * docs: updated readme file to include itemcontainerwidth * docs: updated logo link * docs: updated usage in rn4 * docs: updated standalone example styling --- CONTRIBUTING.md | 1 - README.md | 97 ++++++++++-- example/android/app/app.iml | 10 +- example/src/App.tsx | 10 ++ example/src/screens/BubbleStandalone.tsx | 138 +++++++++++++++++ example/src/screens/Flashy.tsx | 7 +- example/src/screens/FlashyRTL.tsx | 2 - example/src/screens/FlashyStandalone.tsx | 115 ++++++++++++++ example/src/screens/FlashyStyled.tsx | 9 +- example/src/screens/Root.tsx | 10 +- example/src/svg/HomeSVG.tsx | 4 +- example/src/svg/LikeSVG.tsx | 4 +- example/src/svg/ProfileSVG.tsx | 4 +- example/src/svg/SearchSVG.tsx | 4 +- package.json | 8 +- src/AnimatedTabBar.tsx | 170 ++++++++------------- src/AnimatedTabBarView.tsx | 139 +++++++++++++++++ src/bubble/BubbleTabBar.tsx | 11 +- src/bubble/constants.ts | 2 + src/bubble/item/BubbleTabBarItem.tsx | 8 +- src/bubble/styles.ts | 2 +- src/flashy/FlashyTabBar.tsx | 14 +- src/flashy/constants.ts | 6 +- src/flashy/item/FlashyTabBarItem.tsx | 187 ++++++++++++++--------- src/flashy/item/styles.ts | 16 +- src/flashy/styles.ts | 7 +- src/index.ts | 18 ++- src/types.ts | 15 +- 28 files changed, 751 insertions(+), 267 deletions(-) create mode 100644 example/src/screens/BubbleStandalone.tsx create mode 100644 example/src/screens/FlashyStandalone.tsx create mode 100644 src/AnimatedTabBarView.tsx diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index 20f297b..7f68d53 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -71,7 +71,6 @@ The `package.json` file contains various scripts for common tasks: - `yarn bootstrap`: setup project by installing all dependencies and pods. - `yarn typescript`: type-check files with TypeScript. - `yarn lint`: lint files with ESLint. -- `yarn test`: run unit tests with Jest. - `yarn example start`: start the Metro server for the example app. - `yarn example android`: run the example app on Android. - `yarn example ios`: run the example app on iOS. diff --git a/README.md b/README.md index 097b355..a46ac37 100644 --- a/README.md +++ b/README.md @@ -5,7 +5,7 @@ -A **60fps** animated tab bar to be used with `React Navigation v4 & v5` with a variety of cool animation presets 😎. +A **60FPS** animated tab bar with a variety of cool animation presets 😎 @@ -36,6 +36,82 @@ npm install @gorhom/animated-tabbar ## Usage +Originally `Animated TabBar` worked only with `React Navigation`, but I notice that it could be use as a standalone component and be more useful for the community. + +
+ Standalone Component + +```tsx +import React, { useState } from 'react'; +import { View, Text, StyleSheet } from 'react-native'; +import AnimatedTabBar, {TabsConfig, BubbleTabConfig} from '@gorhom/animated-tabbar'; + +const tabs: TabsConfig = { + Home: { + labelStyle: { + color: '#5B37B7', + }, + icon: { + component: /* ICON COMPONENT */, + activeColor: 'rgba(91,55,183,1)', + inactiveColor: 'rgba(0,0,0,1)', + }, + background: { + activeColor: 'rgba(223,215,243,1)', + inactiveColor: 'rgba(223,215,243,0)', + }, + }, + Profile: { + labelStyle: { + color: '#1194AA', + }, + icon: { + component: /* ICON COMPONENT */, + activeColor: 'rgba(17,148,170,1)', + inactiveColor: 'rgba(0,0,0,1)', + }, + background: { + activeColor: 'rgba(207,235,239,1)', + inactiveColor: 'rgba(207,235,239,0)', + }, + }, +}; + +const styles = StyleSheet.create({ + container: { + flex: 1, + justifyContent: 'center', + alignItems: 'center', + backgroundColor: '#999', + }, + tabBarContainer: { + borderRadius: 25, + }, +}); + +export default function App() { + const [index, setIndex] = useState(0); + return ( + + {index} + + + ) +} +``` + +
React Navigation v5 @@ -109,7 +185,6 @@ export default function App() { import React from 'react'; import {createAppContainer} from 'react-navigation'; import {createBottomTabNavigator} from 'react-navigation-tabs'; -import {createStackNavigator} from 'react-navigation-stack'; import {SafeAreaProvider} from 'react-native-safe-area-context'; import AnimatedTabBar, {TabsConfig, BubbleTabConfig} from '@gorhom/animated-tabbar'; @@ -184,12 +259,13 @@ export default () => ( ### [TabBarItemConfigurableProps](./src/types.ts#L26) -| name | description | required | type | default | -| ---------------- | --------------------------------------------------------------------------------- | -------- | --------------------------------------- | ------- | -| `itemInnerSpace` | Inner space to be added to the tab item, this may not be applied on some presets. | NO | number \| [`Space`](./src/types.ts#L21) | 12 | -| `itemOuterSpace` | Outer space to be added to the tab item, this may not be applied on some presets. | NO | number \| [`Space`](./src/types.ts#L21) | 12 | -| `iconSize` | Tab item icon size. | NO | number | 24 | -| `isRTL` | Tab bar layout and animation direction. | NO | boolean | false | +| name | description | required | type | default | +| -------------------- | --------------------------------------------------------------------------------- | -------- | --------------------------------------- | ------- | +| `itemInnerSpace` | Inner space to be added to the tab item, this may not be applied on some presets. | NO | number \| [`Space`](./src/types.ts#L21) | 12 | +| `itemOuterSpace` | Outer space to be added to the tab item, this may not be applied on some presets. | NO | number \| [`Space`](./src/types.ts#L21) | 12 | +| `itemContainerWidth` | Tab Item width stretch strategy, this may not be applied on some presets. | NO | 'auto' \| 'fill' | 'auto' | +| `iconSize` | Tab item icon size. | NO | number | 24 | +| `isRTL` | Tab bar layout and animation direction. | NO | boolean | false | ## Presets @@ -210,12 +286,11 @@ Originally `Animated TabBar` started with `Bubble` as the only animation preset - [react-native-gesture-handler](https://github.com/software-mansion/react-native-gesture-handler) - [react-native-redash](https://github.com/wcandillon/react-native-redash) - [react-native-svg](https://github.com/react-native-community/react-native-svg) -- [react-navigation](https://github.com/react-navigation/react-navigation) - [@react-native-community/bob](https://github.com/react-native-community/bob) ## Author -- [Mo Gorhom](https://twitter.com/gorhom) +- [Mo Gorhom](https://gorhom.dev/) ## License @@ -232,5 +307,5 @@ Liked the library? 😇 ---

- +Mo Gorhom

diff --git a/example/android/app/app.iml b/example/android/app/app.iml index 5980874..842d5bf 100644 --- a/example/android/app/app.iml +++ b/example/android/app/app.iml @@ -138,11 +138,11 @@ - - - - - + + + + + \ No newline at end of file diff --git a/example/src/App.tsx b/example/src/App.tsx index c3eef97..8e74ad7 100644 --- a/example/src/App.tsx +++ b/example/src/App.tsx @@ -5,9 +5,11 @@ import RootScreen from './screens/Root'; import BubbleScreen from './screens/Bubble'; import BubbleStyledScreen from './screens/BubbleStyled'; import BubbleRTLScreen from './screens/BubbleRTL'; +import BubbleStandaloneScreen from './screens/BubbleStandalone'; import FlashyScreen from './screens/Flashy'; import FlashyStyledScreen from './screens/FlashyStyled'; import FlashyRTLScreen from './screens/FlashyRTL'; +import FlashyStandaloneScreen from './screens/FlashyStandalone'; const Stack = createStackNavigator(); @@ -19,9 +21,17 @@ export default function App() { + + ); diff --git a/example/src/screens/BubbleStandalone.tsx b/example/src/screens/BubbleStandalone.tsx new file mode 100644 index 0000000..9067d56 --- /dev/null +++ b/example/src/screens/BubbleStandalone.tsx @@ -0,0 +1,138 @@ +import React, { useState, useMemo } from 'react'; +import { View, StyleSheet, Button, StatusBar } from 'react-native'; +import { + AnimatedTabBarView, + TabsConfig, + BubbleTabConfig, +} from '@gorhom/animated-tabbar'; +import HomeSVG from '../svg/HomeSVG'; +import LikeSVG from '../svg/LikeSVG'; +import SearchSVG from '../svg/SearchSVG'; +import ProfileSVG from '../svg/ProfileSVG'; +import { MainTabsParams } from './types'; + +const tabs: TabsConfig = { + Home: { + labelStyle: { + color: '#5B37B7', + }, + icon: { + component: HomeSVG, + activeColor: 'rgba(91,55,183,1)', + inactiveColor: 'rgba(0,0,0,1)', + }, + background: { + activeColor: 'rgba(223,215,243,1)', + inactiveColor: 'rgba(223,215,243,0)', + }, + }, + Likes: { + labelStyle: { + color: '#C9379D', + }, + icon: { + component: LikeSVG, + activeColor: 'rgba(201,55,157,1)', + inactiveColor: 'rgba(0,0,0,1)', + }, + background: { + activeColor: 'rgba(247,215,243,1)', + inactiveColor: 'rgba(247,215,243,0)', + }, + }, + Search: { + labelStyle: { + color: '#E6A919', + }, + icon: { + component: SearchSVG, + activeColor: 'rgba(230,169,25,1)', + inactiveColor: 'rgba(0,0,0,1)', + }, + background: { + activeColor: 'rgba(251,239,211,1)', + inactiveColor: 'rgba(251,239,211,0)', + }, + }, + Profile: { + labelStyle: { + color: '#1194AA', + }, + icon: { + component: ProfileSVG, + activeColor: 'rgba(17,148,170,1)', + inactiveColor: 'rgba(0,0,0,1)', + }, + background: { + activeColor: 'rgba(207,235,239,1)', + inactiveColor: 'rgba(207,235,239,0)', + }, + }, +}; + +const BubbleStandaloneScreen = () => { + const [index, setIndex] = useState(0); + + const containerStyle = useMemo( + () => [ + styles.container, + { + // @ts-ignore + backgroundColor: tabs[Object.keys(tabs)[index]].labelStyle.color, + }, + ], + [index] + ); + return ( + + + + +