Enable VideoCard Navigation
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 newpressFunction
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 offocused
and a function ofsetFocused
. - 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 thesetFocused()
function with the valuetrue
- Add an
onBlur
prop to the TouchableOpacity, and set it to call thesetFocused()
function with the valuefalse
<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.