DOMINANDO O USO DE CHECKBOXES EM DESENVOLVIMENTO REACT NATIVE

No tutorial de hoje aprenderemos como fazer um checkbox dentro do aplicativo produzido com React Native e Expo.

Checkbox no React Native

App.js

No arquivo App.js vamos criar uma flatlist e criar os ícones do checkbox atribuindo-os a um checkbox:

import { StatusBar } from 'expo-status-bar';
import {StyleSheet, Text, View, FlatList, TouchableOpacity} from 'react-native';
import { MaterialCommunityIcons } from '@expo/vector-icons';
import {useState} from "react";

export default function App() {

  const [checkbox,setCheckbox] = useState([]);
  const [statuscheckbox,setStatuscheckbox] = useState(null);

  const DATA = [
    {
      id: 'bd7acbea-c1b1-46c2-aed5-3ad53abb28ba',
      title: 'First Item',
    },
    {
      id: '3ac68afc-c605-48d3-a4f8-fbd91aa97f63',
      title: 'Second Item',
    },
    {
      id: '58694a0f-3da1-471f-bd96-145571e29d72',
      title: 'Third Item',
    },
  ];

  return (
    <View style={styles.container}>

      <FlatList
              style={{marginTop: 150}}
              data={DATA}
              renderItem={({item,index}) =>
              <View style={{marginBottom: 10}}>
                  <TouchableOpacity style={{flexDirection:'row'}} onPress={()=>{
                    if(checkbox[index] !== undefined){
                      checkbox[index] = undefined;
                    }else{
                      checkbox[index] = item.id;
                    }
                    setStatuscheckbox(Math.random());
                    console.log(checkbox);
                  }}>
                    {(checkbox[index] === undefined)?<MaterialCommunityIcons name="checkbox-blank-outline" size={24} color="black" />:<MaterialCommunityIcons name="checkbox-intermediate" size={24} color="black" />}
                    <Text>{index} - {item.title}</Text>
                  </TouchableOpacity>
              </View>
            }
          keyExtractor={item => item.id}
      />

      <StatusBar style="auto" />
    </View>
  );
}

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

Por hoje é só! Fiquem todos com Deus! Sucesso nos códigos e na vida!

Precisa de um suporte técnico? webdesignemfoco@gmail.com

Pois aqueles que de antemão conheceu, também os predestinou para serem conformes à imagem de seu Filho, a fim de que ele seja o primogênito entre muitos irmãos. - Romanos 8:29