TypeError: undefined is not an object (evaluating 'output.length')

Question

I'm getting an error when trying to use interpolate from react native reanimated. I want my button to go translate to to the negative Y axis when the opacity is being changed from 1 - 0. I have seen some tutorials on this but its a bit outdated. I was able to take a look at the docs and I am doing every thing correctly. I do not know where my error lies in. Please take a look:

import { TapGestureHandler,State } from 'react-native-gesture-handler';
import { StyleSheet, View,Text,Image,Dimensions } from 'react-native';
import Animated,{ useSharedValue,Easing, withTiming,useAnimatedStyle, Extrapolate,interpolate } from 'react-native-reanimated';
// import { useState } from 'react';

const {width,height} = Dimensions.get('window')
const { Value } = Animated

export default function LoginComp() {
  const buttonOpacity = useSharedValue(1)
  let animatedStyles = useAnimatedStyle(() => {
    return {
      opacity: buttonOpacity.value,
    };
  });

  let buttonY = interpolate(buttonOpacity.value, {
    inputRange:[0,1],
    outputRange:[100,0],
    extrapolate: Extrapolate.CLAMP
  })
    
  let bgY = interpolate(buttonOpacity.value, {
      inputRange:[0,1],
      outputRange:[-height / 3, 0],
      extrapolate: Extrapolate.CLAMP
  })
    const onStateChange = ({ nativeEvent }) =>  {
      if (nativeEvent.state === State.END) {
        buttonOpacity.value = withTiming(0, {
          duration: 500,
          easing: Easing.out(Easing.exp),
        });
      }
  }
  // console.log(buttonOpacity.value)

  return (
    <View style={styles.logoContainer}>
      <Animated.View style={{flex:1,justifyContent:'center', width:'100%',height:'100%',backgroundColor:'#353839',transform:[{translateY: bgY}] }}>
        <Image style={styles.logo} source={require('../assets/Logo2.png')}/>
      </Animated.View>
        <View style={{ backgroundColor:'#353839',height:height/3 }}>
          <TapGestureHandler onHandlerStateChange={onStateChange}>
            <Animated.View style={[[styles.button, animatedStyles,{transform:[{translateY:buttonY}]}]]}>
                <Text style={{ fontSize:25,fontWeight:'bold' }} >SIGN IN</Text>
            </Animated.View>
          </TapGestureHandler>
        </View>
    </View>
  )
}

const styles = StyleSheet.create({
    logoContainer: {
       
        width: '100%',
        height: '100%',
        justifyContent: 'flex-end'
    },
    logo: {
        position: 'absolute',
        top: 70,
        alignSelf: 'center',
        width: 200,
        height:200,
    },
    button: {
      backgroundColor: '#fff',
      height: 70,
      marginHorizontal: 20,
      borderRadius: 35,
      alignItems: 'center',
      justifyContent: 'center'
    }
});

I have been on this for about 2 days now. I have checked everywhere but can't find any useful info. What am I missing?

Answer 1

When you have that type of errors, there are some missing packages

Answer 2

I can't say I figured what was wrong, but I had to change the useSharedvalue hook to new Value. I did a lot of changes but I was using two different values/references to do the animations i.e I was using const buttonOpacity = useSharedValue(1) and using the interpolate from react-native-reanimated which was wrong instead it was supposed to come as a method on its own.

My final code to get the animation done was:

import { TapGestureHandler,State } from 'react-native-gesture-handler';
import { StyleSheet, View,Text,Image,Dimensions,Easing } from 'react-native';
import Animated from 'react-native-reanimated';
import React from 'react';

const {width,height} = Dimensions.get('window')
const { Value,Extrapolate } = Animated

export default function LoginComp() {
  let buttonOpacity = new Value(1)
    
    const onStateChange = ({ nativeEvent }) =>  {
      if (nativeEvent.state === State.END) {
            
            Animated.timing(buttonOpacity, {
              toValue: 0,
              duration: 500,
              easing: Easing.in
            }).start();
      }
  }
  const buttonY = buttonOpacity.interpolate({
    inputRange: [0, 1],
    outputRange: [100, 0],
    extrapolate: Extrapolate.CLAMP
  })

  const bgY = buttonOpacity.interpolate({
    inputRange: [0, 1],
    outputRange: [-height / 3, 0],
    extrapolate: Extrapolate.CLAMP
  })
  // console.log(buttonOpacity)

  return (
    <View style={styles.logoContainer}>
      <Animated.View style={{ flex:1,width:'100%',height:'100%',justifyContent:'center', backgroundColor: '#353839',transform:[{ translateY:bgY }] }}>
        <Image style={styles.logo} source={require('../assets/Logo2.png')}/>
      </Animated.View>
        <View style={{ height:height/3,position:'absolute',width:'100%' }}>
          <TapGestureHandler onHandlerStateChange={onStateChange}>
            <Animated.View style={{...styles.button, opacity: buttonOpacity, transform: [{ translateY: buttonY }]}}>
                <Text style={{ fontSize:25,fontWeight:'bold' }} >SIGN IN</Text>
            </Animated.View>
          </TapGestureHandler>
        </View>
    </View>
  )
}

const styles = StyleSheet.create({
    logoContainer: {
        width: '100%',
        height: '100%',
        justifyContent: 'flex-end'
    },
    logo: {
        position: 'absolute',
        top: 70,
        alignSelf: 'center',
        width: 200,
        height:200
    },
    button: {
      backgroundColor: '#fff',
      height: 70,
      marginHorizontal: 20,
      borderRadius: 35,
      alignItems: 'center',
      justifyContent: 'center'
    }
});