What is the method for deactivating the touchable opacity feature of react-native-element's checkbox?

I am currently utilizing the design language of react-native-element. However, when I try to implement a checkbox, it ends up behaving like a touchable opacity which is not my desired behavior.

<CheckBox
  containerStyle={{ backgroundColor: "transparent", borderWidth: 0 }}
  center
  size={14}
  title="vegetarian"
  textStyle={{
    fontSize: theme.FONT_SIZE_X_SMALL,
    fontWeight: theme.FONT_WEIGHT_LIGHT
  }}
  checkedColor="red"
  checked={this.state.checked}
  onPress={() => this.setState({ checked: !this.state.checked })}
/>;
javascriptreact-nativereact-native-elements

Answer №1

To customize the checkbox, you can assign a different Component prop (by default it's set to TouchableOpacity) such as TouchableWithoutFeedback.

<CheckBox
  Component={TouchableWithoutFeedback}
  containerStyle={{ backgroundColor: "transparent", borderWidth: 0 }}
  center
  size={14}
  title="vegetarian"
  textStyle={{
    fontSize: theme.FONT_SIZE_X_SMALL,
    fontWeight: theme.FONT_WEIGHT_LIGHT
  }}
  checkedColor="red"
  checked={this.state.checked}
  onPress={() => this.setState({ checked: !this.state.checked })}
/>;

Answer №2

One alternative way to achieve this is by using the activeOpacity={1} prop as shown below.

<CheckBox
  activeOpacity={1}
  containerStyle={{ backgroundColor: "transparent", borderWidth: 0 }}
  center
  size={14}
  title="vegetarian"
  textStyle={{
    fontSize: theme.FONT_SIZE_X_SMALL,
    fontWeight: theme.FONT_WEIGHT_LIGHT
  }}
  checkedColor="red"
  checked={this.state.checked}
  onPress={() => this.setState({ checked: !this.state.checked })}
/>

Answer №3

Interestingly, there is an available props "disabled" which is not mentioned in the documentation.

    <CheckBox
          disabled={true}
          title={l.name}
          checked={!!indexCheckBox.includes(i)}
          checkedIcon="dot-circle-o"
          uncheckedIcon="circle-o"
          checkedColor="#6cc49a"
          uncheckedColor="#6cc49a"
          onPress={() => onPressCheckBox(i)}
        />

Answer №4

<TouchableOpacity
                      style={{
                        flex: 1,
                      }}>
                      <CheckBox
                        disabled={false}
                        boxType={'square'}
                        value={this.isChecked(item._id)}
                        onCheckColor={COLORS.SWDarkBlue}
                        onFillColor={COLORS.SWLightBlue}
                        tintColors={{
                          true: COLORS.SWDarkBlue,
                          false: '#4445',
                        }}
                        onTintColor={COLORS.SWDarkBlue}
                        onValueChange={value =>
                          this.onToggleCheckBox(item._id)
                        }
                        style={checkBoxContainer}
                      />
                    </TouchableOpacity>

Answer №5

When it comes to creating a Button, I found the following code to be effective for my needs. Feel free to try it out and let me know if you encounter any issues.

import { TouchableOpacity } from "react-native";
import { Button } from "react-native-elements";

<Button
      TouchableComponent={TouchableOpacity}
      title="Next"
      raised
      activeOpacity={1}
/>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What is the method to obtain the dimensions of the browser window using JavaScript?

In my JavaScript code, I am trying to retrieve the browser window size and then set the size of a div element accordingly. I have two div elements that should adjust based on the window size. For example, if the window size is 568px, div1 should be 38% of ...

javascriptjqueryhtmlcss

Perform a series of promises simultaneously once they are prepared

Is there a way to ensure that the promises only execute after concatenation is complete? const fs = require('fs'); const testFolder = './lib/'; const files = ['hello.txt', 'goodbye.txt']; let contents = '' ...

javascriptnode.jspromisefs

Assigning starting value to text input hook

If I need to set the initial value of the name input field to display the dynamic value fetched from the user's profile, I can use the following code snippet: const [name, setName] = useState(userProfileDataFetched.name); Instead of hardcoding a stat ...

reactjsreact-nativereact-hooks

What is the best way to iterate through an array of objects with JavaScript?

I'm encountering an issue while attempting to iterate through an array of objects, as I keep receiving the error message: "Cannot set property 'color' of undefined". Could someone please help me troubleshoot this problem? var ObjectTest = ...

javascript

Unable to display and conceal div elements

<ol class="novice"> <li> <p class="glava">HTML</p> <div class="vsebina"> <p>Hyper Text Markup Language (slovensko jezik za označevanje nadbesedila...</p> </div> </li> <li> ...

javascriptjqueryhtml

Getting a ThreeJS element, specifically a mesh, by its ID

I am working with a Mesh object in Three.JS. Is there a way to retrieve the Mesh object by its id and adjust its position, similar to using $(#"sample") in jQuery? Alternatively, do you have any suggestions for changing the position of objects in the ...

javascriptjquery3dthree.jsmesh

"Uh-oh, looks like my computer is having trouble locating those scripts - I

I am in the process of creating a small website and have listed my script references below. <!doctype html> <html class="no-js" lang="en" ng-app="App"> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device- ...

javascriptphp

Guide to successfully merging Mysql data with PHP into the ParamQuery Grid using Javascript

Could you please assist in converting the JSON output from MySQL into the desired format shown below? JSON [ {"storenm": "S1", "FA_SOH": "20964", "FA_CY_QTY": "15", "FA_CT_QTY": "44497"}, {"storenm": "S2", "FA_SOH": "1096", "FA_CY_QTY": "2", "FA_ ...

javascriptphpjquerymysql

Trouble getting CSS and Javascript to bind when dynamically appending HTML elements

Attempting to dynamically bind HTML from an Angular controller SkillsApp.controller('homeController', function ($scope, $http, $q, $timeout) { $scope.getAllCategories = function () { $http({ url: "/Categories/GetAllCategories", ...

javascriptjqueryhtmlcssangularjs

Reorganizing a list in AngularJS after adding a new item

I have made edits to the AngularJS ordering example in my Plunker. The ordering works fine initially, but when I add a new person using code to periodically update the list of contacts, the new person gets added to the bottom without re-sorting. Is there a ...

javascriptangularjs

Can you provide instructions for generating a simple menu bar with options utilizing webgl/three.js?

I find the documentation for the three.js 3-D viewer difficult to understand as a beginner. I am curious about the fundamental steps involved in creating a menu bar or selector with options for a 3-D viewer using three.js / WebGL. Additionally, I am inter ...

javascriptthree.jswebgl

Encountering difficulties while attempting to import a module in Next.js

My attempt to import the Zoom Web SDK module into my Next.js project encountered an error due to the undefined window object. Simply trying to import the websdk module resulted in this unexpected issue https://i.stack.imgur.com/NDRoC.png I am using Next ...

javascriptreactjsnext.jszoom-sdk

How does selecting one dropdown option within a dynamic form field lead to the automatic activation of another dropdown list in a separate form field?

My goal is to create a dynamic form field with a dropdown list that allows users to add and delete multiple contributors. Currently, my code can successfully add and remove multiple users. However, I encounter an issue where selecting the dropdown list tri ...

javascripthtmlangulartypescriptangular-reactive-forms

React JS is not allowing me to enter any text into the input fields despite my attempts to remove the value props

Currently, I am working on creating a Contact Form using React Js. I have utilized react bootstrap to build the component, but unfortunately, when attempting to type in the input fields, the text does not change at all. import React, {useState} from ' ...

javascriptreactjsformsinputreact-bootstrap

What is the process for determining the remaining number of divs after deletion?

Within my HTML document, I have a total of eight div elements. Through the use of jQuery, I managed to extract the number of these divs and display it within the .num div. However, when I proceed to delete one of the div elements by clicking the designate ...

javascripthtmljquery

Scope of an array being passed

I have a challenge of passing an array from one external .js file to another. The individual files are functional on their own, however, the issue arises when trying to pass the array from pickClass.js to displayStudent.js and displaying the names along wi ...

javascriptarrays

Error encountered when attempting to use regex in javascript with an invalid group

After coming across a regex that checks for multiple types of email address inputs, I encountered an issue while trying to use it in JavaScript. The error message "Uncaught SyntaxError: Invalid regular expression" kept popping up along with details about i ...

javascriptjqueryregexvalidationjquery-validate

Issues with returning a response in AWS Lambda using NodeJs

I have been experimenting with a basic Node Js example on AWS Lambda that includes the Async library. The code seems to be functioning correctly, however, for some reason, the Lambda Function is returning a null response. As a newcomer to Node, I could use ...

javascriptnode.jsamazon-web-services

Div containing scrollable content with overlaid child element

I am facing an issue with a scrollable div that contains a table, where I am trying to append a loader component as a child to cover the div when it's scrolled. However, the loader only covers the initial size of the div. Here is an example similar t ...

javascripthtmlcssangular

Refreshing the User Interface in React Native's functional components within a loop

Hey there! I am currently working on a React Native app and I'm trying to incorporate a progress bar in the UI while it's running. I stumbled upon this code snippet on Stack Overflow, but I could use some guidance on how to integrate it into my ...

reactjsreact-native