ListRef
Similar to the Facebook React Native FlatList component, but refers directly to a CYIListView After Effects object.
Remember the following points when you use ListRef:
- The props in this topic are a subset of the props that the Facebook React Native FlatList component supports.
- These props only work with You.i React Native and the After Effects workflow.
- Payload for each callback/prop is empty, unless specified otherwise.
- The properties set in After Effects for ListRef are the default values for its props.
For more context around using ListRef and how Lists in You.i React Native work, see our Working With Lists topic.
Assume that events called to JavaScript are asynchronous.
Example usage
import { ListRef } from '@youi/react-native-youi';
...
<ListRef
name="List-Highlights"
data={this.props.items}
renderItem={this.renderItem}
horizontal={true}
keyExtractor={(item) => item.id}
/>
Props
Methods
Reference
Prop: name
After Effects layer name
| Type | Required |
|---|---|
| String | Yes |
Prop: data
Similar to data prop of Facebook React Native FlatList component.
Prop: renderItem
Similar to renderItem prop of Facebook React Native FlatList component.
ListRef can contain Facebook React Native components within the renderItemprop.
See You.i React Native Compositions for an example.
Prop: extraData
Similar to extraData prop of Facebook React Native FlatList component.
Prop: getItemLayout
Similar to getItemLayout prop of Facebook React Native FlatList component.
Prop: horizontal
Similar to horizontal prop of Facebook React Native FlatList component.
You can set horizontal using the following settings in After Effects:
| In After Effects | (Scroll) |
|---|---|
| Scroll Horizontally | True |
| Scroll in Both Directions | True |
| Scroll Vertically | False |
| Do Not Scroll | False |
The default value for horizontal in After Effects is Scroll Horizontally.
Prop: initialNumToRender
Similar to initialNumToRender prop of Facebook React Native FlatList component.
To use initialNumToRender on Roku, see Roku List Development.
Prop: initialScrollIndex
Similar to initialScrollIndex prop of Facebook React Native FlatList component.
To use initialScrollIndex on Roku, see Roku List Development.
Prop: keyExtractor
Similar to keyExtractor prop of Facebook React Native FlatList component.
Prop: numColumns
Similar to numColumns prop of Facebook React Native FlatList component.
Prop: onEndReached
Similar to onEndReached prop of Facebook React Native FlatList component.
Prop: onEndReachedThreshold
Similar to onEndReachedThreshold prop of Facebook React Native FlatList component.
Prop: onViewableItemsChanged
Similar to onViewableItemsChanged prop of Facebook React Native FlatList component.
Prop: testID
A unique identifier for this element to be used in UI automation testing scripts.
| Type | Required |
|---|---|
| string | No |
Prop: snapToAlignment
Similar to snapToAlignment prop of Facebook React Native ScrollView component.
You can set snapToAlignment using the following settings in After Effects:
| In After Effects | (Horizontal or Vertical Magnets) |
|---|---|
| Edges | None |
| None | None |
| Begin | Start |
| End | End |
Note In After Effects, the Horizontal or Vertical magnets must match the values set for the horizontal prop for snapToAlignment to be enabled.
For example, if you want to set snapToAlignment as Start for a vertical list, horizontal must be set to Scroll Vertically and Vertical Magnets must be set to Begin.
Prop: snapToInterval
Similar to snapToInterval prop of Facebook React Native ScrollView component.
In After Effects, it can also be defined by the magnet’s offset value.
Prop: onCompositionDidLoad
Invoked when the parent composition is loaded successfully and the Ref component gets attached to it.
Prop: scrollEnabled
Similar to scrollEnabled prop of Facebook React Native ScrollView component.
You can set ScrollEnabled using the following settings in After Effects:
| In After Effects | (Scroll) |
|---|---|
| Do Not Scroll | False |
| Scroll Horizontally | True |
| Scroll Vertically | True |
| Scroll in Both Directions | True |
Prop: style
Similar to style prop of Facebook React Native view component.
Method: scrollToEnd()
Similar to scrollToEnd() method of Facebook React Native FlatList component.
Method: scrollToIndex()
Similar to scrollToIndex() method of Facebook React Native FlatList component.
Method: scrollToItem()
Similar to scrollToItem() method of Facebook React Native FlatList component.
Method: scrollToOffset()
Similar to scrollToOffset() method of Facebook React Native FlatList component.