react native : What is the way to mark the checkbox when clicking on the BOB text?

Question

What is the way to mark the checkbox when clicking on the BOB text? In my example I need to check the box also by clicking on the text BOB . I would be happy to help with this. I add the reducer and the action of the checxbox . hope u can understand the way of it .

this is the reducer

import {
  SET_CURRENT_TAB_INFO,
  SET_CURRENT_TAB_NAME,
  SET_CURRENT_TIME,
  SET_CHECKBOX,
  SET_CHECKBOX2,
  SET_REQUESTID,
  SET_IS_FORM_CHECKED,
  SET_INPUTS_TEXT,
} from '../../constants/BitzuaDigumConstants';

const initializeState = {
  currentTabName: '',
  currentTabInfo: null,
  currentTime: '',
  checkBox: false,
  checkBox2: false,
  requestId: 0,
  isFormChecked: false,
  inputsText: {}
};

export default function BitzuaDigumReducer(state = initializeState, action) {
  switch (action.type) {
    case SET_CURRENT_TAB_NAME:
      return {
        ...state,
        currentTabName: action.payload,
      };
    case SET_IS_FORM_CHECKED:
      return {
        ...state,
        isFormChecked: action.payload,
      };
    case SET_INPUTS_TEXT:
      return {
        ...state,
        inputsText: action.payload,
      };
    case SET_CURRENT_TAB_INFO:
      if (!action.payload) {
        return state;
      }

      if (!state.currentTabInfo) {
        // here if currentTabInfo == null
        return {
          ...state,
          currentTabInfo: action.payload, // it will set the value from payload
        };
      }
      // if currentTabInfo already had some values (it means it not null)

      return {
        ...state,
        currentTabInfo: {
          ...state.currentTabInfo,
          ...action.payload,
        },
      };
    case SET_CURRENT_TIME:
      return {
        ...state,
        currentTime: action.payload,
      };
    case SET_CHECKBOX:
      return {
        ...state,
        checkBox: action.payload,
      };
    case SET_CHECKBOX2:
      return {
        ...state,
        checkBox2: action.payload,
      };
    case SET_REQUESTID:
      return {
        ...state,
        requestId: action.payload,
      };
    default:
      return state;
  }
}

this is the dispatch action

export function setCheckBox(data = false) {
  const payload = data;
  return { type: SET_CHECKBOX, payload };
}

import { setCheckBox } from '../redux/actions/BitzuaDigumActions';

function NetuneyDigum(props) {
const isSelected = useSelector(
    (rootState) => rootState.BitzuaDigumReducer.checkBox
  );

return (
<TouchableOpacity
            activeOpacity={1}
            style={{
              flexDirection: 'row',
              alignSelf: 'flex-start',
              top: 20,
              left: 10,
            }}
          >
            <CheckBox
              value={isSelected}
              onValueChange={(value) => dispatch(setCheckBox(value))}
              style={styles.checkbox}
              tintColors={{ true: 'white', false: 'white' }}
            />
            <Text style={styles.label}>BOB</Text>
          </TouchableOpacity>
 );
}

Answer 1

There are two ways here: You can set the onPress property either on the TouchableOpacity component or on the Text. In React Native all Text components are touchable. And set the onPress to change the value of the checkbox similarly to what you have on onValueChange. I don't know exactly what the code would look like because I don't know what you are doing in your dispatch action.

Edit:

Example:

add this to Text: onPress={(value) => dispatch(toggleCheckBox())}

Create this function:

export function toggleCheckBox() {
  return { type: TOGGLE_CHECKBOX };
}

Add this to the reducer:

case TOGGLE_CHECKBOX:
  return {
    ...state,
    checkBox: !state.checkBox,
  };