CODEWITHSUNDEEP
react-nativeexporeact-native-reanimated
cklinx
cklinx

Reputation: 23

React native reanimated - change animation params with props

i am using react native reanimated. I cant change animation value passing different props to component. This is my expo code : expo code

Actually i want change the min variable inside my snappable.js components to props.minValue so i can change the animation dynamically.

const min = props.minDist ? props.minDist : 0

The first time the component gets the prop but after it seems not change anymore.

Here how i pass the prop to Snappable component.

<View style={styles.container}>
    <Snappable minValue={this.state.min}/>
    <TouchableOpacity
    style={styles.touch}
    onPress={() => this.setState({min: 0})}>
    <Text>Change Props</Text>
  </TouchableOpacity>
</View>

Thanks in advance.

Upvotes: 0

Views: 1560

Answers (1)

tombraider
tombraider

Reputation: 1167

This seems a little all over the place. First off, you're not setting your state correctly. You're using a function based component but attempting to use this.setState(). This method does exist in a functional component. If you want to use state in a functional component, you need to use the useState hook.

Second, it doesn't look like you do anything with the minValue prop in your Snappable component. You're passing a minValue prop into the component but you don't utilise it.

Edit (add hooks example):

You can set your state with hooks like so:

export default function App() {
    const [min, setMin] = React.useState(200)

    return (
        <View style={styles.container}>
        <Snappable minValue={min} />
        <TouchableOpacity
            style={styles.touch}
            onPress={() => setMin(0)}>
            <Text>Change Props</Text>
        </TouchableOpacity>
        </View>
    );
}

Upvotes: 1

Related Questions