You.i Engine React Native Compositions

In Facebook React Native, components are created with JSX declaratively. If the structure or content of the JSX changes when state or props change, then the render function is called again, the new tree is diffed against the old tree, and the minimal set of changes is executed to arrive at the desired result. We call this system declarative because the developer doesn’t need to run these changes manually, but rather declares the end result.

Loading After Effects Data

With this framework in mind, You.i Engine One introduces a way to load graphical tree data from After Effects. This is done with a new set of components in the react-native-youi library; specifically with the Composition component and using the source property.

The following snippet shows how to load the composition Main exported from an After Effects file (PDP.aep)

import React, { Component } from 'react';
import { Composition } from '@youi/react-native-youi';
 
export default class CompositionLoadingSample extends Component {
   render() {
      return (
         <Composition source="PDP_Main">
 
 
         </Composition>
      );
   }
}

Compositions can be used inside Facebook RN components, but Facebook RN components cannot be used inside a Composition, except in the case of ListRef and ScrollRef. These Ref components can render either a brand-new Composition, or any React Native component such as a View or TouchableHighlight. See the example below:

import React, { Component } from 'react';
import { Composition } from '@youi/react-native-youi';
import { View } from 'react-native';
export default class MixingCompositionsAndViewsSample extends Component {
  renderListItem = ({item}) => {
    return item;
  }
  render() {
    const data = [<View/>, <Composition source="Sample_Item"/>];
    return (
      <View style={styles.container}>
        {/* Compositions can be placed inside Views */}
        <Composition source="Sample_Refs">
            {/* ListRef and ScrollRef may render either a React Native Component or a Composition
            but they may not render a You.i Ref Component without a Composition*/}
            <ScrollRef name="ScrollLayer">
              <View />
              <Composition source="Sample_Item"/>              
            </ScrollRef>            
            <ListRef 
              name="ListLayer" 
              data={data} 
              renderItem={this.renderListItem} 
            />
            {/* Will not work. Neither View nor Composition are a Ref in the parent Composition. */}
            <View/> 
            <Composition source="Sample_Item"/>
        </Composition>
      </View>
    );
  }
}
const styles = {
 container: {
   flex: 1,
   flexDirection: 'column',
   justifyContent: 'center',
   alignItems: 'center',
   backgroundColor: '#fff',
 }
};

Ref Children

Unlike Facebook React Native components, children of a composition are not declared but rather referenced. This is because they have been loaded into existence by the composition already, and so exist whether or not we write JSX to interface with them. This has the advantage of needing much less code to accomplish the same level of screen information, but at the cost that all of this information is not explicit in code.

To reference elements of a composition, you must use “ref” components as children of the composition. The UI Components topic describes these in greater detail. A ref component searches recursively for a node with the name given in the name property.

Similar to FindNode, the recursive algorithm finds the first node with that name. To disambiguate “cousin” nodes with the same name, you can nest within their ancestors which have different names; for example:

import React, { Component } from 'react';
import { Composition, ViewRef, ButtonRef } from '@youi/react-native-youi';
 
export default class CompositionLoadingSample extends Component {
   render() {
      return (
         <Composition source="PDP_Main">
            <ViewRef name="controls" >
               <ButtonRef name="Btn-Previous" text="Previous" />
               <ButtonRef name="Btn-Next" text="Next" />
            </ViewRef>
      <   /Composition>
      );
   }
}

Using Facebook React Native and AE Composition

You can build screens using both Facebook RN and After Effects (as opposed to solely one or the other) because you can intermix Facebook RN components with composition components. For example, a screen might be laid out in large pieces by Facebook components such as View and FlatList, but with individual components, such as buttons and images, created with compositions. One limitation with this approach is that the composition element itself cannot be referenced. The common workaround is to pre-compose it so that the component of interest is one hierarchical layer deeper.

Layout Engines

Compositions use CYILayout (from the C++ side of You.i Engine One) to perform layouts as defined by artists in After Effects. This is a different layout engine from Facebook RN components, which use Yoga library to lay out elements according to Flexbox CSS API. These two engines are not well connected and are the main reason why Facebook and composition components cannot be arbitrarily nested. When building apps in a hybrid style, you need to be aware of these two engines performing layout independently to understand why the final elements are positioned in their final location.

For more information about the Composition Component, see our Composition reference page.