ScrollRef
Similar to the Facebook React Native ScrollView component, but refers directly to a CYIListView (not CYIScrollBarView) After Effects object. ScrollRef components can render both Compositions and Facebook React Native components; for an example, see You.i React Native Compositions.
Remember the following points when you use ScrollRef:
- The props in this topic are a subset of the props that the Facebook React Native ScrollView 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 ScrollRef are the default values for its props.
See also Understanding Lists.
Example usage
import { ScrollRef } from '@youi/react-native-youi';
...
<ScrollRef
name="Component-List"
horizontal={true}
/>
Props
Methods
Reference
Prop: name
After Effects layer name
| Type | Required |
|---|---|
| String | Yes |
Prop: onContentSizeChange
Similar to onContentSizeChange prop of Facebook React Native ScrollView component.
Prop: onMomentumScrollBegin
Similar to onMomentumScrollBegin prop of Facebook React Native ScrollView component.
Prop: onMomentumScrollEnd
Similar to onMomentumScrollEnd prop of Facebook React Native ScrollView component.
Prop: onScroll
Similar to onScroll prop of Facebook React Native ScrollView component.
Prop: onCompositionDidLoad
Invoked when the parent composition is loaded successfully and the Ref component gets attached to it.
Prop: horizontal
Similar to horizontal prop of Facebook React Native ScrollView 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: scrollEventThrottle
Similar to scrollEventThrottle prop of Facebook React Native ScrollView 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 |
For example, to set snapToAlignment as Start for a vertically scrolling list, set Vertical Magnets to Begin.
Horizontal Magnets can remain unset.
See also Magnets.
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: 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: stickyHeaderIndices
This prop mirrors Facebook React Native’s implementation, with some important caveats for sticky headers that are focusable.
Applies to vertically scrolling lists; not supported when horizontal={true}.
| Type | Required |
|---|---|
| Array | No |
Method: scrollTo()
Similar to scrollTo() method of Facebook React Native ScrollView component.
Method: scrollToEnd()
Similar to scrollToEnd() method of Facebook React Native ScrollView component.