0

I have what I thought was a very straightforward usage of Animated.View and Animated.Value to control the position of an slide-open menu bar. I have tried to place the Animated.timing() in the constructor, componentWillMount, componentDidMount; none of those options have worked. The error with the blow configuration is: Attempted to assign readonly property

If I move the Animated.timing() to the constructor I get: you attempted to set the key on an object that is meant to be immutable.

Here is my current code:

import React, { Component } from 'react'
import {
  View,
  ScrollView,
  Text,
  StyleSheet,
  TouchableOpacity,
  Animated,
  Easing,
} from 'react-native'
import _style from '../../masterStyle'

export default class Nav extends Component {
  constructor(props){
    super(props);
    this.state = {
      navPosition: new Animated.Value(-230)
    };

    Animated.timing(this.state.navPosition, {
      toValue: 0,
      easing: Easing.back(),
    }).start(()=>{
      console.log("did start")
    });

  }

  componentDidMount(){
  }

  render(){
    return (
      <Animated.View style={style.navWrap}>
        <TouchableOpacity style={style.navMask} onPress={this.props.hide}>{}</TouchableOpacity>
        <ScrollView style={[style.menuWrap,{right: this.state.navPosition}]}>
          <Text style={_style.h2}>{}</Text>
        </ScrollView>
      </Animated.View>
    )
  }
}

const style = StyleSheet.create({
  navWrap: {
    flex: 1,
    position: 'absolute',
    width: '100%',
    height: '100%',
    top: 0,
    right: 0,
    zIndex: 10,
  },
  navMask: {
    position: 'absolute',
    top: 0,
    right: 0,
    width: '100%',
    height: '100%',
    backgroundColor: '#000',
    opacity: 0.8,
  },
  menuWrap: {
    position: 'absolute',
    flex: 1,
    width: 230,
    height: '100%',
    paddingTop: 0,
    backgroundColor: 'white',
    zIndex: 11,
    borderWidth: 0,
    borderColor: 'red',
    borderTopWidth: 60,
    borderTopColor: '#123357'
  },
  menuCloseIcon: {
    fontSize:30,
    fontWeight:'100',
    color: '#979797'
  },
});
Bryan Potts
  • 901
  • 1
  • 7
  • 20
  • I also receive the immutable error if I move the Animated.timing() into the top of the render function itself. – Bryan Potts Jul 06 '18 at 20:45
  • I have also tried moving all of the Animated work out of this component and into the App parent component, with the same results. – Bryan Potts Jul 06 '18 at 20:53
  • **ScrollView** not support animatable by default. I think you'd better put the **this.state.navPosition** style to your **Animated.View**,or you can use [createAnimatedComponent](https://facebook.github.io/react-native/docs/animated#animatable-components) to make your own animatable scrollview – liu pluto Jul 07 '18 at 10:03

0 Answers0