WebViewRef
WebViewRef is only supported on iOS, Android (excluding Android TV), and UWP. On UWP, WebViewRef support is currently display-only; it does not support direct user interaction.
Similar to the Facebook React Native WebView component, but refers directly to a CYIWebView After Effects object.
Remember the following when you use WebViewRef:
- The props in this topic are a subset of the props that the Facebook React Native WebView 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 WebViewRef are the default values for its props.
Example usage
import { WebViewRef } from '@youi/react-native-youi';
...
<WebViewRef
name="SourceTest"
source={{uri: 'https://en.wikipedia.org/wiki/React_(JavaScript_library)'}}
onCompositionDidLoad={() => this.setState({loadingOccurred: true})}
onError={() => this.setState({ errorOccurred: true })}
onLoadStart={() => this.setState({ loadingStarted: true })}
onLoadEnd={() => this.setState({ loadingEnded: true })}
onNavigationStateChange={() => this.setState({ navigationStateChange: true })}
/>
Props
Reference
Prop: name
After Effects layer name
| Type | Required |
|---|---|
| String | Yes |
Prop: source
Similar to source prop of Facebook React Native WebView component.
Prop: onError
Similar to onError prop of Facebook React Native WebView component.
Prop: onLoad
Similar to onLoad prop of Facebook React Native WebView component.
Prop: onCompositionDidLoad
Invoked when the parent composition is loaded successfully and the Ref component gets attached to it.
Prop: onLoadEnd
Similar to onLoadEnd prop of Facebook React Native WebView component.
Prop: onLoadStart
Similar to onLoadStart prop of Facebook React Native WebView component.
Prop: onNavigationStateChange
Similar to onNavigationStateChange prop of Facebook React Native WebView component.
Prop: startInLoadingState
Similar to startInLoadingState prop of Facebook React Native WebView component.
Prop: decelerationRate
Similar to decelerationRate prop of Facebook React Native WebView component
Prop: bounces
Similar to bounces prop of Facebook React Native WebView component.
Prop: scrollEnabled
Similar to scrollEnabled prop of Facebook React Native WebView component.
Prop: visible
Determines whether the component should be visible or not.
Default is true.
Note the following:
- Component visibility is different from component opacity.
- Components that are not visible are not focusable.
| Type | Required |
|---|---|
| bool | No |
Prop: testID
A unique identifier for this element to be used in UI automation testing scripts.
| Type | Required |
|---|---|
| string | No |