I'm creating a draggable box. which I can drag anywhere on the screen but I'm getting this error which says that "You attempted to set the key _value on an object that is meant to be immutable and has been frozen". Can anyone tell me what am I doing wrong.

My Code:

import React, { Component } from 'react'
import {
  AppRegistry,
  StyleSheet,
  Text,
  Button,
  ScrollView,
  Dimensions,
  PanResponder,
  Animated,
  View
} from 'react-native'

import { StackNavigator } from 'react-navigation'




export default class Home extends Component{

ponentWillMount(){

  this.animatedValue = new Animated.ValueXY();

this.panResponder = PanResponder.create({

 onStartShouldSetPanResponder: (evt, gestureState) => true,
  onMoveShouldSetPanResponder: (evt, gestureState) => true,
  onPanResponderGrant: (e, gestureState) => {



      },

  onPanResponderMove:Animated.event([


null,{dx: this.animatedValue.x , dy:this.animatedValue.y}

    ]),  
  onPanResponderRelease: (e, gestureState) => { 
      },       
})
}

  render(){

    const animatedStyle = {

      transform:this.animatedValue.getTranslateTransform()
    }

    return(

        <View style={styles.container}>

        <Animated.View style={[styles.box ,animatedStyle]} {...this.panResponder.panHandlers}>


        <Text>Home</Text>


        </Animated.View>
        </View>
      )
  }
}


var styles = StyleSheet.create({
  container: {
    flex: 1,
    marginLeft: 10,
    marginRight: 10,
    alignItems: 'stretch',
    justifyContent: 'center',
  },

  box:{

height:90,
width:90,
textAlign:'center'



  }
});

I'm creating a draggable box. which I can drag anywhere on the screen but I'm getting this error which says that "You attempted to set the key _value on an object that is meant to be immutable and has been frozen". Can anyone tell me what am I doing wrong.

My Code:

import React, { Component } from 'react'
import {
  AppRegistry,
  StyleSheet,
  Text,
  Button,
  ScrollView,
  Dimensions,
  PanResponder,
  Animated,
  View
} from 'react-native'

import { StackNavigator } from 'react-navigation'




export default class Home extends Component{

ponentWillMount(){

  this.animatedValue = new Animated.ValueXY();

this.panResponder = PanResponder.create({

 onStartShouldSetPanResponder: (evt, gestureState) => true,
  onMoveShouldSetPanResponder: (evt, gestureState) => true,
  onPanResponderGrant: (e, gestureState) => {



      },

  onPanResponderMove:Animated.event([


null,{dx: this.animatedValue.x , dy:this.animatedValue.y}

    ]),  
  onPanResponderRelease: (e, gestureState) => { 
      },       
})
}

  render(){

    const animatedStyle = {

      transform:this.animatedValue.getTranslateTransform()
    }

    return(

        <View style={styles.container}>

        <Animated.View style={[styles.box ,animatedStyle]} {...this.panResponder.panHandlers}>


        <Text>Home</Text>


        </Animated.View>
        </View>
      )
  }
}


var styles = StyleSheet.create({
  container: {
    flex: 1,
    marginLeft: 10,
    marginRight: 10,
    alignItems: 'stretch',
    justifyContent: 'center',
  },

  box:{

height:90,
width:90,
textAlign:'center'



  }
});

• javascript
• android
• reactjs
• react-native
• react-animated

• Got a line number? My guess is it has to do with that const animatedStyle, since "immutable" means "cannot be changed". this.animatedValue.getTranslateTransform() may not be constant. I'm not 100% sure, but changing const to var might do the trick, but I'm not sure why you set that to const to begin with so maybe I'm wrong. LMK if it works, and if so I'll add this as an Answer instead of a ment. – Jake T. Commented Jun 21, 2017 at 20:10
• Thank you for looking forward to my question sir, I tried but still same error. :( – Vish_TS Commented Jun 21, 2017 at 20:17
• 1 not sure if this is the issue, but you misspelled 'transform' in animatedStyle – Matt Aft Commented Jun 21, 2017 at 23:21
• thanx for pointing out @Matt Aft. I Typed it wrong on stack although it is right in my code. – Vish_TS Commented Jun 22, 2017 at 7:19
• @MattAft wow I actually had transform spelled wrong in my code. thanks! haha – Cole Commented Oct 6, 2017 at 0:28

2 Answers 2

In my case I got this error because I forgot to change the View into Animated.View.

Try this out. This will solve your issue. You need to initialize animatedValue in state object to make it work.

constructor(props) {
  super(props);
  this.state = {
    animatedValue: new Animated.ValueXY()
  }
}

onPanResponderMove:Animated.event([
 null,{dx: this.state.animatedValue.x , dy:this.state.animatedValue.y}
]),