React Native Functional Component - Type is invalid Error -- expected a string or class/function , w-CodePudding

I've seen this question before but the solution to solve it via Import / Export curly braces doesn't seem to be the root cause.

I can trying to add a functional component into my page React.js, the component will include the Video imported from Expo. It seems to cause an error, I feel like it is something to do with the Video class sitting within VideoInstance causing the error, but am not sure.

Phase2.js page

import React from 'react'
import { View, StyleSheet} from 'react-native'
import { VideoInstance } from '../components/Videos'


export default function Phase2() {
  return (
    <View style={styles.container}>
      <VideoInstance/>
    </View>
  )
}

const styles = StyleSheet.create(
  {
    container: {
      flex:1,
      backgroundColor: 'red',
    }
  }
)

Video.js Functional Comp (error lies in the Video I think as runs without that and Touchable)

import React from 'react'
import { View, Text, StyleSheet, TouchableWithoutFeedback } from 'react-native'
import Video from 'expo-av'

export const VideoInstance = () => {
  const video = React.useRef(null);
  const [status, setStatus] = React.useState({})

  const onPlayPausePress = () => {
    status.isPlaying ? video.current.pauseAsync() : video.current.playAsync()
  }

  return (
    <View>
        <TouchableWithoutFeedback onPress={onPlayPausePress}>
        <Video
          ref={video}
          style={styles.video}
          source={{uri:"https://d23dyxeqlo5psv.cloudfront.net/big_buck_bunny.mp4"}}
          resizeMode='contain'
          useNativeControls={false}
          isLooping
          shouldPlay
          onPlaybackStatusUpdate={setStatus}
          />
          </TouchableWithoutFeedback>  
      </View>
  )
}


const styles = StyleSheet.create(
  {
    container: {
      flex:1,
      backgroundColor: 'red',
    },
    video: {
      flex: 1,
      alignSelf: 'stretch'
    }
  }
)

**Full Error msg: **

Warning: React.jsx: type is invalid -- expected a string (for built-in components) or a class/function (for composite 
components) but got: %s.%s%s, undefined,  You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

Check the render method of `VideoInstance`., 
    in VideoInstance (created by Phase2)

I want the Video to render on the Phase 2 page. But it won't render. I’ve tried to put the code for VideoInstance directly in the Phase2 function and it works, so the problem must be trying to put it in, just not sure what …

CodePudding user response：

you should write default after export and check it

 export default const VideoInstance = () => {
 // Your code
 }

CodePudding user response：

Try this one

const VideoInstance = () => {
 // Your code
 }
 
 export default VideoInstance;

Let me know doest it works or not. Thanks

CodePudding user response：

You are using the wrong import for the Video component.

You are importing it like import Video from 'expo-av,
when it should be import { Video } from 'expo-av'

You are importing it as if it was exported as default, however the package 'expo-av' is probably exporting it as a named export therefore you should use a named import.

MDN import docs
MDN export docs