React Native + expoでチェックボックスを実装してみた #reactnative

React Nativeでチェックボックスを実装してみた

現在、React Natie + expoでiOSでもAndroidでも動作するチェックボックスを実装したいと考えています。

そこで情報収集をしたので、まとめておこうと思います。

expoのCheckBoxは利用できない

検索した結果、まずはじめにExpoのCheckBoxがヒットしたので、調べて見ると、どうもiOSで動作しないとのこと。

参考：Expo Docs

他のUIライブラリを検討することに

expoを利用できなかったので、他のUIライブラリを利用することとしました。

調査したUIライブラリ
・React Native Paper
・React Native Elements

React Native Paperのチェックボックス

公式Doc

React Native Elementsのチェックボックス

公式Doc

各サイト等を確認した結果、UI・利用用途として今回はReact Native Elementsの方が合っていましたので、React Native Elementsで実装していこうと思います。

React Native Elementsの実装

STEP1:インストール

npm install react-native-elements

STEP2:チェックボックスを利用するjsxでimport

〇〇.jsx

import { CheckBox } from 'react-native-elements'

STEP3:CheckBoxを実装

〇〇.jsx

import { CheckBox } from 'react-native-elements'

export default function App() {
  return (
    <CheckBox
      title='Click Here'
    />
  )
}

STEP4:CheckBoxの状態をセットする変数を宣言、その変数を元に状態を表示

〇〇.jsx

import { CheckBox } from 'react-native-elements'

export default function App() {
  const [checked, setCheck] = useState(false);

  return (
    <CheckBox
      title='Click Here'
      checked={state.checked}
    />
  )
}

ここで確認!
シュミレーターでiOS、Android共にチェックがついた(true)の状態でチェックボックスが表示されているはずです!

※タップ動作の設定はしていないので、タップしても動作はしません

STEP5:動作を設定する

onPressを用いて動作を設定します

〇〇.jsx

import { CheckBox } from 'react-native-elements'

export default function App() {
  const [checked, setCheck] = useState(false);

  return (
    <CheckBox
      title='Click Here'
      checked={state.checked}
      onPress={() => setCheck(!checked)}
    />
  )
}

完成!
これで動作するはずです!
checkdにtrue or falseが代入されていますので、それを利用します。