react native - how state works with buttons

Question

I am new to react native and have recently implemented state in my code.

I currently have 2 buttons: one to open the camera in my app and one to close the camera.

What I want to know is this: would there be a way for me to change a button's state based on when it's been pressed? for example: if I press a button, the button will record a video, but then if I press that same button again it'll stop. I currently only know how to change the state in a situation like this by using 2 different buttons opposed to making the state change within a singular button.

Here's my code that I have so far for my 2 buttons that open and close the camera:

class CameraButton extends Component {
  constructor(props) {
    super(props);

    this.state = {
      showCamera: false,
    };
  }

  showCamera = () => this.setState({showCamera: true});
  hideCamera = () => this.setState({showCamera: false});

  render() {
    return (
      <View style={styles.container}>
        <Button
          onPress={this.showCamera}
          title="click me to open the camera!"
          color="#841584"
        />
        {this.state.showCamera && <DeviceCamera />}
        <Button
          title="click me to close the camera!"
          onPress={this.hideCamera}
        />
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  instructions: {
    textAlign: 'center',
    color: '#333333',
    marginBottom: 5,
  },
});

export default CameraButton;

it's very simple. Would there be a way for me to have the user press the "click me to open the camera button!" and then when they camera opens, instead of having another button that closes out of the camera, I want to have users click the "click me to open the camera!" button (again) and change the state of this button if they click it again? This is more so for proof of concept so I can know for future use - I need to be able to actually record/stop recording a video within react native and I need to understand this concept.

score 1 · Answer 1 · answered Feb 24 '20 at 03:47

1

you can use the toggle the bool value of state variable.

ShowButton = () => {
let prevState = this.state.showCamera;
this.setState({showCamera: !prevState}); //It will toggle the value
}

Try this out, and let me know is it work for you or not?

answered Feb 24 '20 at 03:47

Ronak

180
1
11

score 1 · Answer 2 · answered Feb 24 '20 at 04:00

SOLUTION

class CameraButton extends Component {
  constructor(props) {
    super(props);

    this.state = {
      showCamera: false
    };
  }

  showCamera = () => this.setState({ showCamera: true });
  hideCamera = () => this.setState({ showCamera: false });

  render() {
    return (
      <View style={styles.container}>
        <Button
          onPress={this.state.showCamera ? this.hideCamera : this.showCamera}
          title={this.state.showCamera ? "Hide Camera!" : "Show Camera"}
          color="#841584"
        />
        {this.state.showCamera && <DeviceCamera />}
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center",
    backgroundColor: "#F5FCFF"
  },
  instructions: {
    textAlign: "center",
    color: "#333333",
    marginBottom: 5
  }
});

export default CameraButton;

Hope it helps :)

score 0 · Accepted Answer · answered Feb 24 '20 at 03:48

You just need to change the onPress event of the Button according to the showCamera state.

       <Button
              onPress={this.state.showCamera ? this.hideCamera : this.showCamera}
              title={this.state.showCamera 
                ? "click me to hide the camera!"
                : "click me to open the camera!"}
              color="#841584"
       />

react native - how state works with buttons

3 Answers3