Developer Portal

Designing With React Native and After Effects

You can design screens in a few different ways if you are building with You.i Engine React Native:

  • design screens using only Facebook React Native.
  • design screens using only the AE workflow.
  • design screens using a hybrid approach, with some components created in After Effects and others using Facebook React Native.

If you are using After Effects (or the hybrid approach), take the following into consideration:

Compositions with classes referenced by developers must be pre-composed

As per the You.i RN implementation, any <*Ref> JSX declaration must be wrapped in a <Composition> tag. The referenced <Composition> must be different from the compositions/layers referenced in its <*Ref> children.

Accordingly, any composition with a class that has a corresponding <*Ref> tag must be precomposed to match this structure and allow for the declaration of that tag.

For example, a composition with a class of PushButtonView must be pre-composed so that the developer can adhere to the required structure:

        
<Composition>
        
<ButtonRef/>
        
<Composition/>

Layout on lists specified in After Effects are discarded when referenced by a developer

All layout and some functionality set on a composition in After Effects is discarded when the list is referenced in code. The discarded layout and functionality must be implemented by a developer through conditional rendering of styles or the use of empty compositions to achieve the desired layout offset.

In/Out timelines do not play automatically

In/Out timelines no longer automatically play when a composition is loaded/unloaded, and must instead be triggered in code.

Move timelines are not supported

Move timelines no longer play automatically when a user interacts with a list. A custom implementation is required instead.

“No Scale” anchors are not supported

“No Scale” anchors are currently unsupported.

Not all classes and refs available in After Effects are supported in You.i Engine React Native

Refer to You.i Engine React Native Ref Components for more information on classes and refs that are available.

Tablet/Handset form factors are not available in the OSX build

Asset location for tablet and handset in the OSX build is currently unsupported