I'm trying to display a video with the Video component in react native and the Video component seems to be rending, but the video itself is not playing.
What I tried checking:
- if my uri path was correct for source property
- if the component was rendering at all with styling (it is)
What I'm using:
- expo react native app
- expo-av
- component
- Expo Go on IOS to see my app while developing it
Narrowed down code in Post component:
export default function Post({meta})
{
return(
<View style={styles.postView}>
<Video
style={styles.video}
source={{uri:meta.uri}}
rate={1.0}
volume={1.0}
isMuted={false}
resizeMode="cover"
shouldPlay
/>
</View>
)
}
with styling:
const styles = StyleSheet.create
(
{
postView:
{
flex:1,
backgroundColor:'green',
width:windowDimensions.width/3,
height:windowDimensions.height/3
},
video:
{
backgroundColor:'#000000',
flex:1,
width:'100%',
height:'100%',
borderWidth:1,
borderColor:'#D3D3D3'
}
}
)
narrowed down code in Profile component:
<View style={styles.contentView}>
<FlatList
data=
{
contentStack
}
renderItem=
{
(itemData)=>
{
return(
<Post meta={itemData.item.meta}/>
)
}
}
contentContainerStyle=
{
styles.contentFlatList
}
/>
</View>
with styling:
contentView:
{
flex:5,
maxHeight:'100%',
maxWidth:'100%',
backgroundColor:"#000000"
},
contentFlatList:
{
flexDirection:'row',
flexWrap:'wrap',
maxWidth:'100%'
}
NOTE: This View is the child of the parent view of this particular component, it shares this level with two other views and takes up half the parent space.
I can deduce that the component does display, and it has its background color of black, but the videos are not playing. Some of the videos do not have black screen when beginning to play so it's not that, and I can promise you the relative path to the videos are correct. What am I doing wrong?
- if my uri path was correct for source property
- if the component was rendering at all with styling (it is)