onLayout is not triggered when Animated.event applied on iOS

🐛 Bug Report

Behavior on Adnroid is expected one.

To Reproduce

Apply valued to transform and bind with Animated.event set to onLayout prop in Animated.View.

Expected Behavior

iOS should look like Android here. The value should hold a result of Animated.event’s invocation.

Code Example

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


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

const CIRCLE_SIZE = 70;

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

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

Environment

  React Native Environment Info:
    System:
      OS: macOS 10.14
      CPU: (8) x64 Intel(R) Core(TM) i5-8259U CPU @ 2.30GHz
      Memory: 163.80 MB / 16.00 GB
      Shell: 5.3 - /bin/zsh
    Binaries:
      Node: 10.11.0 - ~/.nvm/versions/node/v10.11.0/bin/node
      Yarn: 1.13.0 - ~/.nvm/versions/node/v10.11.0/bin/yarn
      npm: 6.4.1 - ~/.nvm/versions/node/v10.11.0/bin/npm
      Watchman: 4.9.0 - /usr/local/bin/watchman
    SDKs:
      iOS SDK:
        Platforms: iOS 12.1, macOS 10.14, tvOS 12.1, watchOS 5.1
      Android SDK:
        API Levels: 21, 23, 24, 25, 26, 27, 28
        Build Tools: 23.0.1, 23.0.2, 23.0.3, 25.0.0, 25.0.2, 25.0.3, 26.0.1, 26.0.2, 26.0.3, 27.0.1, 27.0.3, 28.0.1, 28.0.2, 28.0.3
        System Images: android-26 | Google Play Intel x86 Atom, android-27 | Intel x86 Atom_64
    IDEs:
      Xcode: 10.1/10B61 - /usr/bin/xcodebuild
    npmPackages:
      react: 16.8.3 => 16.8.3
      react-native: 0.59.2 => 0.59.2
    npmGlobalPackages:
      react-native-cli: 2.0.1
      react-native-create-library: 4.1.2
      react-native-local-cli: 1.0.0-alpha.5

[zeh]

In the meantime, has anyone been able to work around this issue? It seems there’s no way to re-read the layout at all, and in my current implementation moving from an Animated.View to a View just breaks the layout entirely (because it depends on some animations).

[shuangyu]

similar issue here(waste my whole day 😦 ): rn version : 0.59.9