reactjsreact-bootstrap

How to implement dropdown animation in React-Bootstrap?

The native dropdown from React-Bootstrap is very choppy. I would like to smooth it out. I found this class for plain Bootstrap and am wondering how I would port it over to React, or just accomplish something similar:

https://startbootstrap.com/snippets/animated-navbar-dropdown/

Thanks!

Solution

  • I used MadisonTrash's answer here: https://stackoverflow.com/a/32233048/4700234

    I also added the <NativeListener> component from react-native-listener's in order to prevent clicking the dropdown's header from toggling the dropdown:

    <NativeListener stopClick>
    <NavDropdown>
        ...
    </NavDropdown>
</NativeListener>