react native video component is not showing? - reactjs

Question

Problem:
I have created a react component which is including a video that uses react native video library. But unfortunately, it is not showing a video component. This is how my code is.
import React, {createRef, useState} from 'react';
import {
View,
Image,
TouchableOpacity,
TouchableWithoutFeedback,
} from 'react-native';
import Icon from 'react-native-vector-icons/AntDesign';
import AppText from '_components/appText';
import Video, {
OnSeekData,
OnLoadData,
OnProgressData,
} from 'react-native-video';
import {strings} from '_translations/i18n';
import PlayerControls from '_components/playerControls';
const navigateToCameraView = (navigation) => {
navigation.navigate('videorecording');
};
const showControls = (state, setState) => {
state.showControls
? setState({...state, showControls: false})
: setState({...state, showControls: true});
};
const playVideo = (state, setState) => {
console.log('Hiii>>>>>>>>');
setState({...state, showControls: false, play: true});
};
const VideoPreview = (props) => {
const {styles, navigation, fileName} = props;
const [state, setState] = useState({
fullscreen: false,
play: false,
currentTime: 0,
duration: 0,
showControls: true,
});
const player = createRef();
return (
<View style={styles.previewInnerContainer}>
{fileName ? (
<>
<View style={styles.videoContainer}>
<View style={styles.videoInnerContainer}>
<TouchableWithoutFeedback
onPress={() => showControls(state, setState)}>
<View>
<Video
source={{uri: fileName}}
controls={false}
style={styles.backgroundVideo}
ref={player}
resizeMode={'contain'}
paused={!state.play}
/>
{state.showControls && (
<View style={styles.controlsOverlay}>
<View style={styles.wrapper}>
<TouchableOpacity
style={styles.touchable}
onPress={() => playVideo(state, setState)}>
<Image
source={require('_assets/img/play1.png')}
resizeMode="center"
style={styles.playIcon}
/>
</TouchableOpacity>
</View>
</View>
)}
</View>
</TouchableWithoutFeedback>
</View>
</View>
<View style={styles.videoBottomText}>
<TouchableOpacity onPress={() => navigateToCameraView(navigation)}>
<View style={styles.updateAgainContainer}>
<Icon name="reload1" style={styles.reloadIcon} />
<AppText styles={styles.reloadText}>
{strings('assetsment.reload')}
</AppText>
</View>
</TouchableOpacity>
</View>
</>
) : (
<>
<TouchableOpacity onPress={() => navigateToCameraView(navigation)}>
<Image
source={require('_assets/img/cmerap.png')}
resizeMode="center"
style={styles.camPImage}
/>
</TouchableOpacity>
<AppText styles={styles.camPText}>Tap to capture video</AppText>
</>
)}
</View>
);
};
export default VideoPreview;
I have embedded it in another component like this.
<View style={styles.questionsInnerContainer}>
<View style={styles.questionTitleView}>
<AppText styles={styles.questionTitle}>
{strings('assetsment.question', {id: question.questionId})}
</AppText>
</View>
<View style={styles.questionTextContainer}>
<AppText styles={styles.questionText}>{questionTitle}</AppText>
</View>
</View>
<View style={styles.previewContainer}>
<VideoPreview
styles={styles}
navigation={navigation}
fileName={fileName}
/>
</View>
This is my styling sheet.
patientView: {
flex: 1,
backgroundColor: '#ffffff',
flexDirection: 'column',
},
top: {
height: '10%',
},
updateAgainContainer: {
flexDirection: 'row',
// backgroundColor: 'red',
},
reloadIcon: {
fontSize: normalize(15),
color: '#417505',
fontWeight: '600',
textAlign: 'center',
},
questionsContainer: {
height: '78%',
// backgroundColor: '#f2f2f2',
// elevation: 5,
shadowColor: '#000',
shadowOffset: {width: 0, height: 4},
shadowOpacity: 0.8,
shadowRadius: 8,
flex: 1,
},
hr: {
marginTop: '5%',
borderBottomColor: '#c3c3c3',
borderBottomWidth: 2.0,
marginRight: 30,
marginLeft: 30,
justifyContent: 'center',
},
bottom: {
height: '7%',
justifyContent: 'center',
alignItems: 'center',
},
patientBottomView: {
flexDirection: 'row',
justifyContent: 'center',
alignItems: 'center',
},
patientBottomContainerText: {
fontSize: normalize(13),
color: '#444444',
fontWeight: '500',
},
bottomLinkText: {
fontSize: normalize(13),
color: '#484848',
borderBottomWidth: 2,
borderBottomColor: '#c3c3c3',
},
imageContainer: {
height: '30%',
justifyContent: 'center',
alignItems: 'center',
paddingTop: '25%',
},
questionsInnerContainer: {
height: '30%',
paddingRight: '5%',
paddingLeft: '3%',
paddingTop: '5%',
},
btnContainer: {
paddingLeft: '5%',
paddingRight: '5%',
marginBottom: '12%',
justifyContent: 'center',
},
emtyView: {
height: '5%',
},
img: {
width: '50%',
resizeMode: 'contain',
},
questionTitleView: {
paddingBottom: '2%',
position: 'relative',
},
questionTitle: {
color: '#444444',
fontSize: normalize(11),
fontWeight: '600',
},
questionTextContainer: {
backgroundColor: '#d1e5ff',
paddingTop: '6%',
paddingBottom: '6%',
paddingLeft: '4%',
borderRadius: 10,
},
questionText: {
fontSize: normalize(13),
color: '#444444',
fontWeight: '700',
},
questionsLodder: {
width: '20%',
height: '20%',
alignSelf: 'center',
justifyContent: 'center',
marginTop: '50%',
},
previewContainer: {
height: '50%',
marginLeft: '10%',
marginRight: '10%',
// alignItems: 'center',
marginBottom: '2%',
},
previewInnerContainer: {
flex: 1,
},
camPImage: {
alignSelf: 'center',
marginTop: '-15%',
},
camPText: {
color: '#444444',
fontSize: normalize(13),
fontWeight: '600',
marginTop: '-25%',
textAlign: 'center',
},
answersContainer: {
flex: 1,
paddingLeft: '8%',
paddingRight: '8%',
},
answerContentContainer: {
flexDirection: 'row',
paddingBottom: '5%',
paddingTop: '2%',
paddingLeft: '5%',
paddingRight: '5%',
},
answerTextContainer: {
flex: 1,
},
sendButton: {
flex: 1,
backgroundColor: '#3e92ff',
paddingTop: 10,
paddingBottom: 10,
alignItems: 'center',
borderRadius: 50,
marginTop: 25,
marginBottom: 20,
justifyContent: 'center',
},
sendButtonText: {
fontFamily: 'Montserrat-Medium',
color: '#ffffff',
fontWeight: '300',
fontSize: normalize(15),
textAlign: 'center',
letterSpacing: 2,
},
bimage: {
width: 25,
height: 25,
},
toggle: {
transform: [{scaleX: 1.6}, {scaleY: 1.6}],
elevation: 90,
shadowColor: '#000000',
shadowOffset: {width: 0, height: 3},
shadowOpacity: 0.9,
shadowRadius: 50,
},
answerText: {
color: '#444444',
fontWeight: '600',
fontSize: normalize(13),
},
backgroundVideo: {
position: 'absolute',
top: 0,
bottom: 0,
left: 0,
right: 0,
},
videoContainer: {
height: '70%',
},
videoInnerContainer: {
flex: 1,
backgroundColor: '#b8b8b8',
},
videoBottomText: {
height: '20%',
alignItems: 'center',
justifyContent: 'center',
},
reloadText: {
textAlign: 'center',
marginLeft: '5%',
color: '#417505',
fontWeight: '600',
fontSize: normalize(14),
},
reloadTextContainer: {
flex: 1,
},
controlOverlay: {
position: 'absolute',
top: 0,
bottom: 0,
left: 0,
right: 0,
justifyContent: 'space-between',
alignItems: 'center',
},
wrapper: {
paddingHorizontal: 5,
marginTop: '28%',
flexDirection: 'row',
alignItems: 'center',
justifyContent: 'space-evenly',
flex: 3,
},
touchable: {
padding: 5,
},
playIcon: {
// backgroundColor: '#b8b8b8',
},
I tried a lot to find out what is wrong with this. But i was unable to do so. Can someone help me to find out a solution to this problem ?. If someone can help me it is really really appreciated as I am completely help less with this.Thank you