FocusZoneRef

This component exposes CYIFocusZoneView functionality to the React Native layer, and refers to a CYIFocusZoneView in an After Effects composition. To access it, import the component from @youi-react-native-youi. For more information, see Setting Focus in After Effects, and Using FocusZone and FocusZoneRef.

Example Usage

import { FocusZoneRef, Composition, ButtonRef } from '@youi/react-native-youi';
import React, { Component } from 'react';
class FocusZoneRefExample extends Component {
  componentDidMount() {
    this.focusZoneRef.setInitialFocus(this.initialFocusRef);
  }
  render() {
    return (
      <Composition source="FocusZoneRef_MainComp">
        <FocusZoneRef
          name="FocusZone"
          ref={(ref) => (this.focusZoneRef = ref)}
          entryMode="fixed"
        >
          <ButtonRef
            ref={(ref) => (this.initialFocusRef = ref)}
            name="InitialFocus"
          />
        </FocusZoneRef>
      </Composition>
    );
  }
}

Prop

entryMode: string

Type	Required
string	Yes

Allows you to set the focus entry point. Can be set to one of four possible values corresponding to the modes shown in the table below:” normal”,” none”,” last”, or “fixed”.

Mode	Behavior	If Initial Focus is Set	If Initial Focus is not Set or is Invalid
Normal	Behaves like a normal view; doesn’t require special handling, i.e., it follows the default focus logic of the You.i Platform.	It’s used for the first entry into the subtree. Consecutive entries behave as normal.	Behaves as normal.
None	Focus won’t enter this component or its subtree (regardless of initial focus setting). Focus can still be explicitly assigned by requesting focus on an item within the disabled focus zone.	n/a	n/a
Last	When focus enters the subtree, it’s given to the last thing that had focus in this subtree.	It’s used for the first entry into the subtree. Consecutive entries apply focus to the last thing that had focus in the subtree.	The first entry behaves as normal, and consecutive entries apply focus to the last thing that had focus in the subtree.
Fixed	When focus enters the subtree, it’s given to the specified initial focus view.	It’s used for every focus entry to the subtree.	Behaves as normal.

Method

setInitialFocus: function

When set, and depending on the entryMode, determines the entry point for focus in a subtree. Parameter is a ref.

Type	Required
method	No