jeudi 27 février 2020

automatically uncheck checkbox when checking another react native

I have two checkboxes (from react-native elements), let's call them box a and box b, where it should only be possible to have one of them checked at a time (no multiple selection), iow - if box a is checked, it is not possible to check box b. So as of this moment, if I were to have checked box a by mistake, I need to uncheck box a manually by clicking it again, in order to check box b. However, I want to be able to automatically uncheck box a by clicking and checking box b - if that makes any sense.

I have tried to look at both issue 54111540 and others, but none of the answers there seem to help with what I want to achieve.

My code:

import React, { useState } from 'react';
import { View, Text, StyleSheet, TouchableOpacity, } from 'react-native';
import { CheckBox } from 'react-native-elements';
import { Ionicons } from '@expo/vector-icons';
import { slider } from '../../components/SliderStyle';
import { useDispatch } from 'react-redux';
import { addfirstrole } from '../../redux/actions/index';
import store from '../../redux/store';
import * as firebase from 'firebase';

const RoleScreen = ({ navigation }) => {

const dispatch = useDispatch()
const addFirstRole = firstRole => dispatch(addfirstrole(firstRole))

const [landlordChecked, setLandlordChecked ] = useState(false)
const [tenantChecked, setTenantChecked] = useState(false)

const user = firebase.auth().currentUser

return (
  <View>
    <Text>Role screen</Text>
    <CheckBox
      title='Jeg er utleier'
      checkedIcon='dot-circle-o'
      uncheckedIcon='circle-o'
      checked={landlordChecked}
      onPress={tenantChecked ? () => setLandlordChecked(false) : () => setLandlordChecked(!landlordChecked)}
    />
    <CheckBox
      title='Jeg er leietaker'
      checkedIcon='dot-circle-o'
      uncheckedIcon='circle-o'
      checked={tenantChecked}
      onPress={landlordChecked ? () => setTenantChecked(false) : () => setTenantChecked(!tenantChecked)}
    />
    <TouchableOpacity onPress={() => { navigation.navigate('Search'); addFirstRole(user.uid); console.log(store.getState()); }}>
      <View style={slider.buttonStyle}>
        <Text style={slider.textStyle}>Neste</Text>
        <Ionicons name='ios-arrow-forward'style={slider.iconStyle} />
      </View>
    </TouchableOpacity>
  </View>
 )
} 

const styles = StyleSheet.create({})

export default RoleScreen;



Aucun commentaire:

Enregistrer un commentaire