Terrific video William, this is really handy since it's a very common use case! Just want to point that the Chevron direction gets inverted. It the interpolation should be mix(transition.value, 0, Math.PI) instead
is there a way to use measure without using react-native-reanimated? say i just wanted to measure a View component. although the `measure` function on the ViewRef will return 1 if the height is 1 even though there is content/children in the View 🤔
Hey William, thanks for the tutorial, it seems, the measure is not able to measure the accurate height, cause, the onLayout height, is showing a different height. Edit - It seems adding position: 'absolute' to the View, let's us get the accurate height, why would that be?
This is the key. Without position absolute, there will be race conditions in measuring the new height. With absolute position, the content is rendered, but invisible because overflow is set to hidden. We got the height to animate to with the position absolute. No need for 1 too!
Again a great tutorial. However I wonder js there any way we can reduce all these boilerplate code ? For animations even the simple ones we always end up doing a lot of code and measurmenta while keeping our api calls and business logic. With reanimated 2 seems like it has a much smoother syntax and readability but in reanimated 1 it was a nightmare
It's nice, but the list item has a static height. What if the list item height is not known in advance? The measure function doesn't work properly in these cases.
@@wcandillon I think Sivan means on the ListItem stylesheet container. I am facing the same issue where if I remove the const LIST_ITEM_HEIGHT from the container in the ListItem stylesheet, then this doesn't seem to calculate correctly.
I was following along with my own implementation and it was not working at all. This turned out to be my exact issue. If the hidden items don't have a height set, the measure function does not work properly. Without a height, it was expanding very short and not the true dynamic height. It's not really dynamic or applicable to other implementations without a height set....
Nvm found a good workaround for it here ua-cam.com/video/nT_vSzJr-vE/v-deo.html Just change this guys code to "height.value = nativeEvent.layout.height;" in the handleEvent function and you're set
This video just got me out of a sticky situation. Thanks for all you do, William.
Amazing as always. Thanks Willian!
You are god's gift to mobile developer
Merci d'exister mec. tes tutos me sont vachement utiles pour mes applis
boooom! nice one. this is awesome 🥳
Terrific video William, this is really handy since it's a very common use case! Just want to point that the Chevron direction gets inverted. It the interpolation should be mix(transition.value, 0, Math.PI) instead
is there a way to use measure without using react-native-reanimated? say i just wanted to measure a View component. although the `measure` function on the ViewRef will return 1 if the height is 1 even though there is content/children in the View 🤔
Hey William, thanks for the tutorial, it seems, the measure is not able to measure the accurate height, cause, the onLayout height, is showing a different height.
Edit -
It seems adding position: 'absolute' to the View, let's us get the accurate height, why would that be?
This is the key. Without position absolute, there will be race conditions in measuring the new height. With absolute position, the content is rendered, but invisible because overflow is set to hidden. We got the height to animate to with the position absolute. No need for 1 too!
what can I do for dynamic height content?
great tutorial , thanks for making such videos
Again a great tutorial. However I wonder js there any way we can reduce all these boilerplate code ? For animations even the simple ones we always end up doing a lot of code and measurmenta while keeping our api calls and business logic.
With reanimated 2 seems like it has a much smoother syntax and readability but in reanimated 1 it was a nightmare
Awesome! Thank you, William.
It's nice, but the list item has a static height. What if the list item height is not known in advance? The measure function doesn't work properly in these cases.
didn't we make so that the height is not know in advance?
@@wcandillon I think Sivan means on the ListItem stylesheet container. I am facing the same issue where if I remove the const LIST_ITEM_HEIGHT from the container in the ListItem stylesheet, then this doesn't seem to calculate correctly.
@@joshhwb you can reset the height to 0 when the data is changing .
I was following along with my own implementation and it was not working at all. This turned out to be my exact issue. If the hidden items don't have a height set, the measure function does not work properly. Without a height, it was expanding very short and not the true dynamic height.
It's not really dynamic or applicable to other implementations without a height set....
You can use this to get a dynamic height whateve the the content heght is
export default ({
children,
expanded,
}: {
children: React.ReactNode
expanded: boolean
}) => {
const [height, setHeight] = useState(0)
const animatedHeight = useSharedValue(0)
const onLayout = (event: LayoutChangeEvent) => {
const onLayoutHeight = event.nativeEvent.layout.height
if (onLayoutHeight > 0 && height !== onLayoutHeight) {
setHeight(onLayoutHeight)
}
}
const collapsableStyle = useAnimatedStyle(() => {
animatedHeight.value = expanded ? withSpring(height) : withTiming(0)
return {
height: animatedHeight.value,
opacity: expanded ? withTiming(1) : withTiming(0),
}
}, [expanded])
return (
{children}
)
}
This new Api is stupid awesome
Can I use reanimated v2albha without terning enabling hermes?
Cool! Thank you, William.
after adding the alpha.5 version it cant find useAnimatedRef
how to create animation appbar equal linkedin
Really great stuff, love your videos! It looks amazing on iOS but I'm having problems with measure() on Android, do you know any workaround?
Nvm found a good workaround for it here ua-cam.com/video/nT_vSzJr-vE/v-deo.html
Just change this guys code to "height.value = nativeEvent.layout.height;" in the handleEvent function and you're set
Can you do Facebook header animation when scrolling?
Can please make header animation video of Facebook
could you please share a screen recording with me at wcandillon@gmail.com? Which animation exactly?
Nice tutorial :D
hi ,i have question,
how can upload video to firebase ?
and Thank you for great job
I love your videos , but i hate how you make me feel like a noob again :)
Is this guy French or sth?