Reputation: 579
Hello I am trying to implement animation in React Native. When I scroll up from scrollview, I want one of children in scrollview which is buttonContainer fade out. So, When I start to scroll up, buttonContainer's opacity may be changing from 1 to 0. But, nothing is happening. I don't fully understand what to put input ranges and output ranges.
and here also
import * as React from 'react';
import { Text, View, StyleSheet, Dimensions, Button } from 'react-native';
import Animated from 'react-native-reanimated';
import { onScroll } from 'react-native-redash';
const { height } = Dimensions.get('window');
const BUTTON_CONTAINER_HEIGHT = height / 1.7;
const { Value, interpolate, Extrapolate } = Animated;
export default class App extends React.Component {
render() {
const scrollY = new Value(0);
const opacity = interpolate(scrollY, {
inputRange: [BUTTON_CONTAINER_HEIGHT, height - 30],
outputRange: [1, 0],
extrapolate: Extrapolate.CLAMP,
});
return (
<View style={{ flex: 1 }}>
<View style={styles.container}>
<Animated.ScrollView
onScroll={onScroll({ scrollY })}
showVerticalScrollIndicator={false}
scrollEventThrottle={1}>
<Animated.View
style={[styles.buttonContainer, { opacity: opacity }]}>
<Text>Hello World! </Text>
<Button title="Click Me!" />
</Animated.View>
<View>
<Text style={styles.textStyle}>This is content</Text>
<Text style={styles.textStyle}>This is content</Text>
<Text style={styles.textStyle}>This is content</Text>
<Text style={styles.textStyle}>This is content</Text>
<Text style={styles.textStyle}>This is content</Text>
<Text style={styles.textStyle}>This is content</Text>
<Text style={styles.textStyle}>This is content</Text>
<Text style={styles.textStyle}>This is content</Text>
</View>
</Animated.ScrollView>
</View>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
flexDirection: 'column',
position: 'relative',
},
buttonContainer: {
flex: 1,
flexDirection: 'column',
justifyContent: 'flex-end',
alignItems: 'center',
height: BUTTON_CONTAINER_HEIGHT,
marginBottom: 30,
},
textStyle: {
height: 100,
fontSize: 24,
marginTop: 10,
},
});
Upvotes: 3
Views: 3291
Reputation: 1738
You're defining the animated value in the wrong way. Don't define values in render method since they will be created every time component re-render. Instead, define them in the constructor.
Use below code:
import * as React from 'react';
import {Text, View, StyleSheet, Dimensions, Button} from 'react-native';
import {onScroll} from 'react-native-redash';
import Animated from 'react-native-reanimated';
const {height} = Dimensions.get('window');
const BUTTON_CONTAINER_HEIGHT = height / 1.7;
const {Value, interpolate, Extrapolate} = Animated;
export default class App extends React.Component<{}> {
constructor(props: Readonly<{}>) {
super(props);
this.scrollY = new Value(0);
}
render() {
const {scrollY} = this;
const opacity = interpolate(scrollY, {
inputRange: [0, BUTTON_CONTAINER_HEIGHT, height - 30],
outputRange: [1, 0, 0],
extrapolate: Extrapolate.CLAMP,
});
return (
<View style={{flex: 1}}>
<View style={styles.container}>
<Animated.ScrollView
onScroll={onScroll({y: scrollY})}
showsVerticalScrollIndicator={false}
scrollEventThrottle={1}>
<Animated.View style={[styles.buttonContainer, {opacity}]}>
<Text>Hello World! </Text>
<Button onPress={() => {}} title="Click Me!" />
</Animated.View>
<View>
<Text style={styles.textStyle}>This is content</Text>
<Text style={styles.textStyle}>This is content</Text>
<Text style={styles.textStyle}>This is content</Text>
<Text style={styles.textStyle}>This is content</Text>
<Text style={styles.textStyle}>This is content</Text>
<Text style={styles.textStyle}>This is content</Text>
<Text style={styles.textStyle}>This is content</Text>
<Text style={styles.textStyle}>This is content</Text>
</View>
</Animated.ScrollView>
</View>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
flexDirection: 'column',
position: 'relative',
},
buttonContainer: {
flex: 1,
flexDirection: 'column',
justifyContent: 'flex-end',
alignItems: 'center',
height: BUTTON_CONTAINER_HEIGHT,
marginBottom: 30,
},
textStyle: {
height: 100,
fontSize: 24,
marginTop: 10,
},
});
Upvotes: 3