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
Type: React.ReactNode
Content of the Screen
style
Type: StyleProp< ViewStyle >
Styles for the View.
onFocus
Type: () => void
Event fired when screen gains focus.
onBlur
Type: () => void
Event fired when screen lose focus.
focusOptions
Type: ScreenFocusOptions
Property which holds following related properties:
focusOptions.screenState
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.
focusOptions.screenOrder
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.
focusOptions.stealFocus
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.
focusOptions.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.
focusOptions.nextFocusUp
Type: string | string[]
Forces next focus direction for component when user navigates up and end of up direction is reached in screen. It accepts string with focus key or array with multiple focus keys. In that case first found is executed by focus engine.
focusOptions.nextFocusDown
Type: string | string[]
Forces next focus direction for component when user navigates down and end of down direction is reached in screen. It accepts string with focus key or array with multiple focus keys. In that case first found is executed by focus engine.
focusOptions.nextFocusLeft
Type: string | string[]
Forces next focus direction for component when user navigates left and end of left direction is reached in screen. It accepts string with focus key or array with multiple focus keys. In that case first found is executed by focus engine.
focusOptions.nextFocusRight
Type: string | string[]
Forces next focus direction for component when user navigates right and end of right direction is reached in screen. It accepts string with focus key or array with multiple focus keys. In that case first found is executed by focus engine.
focusOptions.focusKey
Type: string
An unique string which can be used to force focus on specific foreground screen by focusKey.
focusOptions.verticalViewportOffset
Type: number
Default value: 50
Offset from focused element to the top of viewport
