Pressable

Pressable is one of React Native core components but optimized to work on multiplatform environment and has awareness of Focus Manager with set of optimized animations.

Usage

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

const MyComponent = () => {
    return (
        <App>
            <Screen style={styles.container}>
                <Pressable style={styles.button} onPress={() => console.log('Pressed')}>
                    <Text>Press me</Text>
                </Pressable>
            </Screen>
        </App>
    );
};

const styles = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: '#FFFFFF',
    },
    button: {
        marginHorizontal: 20,
        borderWidth: 2,
        borderRadius: 25,
        borderColor: '#111111',
        height: 50,
        width: 200,
        justifyContent: 'center',
        alignItems: 'center',
    },
});

export default MyComponent;

Props

It inherits all the properties from React Native Pressable and adds everything what's described below.

focus

Android TV Fire TV Apple TV

Type: boolean

Default value: true

Property which tells Focus Manager if component should be included in focus engine finding next focusable element.

---

focusContext

RequiredAndroid TV Fire TV Apple TV webOS Tizen

Type: FocusContext

This property allows Focus Manager to understand what's the structure of the screen. Usually Focus Manager iterates all the components and passes down focusContext of the parent component to it's children. But if you have to created custom component you must pass it down by yourself.

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

const MyCustomComponent = ({ focusContext }: { focusContext?: FocusContext }) => {
    return (
        <Pressable focusContext={focusContext} style={styles.button} onPress={() => console.log('Pressed')}>
            <Text>Press me</Text>
        </Pressable>
    );
};

const MyComponent = () => {
    return (
        <App>
            <Screen style={styles.container}>
                <MyCustomComponent />
            </Screen>
        </App>
    );
};

const styles = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: '#FFFFFF',
    },
    button: {
        marginHorizontal: 20,
        borderWidth: 2,
        borderRadius: 25,
        borderColor: '#111111',
        height: 50,
        width: 200,
        justifyContent: 'center',
        alignItems: 'center',
    },
});

export default MyComponent;

---

focusOptions

Android TV Fire TV Apple TV webOS Tizen

Type: PressableFocusOptions

Property which holds following related properties:

focusOptions.forbiddenFocusDirections

Type: ForbiddenFocusDirections[]

Can contain one or more directions. When component is focused and direction is set an example to right then pressing right button on your remote will do nothing just keep focus as it is.

focusOptions.focusKey

Type: string

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

focusOptions.nextFocusUp

Type: string | string[]

Forces next focus direction for component when user navigates up. 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. 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. 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. It accepts string with focus key or array with multiple focus keys. In that case first found is executed by focus engine.

focusOptions.hasPreferredFocus

Type: boolean

Forces element to gain focus once screen is loaded.

focusOptions.animator

Type: Animator

Default value: Scale animator

Animator can define how your component will behave when it gains focus. It has multiple animation variations which can be controlled by following configurations:

Type: AnimatorScale

type: 'scale;
focus: {
    scale?: number;
    duration?: number;
};

Type: AnimatorScaleWithBorder

type: 'scale_with_border';
focus: {
    scale?: number;
    duration?: number;
    borderWidth: number;
    borderColor: ColorValue;
    borderRadius?: number;
};

Type: AnimatorBorder

type: 'border';
focus: {
    borderWidth: number;
    borderColor: string;
    borderRadius?: number;
    duration?: number;
};

Type: AnimatorBackground

type: 'background';
focus: {
    backgroundColor: ColorValue;
    duration?: number;
};