-
-
Notifications
You must be signed in to change notification settings - Fork 131
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
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
- Loading branch information
Showing
28 changed files
with
751 additions
and
267 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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<BubbleTabConfig, MainTabsParams> = { | ||
| 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 ( | ||
| <View style={containerStyle}> | ||
| <StatusBar barStyle="dark-content" /> | ||
| <AnimatedTabBarView | ||
| preset="bubble" | ||
| tabs={tabs} | ||
| itemOuterSpace={{ | ||
| horizontal: 6, | ||
| vertical: 12, | ||
| }} | ||
| itemInnerSpace={12} | ||
| iconSize={20} | ||
| style={styles.tabBarContainer} | ||
| index={index} | ||
| onIndexChange={setIndex} | ||
| /> | ||
|
|
||
| <Button | ||
| title="Set Index to 0" | ||
| color={'white'} | ||
| onPress={() => setIndex(0)} | ||
| /> | ||
| <Button | ||
| title="Set Index to 1" | ||
| color={'white'} | ||
| onPress={() => setIndex(1)} | ||
| /> | ||
| <Button | ||
| title="Set Index to 2" | ||
| color={'white'} | ||
| onPress={() => setIndex(2)} | ||
| /> | ||
| <Button | ||
| title="Set Index to 3" | ||
| color={'white'} | ||
| onPress={() => setIndex(3)} | ||
| /> | ||
| </View> | ||
| ); | ||
| }; | ||
|
|
||
| const styles = StyleSheet.create({ | ||
| container: { | ||
| flex: 1, | ||
| justifyContent: 'center', | ||
| alignItems: 'center', | ||
| }, | ||
| tabBarContainer: { | ||
| borderRadius: 25, | ||
| }, | ||
| }); | ||
|
|
||
| export default BubbleStandaloneScreen; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.