react-native: 0.50.3
VIDEO: https://youtu.be/Piz30mH4o1s
I want to hide or show navbar on scroll. When user scrolls down, I change the height of navbar and 'paddingTop' position of content. After that 'onScroll' event triggering several times, even if user didn't scroll.
How can I deal with this?
I will show u a similar exemple ı hope it helps:
I assume that you have header component and mainPage components. In mainPage you can pass scrollY value to the header component with onScroll method like this:
onScroll={Animated.event([
{
nativeEvent: {
contentOffset: {
y:
this.refs.header === undefined
? 0
: this.refs.header.state.scrollY
}
}
}
])}
And than in header component, you can interpolate your your scrollY value to change headerHeight or header padding style like this
const headerHeight = this.state.scrollY.interpolate({
inputRange: [0, HEADER_SCROLL_DISTANCE],
outputRange: [HEADER_MAX_HEIGHT, HEADER_MIN_HEIGHT],
extrapolate: "clamp"
});
Than u have to change style your animated.view like this:
<Animated.View style={[styles.someStyle, {height: headerHeight}]}></Animated.View>
Feel free to ask any question to me.
Related
Looking for ideas on how to implement a Netflix.com like slider in react native.
If I use a ScrollView, user can scroll all the way to right with one single momentum scroll. But Netflix slider scrolls only 6 (itemsPerRow) items at a time. So, ScrollView may not be ideal. I will use general View instead of ScrollView.
<View style={styles.slider}>
<SliderControl pressHandler={loadPrevItems}>
<Text>{'<'}</Text>
</SliderControl>
<Animated.View
style={
{
transform: [{
translateX: interpolatedAnimation,
}],
}
}
>
{renderContent()}
</Animated.View>
<SliderControl pressHandler={loadNextItems}>
<Text>{'>'}</Text>
</SliderControl>
</View>
The slider controls are tied to onPress event handlers. The handlers adjusts the animation value as needed. When the slider is re-rendered, it is animated (slide to left/right) and shows next/prev items. I figured that they are using transform translateX animation for this. This is easily achievable with Animated API
const animation = useRef(new Animated.Value(0)).current;
const interpolatedAnimation = useMemo(() => {
return animation.interpolate({
inputRange: [0, 100],
outputRange: [0, sliderWidth],
});
}, [animation, sliderWidth]);
useEffect(() => {
Animated.timing(animation, {
toValue: moveDirection === 'right ? -100 : 100,
duration: 750,
useNativeDriver: true,
}).start();
});
Along with the Next/Prev button, Netflix slider also supports the trackpad scroll events. If we scroll slightly, the slider doesn't move at all. But we do a momentum scroll, it slides exactly 6 (itemsPerRow) items.
A general View doesn't support scroll event handlers to listen to trackpad scroll action. Not sure how I can achieve this part
ScrollView - lot of unwanted scrolling
View - No support for scroll event listener
Any ideas?
Is it possible to extend ReactNative to allow animation of an element's position using the native driver.
Whilst you can animate via translateX, in this case, the size of the element is to be reduced adding by changing both its left and right style parameters.
Neither left, right, marginLeft, marginRight, paddingLeft nor paddingRight are supported for native animations. Is there a way around this or some ingenious idea involving scaling that won't distort the element.
export class ViewScreen extends React.Component {
constructor(props) {
super(props);
this.state= {
scrollY: new Animated.Value(0)
}
}
render() {
var VSStickyElementsMargin = this.state.scrollY.interpolate({
inputRange: [0, 44],
outputRange: [0, 4]
});
return (
<Animated.ScrollView
onScroll={Animated.event([
{ nativeEvent: { contentOffset: { y: this.state.scrollY } }}],
{ useNativeDriver: true }
)}>
<Animated.View style={[
{left: VSStickyElementsMargin},
{right: VSStickyElementsMargin}
]}>
<Text>I am content that is not to become distorted</Text>
</Animated.View>
</Animated.ScrollView>
)
}
}
There is no way to use native driver on properties that are not transforms or opacity.
If I understand what you are trying to achieve correctly you should use use translateX to move the element outwith its parent and animate it back into view when you need to, use overflow hidden on the parent.
Alternatively if this is not the effect you want try looking at the layoutanimation api as you can get better performance using it to drive values than animating non transform/opacity properties.
I have my own Header component that has a search field and some other features unique to my app. I simply define it on the navigationOptions for each screen.
SomeScreen.navigationOptions = (props) => ({
header: <Header {... props} />,
});
What I want to do though is animate the title inside the component itself as it moves from screen to screen? In general how can I accomplish this with a custom header? I've looked at the react-navigation-stacks implementation of Header but I can't make much sense of it.
Depending on your version of stack navigator, you'll need to check the props you receive. First of all, pass a function returning an element to the header option so that you receive the props:
SomeScreen.navigationOptions = {
header: props => <Header {...props} />
};
If you're on react-navigation-stack#2.x (alpha), you get a prop called scene. It's an object containing a progress property which has 3 properties which are reanimated nodes.
current: represents the progress of the screen that the header, it ranges from 0 to 1, where 0 means the screen is fully hidden, and 1 means the screen is fully shown.
next: similar to current, but for the next screen in the stack. can be undefined when there's no next screen
previous: similar to current, but for the previous screen in the stack. can be undefined when there's no previous screen
You can interpolate on these values to animate your view. For example, say you want to animate the opacity to start from 0.5 and to 1 as screen comes in:
import Animated from "react-native-reanimated";
// ...
<Animated.Text
style={{
opacity: Animated.interpolate(scene.progress.current, {
inputRange: [0, 1],
outputRange: [0.5, 1]
})
}}
/>;
If you're on react-navigation-stack#1.x, you get a prop called position. It's an animated node which represents the current position of the stack (ranges from 0 to current index). You can interpolate on it to animate your header. It can be a bit tricky, so you'll have to play around.
For example, say you want to animate the opacity to start from 0.5 and to 1 as screen comes in:
NOTE: I haven't tested this one so the code might be wrong. So you'll have to play around with it.
import { Animated } from "react-native";
// ...
<Animated.Text
style={{
opacity: position.interpolate({
inputRange: [index - 1, index],
outputRange: [0.5, 1]
})
}}
/>;
Encountered this issue recently when I work with react native animated API.
As the image shows, a card component is positioned at top left corner, its flip animation state is controlled by the rotateY value, moving animation is controlled by translateX and translateY values.
It seems the rotation pivot point always been set to the card's original position. After the card has been moved (changing the translateX and translateY value), the card flip rotation animates reference its original position.
It there a way to adjust the rotation pivot point? Alternatively, is there a way to animate component's position instead of translation? Thanks.
Got it working finally. Turns out you can animate the component position change without using the translate property, by adding a listener to the animated value and updating the component state accordingly:
in the constructor, setup card component initial position and cardPos animated value.
in the componentDidMount function, attach listeners to the animated values. when animated values change, update the component state.
in the render function set the component root value style to position:"absolute" and actual position sync to the values in component's state.
constructor(props){
super(props);
// set card initial position as component state
this.state = {
cardPosX: this.props.position.x,
cardPosY: this.props.position.y
};
this.flipAnimatedValue = new Animated.Value(
this.props.isFacingUp ? 180 : 0
);
this.flipAnimatedInterpolate = this.flipAnimatedValue.interpolate({
inputRange: [0, 90, 180],
outputRange: ["0deg", "90deg", "0deg"]
});
// create animated value for card Position X and Y
this.cardPosXAnimatedValue = new Animated.Value(this.props.position.x);
this.cardPosYAnimatedValue = new Animated.Value(this.props.position.y);
}
componentDidMount() {
// addListener for cardPos Animated Value
// when animated values change, update the component state
this.cardPosXAnimatedValue.addListener(({ value }) => {
this.setState({ cardPosX: value });
});
this.cardPosYAnimatedValue.addListener(({ value }) => {
this.setState({ cardPosY: value });
});
}
render(){
return (
<View
style={{
width: this.cardWidth,
height: this.cardHeight,
position: "absolute",
top: this.state.cardPosY, //card position sync with animated value
left: this.state.cardPosX
}}
>
... //child components
</View>
);
}
I am would like to make an animated header.
I Created an animated component of FlatList,
Used the onScroll function to update the animated value.
Placed a view (Animated.View) as the header above the animated FlatList using position absolute.
Finally, interpolate the animated value to change the view (Animated.View) using transform properties.
The animation works fine, but the animation is not smooth at all.
I saw this issue of how using scrollEventThrottle helps the smoothness. So I thought using FlatList would be smooth but it's not. If your scroll while pressing, it's smooth. But if you scroll and leave the finger, it's jumpy ( I don't know how to describe it. Sorry). The scrolling is smooth but the animated view (Header) animation is not smooth at all.
Environment
react: 16.0.0-alpha.12,
react-native: ^0.47.0,
node: v7.7.3
npm: 4.1.2
yarn: 0.21.3
Target Platform: iOS and Android
Build tools: expo
Link to snack demo
export default class AnimatedHeader extends React.Component {
state = {
animatedValue: new Animated.Value(0),
};
_renderItem = ({item}) => {
return (
<View style={styles.nonsenseItem}>
<Text style={styles.itemText}>{item}</Text>
</View>
)
};
render() {
let scaleY = this.state.animatedValue.interpolate({
inputRange: [0, 180],
outputRange: [1, 0.5],
extrapolate: 'clamp',
});
let translateY = this.state.animatedValue.interpolate({
inputRange: [0, 180],
outputRange: [0, -100],
extrapolate: 'clamp',
});
return (
<View style={styles.container}>
<AnimatedFlatList
contentContainerStyle={{marginTop: 200}}
scrollEventThrottle={16} // <-- Use 1 here to make sure no events are ever missed
onScroll={Animated.event(
[{nativeEvent: {contentOffset: {y: this.state.animatedValue}}}],
{useNativeDriver: true} // <-- Add this
)}
data={data}
renderItem={this._renderItem}
keyExtractor={(item, i) => i}/>
<Animated.View style={[styles.headerWrapper, {transform: [{scaleY}, {translateY}]}]}/>
</View>
)
}
}
Update
So, I tried to implement the same functionality using ScrollView. However, I think, its event worse using ScrollView when compared to FlatList.
Here is the expo snack demo: Animated ScrollView Header
I think I need to mention how I got here at the first place. So, I tried to implement this by a very nice tutorial in Medium, and also by watching this awesome youtube react conf viedo by Brent. However, the exact code used on youtube video has the same effect. Also, on the Medium tutorial, the author has given a Link to his expo Animated header link, which works very smoothly. But the same code doesn't work smoothly when I copy paste the code. So, I think the problem is with the react or react native version. I will update if I have any new update. Thank you.
There has been a regression in React Native 0.46 which, fortunately, has been fixed in 0.48.2 (see this issue and this PR). That's why you're having the issue with recent Expo versions. I've had this problem with custom parallax images, and this was solved by building a custom binary with RN 0.48.3.
Your code is fine, even though I would recommend setting scrollEventThrottle to 1 as this really helps smoothing things out on iOS.