Implementing a Toggle Button in React Native

react native | 33 minutes

In the previous post I’ve setup a “Hello World” React Native app. I’ll now add a button that toggles some text.

The button itself is changes title depending on whether a meeting has started or not. The initial state of a meeting will default to false.

export default class App extends React.Component {
  state = {
    isMeetingStarted: false
  }

  render() {
    return (
      <View style={styles.container}>
        <Button title={ this.state.isMeetingStarted ? 'Stop Meeting' : 'Start Meeting' } />
      </View>
    )
  }
}

State is a core concept in React Native: every time state changes, all components affected by state will re-render. We will toggle the state of isMeetingStarted in JavaScript.

toggleMeeting() {
  this.setState({
    isMeetingStarted: !this.state.isMeetingStarted
  })
}

<Button onPress={() => this.toggleMeeting()} ... />

Code, Tests and Travis CI

The above code is 33-minutes-app@599fd1. I’ve also setup Travis-CI in 33-minutes-app@7445d1 and have written some tests with Jest in 33-minutes-app@b05d45. Tests work by taking a snapshot of the DOM and comparing the results before and after the button is pressed. In the next post I will add and remove list items.