In the video lectures, I didn't change all the code to take advantage of addEventListener on Dimensions (simply to avoid unnecessary repetition).

In case you're interested, here's how you would change the code to always update your styles when the Dimensions change.

StartGameScreen.js

No changes required, all styles do update when Dimensions change.

GameScreen.js

The buttonContainer style uses Dimensions...height to change marginTop.

buttonContainer: {
    flexDirection: 'row',
    justifyContent: 'space-around',
    marginTop: Dimensions.get('window').height > 600 ? 20 : 5,
    width: 400,
    maxWidth: '90%'
  },

Change this to:

buttonContainer: {
    flexDirection: 'row',
    justifyContent: 'space-around',
    width: 400,
    maxWidth: '90%'
  },

and in your component function, use inline styles to update marginTop on the <Card> where you use styles.buttonContainer:

<Card style={[...styles.buttonContainer, {marginTop: availableHeight > 600 ? 20 : 5}]}>
    ...
</Card>

availableHeight is already some state we're managing, so you don't need to add this.

Side-note, totally unrelated to the Dimensions-listener thing: You could generally shorten the component code a little bit by only changing the NumberContainer + Button-Container part of your JSX code.

Like this:

let gameControls = (
    <React.Fragment>
        <NumberContainer>{currentGuess}</NumberContainer>
        <Card style={styles.buttonContainer}>
            <MainButton onPress={nextGuessHandler.bind(this, 'lower')}>
                <Ionicons name="md-remove" size={24} color="white" />
            </MainButton>
            <MainButton onPress={nextGuessHandler.bind(this, 'greater')}>
                <Ionicons name="md-add" size={24} color="white" />
            </MainButton>
        </Card>
    </React.Fragment>
);

if (availableDeviceHeight < 500) {
    gameControls =  (
        <View style={styles.controls}>
            <MainButton onPress={nextGuessHandler.bind(this, 'lower')}>
                <Ionicons name="md-remove" size={24} color="white" />
            </MainButton>
            <NumberContainer>{currentGuess}</NumberContainer>
            <MainButton onPress={nextGuessHandler.bind(this, 'greater')}>
                <Ionicons name="md-add" size={24} color="white" />
            </MainButton>
        </View>
    );
}

return (
    <View style={styles.screen}>
      <Text style={DefaultStyles.title}>Opponent's Guess</Text>
      {gameControls}
      <View style={listContainerStyle}>
        {/* <ScrollView contentContainerStyle={styles.list}>
          {pastGuesses.map((guess, index) => renderListItem(guess, pastGuesses.length - index))}
        </ScrollView> */}
        <FlatList
          keyExtractor={item => item}
          data={pastGuesses}
          renderItem={renderListItem.bind(this, pastGuesses.length)}
          contentContainerStyle={styles.list}
        />
      </View>
    </View>
);

This introduces a new gameControls variable that manages the part of the JSX code that does actually change. Using this code instead of the one shown in the video lectures is totally optional though!

GameOverScreen.js

This file doesn't use any listener, hence you need to add useState and useEffect.

import React, { useState, useEffect } from 'react;
... // other imports

const GameOverScreen = props => {
    const [availableDeviceWidth, setAvailableDeviceWidth] = useState(Dimensions.get('window').width);
    const [availableDeviceHeight, setAvailableDeviceHeight] = useState(Dimensions.get('window').height);

    useEffect(() => {
        const updateLayout = () => {
            setAvailableDeviceWidth(Dimensions.get('window').width);
            setAvailableDeviceHeight(Dimensions.get('window').height);
    };

    Dimensions.addEventListener('change', updateLayout);

    return () => {
            Dimensions.removeEventListener('change', updateLayout);
        };
    });

    return (
        <ScrollView>
            <View style={styles.screen}>
                <TitleText>The Game is Over!</TitleText>
                <View style={‌{...styles.imageContainer, ...{
                    width: availableDeviceWidth * 0.7,
                    height: availableDeviceWidth * 0.7,
                    borderRadius: (availableDeviceWidth * 0.7) / 2,
                    marginVertical: availableDeviceHeight / 30
                }}}>
                    <Image
                        source={require('../assets/success.png')}
                        style={styles.image}
                        resizeMode="cover"
                    />
                </View>
                <View style={‌{...styles.resultContainer, 
                        ...{marginVertical: availableDeviceHeight / 60}}}>
                    <BodyText style={‌{...styles.resultText, ...{
                            fontSize: availableDeviceHeight < 400 ? 16 : 20}}}>
                        Your phone needed{' '}
                        <Text style={styles.highlight}>{props.roundsNumber}</Text> rounds to
                            guess the number{' '}
                        <Text style={styles.highlight}>{props.userNumber}</Text>.
                    </BodyText>
                </View>
                <MainButton onPress={props.onRestart}>NEW GAME</MainButton>
            </View>
        </ScrollView>
    );
};
// ...

Also remove the styles you're now setting as inline styles from the StyleSheet at the bottom of the file.