Niagara launcher animation in react-native animation [closed]

[BrilliantBrilliant is verified member.]

If you're trying to recreate the Niagara Launcher animation in a React Native application, here's a high-level breakdown of the approach:


---

Key Elements of the Niagara Launcher Animation

1. List of items that animate individually:

Items appear to "flow" up or down when interacted with.

The interaction focuses on one item at a time (centered or expanded) while other items fade, shrink, or slide.



2. Dynamic scaling and positioning:

The selected item is highlighted with larger text or a different style.

Nearby items scale or fade relative to their distance from the selected item.



3. Smooth touch gestures:

Scroll and touch gestures dynamically update the state of the list and trigger animations.





---

Tools to Use in React Native

To achieve this animation, you can use one of the following animation libraries:

1. React Native Reanimated v2+:

Offers smooth and performant animations.

Supports gesture-based animations.



2. React Native Animated (built-in):

Simpler to set up but less performant for complex animations.



3. React Native Gesture Handler:

To handle touch and drag gestures.



4. React Native FlatList:

For rendering the list of items efficiently.





---

Steps to Create the Animation

1. Set Up the List

Use a FlatList to render the list of items.

import React from 'react';

import { FlatList, Text, View, StyleSheet } from 'react-native';



const DATA = Array.from({ length: 26 }, (_, i) => String.fromCharCode(65 + i));



const App = () => {

  return (

    <FlatList

      data={DATA}

      renderItem={({ item }) => (

        <View style={styles.item}>

          <Text style={styles.text}>{item}</Text>

        </View>

      )}

      keyExtractor={(item, index) => `${item}-${index}`}

    />

  );

};



const styles = StyleSheet.create({

  item: {

    height: 50,

    justifyContent: 'center',

    alignItems: 'center',

  },

  text: {

    fontSize: 16,

  },

});



export default App;





---

2. Add Animated Transformations

Wrap each list item in an animated View to apply scaling, fading, or position changes dynamically.

Use React Native Reanimated for smooth animations:

npm install react-native-reanimated react-native-gesture-handler

import React from 'react';

import Animated, { interpolate, useAnimatedStyle, useSharedValue } from 'react-native-reanimated';

import { FlatList, Text, View, StyleSheet } from 'react-native';



const DATA = Array.from({ length: 26 }, (_, i) => String.fromCharCode(65 + i));



const App = () => {

  const scrollY = useSharedValue(0);



  const onScroll = Animated.event(

    [{ nativeEvent: { contentOffset: { y: scrollY } } }],

    { useNativeDriver: true }

  );



  const renderItem = ({ item, index }) => {

    const animatedStyle = useAnimatedStyle(() => {

      const scale = interpolate(scrollY.value, [index * 50 - 100, index * 50, index * 50 + 100], [0.8, 1, 0.8]);

      const opacity = interpolate(scrollY.value, [index * 50 - 100, index * 50, index * 50 + 100], [0.5, 1, 0.5]);

      return {

        transform: [{ scale }],

        opacity,

      };

    });



    return (

      <Animated.View style={[styles.item, animatedStyle]}>

        <Text style={styles.text}>{item}</Text>

      </Animated.View>

    );

  };



  return (

    <Animated.FlatList

      data={DATA}

      renderItem={renderItem}

      keyExtractor={(item, index) => `${item}-${index}`}

      onScroll={onScroll}

      scrollEventThrottle={16}

    />

  );

};



const styles = StyleSheet.create({

  item: {

    height: 50,

    justifyContent: 'center',

    alignItems: 'center',

  },

  text: {

    fontSize: 16,

  },

});



export default App;





---

3. Handle Gestures

To make the animation react to gestures:

Integrate React Native Gesture Handler.

Update the animation logic to respond to gestures like taps or swipes.


For example:

import { GestureHandlerRootView, PanGestureHandler } from 'react-native-gesture-handler';



// Wrap the animated FlatList with a gesture handler:

<GestureHandlerRootView>

  <PanGestureHandler onGestureEvent={gestureHandler}>

    <Animated.FlatList ... />

  </PanGestureHandler>

</GestureHandlerRootView>





---

Tips for Smooth Animations

Use useNativeDriver: true to ensure animations run on the native thread.

Limit re-renders by optimizing the FlatList with proper keyExtractor and getItemLayout.

Use interpolate to create effects like scaling, fading, or sliding.



---

This setup provides the foundation for creating the Niagara Launcher animation in React Native.