Group Animations

You can create cool group animations easily using the same format. This animates the children inside your component

Working

Lets say you want to animate a list of items. All you have to do is wrap you component with AnimatedWrapper and set isGroup={true}. Now all children inside your component will be animated.

Need to animate dynamic list ?

This also supports dynamic children. So even if your list grows, it will animate the new items as they are added :)

Implementation

Just set isGroup={true} in your AnimatedWrapper.

import { AnimatedWrapper } from 'react-native-micro-interactions';
 
const [list, setList] = useState(["A", "B", "C"]);
 
return(
    <AnimatedWrapper animationType='drop_in' animationTrigger='init' isGroup={true}>
        // Your dynamic component
        <View>
            {list.map((item) => <MyComponent />)}
        </View>
    </AnimatedWrapper>
)
 
const styles = StyleSheet.create({
  container: {
    alignItems: 'center',
    justifyContent: 'center',
    backgroundColor: "red",
    paddingVertical: 15,
    marginVertical: 10,
    borderRadius: 10,
    width: 200,
  },
});

Text Slide Vertical