Skip to main content

Screen

Wrapper component which should be wrapping each screen. It has actual functionality only for TV platform for the rest it just passing through default React Native View. Screen defines the context of the page and tells Focus Manager about your app structure. Screen can't ever be inside another Screen.

Usage

import * as React from 'react';
import { Text } from 'react-native';
import { App, Screen, StyleSheet } from '@flexn/create';

const MyScreen = () => {
return (
<App>
<Screen style={styles.container}>
<Text style={styles.text}>Hello from Flexn Create!</Text>
</Screen>
</App>
);
};

const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#FFFFFF',
},
text: {
fontSize: 22,
},
});

export default MyScreen;

Props

children

Required

Type: React.ReactNode

Content of the Screen


screenState

Android TV Fire TV Apple TV

Type: foreground | background

Default value: foreground

If screen has background state it remains in the memory, but it's excluded from the Focus Manager engine. That means Focus Manager ignoring that screen when trying to find next focusable element.


screenOrder

Android TV Fire TV Apple TV

Type: number

Default value: 0

Property which is very useful working with modals. You can have multiple foreground screens at the same time which overlapping each other, but once you define screenOrder property Focus Manager searching for next focusable element only in those screens which has higher screenOrder.


stealFocus

Android TV Fire TV Apple TV

Type: boolean

Default value: true

If there are more screens on the singe page this property tells Focus Manager in which Screen context focus should be initially placed.


style

Type: StyleProp< TextStyle >

Styles for the View.


onFocus

Android TV Fire TV Apple TV

Type: () => void

Event fired when screen gains focus.


onBlur

Android TV Fire TV Apple TV

Type: () => void

Event fired when screen lose focus.


focusOptions

Android TV Fire TV Apple TV

Type: ScreenFocusOptions

Property which holds following related properties:

forbiddenFocusDirections

Type: ForbiddenFocusDirections[]

Can contain one or more directions. It prevents screen to lose focus when specific direction is defined and that direction remote control button is pressed.

focusKey

Type: string

An unique string which can be used to force focus on specific foreground screen by focusKey.

horizontalWindowAlignment

Type: both-edge | low-edge

Default value: low-edge

Property which makes viewport of the screen horizontally align according to provided value.

When low-edge is defined then viewport is allways keeping focused element at the top of the screen.

When both-edge is defined then focused element is kept more less within the top.

verticalWindowAlignment

Type: both-edge | low-edge

Default value: low-edge

Same as focusOptions.horizontalWindowAlignment but instead controlling horizontal alingment it affects vertical one.