React Native Functional Component - Type is invalid Error -- expected a string or class/function , when calling Video

Question

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 …

According to expo-av, your import statement should be import { Video } from 'expo-av'; — kiuQ
– kiuQ, Commented Nov 24, 2022 at 0:58

tkuvek · Accepted Answer · 2022-11-24 09:46:05Z

1

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

answered Nov 24, 2022 at 9:46

tkuvek

411 bronze badge

Sign up to request clarification or add additional context in comments.

Comments

basan nofal · Accepted Answer · 2022-11-24 02:24:47Z

0

you should write default after export and check it

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

answered Nov 24, 2022 at 2:24

basan nofal

234 bronze badges

1 Comment

Mb3333 Over a year ago

Thanks I tried this but still didn’t work

Stuti Dyer · Accepted Answer · 2022-11-24 11:32:16Z

0

You can change import in your code.

import { Video } from 'expo-av'; Or Try below one and import same as shown above

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

Let me know doest it works or not. Thanks

edited Nov 24, 2022 at 11:32

answered Nov 24, 2022 at 9:19

Stuti Dyer

442 bronze badges

Collectives™ on Stack Overflow

React Native Functional Component - Type is invalid Error -- expected a string or class/function , when calling Video

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related