CODEWITHSUNDEEP
react-native
M.Kalidass
M.Kalidass

Reputation: 348

Select one button from 3 buttons in react native

I have 3 buttons named Pills, Syrup and Syringe. User has to select one button from these 3 buttons. If user selects Syrup, then both syringe and pills has to be returned with false. This is similar to toggle button concept. Please share your ideas or any link for reference.

Below are my files for single toggle button.

Priscription.js

   <SelectDeselectButton
     iconName={'briefcase-medical'}
     iconFamily={"FontAwesome5"}
     iconBgColor={COLOR_WHITE}
     iconColor={COLOR_BLACK}
     selectedColor={COLOR_ORANGE}
     iconSize={30}
     initialSelection={isButtonSelected}
     onClickEvent={(item) => setIsButtonSelected(item)}
     />

ToggleButton.js

   import React, { useState } from 'react';
   import { StyleSheet } from 'react-native'
   import {  View, Button, Icon } from "native-base";

   //RESPONSIVE
   import { useScreenDimensions } from '../../ORIENTATION/useOrientation'
   import { normalize } from '../../ORIENTATION/FontScale'
   import { COLOR_WHITE } from '../Constants/Colors'
   const SelectDeselectButton = ({iconName, iconBgColor, iconColor, iconFamily, iconSize, 
   selectedColor, onClickEvent, initialSelection}) =>
   {
   const screenData = useScreenDimensions();
   const screenWidth = screenData.width;
   const screenHeight = screenData.height;

   const [isSelected, setIsSelected] = useState(initialSelection);
   const styles = StyleSheet.create({

   button:
   {
    width: screenWidth > screenHeight ? screenHeight / 4.5 : screenWidth / 3.5,
    height: screenWidth > screenHeight ? '50%' : '42%',
    backgroundColor: isSelected ? selectedColor : iconBgColor,
    shadowOpacity: 0.25,
    shadowRadius: 5,
    shadowColor: 'gray',
    shadowOffset: { height: 0, width: 0 },
    elevation: 1,
    justifyContent:'center',
    alignItems:'center'
   },
   icon:
   {
    fontSize:screenWidth > screenHeight ? normalize(iconSize) : normalize(iconSize+8),
    color: isSelected ? COLOR_WHITE : iconColor,
   }
   })

   const buttonHandler = () =>
   {
    setIsSelected(!isSelected);
    if(onClickEvent !== null)
    onClickEvent(isSelected);
   }

   return(
    <View>
       <Button rounded style={styles.button} onPress={() => buttonHandler()}>
            <Icon name={iconName} style={styles.icon} type={iconFamily}/>
      </Button>
    </View>
   )
   }


   export default SelectDeselectButton;

Thanks in Advance.

Upvotes: 0

Views: 3114

Answers (1)

Thales Kenne
Thales Kenne

Reputation: 2942

Instead of having isSelected as a boolean, set is as the button name as a string. Then you just need to compare to the button name to check if it selected.

Toggle Button.js // I changed the component for simplicity

const toggleButton = (type) => {
  const buttonHandler = () =>
   {
    setIsSelected(type);
    if(onClickEvent !== null)
    onClickEvent(isSelected);
   }

   return(
     <View>
       <Button rounded style={isSelected === type ? styles.activeButton : styles.button} onPress={() => buttonHandler()}>
            <Icon name={iconName} style={styles.icon} type={iconFamily}/>
      </Button>
    </View>
   )
   }
}

Prescription.js

import ToggleButton from './ToggleButton'

...
   const [isSelected, setIsSelected] = useState('');   
   <ToggleButton type = 'Syringe' isSelected = {isSelected} setIsSelected={setIsSelected}/>
   <ToggleButton type = 'Pill' isSelected = {isSelected} setIsSelected={setIsSelected}/>
   <ToggleButton type = 'Syrup' isSelected = {isSelected} setIsSelected={setIsSelected}/>

The reason I'm passing isSelected and the handler is because you're going to control the state in the parent component so that all buttons use the same state.

Upvotes: 1

Related Questions