1

Possuo um check box do qual por padrão vem assinalado como true (marcado), mas, quero de forma dinâmica uma opção que salve quando o usuário mudar essa caixa pra false (ou, desmarcar). Como ainda não terei interação com banco, procurei sobre e decidi fazer com AsyncStorage. Porém, não obtive êxito após ver alguns exemplos. Meu código inicia com:

state = {
    bt_contact: true
}

storeCheckBoxStatus = async () => {

        try {
            await AsyncStorage.setItem('@storage_Key', this.state.bt_contact)
            console.info(AsyncStorage)
        } catch (e) {
            console.info(e);
        }
    }

    getCheckBoxStatus = async () => {
        try {
            const value = await AsyncStorage.getItem('@storage_Key')
            console.info(AsyncStorage)
            console.info(value)
            if (!value != null) {
                this.setState.bt_contact({bt_contact: (value).bt_contact})
            }
        } catch (e) {
            console.info(e);
        }
    }

    checkBoxTest() {
        this.setState({
            bt_contact: !this.state.bt_contact
        })

        if (!this.state.bt_contact != true) {

            Alert.alert(
                I18n.t('Confirm_cancel_data_sharing'),
                I18n.t('Message_alert_data_sharing'),
                [

                    {
                        text: I18n.t('Cancel'),
                        onPress: () => this.setState({
                            bt_contact: true
                        })

                    },
                    {
                        text: 'OK',
                        onPress: () => this.storeCheckBoxStatus
                    },
                ],
                { cancelable: false }
            )
        }
    }

A primeira função deveria ler o registro do usuário quando desmarca a caixa ou não. A segunda é pra renderizar com o valor alterado pela última vez ou vir como marcado, por padrão. E essa última é apenas interação com Alert. Que quando ele cancelar, ele remarca e quando da ok, dará sequência para poder salvar em storage.

Preciso que fique salvo no AsyncStorage e que eu possa acessar, pra caso futuramente precise enviar ao banco, consiga consultar. Mas de ínicio, gostaria apenas que assim que fechassse o celular, pudesse deixar a ultima opção salva. Caso desmarque, reabra desmarcado. Alguém pode ajudar?

Trecho que renderizo o checkbox:

<Text style={[styles.bottomContainerText, { color: themes[theme].auxiliaryText }]}>
    <CheckBox style={{
            height: 10,
            widht: 10,
        }}
        value={this.state.bt_contact}
        onValueChange={() => this.checkBoxTest()}
    />
    {I18n.t('Data_sharing')}
</Text>
1
  • Uma dica: coloque mais detalhes nas questões.
    – K4L1
    Commented 12/08/2020 às 3:25

1 Resposta 1

1

@Wanderson Bueno, a forma mais fácil de resolver seu problema é criando um hook que vai pegar o valor do checkBox, identificar sempre que houver mudança nele e armazenar no asyncStorage, após isso, precisamos pegar o valor que está no Async Storage e adicionar no CheckBox sempre que o Aplicativo abrir.

Para isso, vamos criar um componente e colocar o CheckBox lá dentro.

export default function App() {
  const [isSelected, setSelection] = useState(false);

  return (
    <View>
        <CheckBox
          value={isSelected}
          onValueChange={setSelection}
        />
    </View>
  );
}

Após a criação do CheckBox, precisamos criar duas funções para gerenciar o Async Storage, uma para adicionar e outra para remover o valor, sempre referenciando pela chave, que nesse caso é @checkBox:

const saveValue = async (value) => {
    try {
      const jsonValue = JSON.stringify(value);
      await AsyncStorage.setItem('@checkBox', jsonValue)
    } catch (e) {
      // saving error
    }
  };

  const getValue = async () => {
    try {
      const jsonValue = await AsyncStorage.getItem('@checkBox');
      return jsonValue != null ? JSON.parse(jsonValue) : null;
    } catch(e) {
      // error reading value
    }
  };

Em seguida só precisamos criar um hook para identificar se o valor do CheckBox está mudando, em seguida passar para a função que criamos para adicionar o valor ao Async Storage:

  useEffect(
    () => {
      saveValue(isSelected)
    },
    [isSelected],
  );

Por fim, só precisamos identificar quando aquela Screen for renderizar e verificar se existe algum valor no Async Storage, se hover, adicionamos ele ao CheckBox:


// Para identificar quando o componente é montado podemos usar o useEffect passando um array vazio, como mostrado no exemplo abaixo.

useEffect( async () => {
    let checkBoxValue = await getValue();
    setSelection(checkBoxValue)
  }, []);

Código completo:

import React, { useState, useEffect } from 'react';
import { StyleSheet, View, CheckBox } from 'react-native';
import AsyncStorage from '@react-native-community/async-storage';

export default function App() {
  const [isSelected, setSelection] = useState(false);

  const saveValue = async (value) => {
    try {
      const jsonValue = JSON.stringify(value);
      await AsyncStorage.setItem('@checkBox', jsonValue)
    } catch (e) {
      // saving error
    }
  };

  const getValue = async () => {
    try {
      const jsonValue = await AsyncStorage.getItem('@checkBox');
      return jsonValue != null ? JSON.parse(jsonValue) : null;
    } catch(e) {
      // error reading value
    }
  };

  useEffect( async () => {
    let checkBoxValue = await getValue();
    setSelection(checkBoxValue)
  }, []);

  useEffect(
    () => {
      saveValue(isSelected)
    },
    [isSelected],
  );

  return (
    <View style={styles.container}>
        <CheckBox
          value={isSelected}
          onValueChange={setSelection}
        />
    </View>
  );
}

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

Espero ter ajudado.

7
  • Estou analisando. Faltou eu por o trecho que eu renderizo o checkbox. Acabei de editar. Commented 12/08/2020 às 12:07
  • Nesse caso eu não conseguiria utilizar os alert para definir as ações do Cancel e do Ok? Commented 12/08/2020 às 12:42
  • Conseguiria, teria que criar um handler de mudança para o valor do CheckBox.
    – K4L1
    Commented 12/08/2020 às 12:45
  • não consegui usando hook. É necessário usar o JSON.parse? Dos exemplos que vi pra tentar salvar e depois renderizar com a ultima opção marcada, quase todos usavam sem, como postei. Commented 12/08/2020 às 13:59
  • o JSON.parse não é necessário, ele só é necessário quando é retornado um Objeto do AsyncStorage, porém eu sempre uso ele por padrão. Vou atualizar a resposta com o Handler exibindo um alert para confirmar a alteração do valor do CheckBox.
    – K4L1
    Commented 12/08/2020 às 14:48

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .