CODEWITHSUNDEEP
javascriptandroidiosreactjsreact-native
otto
otto

Reputation: 2033

react native TypeError: Attempted to assign to readonly property

hi i am new to react native. I get this error when i start the app:

"TypeError: Attempted to assign to readonly property.
This error is located at:
    in MyClass (at renderApplication.js:35)
    in RCTView (at View.js:112)
    in View (at AppContainer.js:102)
    in RCTView (at View.js:112)
    in View (at AppContainer.js:122)
    in AppContainer (at renderApplication.js:34)
stopTracking
    AnimatedValue.js:279:9
start
    AnimatedImplementation.js:188:4"

on this code. Can somebody help me ? I cant find what is wrong with this code. I tried to restart npm react native server but it is still not working. The App should only transform a text from one position to another.

//import liraries
import React, { Component } from 'react';
import { View, Text, StyleSheet, Animated } from 'react-native';

// create a component
class MyClass extends Component {
  constructor(){
    super()
    this.animated = new Animated.Value(0);
  }
  componentDidMount() {
    Animated.timing(this.animated,{
      toValue:1,
      duration: 2000,
      }).start();
    }

  render() {
    const translateX = this.animated.interpolate({
      inputRange: [0,1],
      outputRange:[-500,1]
    });
    const transfrom = [{translateX}];
    return (
      <View>
      <Animated.Text style={[{transfrom}]}>
        Hello
      </Animated.Text>
      </View>
    );
  }
}

// define your styles
const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#2c3e50',
  },
});

//make this component available to the app
export default MyClass;

Upvotes: 0

Views: 9511

Answers (1)

Joshua Leonard
Joshua Leonard

Reputation: 512

You misspelled transform. 

 render() {
   const translateX = this.animated.interpolate({
      inputRange: [0,1],
      outputRange:[-500,1]
    });
    const transfrom = [{translateX}];
    return (
       <View>
       <Animated.Text style={[{transfrom}]}>
       Hello
       </Animated.Text>
       </View>
   );

  }

Upvotes: 6

Related Questions