Skip to main content


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.


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

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

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

export default MyScreen;




Type: React.ReactNode

Content of the Screen


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.


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.


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.


Type: StyleProp< TextStyle >

Styles for the View.


Android TV Fire TV Apple TV

Type: () => void

Event fired when screen gains focus.


Android TV Fire TV Apple TV

Type: () => void

Event fired when screen lose focus.


Android TV Fire TV Apple TV

Type: ScreenFocusOptions

Property which holds following related properties:


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.


Type: string

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


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.


Type: both-edge | low-edge

Default value: low-edge

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