React Nativeでチェックボックスを表示する方法【実装サンプル付き】

React Nativeでチェックボックスを表示する方法

チェックボックスは、UIで頻繁に使われる基本的なコンポーネントの一つです。React Nativeでは、便利なライブラリを活用することで、チェックボックスを簡単かつ美しく表示できます。

ただし、react-nativeのコアパッケージにはチェックボックス機能が含まれていないため、別途パッケージをインストールする必要があります。

必要なパッケージのインストール

チェックボックスを表示するには、以下のコマンドで「react-native-paper」をインストールします。

npm install --save-dev react-native-paper

基本的なチェックボックスコンポーネント

基本的なCheckboxコンポーネントの使い方は以下の通りです。

<Checkbox status={checkboxstatus} onPress={onCheckboxCheckedfunc} />

チェックボックスの主なプロパティ

Checkboxコンポーネントでよく使われる重要なプロパティを紹介します。

useStateでチェック状態を管理する

以下は、シンプルなチェックボックスの表示例です。useStateフックを使って、チェックボックスのチェック済み・未チェックの状態を管理します。

const [checked, setChecked] = React.useState(false);

現在の状態は「checked」変数に保持され、「setChecked」メソッドを使って状態を更新します。

ユーザーがチェックボックスをオン・オフするたびに、チェック状態は以下のように更新されます。

onPress={() => {
    setChecked(!checked);
}}

サンプルコード（完全版）

ここまでの内容をまとめた完全なコードは以下の通りです。

import * as React from 'react';
import { StyleSheet, Text, SafeAreaView } from 'react-native';
import { Checkbox } from 'react-native-paper';

const MyComponent = () => {
    const [checked, setChecked] = React.useState(false);
    return (
        <SafeAreaView style={styles.container}>
            <Checkbox
                status={checked ? 'checked' : 'unchecked'}
                onPress={() => {
                    setChecked(!checked);
                }}
                color={'green'}
                uncheckColor={'red'}
            />
        <Text>Checkbox</Text>
        </SafeAreaView>
    );
};

const styles = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center'
    },
});

export default MyComponent;

実行結果

このように、react-native-paperのCheckboxコンポーネントを使えば、状態管理を含めたチェックボックスの実装が非常にシンプルに行えます。色のカスタマイズや無効化もプロパティを指定するだけで簡単に実現できるので、ぜひ活用してみてください。