Animated Twitter Profile in React Native

Поделиться
HTML-код
  • Опубликовано: 24 дек 2024

Комментарии • 60

  • @eveningkid
    @eveningkid  3 года назад +13

    The episode is out earlier this week because I’m preparing something special for Friday, stay tuned :)

  • @jiazhengguo5493
    @jiazhengguo5493 3 года назад +1

    really enjoy it, your channel is the best RN animation tutorial ever found.

    • @eveningkid
      @eveningkid  3 года назад

      Thank you so much jiazheng (not sure what are the characters for your name :))! I really appreciate the kind words, it really motivates me to keep going

  • @AgilityGamer
    @AgilityGamer 3 года назад +7

    Would be cool to also include the material tabs in this animation so they stick along with the header

    • @eveningkid
      @eveningkid  3 года назад +2

      Yep, totally agree. I try to keep videos as short as possible on the channel so this is more of a starter kit! It still looks a lot alike and you can make it in ~10 minutes. Not a big fan of 30-40min long videos but that's just my take!

    • @Denis-fc2sv
      @Denis-fc2sv 3 года назад +1

      @@eveningkid yes, too long videos are not always good .

  • @simonhochrein9861
    @simonhochrein9861 3 года назад

    Great example of using interpolations! Thanks evening kid!

    • @eveningkid
      @eveningkid  3 года назад

      Interpolations everywhere!! Thank you Simon :)

  • @Quacky_Batak
    @Quacky_Batak 3 года назад +2

    "KISS" ! It really shows how much powerful react native's Animated API is. You probably don't need Reanimated for these small things. Loved the video !

    • @eveningkid
      @eveningkid  3 года назад +2

      Exactly: when you can just stick to Animated and keep it fast, then why not :) I guess some people might just assume Animated is bad from what you can hear/try yourself. Anyways, happy you liked the video!!

  • @griffinbaker860
    @griffinbaker860 2 года назад

    Thanks for making these videos, they are simply awesome

  • @raik303
    @raik303 3 года назад +1

    Do you have tutorial for sticky tab bar on header with this animated effect?
    I am looking for it.
    This tutorial is good. Very helpful.

    • @eveningkid
      @eveningkid  3 года назад

      I don’t but I’m sure you can get it to work! If you think about this before getting into code, it might help you :) I’m very happy you liked the video, see you around!

  • @_danish19
    @_danish19 Год назад +1

    Amazing how simple it is and you explained very nicely ❤. I actually tried to create a clone of the profile UI but something that I couldn’t do was there is a tabbar below and when you scroll vertical then scroll horizontal and then scroll vertical how does the height thing works here. I used a horizontal scrollview inside to do this and that problem was if I have 2 tabs and their list below respectively the bigger list will give it’s height and then tab 1 list is not even that big but can scroll that much. The same thing is in the Instagram profile Ui. What I noticed same in both was in any tab list if I scroll to the bottom and then change tab and scroll to top then again go back to the previous tab it is back on top also. I really really wanna implement this

  • @layerok315
    @layerok315 2 года назад

    Good explanation. Subscribed

  • @El_ii
    @El_ii 9 месяцев назад

    Nice, but how to add a sticky TabView to it like on twitter?

  • @makisetakashi
    @makisetakashi 3 года назад +2

    How about including Tab Navigator, because it hard to handle Flatlist Pagination inside Tab when Flatlist Nested in Scrollview , nice tutorial btw

    • @eveningkid
      @eveningkid  3 года назад +1

      Yes Hari, that's true. Another comment mentioned that and my answer is: I try to keep these videos as short as possible. I'm sure people can then give it a try and improve the projects, this serves more of a starter kit and a showcase of what can be done in ~10 minutes! I'm not really a fan of 30-40 min long videos, I want as many people as possible to have a great time without dedicating that much time to the video. Hope that makes sense! :)

  • @aviseksahoo1953
    @aviseksahoo1953 3 года назад

    why image hiding in banner image ?? please solve

  • @Denis-fc2sv
    @Denis-fc2sv 3 года назад

    Great tutorial ! Thanks !

    • @eveningkid
      @eveningkid  3 года назад

      Thank you Denis! I can't believe you've been following the channel for all this time...we're soon 1000 can you believe it! It always makes me happy to see continuous support like yours. Have a nice day :)

    • @Denis-fc2sv
      @Denis-fc2sv 3 года назад

      @@eveningkid Its just a beginning :) You are doing really useful videos, keep doing it.

  • @annashmuhendra6907
    @annashmuhendra6907 2 года назад

    very awesome, thank you very much bro

  • @akmalahmed4660
    @akmalahmed4660 3 года назад

    Amazing tutorial, Thank you very much !!!

    • @eveningkid
      @eveningkid  3 года назад +1

      Thank you Akmal, always a pleasure really to read your comments :)

  • @kamal9650-z1w
    @kamal9650-z1w 3 месяца назад

    Please make more vedios on animation

  • @planetmall2
    @planetmall2 3 года назад

    This is awesome thanks!

    • @eveningkid
      @eveningkid  3 года назад

      Time flies, you've been around for one month already!! Thanks for your support, I always appreciate it Dan :D

  • @stevenlee1637
    @stevenlee1637 3 года назад

    dude u are amazing!!!! holy shit

    • @eveningkid
      @eveningkid  3 года назад

      Wow thanks man, that’s a lot!!

  • @sun9woo
    @sun9woo 3 года назад

    Great tutorial! However my situation is that mine's not a banner but a carousel fixed on top with parallax that requires swipe left/right. But because of scrollview being a top layer, i cannot get the swipe left/right gesture to work. If I put the carousel (banner) inside the Animated ScrollView, then I lose the absolute top image height stretch. Would very much appreciate your advice!

    • @eveningkid
      @eveningkid  3 года назад +1

      Ok I'm thinking out loud but:
      1) put your carousel inside your scrollview
      2) when scrolling below 0, you could add a negative translation to the carousel: scroll.interpolate({ inputRange: [-1, 0], outputRange: [-1, 0], extrapolateRight: 'clamp' })
      3) find the right scale value so that it fills up the now empty space (because of the translation). You could use interpolation here again
      4) next time I'd recommend you to post this on stack overflow so that other people could benefit from the answer
      Cheers :)

    • @Scratchy712
      @Scratchy712 2 года назад

      did you find a solution to it ? :)

  • @junangameplays3271
    @junangameplays3271 3 года назад

    You are amazing

  • @privat3stuff
    @privat3stuff 3 года назад

    Nice! But also excited for the Friday special 😉

    • @eveningkid
      @eveningkid  3 года назад +1

      I'm excited too!! It feels like we can all gather around for an hour and that's an amazing thing to have these times haha see you soon :)

  • @willyrosahuanca5884
    @willyrosahuanca5884 3 года назад

    Cool!!, it's not working for android bro, the avatar is behind the navigator bar. any idea.

    • @eveningkid
      @eveningkid  3 года назад

      Mmm, I'm afraid I have no clue. Maybe this is related to a zIndex somewhere?

  • @Socialakshat
    @Socialakshat 3 года назад

    Hi bro, our app performs well in iOS, however the performance in android is super jerky. Additionally it takes time in startup as well, do you have any recommendations on how we can figure our better? Like profiling and fixing performance.

    • @eveningkid
      @eveningkid  3 года назад

      Interesting, thanks for letting me know Akshat! It's surprising since it's running with the native driver...you could convert this example to Reanimated. Just need to replace the animated value with a shared value and put styles inside animated styles. The performance might be better!

  • @jejunegamingtv1359
    @jejunegamingtv1359 3 года назад

    Well done again :)

    • @eveningkid
      @eveningkid  3 года назад

      And thanks again! I appreciate the fact you're still around after all this time, it really means a lot :)

  • @ashutoshsinghai713
    @ashutoshsinghai713 3 года назад

    This is amazing,

    • @eveningkid
      @eveningkid  3 года назад

      Thank you Ashutosh!! Glad this helps :)

  • @angelmanuelrs1
    @angelmanuelrs1 3 года назад +1

    Awesome video. Loved the detailed walkthrough!
    Would have been interesting seeing this on Android & Web.
    Also I'd love to see this using more modern animations APIs like reanimated 2.

    • @eveningkid
      @eveningkid  3 года назад

      Thank you, Angel! I really try to keep these videos as short and minimal as possible. It's a trade-off but I think it helps a lot more people in the long run (but that's just my opinion!). I plan to make more videos on RN Web so it should eventually come :) I've done a lot of Reanimated 2 already and more is to come, all of this takes time as you know! I've seen you've been around for more than a month now, thanks for your support really :)

    • @angelmanuelrs1
      @angelmanuelrs1 3 года назад

      @@eveningkid that makes total sense. Agree, it's a trade-off between helping beginners or experienced users. Tbh prefer the first.
      Just wanted to share my 2¢.
      Forgot to ask you about the code, any plans on making it open source? Or even a patreon to further support you?

    • @eveningkid
      @eveningkid  3 года назад

      Sure, I really enjoy hearing your opinion so thank you! The code is available in the description (there's a gist link). I thought of doing Patreon but I really don't want to discriminate anyone who wouldn't have the money. Not sure how to deal with this, since I also spend so much time working on these videos!

  • @jacobcole1271
    @jacobcole1271 3 года назад

    Awesome!

  • @muhammadalihassan2157
    @muhammadalihassan2157 3 года назад

    Well done keep working on good stuff. 👍
    I just want to give you suggestion can you do in flatlist go to particular item? On clicking like go to 5th item of 1000 items

    • @eveningkid
      @eveningkid  3 года назад +1

      Thank you Muhammad :) This is possible using flatListRef.current.scrollToIndex({ index: your_index }) reactnative.dev/docs/flatlist#scrolltoindex

    • @muhammadalihassan2157
      @muhammadalihassan2157 3 года назад

      @@eveningkid its for only i think fixed height
      How for random height

    • @eveningkid
      @eveningkid  3 года назад

      You need to compute it one way or another, because it’s a virtual list so it can’t guess how far it should scroll

  • @-seven-
    @-seven- 3 года назад

    Love each and every one of your videos. Still am clueless over what "You can animated" is supposed to mean.

    • @eveningkid
      @eveningkid  3 года назад +3

      You can animate it (it's a """pun""" on RN Animated)

  • @Mangoo9982
    @Mangoo9982 3 года назад

    Awesome video, i can create a lot of thing animation now because your tutorial.👍keep it create new content.

    • @eveningkid
      @eveningkid  3 года назад

      Wow, I'm very happy this is being helpful Amrel! Hope it's all going fine with your work, I'll sure keep them coming :)

  • @Speedstackingboy251
    @Speedstackingboy251 3 года назад

    First!