React-native-reanimated: Declarative onLayout

[osdnk]

It would be a nice feature to add possibility to use onLayout in declarative way with Animated.Event and normal non-animated View

[osdnk]

Welp, it's not really useful I realized

[vaukalak]

@osdnk do you mean:

<Animated.View
        onLayout={event([
          { nativeEvent: { layout: { y: screenWidth } } }
        ])}
>
...
</Animated.View>

Why do you think this is not useful? I think it's way better than using callback. And probably in future thing like that may be entirely moved to native driver and bypass js thread.

[osdnk]

I thought It worked. Now I see it does not

[osdnk]

Hm, it works FM

import React from 'react';
import { StyleSheet, View, Dimensions, Animated as NativeAnimated } from 'react-native';
import Animated from 'react-native-reanimated';;

const { cond, eq, add, call, set, Value, event, multiply } = Animated;

export default class Example extends React.Component {
  constructor(props) {
    super(props);
    this.val1 = new Value(100);
    this.val2 = new NativeAnimated.Value(1);
  }
  render() {
    return (
      <View style={styles.container}>
        <Animated.View
          onLayout={Animated.event([
            {
              nativeEvent: {
                layout: {
                  height: this.val1
                }
              }
            }
          ])}
          style={[
            styles.box,
            {
              backgroundColor: 'blue',
              transform: [ { translateY: this.val1 }]
            }
          ]}
        />
        <NativeAnimated.View
          onLayout={NativeAnimated.event([
            {
              nativeEvent: {
                layout: {
                  height: this.val2
                }
              }
            }
          ], {
            useNativeDriver: true
          })}
          style={[
            styles.box,
            {
              transform: [
                {
                  translateY: this.val2
                }
              ]
            }
          ]}
        />
      </View>
    );
  }
}

const CIRCLE_SIZE = 70;

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',

  },
  box: {
    backgroundColor: 'tomato',
    marginLeft: -(CIRCLE_SIZE / 2),
    marginTop: -(CIRCLE_SIZE / 2),
    width: CIRCLE_SIZE,
    height: CIRCLE_SIZE,
    borderRadius: CIRCLE_SIZE / 2,
    borderColor: '#000',
  },
});

[osdnk]

Lol, sorry for a mistake. I haven't noticed I hardcoded 100 displacement 🤦‍♂️

[satya164]

XD

[JulianKingman]

So... is there a way to use onLayout? I'm unclear on what the status is

[ken0x0a]

This https://github.com/kmagiera/react-native-reanimated/issues/79#issuecomment-478286609 doesn't work

[simonbuerger]

Is this related to or impacted by https://github.com/facebook/react-native/pull/15611?

[jfrolich]

Also interested if this would be possibly supported. It can handle some measurement cases, where due to the async nature of react-native, there is always a flicker. With an animated value that responds to onLayout the flicker might be avoidable.

[yairopro]

Hi
No news on this issue ?

[ShaMan123]

Edited

~I looked into this issue and I believe the problem to be createAnimatedComponent event registry.
Events are registered after component is mounted (componentDidMount), hence missing the layout event. I think it's better to create a native view manager that will receive designated props and register stuff down there if possible. This will reduce bridge overload and enable more features like passing more than one event and even passing a js listener.~

see PR

[kmagiera]

Closing this as we won't be adding big new features to reanimated 1. We will be adding sync view measure in reanimated 2 soon