How to implement an Accordion in react-native?

implementing a custom accordion in reactnative  using reanimated we have this initial UI for the   accordion items and the state activeIndex is  used to track the currently active item which   we update on click of the item's header with its  index value or set it to -1 if you click on   the active item again indicating that none of the  items are active, and based on its comparison with   the item's index which is used as isOpen prop  in the component we update background color in   the border visually indicating that the item is  active, so first we're going to set the position   absolute to the accordion content and we're doing  this so that it doesn't affect the dimensions of   the container, also notice that we have a non-styled view as a parent of the content because   without this the absolute position on the  content view would render it above the title   having a relative view as a parent make sure  that even with the position absolute it always   stays below the title or the pressable component  but this would of course also show it outside of   the item's UI which we can avoid by adding  overflow hidden to The Container next step   is to calculate the rendered height of the title  as well as the content to accurately expand or   collapse the item using the onLayout prop we can  get that data and save them as reanimated shared   value for the container and the content also we're  using on layout on the pressable instead of the   container to avoid infinite callbacks as we're  going to be animating the container's height to   expand or collapse the item which is also why we  adding the total padding and the Border width in   the final container height value now using useAnimatedStyle hook we can animate the height   of the container view based on the data it can  also auto-expands an active item on initial render   according to this calculation which only applies  once both the values are calculated other than   the height we can also optionally move other view  Styles into the animated style hook though it's   not necessary now while setting the height data we  can add some conditions to handle some cases like   we only want to set the the value if it is the  default means zero because as we using the spring   animation which can cause the height to fluctuate  by the end of the animation it might cause the  onLayout to be called multiple times especially on  iOS based on my testing So to avoid any incorrect   calculations we can limit it to set only when  it is zero or if the platform is web because we   would always want latest rendered data to keep  it responsive for different window sizes next   apply the animated style to the view and change  it to animated finally declare a shared value for   Icon rotation as well to indicate expanded or  collapse state wrap the icon with an animated   View and in the animated style we can also add  icon rotation logic along with the height where   we're going to rotate it to 180° when expanded and  we're done here's the result for Android iOS and web also this was a fairly simple example  but we can also put other types of   complex components and they would  render accordingly as you can see here now in case you're using reanimated with  moti we can make few changes to simplify the   solution like for Icon we can completely remove  the shared value logic change Animated.View to   MotiView and rotate the icon directly based  on the state change while specifying the spring   config in the transition prop similarly the  container can also be changed to MotiView and   the animated style to derived value and pass  it as value to the MotiView's animate prop   and move any animation config directly to its  transition prop like here it is for spring and   it should work pretty much the same now let's see  how this can be done using built-in animated API   most of of the logic will be same we add position  absolute on the content and overflow hidden on   the container and get the height data using onLayout callback next declare an animated value   for the height and apply it to The Container  view's style and also make sure to change it to   Animated.View now unlike reanimated Shared value we  used animated style hook to listen to the changes   but we can't do that for the reference values (useRef)  here so here we need to set its initial value   directly on the own layout using setInitialHeight function which also makes sure   that it'll auto expands if there is any default  active item, next in the use effect we're going   to animate the height which will trigger with the  change in the isOpen State prop and similar to   the previous solution we added a validation for  web and to only update if the container value   is zero to avoid any incorrect calculations  lastly declare an animated value for the icon   and similarly animate in the useEffect but it  directly wouldn't work so we need to interpolate   it into degree and apply it to the animated view  we added as a container for the icon finally also   make sure to call start() on the animation for  it to work and we're done the implementation is   compatible with all the platforms supported  by react-native Android, iOS, web, macOS and windows

Channel: Massive Educator - Shorts

Views: 991

Keywords: reactjs, reactnative, react-native, react native, accordion, expo, reanimated, moti, animation

Id: u6MDeHJOjGI

Length: 5min 40sec (340 seconds)

Published: Sun Mar 10 2024