Interpolation Example

interpolation.tsx

import { StatusBar } from 'expo-status-bar';
import React, { useRef } from 'react';
import { StyleSheet, View, Animated, ImageBackground } from 'react-native';

export default function App() {
  const fadeAnim = useRef(new Animated.Value(0)).current;

  React.useEffect(() => {
    return Animated.timing(
      fadeAnim,
      {
        toValue: 1,
        duration: 1000,
        useNativeDriver: true,
      }
    ).start();
  }, [fadeAnim])

  return (
    <Animated.View style={[styles.container, {
      opacity: fadeAnim, transform: [{
        translateY: fadeAnim.interpolate({
          inputRange: [0, 1],
          outputRange: [600, 0]
        })
      }]
    }]}>
      <View style={styles.box} />
      {/* <ImageBackground source={{ uri: 'https://source.unsplash.com/random/1080x1920' }} style={{ width: '100%', height: '100%' }}>
        <StatusBar style="auto" />
      </ImageBackground> */}
    </Animated.View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    flexDirection: 'column',
  },
  box: {
    width: '100%',
    height: '100%',
    backgroundColor: 'red'
  }
});