ANIMATED Tab Bar Navigation in React Native



Get notified about my upcoming Instagram clone course! – Let’s animate a sweet looking Tab Bar Navigation in React Native! Found this great looking shot on dribbble and wanted to see how it’d look in an actual app!

If you enjoyed this video please consider supporting me on Patreon!

❤️ Subscribe for awesome videos!

✅SwiftUI Videos!

✅Building a React Native + Firebase Social App

✅Taking Designs and Turning them Into Code

✅Awesome React Native Videos!

Follow me!
Twitter:

💾Source Code

Dribbble Inspiration:

Software Used:
VSCode, React Native, Expo

#reactnative #animated #reactnavigation

Nguồn: https://baggersoriginals.com/

Xem thêm bài viết khác: https://baggersoriginals.com/cong-nghe/

Article Categories:
Công Nghệ

Comments

  • 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! https://www.instaclone.app

    DesignIntoCode June 29, 2020 2:59 pm Reply
  • 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

    vikil lakkavatri June 29, 2020 2:59 pm Reply
  • Awesome , can you tell me the music name?

    MR.M June 29, 2020 2:59 pm Reply
  • Круто 🤘

    Makc Наговицын June 29, 2020 2:59 pm Reply
  • Could you help me accelerate the animation ?. It is too slow for me

    Jonathan Zogona June 29, 2020 2:59 pm Reply
  • 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'

    Souza Lima June 29, 2020 2:59 pm Reply
  • Vector icons are not working in this is there any problem or else to fix it pls let me know ..

    Maddela Saritha June 29, 2020 2:59 pm Reply
  • 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?

    peyman hakemifar June 29, 2020 2:59 pm Reply
  • Good! I have only one question, how did you resolve the react-navigation issue on android? I remembered doing something like this in one of my projects and when I pressed the center button out of the tab view, it doesn't take the click, but it worked fine on ios.

    Felipe Rodriguez June 29, 2020 2:59 pm Reply
  • How can i add onPress to views?

    ianito June 29, 2020 2:59 pm Reply
  • new to your vids but i'm amazed!! thumbs up!!!!

    Jean Pierre Casanova June 29, 2020 2:59 pm Reply
  • HOLY BRO, YOU ARE AWESOME, I LOV SO MUCH YOUR VIDS SAAAAAAAAAAAAAAAAAAAAAAA

    this song is so good

    Rafael June 29, 2020 2:59 pm Reply
  • Look , I found gems on youtube react native tutorial ❤

    Kotok TV June 29, 2020 2:59 pm Reply
  • Come chat with us on Discord! https://discord.gg/xg5auu4

    DesignIntoCode June 29, 2020 2:59 pm Reply
  • Really you are the best 🙂 thanks so much ……….

    ARKAN IT June 29, 2020 2:59 pm Reply
  • Thks alot! Subscribed

    herbert kavuma June 29, 2020 2:59 pm Reply
  • #coolAnimation tutorial

    Shrikant Jha June 29, 2020 2:59 pm Reply
  • meanwhile here i am figuring how to center icon and the label

    Ilyas A Yusuf June 29, 2020 2:59 pm Reply
  • How to I can pass null screen in react navigation 5?

    Syed Shahbaz Hussain June 29, 2020 2:59 pm Reply
  • how to scan qrcode react-native? thank you!

    Kang Nguyen June 29, 2020 2:59 pm Reply
  • Is it working in android ??

    Himanshi Patel June 29, 2020 2:59 pm Reply
  • I made the whole button clickable by assigning it as a new component via createAnimatedComponent method of Animated:
    “`
    const AnimatedTouchable = Animated.createAnimatedComponent(TouchableHighlight);

    <AnimatedTouchable style={[styles.button, sizeStyle]} onPress={this.handlePress} underlayColor="#7F58FF">
    <Animated.View style={{ transform: [{ rotate: rotation }] }}>
    <FontAwesome5 name="plus" size={24} color="#FFF" />
    </Animated.View>
    </AnimatedTouchable>
    “`

    Mazin Luriahk June 29, 2020 2:59 pm Reply
  • 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?

    Dheyson Alves June 29, 2020 2:59 pm Reply
  • npm install react-navigation react-navigation-tabs react-native-reanimated react-native-gesture-handler@~1.3.0

    Rana Ahtsham June 29, 2020 2:59 pm Reply
  • Beautiful and Awesome video, on animation, with much easier code…
    Thank you soooooooooooooooooooooooo much…
    Want to see more videos like this….

    Sardar Usama June 29, 2020 2:59 pm Reply
  • icon is not clickable

    Manoranjan Kumar June 29, 2020 2:59 pm Reply
  • Bro.. TouchableOpacity work at bottom part only… Why❓

    F2F June 29, 2020 2:59 pm Reply
  • onPress not work when click button outside tabbar area.
    You know how to fix it?

    Андрій Юшко June 29, 2020 2:59 pm Reply
  • Dude… Thanks and subscribed..

    F2F June 29, 2020 2:59 pm Reply
  • when i run it on ip6, white screen is appear when i press the addbutton component. How to fix this bug?

    marcomc MAK June 29, 2020 2:59 pm Reply
  • how set animation not very slow ?

    ajie hatajie June 29, 2020 2:59 pm Reply
  • amazing !

    cleyton Alves June 29, 2020 2:59 pm Reply
  • a drawer, tab and stack navigator screen would be very good.

    Samuel Viol June 29, 2020 2:59 pm Reply
  • I was looking for a tutorial like this 💞💥 Would it be possible to add routes to these buttons within that stack?

    Michael Allen June 29, 2020 2:59 pm Reply
  • 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?

    Dan Petre June 29, 2020 2:59 pm Reply
  • You are amazing !

    Abed Zim June 29, 2020 2:59 pm Reply
  • You deserve millions sub

    CodingStark June 29, 2020 2:59 pm Reply

Leave a Reply

Your email address will not be published. Required fields are marked *