error: Attempted to assign to read only property on using Animated react native

Question

For some reason I'm not able to see what I'm doing wrong with my code. I seem to be using Animated just as the documentation shows but this error keeps coming. The code snippet:

import React, {
  Component
} from 'react';
import {
  StyleSheet,
  Image,
  Animated,
} from 'react-native'
import Header from './../components/Header'


export default class DrawerShell extends Component {
  constructor(props) {
    super(props)
    this.state = {
      showNav: false,
    }
    this.anim = new Animated.Value(0)
    this.openDrawer = this.openDrawer.bind(this)
  }
  openDrawer() {
    let toValue
    this.setState({
      showNav: !this.state.showNav
    }) !this.state.showNav ? toValue = 1 : toValue = 0
    Animated.timing( // Animate value over time
      this.anim, // The value to drive
      {
        toValue: 1, // Animate to final value of 1
        duration: 300,
      }
    ).start()
  }
  render() {
    let {
      showNav
    } = this.state
    return ( <
      Animated.View style = {
        [
          styles.appContainer,
          {
            transform: [{
                translate: [
                  this.anim.interpolate({
                    inputRange: [0, 1],
                    outputRange: [0, 200],
                  }),
                  this.anim.interpolate({
                    inputRange: [0, 1],
                    outputRange: [0, 80],
                  }),
                  0
                ]
              },
              {
                scale: this.anim.interpolate({
                  inputRange: [0, 1],
                  outputRange: [1, 0.7]
                })
              }
            ]
          },
        ]
      } >
      <
      Image source = {
        {
          uri: "splash_bg"
        }
      }
      style = {
        styles.bgImage
      } >
      <
      Header title = "hi there"
      onPress = {
        this.openDrawer
      }
      /> <
      /Image> 
     </Animated.View>
    );
  }
}

I am just taking my chances here... but did you try adding a semicolon to `let toValue` at line 23? I once had a really annoying bug because of that — Ray, Sep 17 '17 at 18:57
I think your problem is on line 25. `!this.state.showNav ? toValue = 1 : toValue = 0` try putting that on a new line — Ray, Sep 17 '17 at 19:01
So that entire function is a callback. But the error is thrown before the callback is invoked. Nevertheless, I did change the above mentioned line. Didn't change anything — Jeff P Chacko, Sep 17 '17 at 19:04

score 12 · Answer 1 · answered Feb 26 '19 at 11:27

12

Might be useful for others coming from Google. Be sure you're using animated values within animated components like Animated.View. Often overlooked when 'upgrading' a view to be animated.

answered Feb 26 '19 at 11:27

fionbio

3,368
2
23
38

score 2 · Accepted Answer · answered Sep 18 '17 at 18:59

Figured. Two reasons why this error was being thrown.

I was interpolating the same value multiple times. Which is not allowed.
Setting state would call interpolate once more. Which was not required.

Once I Stopped doing interpolate multiple times on the same value and made it independent of state, the error went away.

score 1 · Answer 3 · answered Apr 24 '19 at 20:11

1

For those who come here, you need to have animated values inside <Animated.View>!

Refer to this issue: https://github.com/facebook/react-native/issues/10716#issuecomment-258098396

answered Apr 24 '19 at 20:11

ofundefined

2,692
2
18
35

Mohamed Khalil · Answer 4 · 2017-09-17T19:41:05.090

0

i think this might work you assign value directly to the state object in returnary operator and that case the error

openDrawer() {
  let toValue
  this.setState({
    showNav: !this.state.showNav
  }) 
  toValue = (!this.state.showNav) ? 1 : 0 // change this this line case error
  Animated.timing( // Animate value over time
    this.anim, // The value to drive
    {
      toValue: 1, // Animate to final value of 1
      duration: 300,
    }
  ).start()
}

edited Sep 17 '17 at 19:41

answered Sep 17 '17 at 19:34

Mohamed Khalil

3,036
1
20
26

1

This didn't fix it. – Jeff P Chacko Sep 18 '17 at 02:30

score 0 · Answer 5 · answered Mar 22 '22 at 17:27

In my case I found the animated transform: [{ scale: ...}] value needs to be applied through a style property rather than directly to the view.

This is the working, not-animated code I started from:

<View transform={[{ scale: 0.8 }]}>
  ...
</View>

But this throws the attempted to assign to read-only property exception:

const animVal = useRef(new Animated.Value(0.8)).current
<Animated.View transform: { scale: animVal }>
  ...
</Animated.View>

This works!:

const animVal = useRef(new Animated.Value(0.8)).current
<Animated.View style={{ transform: [{ scale: animVal }]}}>
  ...
</Animated.View>

(This is not exactly the problem the question holder had but it may help others who stumble upon this through Google)

score 0 · Answer 6 · answered Jul 06 '23 at 17:09

0

In my case, I was setting the same animated value to an Animated.View and to a TouchableOpacity component within it. Removing the animated value from the TouchableOpacity and keeping it only in the animated view fixed it.

answered Jul 06 '23 at 17:09

sj_959

175
5
12

error: Attempted to assign to read only property on using Animated react native

6 Answers6

Linked