error in animated

[ell120603]

I was doing a searchbar with the reanimated and this error appeared, I did not find anything similar or reason for such an [error

my codigo is:

import React from 'react'
import Icon from 'react-native-vector-icons/FontAwesome5'
import {View, Text,
    StyleSheet, 
    SafeAreaView, 
    Image,
     TextInput,
    TouchableOpacity,
    ScrollView,
    Dimensions,
    TouchableHighlight,
} from 'react-native'
import Animated, {Easing} from 'react-native-reanimated'
const {Value, timing}  = Animated

const width = Dimensions.get('window').width
const height = Dimensions.get('window').height

class Search extends React.Component{
    constructor(props){
        super(props)
        this.state = {
          isFocused: false,
          keyword: ''
        }
        this._input_box_translate_x = new Value(width)
        this._back_button_opacity = new Value(0)
        this._content_translate_y = new Value(height)
        this._content_opacity = new Value(0)
      }
    
      _onFocus = () => {
        this.setState({isFocused: true})
        const input_box_translate_x_config = {
          duration: 200,
          toValue: 0,
          easing: Easing.inOut(Easing.ease)
        }
        const back_button_opacity_config = {
          duration: 200,
          toValue: 1,
          easing: Easing.inOut(Easing.ease)
        }
        const content_translate_y_config = {
          duration: 0,
          toValue: 0,
          easing: Easing.inOut(Easing.ease)
        }
        const content_opacity_config = {
          duration: 200,
          toValue: 1,
          easing: Easing.inOut(Easing.ease)
        }
        timing(this._input_box_translate_x, input_box_translate_x_config).start()
        timing(this._back_button_opacity, back_button_opacity_config).start()
        timing(this._content_translate_y, content_translate_y_config).start()
        timing(this._content_opacity, content_opacity_config).start()
        this.refs.input.focus()
    
      }
    
      _onBlur = () => {
        this.setState({isFocused: false})
        const input_box_translate_x_config = {
          duration: 200,
          toValue: width,
          easing: Easing.inOut(Easing.ease)
        }
        const back_button_opacity_config = {
          duration: 50,
          toValue: 0,
          easing: Easing.inOut(Easing.ease)
        }
        const content_translate_y_config = {
          duration: 0,
          toValue: height,
          easing: Easing.inOut(Easing.ease)
        }
        const content_opacity_config = {
          duration: 200,
          toValue: 0,
          easing: Easing.inOut(Easing.ease)
        }
        timing(this._input_box_translate_x, input_box_translate_x_config).start()
        timing(this._back_button_opacity, back_button_opacity_config).start()
        timing(this._content_translate_y, content_translate_y_config).start()
        timing(this._content_opacity, content_opacity_config).start()
        this.refs.input.blur();
      }
      
      render(){
        return (
          <>
            <SafeAreaView style={styles.header_safe_area}>
              <View style={styles.header}>
                <View style={styles.header_inner}>
                  <View>
                    <Image 
                      source={require('../img/pp.png')} 
                      style={{width: 152, height: 30}}
                    />
                  </View>
                  <TouchableOpacity
                    activeOpacity={1}
                    underlayColor={"#ccd0d5"}
                    onPress={this._onFocus}
                    style={styles.search_icon_box}
                  >
                    <Icon name="search" size={22} color="#000000" />
                  </TouchableOpacity>
                  <Animated.View
                    style={[ styles.input_box, {transform: [{translateX: this._input_box_translate_x}] } ]}
                  >
                    <Animated.View style={{opacity: this._back_button_opacity}}>
                      <TouchableOpacity
                        activeOpacity={1}
                        underlayColor={"#ccd0d5"}
                        onPress={this._onBlur}
                        style={styles.back_icon_box}
                      >
                        <Icon name="chevron-left" size={22} color="#000000" />
                      </TouchableOpacity>
                    </Animated.View>
                    <TextInput 
                      ref="input"
                      placeholder="Search Marked"
                      clearButtonMode="always"
                      value={this.state.keyword}
                      onChangeText={(value) => this.setState({keyword: value}) }
                      style={styles.input}
                    />
                  </Animated.View>
                </View>
              </View>
            </SafeAreaView>
    
            <Animated.View style={[styles.content, { opacity: this._content_opacity, transform: [{translateY: this._content_translate_y }] }]}>
              <SafeAreaView style={styles.content_safe_area}>
                <View style={styles.content_inner}>
                  <View style={styles.separator} />
                  {
                    this.state.keyword === ''
                    ?
                      <View style={styles.image_placeholder_container}>
                        <Text style={styles.image_placeholder_text}>
                          Enter a few words{"\n"}
                          to search on Marked
                        </Text>
                      </View>
                    :
                      <ScrollView>
                        <View style={styles.search_item}>
                          <Icon style={styles.item_icon} name="search" size={16} color="#cccccc" />
                          <Text>Fake result 1</Text>
                        </View>
                        <View style={styles.search_item}>
                          <Icon style={styles.item_icon} name="search" size={16} color="#cccccc" />
                          <Text>Fake result 2</Text>
                        </View>
                        <View style={styles.search_item}>
                          <Icon style={styles.item_icon} name="search" size={16} color="#cccccc" />
                          <Text>Fake result 3</Text>
                        </View>
                        <View style={styles.search_item}>
                          <Icon style={styles.item_icon} name="search" size={16} color="#cccccc" />
                          <Text>Fake result 4</Text>
                        </View>
                        <View style={styles.search_item}>
                          <Icon style={styles.item_icon} name="search" size={16} color="#cccccc" />
                          <Text>Fake result 5</Text>
                        </View>
                      </ScrollView>
                  }
                </View>
              </SafeAreaView>
            </Animated.View>
          </>
        )
      }
    }

ob:I didn’t attach the stylesheet, so it’sn’t too big

[NikitaDudin]

if you use reanimated v2, then replace Easing on EasingNode: https://docs.swmansion.com/react-native-reanimated/docs/next/migration