You.i React Native Tips and Tricks

The following sections describe various tips and tricks for any developer working with You.i React Native solution:

• Referencing one composition from another composition

• Verifying the version

• Displaying modals

• Creating different entry point for an app

How can a composition from one After Effects project be referenced as a child in another After Effects project composition? Can I also reference this sub-composition in JSX?

Let’s assume you have created two After Effects projects: Proj1.aep and Proj2.aep. Proj1.aep contains Composition1 and Proj2.aep contains Composition2.

Now in the Proj2.aep, you need to precompose a solid and set following metadata in the comments field: use: Proj1_Composition1;. When done, you can add Composition1 as a child of Composition2. At runtime, you see the correct composition linked to Composition1.

In JSX, you can reference Composition1 of Proj1.aep as a ViewRef child of the parent composition, which is Composition2:

<Composition source="Proj2_Composition1">
  <ViewRef name="Composition2" />
</Composition>

The following diagram shows the relationship between the two After Effects projects:

Where can I find the version number of the AE plugin that is being used?

There are two ways to know the version number of the AE plugin you have been using. You can use either one of them:

• During the export of the project, the title bar of the log window mentions the version number of the AE plugin.
• Press H in the AE preview window to see the version number of the AE plugin at the bottom of the window.

How can I display a modal overlay and have it optionally grey out the contents underneath when the Modal component is not supported?

Use styles and conditional rendering to overlay items; such as a composition:

<View>
  <View>
    .. stuff ..
  </View>
  {
  showOverlay
  ?
  <View style={{position: 'absolute'}}>
    <Composition src="your_stuff">
      .. other stuff..
    </Composition>
   </View>
  :
  null
  }
</View>

The previous code conditionally renders the composition over an opaque view. If you want the view to be transparent and rely on the composition to determine what is seen, add backgroundColor: 'transparent' after the absolute positioning.

Note The previous code uses You.i Platform’s implicit rendering order to ensure the modal is above the other content. If these two views were reversed it would appear underneath instead.

How to create a different entry point for a You.i React Native app?

You.i React Native app’s entry point is the component registered in AppRegistry, which is part of index.youi.js file:

AppRegistry.registerComponent('YiReactApp', () => YiReactApp);

The bundler loads the path specified in JSBundleLoader. You can specify any other JavaScript file as an entry point.

How to exclude specific files or file extensions or file directories before project generation?

To exclude specific file extensions before project generation, such as .log and .aep, do the following to the CMakeLists.txt file:

1. Add the following command:

   set(YI_EXCLUDED_ASSET_FILE_EXTENSIONS ".log,.aep" CACHE STRING "Comma-delimited list of file extensions whose files should be omitted during asset copying.")
   

2. Update the yi_configure_asset_copying(PROJECT_TARGET ${PROJECT_NAME} function as follows:

   yi_configure_asset_copying(PROJECT_TARGET ${PROJECT_NAME}
       EXCLUDED_EXTENSIONS ${YI_EXCLUDED_ASSET_FILE_EXTENSIONS}
   )
   

To exclude a specific files before project generation, such as abc.log and test.aep, do the following to the CMakeLists.txt file:

1. Add the following command:

   set(YI_EXCLUDED_ASSET_FILES "abc.log,test.aep" CACHE STRING "Comma-delimited list of files that should be omitted during asset copying.")
   

2. Update the yi_configure_asset_copying(PROJECT_TARGET ${PROJECT_NAME} function as follows:

   yi_configure_asset_copying(PROJECT_TARGET ${PROJECT_NAME}
       EXCLUDED_FILES ${YI_EXCLUDED_ASSET_FILES}
   )
   

To exclude a specific file directories before project generation, such as test or logs, do the following to the CMakeLists.txt file:

1. Add the following command:

   set(YI_EXCLUDED_ASSET_FILE_DIRECTORIES "abc,test" CACHE STRING "Comma-delimited list of file directories that should be omitted during asset copying.")
   

2. Update the yi_configure_asset_copying(PROJECT_TARGET ${PROJECT_NAME} function as follows:

   yi_configure_asset_copying(PROJECT_TARGET ${PROJECT_NAME}
       EXCLUDED_DIRECTORIES ${YI_EXCLUDED_ASSET_FILE_DIRECTORIES}
   )