Create an Animated Accordion dropdown list in React Native (Easy & Quick)

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

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

  • @LouaySleman
    @LouaySleman  2 года назад +1

    I've already convert this component into a typescript library you can check it on npm:
    www.npmjs.com/package/react-native-accordion-list-view

  • @Surya-vm1xj
    @Surya-vm1xj Год назад +1

    This helped me a lot bro..I'm using this in our live application and all thanks to you!!

    • @LouaySleman
      @LouaySleman  Год назад

      You're welcome, Thanks for the support hope you subscribe to see more videos ❤️

  • @028-manikandan3
    @028-manikandan3 Год назад +1

    Absolutely super put more videos bro.

    • @LouaySleman
      @LouaySleman  10 месяцев назад

      Thanks I will put more please subscribe ❤️

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

    i love you man, best video ever

    • @LouaySleman
      @LouaySleman  Год назад

      Thanks bro ❤️ hope you subscribe to see more videos ❤️

    • @pedrotonin
      @pedrotonin Год назад

      @@LouaySleman oh almost forgot, done!

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

    Great tutorial simple and working

    • @LouaySleman
      @LouaySleman  Год назад

      Thanks for the support hope you subscribe to see more videos ❤️

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

    Great tutorial, simple and nice working

    • @LouaySleman
      @LouaySleman  Год назад

      Thanks for the support hope you subscribe to see more videos ❤️

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

    Its perfect !! 👌

    • @LouaySleman
      @LouaySleman  10 месяцев назад

      Thanks ❤️ please subscribe to see more videos

  • @jonatansantos9260
    @jonatansantos9260 2 года назад +1

    Thanks!! Amazing tutorial keep it up!

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

      You're welcome, please subscribe to see more videos

  • @hadung8484
    @hadung8484 2 года назад +1

    Thank you! This is an amazing tutorial!

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

      Thanks hope you subscribe to see more videos ❤️

  • @johnmccants6828
    @johnmccants6828 2 года назад +1

    Awesome work

    • @LouaySleman
      @LouaySleman  2 года назад +1

      Thanks for the support hope you subscribe to see more videos ❤️

  • @WindowsArabia
    @WindowsArabia 2 года назад +2

    Amazing tutorial keep it up 👆

    • @LouaySleman
      @LouaySleman  2 года назад +1

      Thanks for the support hope you subscribe to see more videos ❤️

  • @riahiyassine7703
    @riahiyassine7703 2 года назад +2

    Great tutorial keep going

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

      You're welcome hope you subscribe to see more videos ❤️

    • @riahiyassine7703
      @riahiyassine7703 2 года назад +1

      @@LouaySleman yes done 👍

  • @lifeisbeautifu1
    @lifeisbeautifu1 2 года назад +1

    Thanks bro!🔥🔥🔥

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

      Thanks for the support hope you subscribe to see more videos ❤

  • @BirTutamTemeki
    @BirTutamTemeki 2 года назад +1

    Thanks for tutorial

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

      Thanks for the support hope you subscribe to see more videos.
      To make the usage more easier I've converted it to a npm package you can use it directly from this link
      www.npmjs.com/package/react-native-accordion-list-view
      And for the source code you can check my github:
      github.com/louaySleman/react-native-accordion-list-view/tree/main/src

  • @Juddbox
    @Juddbox 2 года назад +1

    Thank You!

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

      Your welcome hope you subscribe to see more videos ❤️

  • @NituGupta-q1k
    @NituGupta-q1k Год назад +1

    Hi, How to close the toggle on empty space pressed?

    • @LouaySleman
      @LouaySleman  Год назад

      Thanks for the support ❤️ I'll add this to the package in the next release and I'll let you know when it's live, hope you subscribe to see more videos ❤️

  • @markstar2464
    @markstar2464 2 года назад +1

    Keep it up, please make a video about carousel animations

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

      Thanks for the support hope you subscribe to see more videos ❤️

  • @ezequieldiaz6103
    @ezequieldiaz6103 2 года назад +2

    I LOVE YOU

    • @ezequieldiaz6103
      @ezequieldiaz6103 2 года назад +1

      keep creating content, very well explained! the component is easy to understand and customizable.

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

      @@ezequieldiaz6103 I love you too 😍, I'm working on new tutorials, Please subscribe to see more videos ❤️

  • @wplearnonline628
    @wplearnonline628 2 года назад +1

    Thank you for this, what a wonderful tutorial. I'm currently using your package however I can't figure out how to make it work in a scrollview. Is there something I am missing?. Thank you for your efforts.

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

      Thanks for your comment, Can I see your code?

    • @wplearnonline628
      @wplearnonline628 2 года назад +1

      @@LouaySleman Hello, I'm so sorry for the late reply, I found out I was implementing wrongly. It works like charm now!.
      Thank you!.

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

      @@wplearnonline628 I'm happy for you have a nice day

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

    Hi, im doing this in my project. But, i want to keep the dropdowns open even if the user is not anymore in the same view/ screen. I need this because i use the setShown to change the style of the dropdowns (blue if open, White if closed). So, the user when he is back to the dropdowns they are closed but are still blue. How can i do this?

    • @LouaySleman
      @LouaySleman  Год назад

      Thanks for the comment, can you share your code on github and I'll try to help you with it

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

      @Louay Sleman hey thanks for the reply i already fixed it 🥰

    • @LouaySleman
      @LouaySleman  Год назад

      @@lfm_00 you're welcome Hope you subscribe to see more videos ❤️

  • @Nand00Coelho
    @Nand00Coelho 2 года назад +1

    Thanks for the tutorial!
    Is there a way to collapse the other dropdowns if one dropdown is toggled? In my project, I must only allow one dropdown toggled at a time.
    It would be an amazing implementation to your npm package.

    • @LouaySleman
      @LouaySleman  2 года назад +2

      Thanks for the support ❤️, I'll add it in the next few days on the library stay tuned I'll notify you in q comment when it's live, hope you subscribe to see more videos

    • @Nand00Coelho
      @Nand00Coelho 2 года назад +1

      Hello! I'm subscribed! Thank you for taking my suggestion, it will help me and other developers for sure!

    • @LouaySleman
      @LouaySleman  2 года назад +1

      @@Nand00Coelho I just updated the npm package and I've added the expandMultiple property by default it's false, you can check the new version from here:
      www.npmjs.com/package/react-native-accordion-list-view/v/2.0.1

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

      @@LouaySleman Thank you so much for the update! You are a true life saver.

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

      @@Nand00Coelho you're welcome 🙃

  • @kwabenaboateng7405
    @kwabenaboateng7405 2 года назад +1

    I followed your tutorial, but when I run it, it says cannot call class as a function. Could you be of help?

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

      Thanks for commenting hope you subscribe ❤️, and sure I'll try my best can you upload it to github so I can take a closer look?

  • @saifsiddiqui8017
    @saifsiddiqui8017 2 года назад +1

    doesnt work for android

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

      Yeah you just need to add this useEffect in your page:
      useEffect(() => {
      if (Platform.OS === 'android') {
      if (UIManager.setLayoutAnimationEnabledExperimental) {
      UIManager.setLayoutAnimationEnabledExperimental(true) :
      }
      }
      import {UIManager} from 'react-native';

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

      And you can use the library based on the video with more improvements and options you can check it here
      www.npmjs.com/package/react-native-accordion-list-view

  • @argafauzianto713
    @argafauzianto713 2 года назад +1

    for android work ?

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

      Yeah you just need to add this useEffect in your page:
      useEffect(() => {
      if (Platform.OS === 'android') {
      if (UIManager.setLayoutAnimationEnabledExperimental) {
      UIManager.setLayoutAnimationEnabledExperimental(trueimport {UIManager} from 'react-native';);
      }
      }
      }, []);
      import {Platform, UIManager} from 'react-native';

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

      And to make the usage more easier I've converted it to a npm package you can use it directly from this link
      www.npmjs.com/package/react-native-accordion-list-view
      And for the source code you can check my github:
      github.com/louaySleman/react-native-accordion-list-view/tree/main/src

    • @argafauzianto713
      @argafauzianto713 2 года назад +1

      Wuihh thankss bro

    • @argafauzianto713
      @argafauzianto713 2 года назад +1

      @@LouaySleman do you have an online course, I'm in need but it's very complete to start using the API with Axios, and the redux saga, if anyone wants to buy it but is it expensive?

    • @LouaySleman
      @LouaySleman  2 года назад +1

      @@argafauzianto713 I'm currently working on a complete course for React Native and it will explain everything from axios to Redux, making animations and a lot more.
      Please subscribe to my channel and you can help me to make more videos by supporting me in Patreon:
      www.patreon.com/louaysleman

  • @kamgdy89
    @kamgdy89 2 года назад +1

    apparently better is use Pressable component instead TouchableOpacity

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

      Yeah, you're right on that, thanks for the support ❤️ hope you subscribe to see more videos

    • @kamgdy89
      @kamgdy89 2 года назад +1

      @@LouaySleman great content by the way

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

      @@kamgdy89 thanks

    • @kamgdy89
      @kamgdy89 2 года назад +1

      @@LouaySleman I have got a problem with LayoutAnimation. I don't know why this doesn't work.
      const [showContent, setShowContent] = useState(false);
      const animationController = useRef(new Animated.Value(0)).current;
      const toggleContent = () => {
      const config = {
      duration: 300,
      toValue: showContent ? 0 : 1,
      useNativeDriver: true,
      };
      Animated.timing(animationController, config).start();
      LayoutAnimation.configureNext(toggleAnimation);
      setShowContent(prevState => !prevState);
      };
      {!!label && {label}:}

      {value}


      {showContent && (
      item1
      item2
      item3
      item4
      )}

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

      @@kamgdy89 are you testing in android?

  • @Arunkumar-lw1pb
    @Arunkumar-lw1pb 2 года назад +1

    source code pls

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

      Thanks for the support hope you subscribe to see more videos.
      To make the usage more easier I've converted it to a npm package you can use it directly from this link
      www.npmjs.com/package/react-native-accordion-list-view
      And for the source code you can check my github:
      github.com/louaySleman/react-native-accordion-list-view/tree/main/src