Create Focusable Button - Amazon Vega Docs

Since we will need to add 2 buttons to the VideoDetailScreen that can be focused, we will create our own button component. This also ensures that we are not duplicating code and the button can be re-used across our App.

Define Button component

Create a new file under the components folder called Button.tsx.
Import React and useState from ‘react’.
Import StyleSheet, Text and TouchableOpacity from ‘react-native’.
Create an arrow function called Button that takes in 2 arguments called pressFunction and buttonText.
Destructure each argument in the interface and add :IProps to enforce the type of each argument in the object. The pressFunction will be a Function and the buttonText a string.

Below the import statements, create an interface that declares the types of the props.

import React, { useState } from 'react';
import { View, StyleSheet, TouchableOpacity, Text } from 'react-native';

export interface IProps {
  pressFunction: Function;
  buttonText: String;
}

const Button = ({ pressFunction, buttonText }: IProps) => { };

Add an empty fragment and inside it add a TouchableOpacity element.

To make the Button pressable we need to give it an onPress().

Add the onPress prop to TouchableOpacity and set its value to call the pressFunction
Add a Text component inside the TouchableOpacity and set it to take in the value of buttonText.

const Button = ({ pressFunction, buttonText }: IProps) => {

  return (
    <>
      <TouchableOpacity onPress={() => pressFunction()}>
        <Text>{buttonText}</Text>
      </TouchableOpacity>
    </>
  );
};

Next we want to make it obvious to the user that the button has been selected, so let’s add onFocus() and onBlur() properties to the TouchableOpacity

Import useState from react and initialize it with a state of focused and a function of setFocused.
Initialize the value of focused to false.

const Button = ({ pressFunction, buttonText }: IProps) => {
    const [focused, setFocused] = useState(false);
}

Add an onFocus prop to the TouchableOpacity, and set it to call the setFocused() function with the value true
Add an onBlur prop to the TouchableOpacity, and set it to call the setFocused() function with the value false

Your Button.tsx code should look like this:

import React, { useState } from 'react';
import { View, StyleSheet, TouchableOpacity, Text } from 'react-native';

export interface IProps {
  pressFunction: Function;
  buttonText: String;
}

const Button = ({ pressFunction, buttonText }: IProps) => {
  const [focus, setFocused] = useState(false);

  return (
    <>
      <TouchableOpacity
        onPress={() => pressFunction()}
        onFocus={() => setFocused(true)}
        onBlur={() => setFocused(false)}>
        <Text>{buttonText}</Text>
      </TouchableOpacity>
    </>
  );
};

Add Styling

Now let’s add some styling:

Create a StyleSheet called styles and add it after the Button function.
Add buttonContainer, buttonText and focused styles to the StyleSheet with the following values:

const styles = StyleSheet.create({
  buttonContainer: {
    backgroundColor: '#FF9900',
    padding: 10,
    width: 150,
    display: 'flex',
    justifyContent: 'center',
    alignItems: 'center',
  },
  buttonText: {
    fontSize: 20,
  },
  focused: {
    borderWidth: 5,
    borderColor: 'yellow',
  },
});

The TouchableOpacity will have a style prop that depends on the value of focused:

Give the touchable opacity a style prop of buttonInnerContainer and a conditional style prop of focused

   style={[styles.buttonInnerContainer, focus && styles.focused]}

Add the buttonOuterContainer style to the View component.

The final Button.tsx code should look like this:

import React, {useState} from 'react';
import {StyleSheet, TouchableOpacity, Text} from 'react-native';


export interface IProps {
  pressFunction: Function;
  buttonText: String;
}

const Button = ({pressFunction, buttonText}: IProps) => {
  const [focus, setFocused] = useState(false);

  return (
    <>
      <TouchableOpacity
        style={[styles.buttonContainer, focus && styles.focused]}
        onPress={() => pressFunction()}
        onFocus={() => setFocused(true)}
        onBlur={() => setFocused(false)}>
        <Text style={styles.buttonText}>{buttonText}</Text>
      </TouchableOpacity>
    </>
  );
};

const styles = StyleSheet.create({
  buttonContainer: {
    backgroundColor: '#FF9900',
    padding: 10,
    width: 150,
    display: 'flex',
    justifyContent: 'center',
    alignItems: 'center',
  },
  focused: {
    borderWidth: 3,
    borderColor: 'yellow',
    opacity: 0.8,
  },
  buttonText: {
    fontSize: 20,
  },
});

export default Button;

​Define Button component

​Add Styling

Define Button component

Add Styling