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

##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が代入されていますので、それを利用します。