How to switch from camera button to video record button in react native

Question

I have camera capture button and video recording button on the same container, I want to be able to have camera button when app is launched, then when I a tap Text "Video", the it will switch to video button to record. I have a screenshot of beautyplus app as sample of what I mean Camera button navigation

return (
                    <View style={styles.action}>
                         <View style={{ flexDirection: 'row', justifyContent: 'space-between', paddingHorizontal: 20, marginBottom: 15, alignItems: 'flex-end' }}>
                            <TouchableOpacity  onPress={this.toggleTorch.bind(this)}>
                                    { this.state.flashon == RNCamera.Constants.FlashMode.off? (
                                            <Icon
                                                name="md-flash-off"
                                                color="black"
                                                size={30} 
                                            />
                                        ) : (
                                            <Icon
                                                name="md-flash"
                                                color="black"
                                                size={30} 
                                            />
                                        )
                                    }
                                </TouchableOpacity>
                                <View style={{ alignItems: 'center' }}>
                                    <TouchableOpacity onPress={this.takePicture} style={styles.captureBtn} />
                                </View>
                                <View style={{ alignItems: 'center' }}>
                                    <TouchableOpacity onPress={this.recordVideo} style={styles.captureVideoBtn}>
                                      {
                                        this.state.recording ?
                                      (<Text>{this.secondsToMMSS(this.state.seconds)}</Text>) :
                                      (null)
                                      }
                                    </TouchableOpacity>
                                </View>

                                <TouchableOpacity
                                  onPress={this.reverseCamera}
                                  >
                                      <Icon
                                        name="md-reverse-camera"
                                        color="black"
                                        size={30} 
                                      />

                                  </TouchableOpacity>

                          </View>
                    </View>
                  )
                }
              }
          </RNCamera>
         


          
      </View>
    );
  };
}

Answer 1

What is the problem with condition checking?

constructor() {
   ...
   this.state = {capture:'photo'}; // default to photo
}

captureVideo=()=> {...}
capturePhoto=()=> {...}
captureAudio=()=>{...}

capture() {
  swicth (this.state.capture)
    case 'audio' : captureAudio()
    ...
}


render () {
 

...

  <TouchableOpacity onPress={()=>this.setState({capture:'video'})}> 
  <Text>Video</Text></TouchableOpacity>

  <TouchableOpacity onPress={()=>this.startCapture()}><Text>Start</Text> 
  </TouchableOpacity>

  <TouchableOpacity onPress={()=>this.setState({capture:'photo'})}> 
  <Text>Video</Text></TouchableOpacity>

...
}