Enable VideoCard Navigation - Amazon Vega Docs

Make VideoCards focusable and pressable

Now we need to make the VideoCards focusable and pressable to enable us to interact and navigate to them. We’ll do that using a component called TouchableOpacity.

Open VideoCard.tsx and import TouchableOpacity from ‘react-native’.

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

Replace the View element with TouchableOpacity. Leave the style prop.

 <TouchableOpacity style={styles.videoCardContainer}>
    <Image
      style={styles.videoImage}
      source={{ uri: imgURL }}
    />
    <View style={styles.videoTextContainer}>
        <Text style={styles.videoTitle}>{title}</Text>
        <Text style={styles.videoDescription}>
          {description}
        </Text>
    </View>
  </TouchableOpacity >

Next to make the VideoCard pressable we need to give it an onPress() handler.

Pass a new prop to the VideoCard called pressFunction and give it a type of Function
Add the onPress prop to TouchableOpacity and set its value to call the new pressFunction

Interface IProps {
  title: string;
  imgURL: string;
  description: string;
  pressFunction: Function;
}

const VideoCard = ({ title, imgURL, description, pressFunction}:IProps) => {

return (
  <TouchableOpacity
      style={styles.videoCardContainer}
      onPress={() => pressFunction()}
  >
      <Image
        style={styles.videoImage}
        source={{uri: imgURL}}
      />
      <View style={styles.videoTextContainer}>
          <Text style={styles.videoTitle}>{title}</Text>
          <Text style={styles.videoDescription}>
            {description}
          </Text>
      </View>
  </TouchableOpacity >
 );
};

Next we need to make it obvious to the user which video has been selected. We can do this by adding 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 VideoCard = ({ title, imgURL, description, pressFunction}: 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

<TouchableOpacity
    style={styles.videoCardContainer}
    onPress={() => pressFunction()}
    onFocus={() => setFocused(true)}
    onBlur={() => setFocused(false)}
>
    <Image
      style={styles.videoImage}
      source={{ uri: imgURL }}
    />
    <View style={styles.videoTextContainer}>
        <Text style={styles.videoTitle}>{title}</Text>
        <Text style={styles.videoDescription}>
          {description}
        </Text>
    </View>
</TouchableOpacity >

Finally we need to add styles to highlight that the Card has been focused.

Modify the videoCardContainer as below.
Create two new style props called focused and unfocused and set their styles as below.

const styles = StyleSheet.create({
  ...
   videoCardContainer: {
    height: 400,
    width: 350,
    margin: 10,
    borderRadius: 5,
  },
   unfocused:{
    borderWidth: 1,
    borderColor: 'white',
  },
  focused: {
    borderWidth: 5,
    borderColor: "yellow",
  }
});

Modify the TouchableOpacity to add a new style prop depending on the value of focused (focused if true and unfocused if false)

style={[styles.videoCardContainer, focused ? styles.focused : styles.unfocused]}

The VideoCard.tsx code should look like this:

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


interface IProps {
  title: string;
  imgURL: string;
  description: string;
  pressFunction: Function;
}

const VideoCard = ({ title, imgURL, description, pressFunction }: IProps) => {
  const [focused, setFocused] = useState(false);

  return (
    <TouchableOpacity
      style={[
        styles.videoCardContainer,
        focused ? styles.focused : styles.unfocused
      ]}
      onPress={() => pressFunction()}
      onFocus={() => setFocused(true)}
      onBlur={() => setFocused(false)}
    >
      <Image style={styles.videoImage} source={{ uri: imgURL }} />
      <View style={styles.videoTextContainer}>
        <Text style={styles.videoTitle}>{title}</Text>
        <Text style={styles.videoDescription}>{description}</Text>
      </View>
    </TouchableOpacity>
  );
};

const styles = StyleSheet.create({
  videoCardContainer: {
    height: 400,
    width: 550,
    margin: 10,
    borderRadius: 5,
  },
  unfocused: {
    borderWidth: 1,
    borderColor: 'white',
  },
  focused: {
    borderWidth: 5,
    borderColor: 'yellow',
  },
  videoTextContainer: {
    height: '25%',
    display: 'flex',
    justifyContent: 'space-around',
    padding: 10,
  },
  videoImage: {
    height: '75%',
  },
  videoTitle: {
    fontSize: 20,
    fontWeight: 'bold',
    color: 'white',
  },
  videoDescription: {
    color: 'white',
  },
});

export default VideoCard;

Refresh the app. You should now be able to focus on a video card by pressing any of the keys on the D-pad / arrow keys on your keyboard, as seen in the video below.

​Make VideoCards focusable and pressable

Make VideoCards focusable and pressable