react-native-custom-components-abbacus
v1.0.5
Published
Custom component
Downloads
5
Maintainers
Readme
This package contains following components
- Switch (Switch component will looks same on both android and iOS platforms)
- Cardview
- Dropdown (Dropdown with search functionality & multiple selection)
import {ToggleSwitch,Cardview,DropDown} from 'react-native-custom-components-abbacus';
// How to use switch component
<ToggleSwitch
isOn={boolean} // provide true or false value (true = switch on, false = switch off)
onToggle={() => { someLogicalFunctionHere()}} // this function calls every time after changing the isOn value
trackColor = {'green'},
borderColor = {'white'},
borderWidth= {1},
toggleWheelColor = {'yellow}
/>
// How to use cardview component
<Cardview
shadowColor={'#000000'} // if you want to apply shadow color to cardview then pass color code here (optional)
backgroundColor={'#00000009'}
borderRadius: 5, //optional
// pass the component to view property which shows inside cardview
view={renderCard} />
function renderCard(){
return(
<Text>This is cardview content</Text>
)
}
// How to use Dropdown.
const [selectedData,setSelectedData] = useState(null)
<DropDown dropdownData={[{id:1,city:'Ahmedabad',state :'Gujarat'},{id:2,city:'Bhavnagar',state :'Gujarat'},{id:3,city:'Mumbai',state :'Maharastra'}]}
searchViewStyle={{backgroundColor : 'white',borderRadius:5}}
label={'Select City'}
isSearch={true}
displayField={'city'}
selectedData={setSelectedData}
buttonText={'Button Text'}
buttonStyle={{borderRadius : 5}}
buttonTextStyle={{color :'white',fontFamily : fontFamily}}
buttonAction={()=> yourFunction()}
dropdownItemTextStyle={{fontFamily:fontFamily}}
isMultiSelection = {true}
/>