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
• Components

Getting Started

Follow the instruction given bellow

npm install react-native-basic-elements

After 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-icons

After installing react-native-vector-icons you have to configure it. Read the configuration process of react-native-vector-icons

Components

• Theme
• Icon
• TextInput
  • AppTextInput
  • Outlined TextInput
• AppButton
• CheckBox
• RadioButton
• Card
• StatusBar

• List
• Dropdown Picker
  • Select Dropdown
  • Multi Select Dropdown
  • Custom Select Dropdown
  • Outline Select Dropdown
• Text Components
  • Text
  • Heading
  • SubHeading
• Accordion
  • Accordion Item

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