Expo

Get Started
API Reference

Checkbox

expo-checkbox provides a component to provide a boolean input element on Android and Web.

Platform Compatibility

Android DeviceAndroid EmulatoriOS DeviceiOS SimulatorWeb

Installation

expo install expo-checkbox

If you're installing this in a bare React Native app, you should also follow these additional installation instructions.

import Checkbox from 'expo-checkbox';
import React, { useState } from 'react';
import { StyleSheet, Text, View } from 'react-native';

export default function App() {
  const [isChecked, setChecked] = useState(false);

  return (
    <View style={styles.container}>
      <View style={styles.section}>
        <Checkbox style={styles.checkbox} value={isChecked} onValueChange={setChecked} />
        <Text style={styles.paragraph}>Normal checkbox</Text>
      </View>
      <View style={styles.section}>
        <Checkbox
          style={styles.checkbox}
          value={isChecked}
          onValueChange={setChecked}
          color={isChecked ? '#4630EB' : undefined}
        />
        <Text style={styles.paragraph}>Custom colored checkbox</Text>
      </View>
      <View style={styles.section}>
        <Checkbox style={styles.checkbox} disabled value={isChecked} onValueChange={setChecked} />
        <Text style={styles.paragraph}>Disabled checkbox</Text>
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    marginHorizontal: 16,
    marginVertical: 32,
  },
  section: {
    flexDirection: 'row',
    alignItems: 'center',
  },
  paragraph: {
    fontSize: 15,
  },
  checkbox: {
    margin: 8,
  },
});

import Checkbox from 'expo-checkbox';

Determines whether the checkbox is available.

Returns a promise that resolves to a Boolean, indicating whether the checkbox is available on this device.

The checkbox component inherits all view props.

(boolean) Value indicating if the checkbox should be rendered as checked or not.

(boolean) If the checkbox is disabled, making it opaque and uncheckable.

(string) The tint or color of the checkbox. This overrides the disabled opaque style.

(function) Callback that is invoked when the user presses the checkbox. The callback is provided with event containing the checkbox change, { nativeEvent: { target, value } }.

(function) Callback that is invoked when the user presses the checkbox. The callback is provided with a boolean indicating the new checked state of the checkbox.