How to resolve this Uncaught Error: Invalid hook call. Hooks can only be called inside of the body of a function component

I think i miss something.

I want to navigate to another screen. I am getting this As error

Uncaught Error: Invalid hook call. Hooks can only be called inside of the body of a function component

Checking Thru, I am not sure as to what the challenge is

My code Looks thus :

import {
  Text,
  View,
  TextInput,
  ImageBackground,
  StyleSheet,
  Dimensions,
  TouchableOpacity,
  Image,
} from 'react-native';
import React from 'react';
import image from '../../assets/images/1.png';
import btnimage from '../../assets/images/button1.png';
import {useNavigation} from '@react-navigation/native';

const screenHeight = Dimensions.get('window').height;
const screenWidth = Dimensions.get('window').width;

const navigation = useNavigation();

const NavigateNextPage = () => {
  navigation.navigate('WalkThruPage2');
};

const PlayVideo = () => {
  return (
    <View>
      <ImageBackground source={image} resizeMode="stretch" style={styles.img} />
      <TouchableOpacity onPress={() => { NavigateNextPage();}}
        style={{position: 'absolute', bottom: 20, right: 30, zIndex: 1}}>
        <Image style={{height: 60, width: 60}} source={btnimage} />
      </TouchableOpacity>
    </View>
  );
};

export default PlayVideo;

const styles = StyleSheet.create({
  img: {
    height: screenHeight,
    width: screenWidth,
    justifyContent: 'center',
    alignItems: 'center',
  },
});

What Am i getting wrong? I want it to be that, once they click the Touchable Opacity it loads to next page. But on Loading I get that Error. How Do i resolve this?

As error suggests hooks can't be called outside of function so modify your code as below:

const PlayVideo = () => {

const screenHeight = Dimensions.get('window').height;
const screenWidth = Dimensions.get('window').width;

const navigation = useNavigation();

const NavigateNextPage = () => {
  navigation.navigate('WalkThruPage2');
};


 return (
    <View>
      <ImageBackground source={image} resizeMode="stretch" style={styles.img} />
         <TouchableOpacity onPress={() => { NavigateNextPage();}}
          style={{position: 'absolute', bottom: 20, right: 30, zIndex: 1}}>
           <Image style={{height: 60, width: 60}} source={btnimage} />
         </TouchableOpacity>
    </View>
 );
};