A layout provides rules on position, size, and behavior of items in a view.
Remember the following when working with composition layouts:
Specify options such as gravity (direction), padding, and fill modes (width and height).
Padding isn’t supported for lists in React Native projects. Padding for lists and margins for list items must be achieved through JSX.
|Layout Name||Layout Behavior|
|No Layout||AE will display the layers in the app as they are in the view port, without a Layout.|
|Row Layout||All layers in a composition will be displayed in a row, with the first layer on the left, and the last layer on the right|
|Column Layout||All layers in a composition will be displayed in a column, with the first layer on the top, and the last layer on the bottom|
|Auto Linear Layout
||All layers in a composition will be displayed in a row or column depending on the size of the screen, or can be programmed to change orientation
Not supported for compositions in React Native projects; define your layout as a Row or Column Layout
|Stack Layout||All layers in a composition will be displayed in a stack, with the first at the front, and the last layer at the back|
||All layers will be displayed in a grid, the number columns and rows can be specified, and gutters between grid elements can be specified
Not supported for compositions in React Native projects; typically this is used on a list, use the numColumns prop instead
|Scaling Layout||You.i Platform will scale layers in a layout, based on detected changes to the composition in real time|
||You.i Platform will attempt to place the layers on the screen as they are laid out in the After Effects composition panel
Not supported for compositions in React Native projects; try defining your layout manually, and setting layer-specific gravity and margin
||A developer can apply code to the layout to create a customized layout for a specific purpose
Not supported for compositions in React Native projects; use a pre-defined layout type from this list
Layout properties are available for both compositions and layers. Layout attributes can be applied through the Properties panel. Some properties are specific to certain types of layouts.
|Composition layout||Layer Layout|
|Layout properties at the composition level apply to all layers in that composition. For example, a Gravity setting of Top-Left applies to all layers.||You can define layout properties at the layer level to override default composition settings; for example, with the Gravity setting. This is good practice for setting backgrounds and creating unique elements. This behavior is similar to cascading style sheets with global styles that are locally overridden.|
|Property Name||Property Behavior|
|Layout||Selects the type of layout from one of: Row Layout, Column Layout, Auto Linear Layout, Stack Layout, Grid Layout, Scaling Layout, Auto Layout, or Custom Layout|
|Gravity||Selects how objects are aligned in the composition|
|Width and height resizing||Resizes the composition to fit its content|
||Sets the padding distance in pixels from the top, bottom, right, and left edge of the composition.
Not supported for lists in React Native projects; apply padding to lists via JSX.
|Spacing||Sets the distance between the layers in the composition, and whether all layers have equal distance between them|
|Animation||Sets the type of animation easing and the duration of the layout’s movement and scale. Default units are milliseconds, but other units can be used (‘s’, ‘min’, and ‘h’)|
|Property Name||Property Behavior|
|Layoutable||Allows or disallows layout to affect the currently selected layer|
|Background||Treats this layer as a background. This layer is no longer considered part of the layout and resizes to fill its parent|
|Aspect ratio||Maintains the aspect ratio of this layer if it is resized (for example by the ‘fill parent’ or ‘fit content’ layout attributes|
|Gravity||‘Use Composition Gravity’ is the default value|
|Width/Height||Set preferred width, minimum width, maximum width, and Fill Parent (expand to fill the parent container)|
||Set the margin for the top, right, bottom, and left of the layer. This amount is added to the spacing specified for the parent composition unless the layout is disallowed on the currently selected layer.
Not supported for list items in React Native projects; set margin to list items via JSX.
Additional properties may exist for specific layout types.