Pressable

Pressable is one of React Native core components but optimized to work on multiplatform environment.

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

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.

---

parentContext

RequiredAndroid TV Fire TV Apple TV

Type: ParentContext

This property allows Focus Manager to understand what's the structure of the screen. Usually Focus Manager iterates all the components and passes down parentContext 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 } from '@flexn/create';

const MyCustomComponent = ({ parentContext }: { parentContext?: any }) => {
  return (
    <Pressable parentContext={parentContext} 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;

---

onPress

Type: () => void

Event fired when Pressable was pressed.

---

onFocus

Android TV Fire TV Apple TV

Type: () => void

Event fired when Pressable gains focus.

---

onBlur

Android TV Fire TV Apple TV

Type: () => void

Event fired when Pressable loose focus.

---

focusOptions

Android TV Fire TV Apple TV

Type: ViewFocusOptions

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.hasInitialFocus

Type: boolean

Forces element to gain focus once screen is loaded.

focusOptions.animatorOptions

Type: any

Default value: Scale

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

• Scale

<Pressable
  focusOptions={{
    animatorOptions: {
      type: 'scale',
      scale: 1.1, // Optional. Any value from 1
      duration: 150, // Optional. How long time border transition should take
    }
  }}
/>

• Scale with border

<Pressable
  style={{
    borderColor: '#0A74E6',
    borderWidth: 1,
  }}
  focusOptions={{
    animatorOptions: {
      type: 'scale_with_border',
      scale: 1.1, // Optional. Any value from 1
      duration: 150, // Optional. How long time border transition should take
    }
  }}
/>

• Border

<Pressable
  style={{
    borderColor: '#0A74E6',
    borderWidth: 1,
  }}
  focusOptions={{
    animatorOptions: {
      type: 'border',
      duration: 150, // Optional. How long time border transition should take
    }
  }}
/>

• Background

<Pressable
  style={{
    backgroundColor: '#FFFFFF'
  }}
  focusOptions={{
    animatorOptions: {
      type: 'background',
      backgroundColorFocus: '#0A74E6', // Required. Color which will be applied when element gains focus
      duration: 150, // Optional. How long time border transition should take
    }
  }}
/>