React Native Tabbar Interaction
source link: https://www.tuicool.com/articles/hit/BZRBJni
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
React Native Tabbar Interaction
Beautiful Tabbar Interaction with Sliding Inset FABs, made with React Native.
Check it out on Béhance ( https://www.behance.net/gallery/68043143/Tab-bar-interaction-with-animated-icons )
Check it out on Dribbble ( https://dribbble.com/shots/4844696-Tab-bar-interaction-with-animated-icons )
Read about how we made this on our blog ( https://www.mindinventory.com/blog/create-tabbar-plugin-with-react-native/ )
Installation
npm i react-native-tab-bar-interaction
Android: react-native run-android
iPhone: react-native run-ios
Usage
import TabBar from "react-native-tab-bar-interaction"; ... render() { return ( <TabBar> <TabBar.Item icon={require('./tab1.png')} selectedIcon={require('./tab1.png')} title="Tab1" screenBackgroundColor={{ backgroundColor: '#008080' }} > <View> {/*Page Content*/} </View> </TabBar.Item> <TabBar.Item icon={require('./tab2.png')} selectedIcon={require('./tab1.png')} title="Tab2" screenBackgroundColor={{ backgroundColor: '#F08080' }} > <View> {/*Page Content*/} </View> </TabBar.Item> <TabBar.Item icon={require('./tab3.png')} selectedIcon={require('./tab1.png')} title="Tab3" screenBackgroundColor={{ backgroundColor: '#485d72' }} > <View> {/*Page Content*/} </View> </TabBar.Item> </TabBar> ); }
Component props
prop value required/optional description icon image source required the icon when item is not focus selectedIcon image source required the icon when item is focus title string required title of item screenBackgroundColor string required background color of tabDependencies
-
react-native-svg
Changelog
Version: 1.0
- Initial Build
LICENSE!
React-native-tabbar-interaction is MIT-licensed .
Let us know!
We’d be really happy if you send us links to your projects where you use our component. Just send an email to [email protected] And do let us know if you have any questions or suggestion regarding our work.
Recommend
-
102
-
101
Professionals | Community Groups Programs | Google Developers
-
92
README.md Version 0.12.0 A vim mode...
-
6
微信小程序开发实战(20):TabBar导航 在很多A...
-
2
Yesterday we created a TabBar in Flutter. However, as you have seen in the examples of Twitter and Instagram, they use bottom-placed TabBars. For some reason, t...
-
3
欧雷说:「从 Tabs 拆分出 TabBar 和 ViewStack 还是有必要的🙂」 欧雷 发表于 2021-08-22 11:39 从 Tabs 拆分出 TabBar 和 ViewStack
-
9
炎忍的博客Flutter 实现图片下划线的 TabBar发表于2021-08-26|更新于2021-08-26|编程字数总计:591|阅读时长:2分...
-
4
原创 TabBars代码解读之——Visual Studio的自动化接口 Microsoft的Visual St...
-
4
1.首先创建 custom-tab-bar 文件夹 包含 index.tsindex.jsonindex.wxmlindex.wxss`index.ts//index.ts Compone...
-
3
How to Test React Components with Storybook Interaction Tests The project I am on is building a library of reusable React components we can use across many appli...
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK