disable the button border on native-base

I'm attempting to enclose an icon within a button, like so:

            <Button
              style={styles.radioButton}
              onPress={() => {
                console.log('hdjwk');
              }}>
              <Icon
                style={styles.icon}
                name="circle-thin"
                color="#31C283"
                size={moderateScale(20)}
              />
            </Button>

...
  radioButton: {
    backgroundColor: 'white',
    borderRadius: 0,
    borderColor: 'white',
  },
  icon: {
    paddingTop: moderateScale(12),
  },

However, when I insert the icon into the button, it shifts downward and an outline appears despite setting the borderRadius to 0. How can I adjust this so that it appears seamless with no distinct background screen or border around the icon?

https://i.sstatic.net/yPTsA.png

javascriptcssreactjstypescriptreact-native

Answer №1

If you're looking to enhance your button styles, here's a suggestion:

backgroundColor: 'white',
borderRadius: 0,
borderColor: 'transparent', //making the color fully opaque; consider using 'border: none' for a better effect

I noticed that the box-shadow property on your button may be creating the border effect. To remove it, set 'box-shadow: none' in your button's CSS.

To center the icon within the button, utilize flex properties and align the content accordingly. Here is an example of revised button styling in plain CSS:

{
  background-color: white,
  border: none,
  box-shadow: none;

  display: flex;
  justify-content: center;
  align-items: center;

  //Remember to define width and height for the flex properties to take effect
}

{
   backgroundColor: 'white' 
   //or backgroundColor: 'transparent'
   borderRadius: 0,
   borderColor: 'white',
   elevation: 0,

   flex : 1,
   flexDirection: "column",
   justifyContent: 'center',
   alignItems: 'center'
}

For more information on removing shadows from buttons, refer to this guide or simply use 'elevation: 0'

Answer №2

Perhaps consider enclosing the Icon and Text within a TouchableOpacity component? Alternatively, you could wrap just the Icon in a TouchableOpacity so that it can be clicked and trigger onPress functions similar to a Button.

For more information, check out: https://reactnative.dev/docs/touchableopacity#docsNav

Explore other Touchable Wrappers available in React Native as well.

Answer №3

My recommendation is to utilize TouchableOpacity in place of Button. This way, you can easily implement the following:

          <TouchableOpacity
              style={styles.radioButton}
              onPress={() => {
                console.log('hdjwk');}}
           >
              <Icon
                style={styles.icon}
                name="circle-thin"
                color="#31C283"
                size={moderateScale(20)}
              />
           </TouchableOpacity>

...
  radioButton: {
    backgroundColor: 'white',
    borderRadius: 0,
    borderColor: 'white',
    alignItems: 'center',
    justifyContent: 'center',
  },

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

A guide on testing mouse clientY in React using JEST for effective testing

useEffect(() => { const mouseHandler = (event: MouseEvent) => { menuData.forEach((element) => { if (element.hasActiveDropdown && event.clientY > 50) { handleCloseDropDown(); // handleDropDown('0') ...

javascriptreactjsjestjsreact-testing-library

Different ways to shuffle the arrangement of divs

Forgive me if this seems like a simple query, but I am struggling with it. Essentially, what I want to achieve is to randomize the positioning of the items, where item 1 can adopt the style of item 3 (or 2 or 4), item 2 can take on the style of 1, 3, or 4, ...

javascriptarrayssortingrandom

Struggling to locate a declaration file for the 'cloudinary-react' module? Consider running `npm i --save-dev @types/cloudinary-react` or exploring other options to resolve this issue

Currently, I am working with Typescript in React. Strangely, when I try to import the following: import { Image } from 'cloudinary-react'; I encounter this error: Could not find a declaration file for module 'cloudinary-react'. ' ...

reactjstypescriptcloudinary

Issue with loading Babel preset in a monorepo setup

I'm working with a monorepo setup using Lerna and it's structured as follows: monorepo |-- server |-- package1 |-- package2 All packages in the repo make use of Babel. After installing all 3 projects, yarn copied all the required @babe ...

javascriptnode.jsbabeljslerna

Styling elements using flexbox and various other divs

Looking to style a webpage with CSS to achieve this particular layout: https://i.sstatic.net/K3x0A.png The objective is to make the page responsive where the red and blue columns (left and right) have fixed widths. The center column should be collapsible ...

htmlcssflexboxresponsive-design

How disabling SSR is causing my styles to break in Nextjs

My Nextjs app is causing some issues with styling when I disable SSR to connect to Metamask using the window object. Specifically, the Navbar title style changes when SSR is disabled and the dev server is restarted: With SSR enabled: https://i.sstatic.net ...

javascriptnext.jsserver-side-rendering

How can I eliminate the white bar elements from my dropdown menu? Also, seeking guidance on replacing an empty <div> tag in a boolean query

Can anyone help me understand the strange white border around my dropdown menu and guide me on how to remove it? I am currently using DropdownButton from react bootstrap. I have attempted to adjust the CSS with no success. Here is the code I tried: .Navig ...

cssreactjstypescriptsass

Always ensure that only one div is visible at a time

I am currently working on a project where I cannot use ng-cloak due to the way the css files are loaded. I have been exploring alternative solutions and have tried a few different approaches. My main goal is to ensure that two icons are never shown at the ...

javascripthtmlangularjs

Repeated URL causes Node to redirect

I am currently working on a project that involves redirecting users if they enter a specific URL, especially for redirecting from a Heroku domain. During my testing phase on localhost, I noticed that the redirect URL keeps getting repeated: http://localh ...

javascriptnode.jsexpress

Tips to prevent modal impacts on underlying elements?

When I click on a button, a modal pops up. However, the background contents seem to spread out and sometimes scroll automatically when the modal appears. I have searched for a solution to this issue but have been unsuccessful. Can anyone please help me ide ...

javascriptjqueryhtmlcsstwitter-bootstrap

Helping React and MUI components become mobile responsive - Seeking guidance to make it happen

My React component uses Material-UI (MUI) and I'm working on making it mobile responsive. Here's how it looks currently: https://i.sstatic.net/kxsSD.png But this is the look I want to achieve: https://i.sstatic.net/kJC2m.png Below is the code ...

javascriptreactjstypescriptreact-nativematerial-ui

Error EPERM: Unable to perform operation, change permissions on @react-native-community iOS

I am currently working with React version 16.8.6 and react-native version 0.59.6 on iOS. Whenever I type react-native --version or any command starting with react-native, I encounter the following error: internal/fs/utils.js:220 throw err; ^ Erro ...

iosreact-nativenpmreact-native-cli

Browser disregards backslashes in the content of pseudo elements

I have been struggling with a simple issue for quite some time now, and I seem to be out of ideas. The problem lies in the styling of a CSS pseudo-element before, which is defined as follows: #fPhone::before{ color: #78be20; content: "\e622" ...

htmlcsspseudo-element

Steps to update the package version in package.json file

If I remove a package from my project using the following command: npm uninstall react The entry for this package in the package.json file does not disappear. Then, when I install a different version of this package like so: npm install <a href="/cdn ...

javascriptnpmterminal

Having trouble getting "Hello World" to display in ReactJS

I can't seem to get "hello world" as the output in my code. It's a simple code, but I'm getting a different result when using the createElement function. I'm still new to react and could use some help. Here is the code: <!DOCTYPE h ...

javascriptreactjsjsx

Switching the cursor to an image when hovering over an element is causing inconsistency in hover events triggering

Currently, I am attempting to implement an effect that changes the cursor to an image when hovering over a text element and reverts back to the normal cursor upon leaving the text element. However, this functionality is not working as expected when using R ...

javascripthtmlcssreactjs

Tips for keeping the app on the same route or page even after a refresh

I'm currently diving into the world of React and am in the process of constructing a CRUD application. I've successfully created multiple pages that utilize react-router-dom for navigation with authentication. The pages are accessible only to log ...

javascriptreactjsauthenticationreact-router-dom

When utilizing a Javascript event listener within ReactJS with NextJS, the dynamically imported module without server-side rendering fails to load

Hello everyone, I am new to ReactJS and NextJS and would really appreciate some advice on the issue below. Thank you in advance! Here is my current tech stack: Node v16.6.1 React v17.0.2 Next.js v10.0.4 I'm working on implementing a carousel and si ...

javascriptreactjsnext.js

What is the process to activate a function within a component once a service method has been run?

I'm currently working on a chart configuration using amCharts, where an eventListener is registered for the bullets. This event listener then triggers another function in my chart service. My goal is to activate a method in my component as soon as th ...

angulartypescriptrxjsangular-servicesangular-dependency-injection

Displaying a list of items in a dropdown menu that includes both the item's ID and name using angular

I am currently utilizing the angular2-multiselect-dropdown to connect with server values. interface PayerDummyObjType{ id: string; itemName: string; } PayerDummyObjType: PayerDummyObjType[]; PayerDummyObjTypeSelected: PayerDummyObjType[]; dropdownSettin ...

angulartypescriptmulti-select