Skip to content

Expose onUserAction via ref in UiContainer #102

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
tvanlaerhoven merged 2 commits into from
Jan 26, 2026
Merged

Expose onUserAction via ref in UiContainer #102

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
44306be
expose onUserAction via ref in UiContainer
QuintonWehby Jan 14, 2026
225caef
Add changeset entry
tvanlaerhoven Jan 26, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 5 additions & 0 deletions .changeset/chatty-teams-open.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
'@theoplayer/react-native-ui': minor
---

Exposed `onUserAction()` via a ref in `UiContainer`, enabling parent components to programmatically trigger the UI fade-in animation.
26 changes: 23 additions & 3 deletions src/ui/components/uicontroller/UiContainer.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import React, { ReactNode, useCallback, useEffect, useRef, useState } from 'react';
import React, { ReactNode, useCallback, useEffect, useRef, useState, useImperativeHandle, forwardRef } from 'react';
import { Animated, AppState, Platform, StyleProp, View, ViewStyle } from 'react-native';
import { PlayerContext } from '../util/PlayerContext';
import { type TVOSEvent, useTVOSEventHandler } from '../util/TVUtils';
Expand Down Expand Up @@ -93,6 +93,17 @@ export interface UiContainerProps {
children?: never;
}

/**
* Ref interface for UiContainer, exposing methods to interact with the UI from parent components.
*/
export interface UiContainerRef {
/**
* Programmatically triggers the UI fade-in animation.
* Useful for showing the UI in response to external events (e.g., keyboard shortcuts).
*/
onUserAction: () => void;
}

/**
* The default style for a fullscreen centered view.
*/
Expand Down Expand Up @@ -176,7 +187,7 @@ const WEB_POINTER_MOVE_THROTTLE = 500;
* - It provides slots for UI components to be places in the top/center/bottom positions.
* - It uses animations to fade the UI in and out when applicable.
*/
export const UiContainer = (props: UiContainerProps) => {
export const UiContainer = forwardRef<UiContainerRef, UiContainerProps>((props, ref) => {
const _currentFadeOutTimeout = useRef<number | undefined>(undefined);
const fadeAnimation = useRef(new Animated.Value(1)).current;
const [currentMenu, setCurrentMenu] = useState<React.ReactNode | undefined>(undefined);
Expand Down Expand Up @@ -372,6 +383,15 @@ export const UiContainer = (props: UiContainerProps) => {
fadeInUI_();
}, [fadeInUI_, didPlay]);

// Expose onUserAction_ to parent components via ref
useImperativeHandle(
ref,
() => ({
onUserAction: onUserAction_,
}),
[onUserAction_],
);

/**
* On Web platform, use (throttled) pointer moves on the root container to enable showing/hiding instead of the UI container.
* If an ad is playing, the UI should pass through all pointer events ("box-none") in order for ad clickThrough to work.
Expand Down Expand Up @@ -473,4 +493,4 @@ export const UiContainer = (props: UiContainerProps) => {
</Animated.View>
</PlayerContext.Provider>
);
};
});