ANIMATED Tab Bar Navigation in React Native

[@DesignIntoCode]

I have a course coming out on building an Instagram clone from scratch using React Native & Firebase, make sure you sign up to get discounts, release date info and sample chapters! www.instaclone.app

[@vinodyevatikar1594]

Bro.. TouchableOpacity work at bottom part only... Why❓

[@turinturambar-l3g]

I just followed your tutorial and implemented it on ios. But how to implement it on android since on android it is not possible to click an item outside of the boundaries of its parent? Does this mean this functionality is just limited to ios?

[@farhatulsk]

Really wow such a cool content❤️👍keep up

[@Артур-ъ5г3ю]

onPress not work when click button outside tabbar area. You know how to fix it?

[@_ianito]

you fixed this bug?

[@erie_e9]

I'd like it too, help

[@engineerdude7]

​@@_ianito This won't work in Android (1/2), iOS only.

[@sardarusama4369]

Beautiful and Awesome video, on animation, with much easier code... Thank you soooooooooooooooooooooooo much... Want to see more videos like this....

[@ycdcherokee]

man... WOW!!

[@mrezavasebi562]

Excellent tutorial. Thanks

[@HimanshuYT]

You deserve millions sub

[@DesignIntoCode]

Well thank you so much!

[@JeanPierreCasanovaFuentes]

new to your vids but i'm amazed!! thumbs up!!!!

[@ronakkoradiya4074]

Hey bro i am from 🇮🇳, when i watch this video my mind say this is cool 😎, attractive and also your coding way is very good 👍 i really appreciate 😊 keep going i learn so much from you thank you ❤ @DesignIntoCode

[@MarkJamesButcher]

This is nice, thank you but I have an issue with the AddButton When pressed it sometimes it is rendering the empty component to the screen. How can I prevent this event from accruing?

[@CriticManiaInZeWorld]

yes plzzz help

[@abhishekvk1762]

I have added TouchableOpacity instead of View. onPress is not getting triggered. Need Help

[@diditsb5361]

sory , im have one question . how to make floating sub button touchable ? thx..

[@Dragon9220]

HOLY BRO, YOU ARE AWESOME, I LOV SO MUCH YOUR VIDS SAAAAAAAAAAAAAAAAAAAAAAA this song is so good

[@cleyton1986]

amazing !

[@DesignIntoCode]

Thank you!

[@aqdasilyas2768]

how to change the color of active tab bar item or icon and inactive tab bar item or icon????

[@samidebayroune3478]

screen null is not suppoerted anymore in react navigation use listeners and prevent defaulr instead listeners={{ tabPress: e => { e.preventDefault() } }}

[@UpNext-gc5xg]

how to close on back button press

[@keremylmaz9595]

When I press the Addbutton it navigates some page, also in this page animation is not working

[@ogulcankarayel5625]

How can I achieve that,screen:() => null in react navigation v5

[@Ha-uw1qb]

same question :(

[@GabrielBarbosa-nm9sd]

this project is make in expo API 33.0, we are in version 38.0, so we cant use this code for us today, unfortunately

[@venkatbalak6692]

Try this medium.com/@my.maithi/react-native-navigation-add-custom-button-in-the-middle-of-tabbar-6c390201a2bb

[@rishisonifilms]

how to close expanded options if I click outside area of screen? Any idea?

[@programmerashraf1999]

Source code link not working

[@_ianito]

How can i add onPress to views?

[@ka-nn]

me too, onPress not working

[@mohammaddehgamwala9635]

because View is not touchable component add touchableOpacity component in its parent

[@vikillakkavatri6416]

Hi I try this but I m facing some issue i.e. the mid circle (button plus) and there relative circle (on click btn plus click appear buttons) on it click event was not triggered so I want to fire click event on it is there any solution

[@marcomak810]

when i run it on ip6, white screen is appear when i press the addbutton component. How to fix this bug?

[@DesignIntoCode]

ip6? Do you mean iPhone 6?

[@marcomak810]

Yes iphone6s, try to rapidly tap on the add button component, the homepage turn white

[@DesignIntoCode]

What version of iOS? My guess would be it may not be supported anymore

[@marcomak810]

@@DesignIntoCode IOS 13

[@marcomak810]

should i use the newest version of gesture handler ?

[@ogulcankarayel5625]

Good content. How to decrease opacity of app when user clicks the plus button ?

[@mohammaddehgamwala9635]

change background opacity to 0.5 or something

[@midoritamura574]

All of us are in the error that when you click on the secondary icons these do not work and is due to the top, leaves the bottomNavigator area and stops working, this will not be fixed with the TouchOpacity, if anyone knows how to fix it post it would be of great help, also try to find a solution to this error

[@syedshahbazhussain1920]

How to I can pass null screen in react navigation 5?

[@theguyfromsikkim5786]

You can't there has to be a screen component. What are u trying to achieve?

[@syedshahbazhussain1920]

@@theguyfromsikkim5786 In React navigation v4 we pass the null screen like this: Screen: { screen: () => null, navigationOptions: { tabBarIcon: } }, But how to do it in react navigation 5?

[@theguyfromsikkim5786]

@@syedshahbazhussain1920 in v5 i haven't tried providing null as a component u can try, it is declarative in v5 like const TabStack = createTabNavigator() ; // you can try providing null in component prop

[@venkatbalak6692]

Try this medium.com/@my.maithi/react-native-navigation-add-custom-button-in-the-middle-of-tabbar-6c390201a2bb

[@zainulabideen5587]

Really Nice.

[@simonhylander7489]

has anyone been able to recreate this in react navigation 5?

[@venkatbalak6692]

I am trying to do it with the plus button added outside the navbar but not yet finished

[@owaisiqball]

Yes. It's pretty much the same.

[@mohammedhama7158]

react native Error property 'left' is not supported by native animated module

[@juansoler544]

Hi thanks for the content you do for the community, I have been working on the FAB (floating action button) like the one in this video, I have problems getting the pop-up buttons to work inside a Tab-navigator and for them to generate a tab action -navigator, navigate to a screen. I have been looking at the comments of the two videos that you have put to see if someone gives indications of how to solve it, but I can not find, nor do I find it on the network, it would be helpful if you collaborate with us. like you've been doing.

[@herbertk9266]

Thks alot! Subscribed

[@davidfiebig3429]

I have a project where I want to use this tab bar, but I don't use expo. I still followed your tutorial and I can see the tab bar, but without any icons. Can someone help me to get this running?

[@DesignIntoCode]

The package is just built into expo, just install it manually, github.com/oblador/react-native-vector-icons

[@vinodyevatikar1594]

Dude... Thanks and subscribed..

[@kogilankrishnansamy9622]

(Bug):- for android, the TouchableHighlight is not clickable outside of the bottom bar (negative margin). Do anyone has a solution?

[@joseehloko]

At 7:22 my shadow doesn't appear button: { backgroundColor: '#7F58FF', alignItems: 'center', justifyContent: 'center', width: 72, height: 72, borderRadius: 36, position: 'absolute', top: -60, shadowColor: '#7F58FF', shadowRadius: 5, shadowOffset: {height: 10}, shadowOpacity: 0.3, borderWidth: 3, borderColor: '#FFF'

[@nadyafarchanaf]

i add elevation: 3 to appear my shadow

[@samidebayroune3478]

the shadow is not suppoerted by android instead use elevation for android devices and you can't change elevation color it's always #000

[@abedzim5247]

You are amazing !

[@DesignIntoCode]

Thanks!

[@mhndak]

Awesome , can you tell me the music name?

[@peymanhakemifar3671]

i created this with react navigation v5, but the part of plus button that is located above the tabbar is not clickable the same as three animated buttons, how can i fix this?

[@DesignIntoCode]

If you check the rest of the comments, there are a few examples on how to fix that

[@kangnguyen5930]

how to scan qrcode react-native? thank you!

[@codewithdominic9318]

I tried this and it wouldn't work with react-navigation 5.. is there any way to use it in 5?

[@DesignIntoCode]

Right, this is for version 4. The docs outline how to do it in 5 pretty well. reactnavigation.org/docs/drawer-based-navigation

[@victrixsvs]

a drawer, tab and stack navigator screen would be very good.

[@DesignIntoCode]

There is a video on drawer navigation coming soon!

[@maddelasaritha4335]

Vector icons are not working in this is there any problem or else to fix it pls let me know ..

[@DesignIntoCode]

Are you using expo? If not, then you'll have to pull in the vector icon package

[@maddelasaritha4335]

@@DesignIntoCode tq for u r quick rply actually that's my mistake after installing vector icons I didn't link the package that is the reason icons were not worked now working fine ..tq u

[@kayrules2]

I made the whole button clickable by assigning it as a new component via createAnimatedComponent method of Animated: ``` const AnimatedTouchable = Animated.createAnimatedComponent(TouchableHighlight); ... ```

[@aniketnagapure2554]

@Mazin Luriahk Thanks man it worked like charm . any resources you would like to share for learning animation in RN

[@sergiomilla8771]

It works, thanks

[@influgix6769]

Could you help me accelerate the animation ?. It is too slow for me

[@DesignIntoCode]

You can just change the duration property

[@dheyson-alves]

Hey! Nice tutorial. I've got an issue here, somehow my Icons are not appearing. I'm using IonicIcons and doesn't appear. Have you any idea what could have happened?

[@DesignIntoCode]

Can you share the code you're using to import them and use them?

[@dheyson-alves]

@@DesignIntoCode Hey, what`s up? I just got the solution, it seems it was just a misleading syntax hahaha. Thanks in advance for answer, and the tutorial really helped.

[@danpetre5414]

This is just crazy and awesome! :) I'm wonder if it would be possible to build a login system that can show tabs based on the election on the signUp. For example, in the same app to have workers and clients and show them different tabs based on their election. How would you aproach something like this?

[@DesignIntoCode]

Sure, that’s fairly simple. You could store their “type”, worker or client, in your database system, like firebase. And then just do, if worker, show these tabs, else show other tabs

[@ajiehatajie]

how set animation not very slow ?

[@DesignIntoCode]

Change the duration time. Check out my other video on the animated floating button.

[@ajiehatajie]

@@DesignIntoCode can you share link does your mean ?

[@makc6878]

Круто 🤘

[@michaelallen6635]

I was looking for a tutorial like this 💞💥 Would it be possible to add routes to these buttons within that stack?

[@DesignIntoCode]

Glad it helped! It’s probably possible to add the routes into the tab bar stack, but also probably more effort than it’s worth. I’d just create a separate stack and control it with the onPress events

[@leekaori]

@@DesignIntoCode hi can you explain this in more detailed. i'm trying to add routes to these buttons

[@DesignIntoCode]

@@leekaori You'd probably want to setup a stack that includes these buttons. And on each button, in it's onPress event, you'd direct to the appropriate route, this.props.navigation.navigate("yourroutename")

[@leekaori]

@@DesignIntoCode hi, does AddButton,js need to be put into the stack?, btw how to completely disable to add tab bar? cause if i press on the middle (other than on the AddButton) it return white screen (bcos it it null right?)

[@vikillakkavatri6416]

​@@DesignIntoCode click event was not working on that button because it above the bottomnavigator can explain how we can achive click event on that

[@ranaahtsham936]

npm install react-navigation react-navigation-tabs react-native-reanimated react-native-gesture-handler@~1.3.0

[@khalilgardouh6965]

sudo npm install react-navigation react-navigation-tabs react-native-reanimated react-native-gesture-handler@~1.3.0 you are forgot ~

[@ranaahtsham936]

Thanks

[@himanshipatel3532]

Is it working in android ??

[@DesignIntoCode]

Yes

[@DesignIntoCode]

Come chat with us on Discord! discord.gg/xg5auu4

[@shrikantjha5630]

#coolAnimation tutorial

[@ka-nn]

pls help, my mid button cant be clicked

[@mohamedlaghzali5726]

fucking god

[@dibayuin7859]

Look , I found gems on youtube react native tutorial ❤

[@ilyasayusuf5447]

meanwhile here i am figuring how to center icon and the label

[@midoritamura574]

justifycontent: 'center', alignItems:'center' :3

[@ilyasayusuf5447]

@@midoritamura574 Hi its been a year, i can say that i am already really good at RN now. I can do redux, hooks, class, animation, 2D animation with state machine, etc :D I am still learning to improve performance like using hermes or using C in the code

[@midoritamura574]

@@ilyasayusuf5447 You were able to fix the button bug?

[@ilyasayusuf5447]

@@midoritamura574 yeah

[@midoritamura574]

@@ilyasayusuf5447 How did you solve it?

[@excalibur885]

It's a good tutorial but NOT useful without touchable childrens. Would be great if you could show to community how to make them touchable instead explaining one by one. I read some comments and the most common question was how to replace small icons with touchables.

[@DesignIntoCode]

Just make them a touchableopacity instead of a view

[@Ha-uw1qb]

How can I achieve that,screen:() => null in react navigation v5

[@GabrielBarbosa-nm9sd]

this project is make in expo API 33.0, we are in version 38.0, so we cant use this code for us today, unfortunately

[@venkatbalak6692]

Try this medium.com/@my.maithi/react-native-navigation-add-custom-button-in-the-middle-of-tabbar-6c390201a2bb