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'
},
});