react-native-basic-elements
v1.1.19
Published
This package is for easy and fun coding
Downloads
32
Readme
react-native-basic-elements
Note: This README is only relevant to the latest version of our plugin. If you are using an older version, please switch to the relevant tag on our GitHub repo to view the docs for that particular version. This plugin provides basic components of React Native for Easy Design and smooth experience to your React Native app(s).
🎉 🎉 🎉Special Announcement: We launch a new package react-native-basic-element-generator for generating react native project with a pre-defined file structure and some necessary configuration. It is ready to use.🎉 🎉 🎉
Table of Contents
Getting Started
Follow the instruction given bellow
npm install react-native-basic-elementsAfter run this command you have successfully install this plugin. Now you have to install react-native-vector-icons because we use icon internally.
npm install --save react-native-vector-iconsAfter installing react-native-vector-icons you have to configure it. Read the configuration process of react-native-vector-icons
Components
CheckBox Component
Example
import React, { useState } from 'react'
import {CheckBox} from 'react-native-basic-elements';
const MyComponent = () => {
const [check, setCheck] = useState(false);
return (
<CheckBox
checked = {check}
onChange = {(val) => setCheck(val)}
size = {25}
>
)
}
Properties
| Props | Description | Default |
|-------------------|-------------------------------------------------------------------------------------|-----------|
| checked | This is the default value of CheckBox. Props type boolean | false |
| activeColor | This color show when checked is set to true | 'blue' |
| inactiveColor| This color show when checked is set to false | '#999' |
| tintColor | Color of check icon. | '#fff' |
| size | Size of checkBox | 16 |
| containerStyle| With this you can change the style of checkbox | undefined |
Method
| Props | Description |
|------------------------------|-------------------------------------------------------------------------------------|
| onChnage | This callback function is called when you click on checkbox. It returns boolean value|
RadioButton Component
Example
import React, { useState } from 'react'
import {RadioButton} from 'react-native-basic-elements';
const MyComponent = () => {
const [selected, setSelected] = useState(false);
return (
<RadioButton
selected = {selected}
onChange = {(val) => setSelected(val)}
size = {25}
>
)
}
Properties
| Props | Description | Default |
|-------------------|-------------------------------------------------------------------------------------|-----------|
| selected | This is the default value of RadioButton. Props type boolean | false |
| activeColor | This color show when selected is set to true | 'blue' |
| inactiveColor| This color show when selected is set to false | '#999' |
| size | Size of RadioButton | 20 |
| containerStyle| With this you can change the style of RadioButton | undefined |
Method
| Props | Description |
|------------------------------|-------------------------------------------------------------------------------------|
| onChnage | This callback function is called when you click on RadioButton. It returns boolean value|
Card Component
This is a card with pre-styled and clickable.
Example
import {Card} from 'react-native-basic-elements';
const MyComponent = () => {
return (
<Card>
{/* Your JSX Elements */}
</Card>
)
}Properties
| Props | Description | Default |
|-------------------|-------------------------------------------------------------------------------------|-----------|
| style | For styling the card. | undefined |
| shadow | This is for enabling or disabling pre defined shadow. Also you can overwrite them with defining shadow in style. It take boolean value. | true |
And it also support all View and Pressable props.
StatusBar Component
This is for status bar that configured on android and ios both.
Example
import {StatusBar} from 'react-native-basic-elements';
const MyComponent = () => {
return (
<StatusBar
backgroundColor={'green'}
barStyle = 'light-content'
/>
)
}Properties
| Props | Description | Default |
|-------------------|-------------------------------------------------------------------------------------|-----------|
| backgroundColor | For statusbar color. | #fff |
| barStyle | For StatusBar content color. Value type enum('dark-content', 'light-content') | 'dark-content' |
| **hidden** | This is used for show or hide the statusbar. | false |
| **translucent` | If the status bar is translucent. When translucent is set to true, the app will draw under the status bar. This is useful when using a semi transparent status bar color. | false |
Text Components
import {Container, Text} from 'react-native-basic-elements';
const MyComponent = () => {
return (
<Container
style = {{
alignItems: 'center'
}}
>
<Text>
This is my Text
</Text>
<Text.Heading
title='This is my Heading'
/>
<Text.SubHeading
title='This is my SubHeading'
/>
</Container>
)
}
export default MyComponent;We have 3 types of pre-configured Text Components bellow :
Text
It's same as react-native Text component but it takes color autometic from theme.
Heading & SubHeading
| Props | Description |
|-------------------|------------------------------------------------------------|
| title | It takes string in title. |
| style | It is for styling the text. |
And all Text props are available in those components.
Accordion
Example
import { Accordion } from 'react-native-basic-components';
const MyComponent = () => {
return (
<Accordion
leftIcon={{
name: 'home',
size: 25
}}
title='Home'
containerStyle={{
margin: 10
}}
shadow={true}
>
{/* your design */}
</Accordion>
)
}
export default MyComponent;Properties
| Props | Description | Default |
|-------------------|-------------------------------------------------------------------------------------|-----------|
| title | Title of the accordion. | undefined |
| leftIcon | Icon in the left side of the Title. Type of Icon Props | undifined |
| openIcon | It is used for right indicator when accordion is oppned | 'chevron-up' |
| closeIcon | It is used for right indicator when accordion is closed | 'chevron-down' |
| titleStyle | Style for title. | undefined |
| containerStyle | Style for accordion container | undefined |
| inputStyle | Style for accordion Input | undefined |
| shadow | If it is true then accordion has a shadow | false |
| customElement | You can add custom components from here. | undefined |
| bottomElement | You can add bottom components that is visiable when accordion is opened | undefined |
Accordion-Item
Example
import { Accordion } from 'react-native-basic-components';
const MyComponent = () => {
return (
<Accordion
leftIcon={{
name: 'home',
size: 25
}}
title='Home'
containerStyle={{
margin: 10
}}
shadow={true}
>
<Accordion.Item
title='Home 1'
leftIcon={{
name: 'thumbs-up',
type: 'Feather'
}}
/>
<Accordion.Item
title='Home 2'
leftIcon={{
name: 'upload',
type: 'Feather'
}}
/>
<Accordion.Item
title='Home 2'
leftIcon={{
name: 'upload',
type: 'Feather'
}}
/>
</Accordion>
)
}
export default MyComponent;
Properties
| Props | Description | Default |
|-------------------|-------------------------------------------------------------------------------------|-----------|
| title | Title of the accordion item. | undefined |
| leftIcon | Icon in the left side of the Title. Type of Icon Props | undifined |
| titleStyle | Style for title. | undefined |
| style | Style for accordion item container | undefined |
| leftSpacing | If it is true then the item take some spacing from left | true |
Accordion-Custom
Example
import { Accordion } from 'react-native-basic-components';
const MyComponent = () => {
return (
<Accordion
leftIcon={{
name: 'home',
size: 25
}}
title='Home'
containerStyle={{
margin: 10
}}
shadow={true}
>
<Accordion.Custom
children={<View
style={{
height: 200,
flex: 1,
borderWidth: 1
}}
/>}
/>
</Accordion>
)
}
export default MyComponent;Properties
| Props | Description | Default |
|-------------------|-------------------------------------------------------------------------------------|-----------|
| style | Style for accordion item container | undefined |
| leftSpacing | If it is true then the item take some spacing from left | true |
| children | This is the custom children | required |
Dropdown Picker
Select Dropdown
Example
import {Picker} from 'react-native-basic-components';
const MyComponent = () => {
const [dropdownValue, setDropdownValue] = useState('');
return (
<Picker
options={[
{
label: 'Item 1',
value: 'item1'
},
{
label: 'Item 2',
value: 'item2'
},
{
label: 'Item 3',
value: 'item3'
},
{
label: 'Item 4',
value: 'item4'
},
{
label: 'Item 5',
value: 'item5'
},
]}
placeholder="PlaceHolder"
textStyle={{
fontSize: 15
}}
selectedValue={dropdownValue}
onValueChange={(val) => setDropdownValue(val)}
/>
)
}Properties
| Props | Description | Default |
|-------------------|-------------------------------------------------------------------------------------|-----------|
| style | Style of the Picker Component. | undefined |
| options | It takes an Array as options for the picker. | [] |
| placeholder | Placeholder for the Picker Input | undefined |
| showPlaceholder | Show the placeholder or not. | undefined |
| labelKey | It takes that key as the lebel key from options Array |'label' |
| valueKey | It takes that key as the value key from options Array |'value' |
| selectedValue | It takes the defalut value(Required) |'' |
| mode | This is the mode of the Picker. Value type enum('dropdown', 'dialog') |dropdown |
| **containerStyle** | This is the Style of the input container |undefined |
| **iosModalBackGroundColor** | This is for ios. It change the modal background color. |Theme card color |
| **onValueChange** | Callback that is called when the picker change it's value. Changed item value is passed as a single string argument to the callback handler. |undefined |
| **dropdownIconColor` | On Android, specifies color of dropdown triangle. |undefined |
Multi Select Dropdown
Example
import {Picker} from 'react-native-basic-components';
const MyComponent = () => {
const [dropdownValue, setDropdownValue] = useState([]);
return (
<Picker.Multi
options={[
{
label: 'Item 1',
value: 'item1'
},
{
label: 'Item 2',
value: 'item2'
},
{
label: 'Item 3',
value: 'item3'
},
{
label: 'Item 4',
value: 'item4'
},
{
label: 'Item 5',
value: 'item5'
},
{
label: 'Item 6',
value: 'item6'
},
{
label: 'Item 7',
value: 'item7'
},
{
label: 'Item 8',
value: 'item8'
},
{
label: 'Item 9',
value: 'item9'
},
{
label: 'Item 10',
value: 'item10'
},
]}
returnDataType={(item) => { return {value: item.value} }}
onValueChange={(val) => {
setDropdownValue(val)
}}
selectedValues={dropdownValue}
/>
)
}Properties
| Props | Description | Default |
|-------------------|-------------------------------------------------------------------------------------|-----------|
| modalContainerStyle | Style for modal container. | undefined |
| options | It takes an Array as options for the picker. | [] |
| placeholder | Placeholder for the Picker Input | undefined |
| placeholderStyle | Style for picker placeholder. | undefined |
| labelKey | It takes that key as the lebel key from options Array |'label' |
| valueKey | It takes that key as the value key from options Array |'value' |
| selectedValues | It takes the defalut value(Required) |[] |
| closeIcon | Modal Close Icon. Type of Icon Props |undefined |
| modalHeading | Heading of the Selection modal |'Choose' |
| modalHeadingTitle | Heading text style of the Selection modal |undefined |
| itemContainerStyle | This is the Item List style. |undefined |
| itemTextStyle | This is the Item List text style. |undefined |
| selectedIcon | This is the selected item icon. Type of Icon Props |undefined |
| itemTextStyle | This is the Item List text style. |undefined |
| onValueChange | Callback that is called when the picker change it's value. Changed item value is passed as a single string argument to the callback handler. |undefined |
| returnDataType | Takes an item from options, and which data type you return that will be give as value in onValueChange. |(item) => {return item[valueKey]} |
Custom Select Dropdown
Example
import {Picker} from 'react-native-basic-components';
const MyComponent = () => {
const [dropdownValue, setDropdownValue] = useState([]);
return (
<Picker.Custom
selectedValue={dropdownValue}
options={[
{
label: 'Item 1',
value: 'item1'
},
{
label: 'Item 2',
value: 'item2'
},
{
label: 'Item 3',
value: 'item3'
},
{
label: 'Item 4',
value: 'item4'
},
{
label: 'Item 5',
value: 'item5'
},
{
label: 'Item 6',
value: 'item6'
},
{
label: 'Item 7',
value: 'item7'
},
{
label: 'Item 8',
value: 'item8'
},
{
label: 'Item 9',
value: 'item9'
},
{
label: 'Item 10',
value: 'item10'
},
]}
placeholder='Dropdown'
renderItem={(item, index, onPress, isSelected) => {
return (
<Pressable
style={{
height: 50,
justifyContent: 'center',
paddingHorizontal: 10,
backgroundColor: isSelected ? 'green' : undefined
}}
onPress={onPress}
>
<Text>{item['label']}</Text>
</Pressable>
)
}}
onValueSelect={setDropdownValue}
/>
)
}Properties
| Props | Description | Default |
|-------------------|-------------------------------------------------------------------------------------|-----------|
| inputStyle | Style for dropdown input. | undefined |
| inputTextStyle | Text Style of dropdown input. | undefined |
| selectedValue | It takes the defalut value(Required) |'' |
| placeholder | Placeholder for the Picker Input | undefined |
| placeholderColor | Color for picker placeholder. | '#999' |
| options | It takes an Array as options for the picker. | [] |
| labelKey | It takes that key as the lebel key from options Array |'label' |
| valueKey | It takes that key as the value key from options Array |'value' |
| backdropColor | It is the color of backdrop. |'#000000' |
| backdropOpacity | It is opacity of the color of backdrop. |0.5 |
| backdrop | It takes a boolean value to ensure that backdrop is shown or not |true |
| modalContainerStyle | Style for modal container. | undefined |
| modalBackgroundColor | Background Color for modal container. | '#ffffff |
| closeIcon | Modal Close Icon. Type of Icon Props |undefined |
| inputRightIcon | Input Right Icon. Type of Icon Props |undefined |
| modalHeading | Heading of the Selection modal |'Choose' |
| modalHeadingTitle | Heading text style of the Selection modal |undefined |
| modalHeaderShadow | Show the header shadow or not. |true |
| showHeader | Show the header or not. |true |
| onValueSelect | Callback that is called when the picker change it's value. Changed item value is passed as a single string argument to the callback handler. |undefined |
| renderItem | It's a function. From it, you should return a ReactElement that will show in the modal as an item. |undefined |
Outline Select Dropdown
Example
import {Picker} from 'react-native-basic-components';
const MyComponent = () => {
const [dropdownValue, setDropdownValue] = useState([]);
return (
<Picker.Outline
selectedValue={dropdownValue}
options={[
{
label: 'Item 1',
value: 'item1'
},
{
label: 'Item 2',
value: 'item2'
},
{
label: 'Item 3',
value: 'item3'
},
{
label: 'Item 4',
value: 'item4'
},
{
label: 'Item 5',
value: 'item5'
},
{
label: 'Item 6',
value: 'item6'
},
{
label: 'Item 7',
value: 'item7'
},
{
label: 'Item 8',
value: 'item8'
},
{
label: 'Item 9',
value: 'item9'
},
{
label: 'Item 10',
value: 'item10'
},
]}
placeholder='Dropdown'
renderItem={(item, index, onPress, isSelected) => {
return (
<Pressable
style={{
height: 50,
justifyContent: 'center',
paddingHorizontal: 10,
backgroundColor: isSelected ? 'green' : undefined
}}
onPress={onPress}
>
<Text>{item['label']}</Text>
</Pressable>
)
}}
onValueSelect={setDropdownValue}
/>
)
}Properties
| Props | Description | Default |
|-------------------|-------------------------------------------------------------------------------------|-----------|
| inputStyle | Style for dropdown input. | undefined |
| borderWidth | Style for border width . | 1 |
| inputTextStyle | Text Style of dropdown input. | undefined |
| selectedValue | It takes the defalut value(Required) |'' |
| placeholder | Placeholder for the Picker Input | undefined |
| activeBorderColor | This is the color of the input border when the input is Focused | 'blue' |
| inactiveBorderColor | This is the color of the input border when the input is not Focused | '#000' |
| placeholderColor | Color for picker placeholder. | '#999' |
| placeholderTextStyle | This is tha style for styling the placeholder text. | '#999' |
| options | It takes an Array as options for the picker. | [] |
| labelKey | It takes that key as the lebel key from options Array |'label' |
| valueKey | It takes that key as the value key from options Array |'value' |
| backdropColor | It is the color of backdrop. |'#000000' |
| backdropOpacity | It is opacity of the color of backdrop. |0.5 |
| backdrop | It takes a boolean value to ensure that backdrop is shown or not |true |
| modalContainerStyle | Style for modal container. | undefined |
| modalBackgroundColor | Background Color for modal container. | '#ffffff |
| containerStyle | It is the style of the whole container including. | none |
| closeIcon | Modal Close Icon. Type of Icon Props |undefined |
| inputRightIcon | Input Right Icon. Type of Icon Props |undefined |
| modalHeading | Heading of the Selection modal |'Choose' |
| modalHeadingTitle | Heading text style of the Selection modal |undefined |
| modalHeaderShadow | Show the header shadow or not. |true |
| placeholderTextSize | Show the header shadow or not. |18 |
| showHeader | Show the header or not. |true |
| modalHeadingTitleStyle | It is the style of Modal Heading. |undefine |
| onValueSelect | Callback that is called when the picker change it's value. Changed item value is passed as a single string argument to the callback handler. |undefined |
| renderItem | It's a function. From it, you should return a ReactElement that will show in the modal as an item. |undefined |