React native camera not recording video - reactjs

Question

I want to implement the video recording feature using react native video but the start recording function is not giving any response, I even consoled to see whether it is getting called,actually it is not, am unable to figure what I have done wrong.
Below is the exact code that I have written
import React from 'react';
import {
View,
Text,
TouchableOpacity,
StyleSheet,
ActivityIndicator,
} from 'react-native';
import {RNCamera} from 'react-native-camera';
export default class Shoot extends React.Component {
constructor(props) {
super(props);
this.state = {
recording: false,
processing: true,
};
}
async startRecording() {
this.setState({recording: true});
// default to mp4 for android as codec is not set
const {uri, codec = 'mp4'} = await this.camera.recordAsync();
}
stopRecording = () => {
this.camera.stopRecording();
};
render() {
const {recording, processing} = this.state;
let button = (
<TouchableOpacity
onPress={this.startRecording.bind(this)}
style={styles.capture}>
{console.log('aaa')}
<Text style={{fontSize: 14}}> RECORD </Text>
</TouchableOpacity>
);
if (recording) {
button = (
<TouchableOpacity
onPress={this.stopRecording.bind(this)}
style={styles.capture}>
<Text style={{fontSize: 14}}> STOP </Text>
</TouchableOpacity>
);
}
if (processing) {
button = (
<View style={styles.capture}>
<ActivityIndicator animating size={18} />
</View>
);
}
return (
<View style={styles.container}>
<RNCamera
ref={(ref) => {
this.camera = ref;
}}
style={styles.preview}
type={RNCamera.Constants.Type.back}
flashMode={RNCamera.Constants.FlashMode.on}
permissionDialogTitle={'Permission to use camera'}
permissionDialogMessage={
'We need your permission to use your camera phone'
}
/>
<View style={{flex: 0, flexDirection: 'row', justifyContent: 'center'}}>
{button}
</View>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
flexDirection: 'column',
backgroundColor: 'black',
},
preview: {
flex: 1,
justifyContent: 'flex-end',
alignItems: 'center',
},
capture: {
flex: 0,
backgroundColor: '#e75480',
borderRadius: 40,
width: 80,
height: 80,
paddingHorizontal: 20,
alignSelf: 'center',
margin: 20,
},
});
so here, the button touchability onpress which is startRecording is not getting called at all.
Any help would be great, thank you

Answer 1

I still could not figure what went wrong with the above code but using react-native-beautiful-video-recorder as the package, I finally found the app to behave as per my requirements.
If anybody meets with the same issue, it is better to use react-native-beautiful-video-recorder.

Answer 2

Try onPress with arrowed function
<TouchableOpacity
onPress={() => this.startRecording()}
style={styles.capture}>
{console.log('aaa')}
<Text style={{fontSize: 14}}> RECORD </Text>
</TouchableOpacity>
And bind this
constructor(props) {
super(props);
this.state = {
recording: false,
processing: true,
};
this.startRecording = this.startRecording.bind(this)
}

Answer 3

render() {
const {recording, processing} = this.state;
let button;
if (recording) {
button = (
<TouchableOpacity
onPress={this.stopRecording.bind(this)}
style={styles.capture}>
<Text style={{fontSize: 14}}> STOP </Text>
</TouchableOpacity>
);
}
else if (processing) {
button = (
<View style={styles.capture}>
<ActivityIndicator animating size={18} />
</View>
);
}
else {
button = (
<TouchableOpacity
onPress={this.startRecording.bind(this)}
style={styles.capture}>
{console.log('aaa')}
<Text style={{fontSize: 14}}> RECORD </Text>
</TouchableOpacity>
);

Answer 4

The issue you are dealing with is much simpler than you think
your initial state is this one
this.state = {
recording: false,
processing: true,
};
so the button then renders if processing and recording are false ,
the initial button starts the video,
so your initial state must be this one
this.state = {
recording: false,
processing: false,
};