Allow dynamically change focusKey

packages/create/src/components/Pressable/index.tsx

@@ -126,6 +126,12 @@ const View = React.forwardRef<RNView | undefined, PressableProps>(
             focusOptions.nextFocusRight,
         ]);
 
+        useEffect(() => {
+            if (focus) {
+                model.setFocusKey(focusOptions.focusKey);
+            }
+        }, [focusOptions.focusKey]);
+
         useEffect(() => {
             if (focus) {
                 Event.emit(model.getType(), model.getId(), EVENT_TYPES.ON_MOUNT);

packages/create/src/components/Screen/index.tsx

@@ -4,7 +4,6 @@ import type { ScreenProps } from '../../focusManager/types';
 import { useCombinedRefs } from '../../hooks/useCombinedRef';
 import ScreenClass from '../../focusManager/model/screen';
 import useOnLayout from '../../hooks/useOnLayout';
-import Event, { EVENT_TYPES } from '../../focusManager/events';
 import useOnComponentLifeCycle from '../../hooks/useOnComponentLifeCycle';
 import { CoreManager } from '../..';
 
@@ -34,21 +33,22 @@ const Screen = React.forwardRef<RNView | undefined, ScreenProps>(
 
         useOnComponentLifeCycle({ model });
 
+        useEffect(() => {
+            model.setFocusKey(focusOptions.focusKey);
+        }, [focusOptions.focusKey]);
+
         useEffect(() => {
             if (focusOptions.screenState) {
-                Event.emit(model.getType(), model.getId(), EVENT_TYPES.ON_PROPERTY_CHANGED, {
-                    property: 'state',
-                    newValue: focusOptions.screenState,
-                });
+                model.setPrevState(model.getState()).setState(focusOptions.screenState);
+                if (model.isPrevStateBackground() && model.isInForeground()) {
+                    model.setFocus(model.getFirstFocusableOnScreen());
+                }
             }
         }, [focusOptions.screenState]);
 
         useEffect(() => {
             if (focusOptions.screenOrder !== undefined) {
-                Event.emit(model.getType(), model.getId(), EVENT_TYPES.ON_PROPERTY_CHANGED, {
-                    property: 'order',
-                    newValue: focusOptions.screenOrder,
-                });
+                model.setOrder(focusOptions.screenOrder);
             }
         }, [focusOptions.screenOrder]);
 

packages/create/src/components/ViewGroup/index.tsx

@@ -30,6 +30,10 @@ const ViewGroup = React.forwardRef<View, ViewGroupProps>(
             model.setGroup(focusOptions.group);
         }, [focusOptions.group]);
 
+        useEffect(() => {
+            model.setFocusKey(focusOptions.focusKey);
+        }, [focusOptions.focusKey]);
+
         const { onLayout } = useOnLayout(model);
 
         const childrenWithProps = React.Children.map(children, (child) => {

packages/create/src/focusManager/events.ts

@@ -1,5 +1,4 @@
 export const EVENT_TYPES = {
-    ON_PROPERTY_CHANGED: 'onPropertyChanged',
     ON_MOUNT: 'onMount',
     ON_MOUNT_AND_MEASURED: 'onMountAndMeasured',
     ON_UNMOUNT: 'onUnMount',

packages/create/src/focusManager/model/screen.ts

@@ -1,5 +1,5 @@
 import { View as RNView } from 'react-native';
-import { ScreenProps, ScreenStates } from '../types';
+import { ScreenProps } from '../types';
 import CoreManager from '../service/core';
 import Logger from '../service/logger';
 import FocusModel, { MODEL_TYPES } from './abstractFocusModel';
@@ -30,7 +30,7 @@ class Screen extends FocusModel {
     private _verticalWindowAlignment: typeof VIEWPORT_ALIGNMENT[keyof typeof VIEWPORT_ALIGNMENT];
     private _horizontalWindowAlignment: typeof VIEWPORT_ALIGNMENT[keyof typeof VIEWPORT_ALIGNMENT];
     private _order: number;
-    private _focusKey: string;
+    private _focusKey?: string;
     private _horizontalViewportOffset: number;
     private _verticalViewportOffset: number;
     private _initialLoadInProgress: boolean;
@@ -52,7 +52,7 @@ class Screen extends FocusModel {
             screenState = SCREEN_STATES.FOREGROUND,
             screenOrder = 0,
             stealFocus = true,
-            focusKey = '',
+            focusKey,
             group,
             verticalWindowAlignment = VIEWPORT_ALIGNMENT.LOW_EDGE,
             horizontalWindowAlignment = VIEWPORT_ALIGNMENT.LOW_EDGE,
@@ -90,13 +90,11 @@ class Screen extends FocusModel {
         this._onMount = this._onMount.bind(this);
         this._onUnmount = this._onUnmount.bind(this);
         this._onLayout = this._onLayout.bind(this);
-        this._onPropertyChanged = this._onPropertyChanged.bind(this);
 
         this._events = [
             Event.subscribe(this.getType(), this.getId(), EVENT_TYPES.ON_MOUNT, this._onMount),
             Event.subscribe(this.getType(), this.getId(), EVENT_TYPES.ON_UNMOUNT, this._onUnmount),
             Event.subscribe(this.getType(), this.getId(), EVENT_TYPES.ON_LAYOUT, this._onLayout),
-            Event.subscribe(this.getType(), this.getId(), EVENT_TYPES.ON_PROPERTY_CHANGED, this._onPropertyChanged),
         ];
     }
 
@@ -116,22 +114,6 @@ class Screen extends FocusModel {
         measureSync({ model: this });
     }
 
-    private _onPropertyChanged({ property, newValue }: { property: string; newValue: ScreenStates | number }) {
-        switch (property) {
-            case 'state':
-                this.setPrevState(this.getState()).setState(newValue as ScreenStates);
-                if (this.isPrevStateBackground() && this.isInForeground()) {
-                    this.setFocus(this.getFirstFocusableOnScreen());
-                }
-                break;
-            case 'order':
-                this.setOrder(newValue as number);
-                break;
-            default:
-                break;
-        }
-    }
-
     // END EVENTS
 
     public onScreenRemoved() {
@@ -290,10 +272,16 @@ class Screen extends FocusModel {
         return this._order;
     }
 
-    public getFocusKey(): string {
+    public getFocusKey(): string | undefined {
         return this._focusKey;
     }
 
+    public setFocusKey(value?: string): this {
+        this._focusKey = value;
+
+        return this;
+    }
+
     public getHorizontalViewportOffset(): number {
         return this._horizontalViewportOffset;
     }

packages/create/src/focusManager/model/view.ts

@@ -23,7 +23,7 @@ class View extends FocusModel {
     private _parentScrollView?: ScrollView;
 
     private _isFocused: boolean;
-    private _focusKey: string;
+    private _focusKey?: string;
     private _hasPreferredFocus: boolean;
     private _verticalContentContainerGap = 0;
     private _horizontalContentContainerGap = 0;
@@ -51,7 +51,7 @@ class View extends FocusModel {
             onFocus,
             onBlur,
             onPress,
-            focusKey = '',
+            focusKey,
             hasPreferredFocus = false,
             verticalContentContainerGap = 0,
             horizontalContentContainerGap = 0,
@@ -214,10 +214,16 @@ class View extends FocusModel {
         return this._repeatContext;
     }
 
-    public getFocusKey(): string {
+    public getFocusKey(): string | undefined {
         return this._focusKey;
     }
 
+    public setFocusKey(value?: string): this {
+        this._focusKey = value;
+
+        return this;
+    }
+
     public hasPreferredFocus(): boolean {
         return this._hasPreferredFocus;
     }

packages/create/src/focusManager/model/viewGroup.ts

@@ -58,10 +58,16 @@ class ViewGroup extends FocusModel {
         return this;
     }
 
-    public getFocusKey() {
+    public getFocusKey(): string | undefined {
         return this._focusKey;
     }
 
+    public setFocusKey(value?: string): this {
+        this._focusKey = value;
+
+        return this;
+    }
+
     public getNode(): MutableRefObject<View> {
         return this.node;
     }