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.🎉 🎉 🎉

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

react-native-basic-elements

react-native-basic-elements

Table of Contents

Getting Started

Components

CheckBox Component

Example

Properties

Method

RadioButton Component

Example

Properties

Method

Card Component

Example

Properties

StatusBar Component

Example

Properties

Text Components

Text

Heading & SubHeading

Accordion

Example

Properties

Accordion-Item

Example

Properties

Accordion-Custom

Example

Properties

Dropdown Picker

Select Dropdown

Example

Properties

Multi Select Dropdown

Example

Properties

Custom Select Dropdown

Example

Properties

Outline Select Dropdown

Example

Properties

Readme

Keywords

Package Sidebar

Install

Repository

Homepage

DownloadsWeekly Downloads

Version

License

Unpacked Size

Total Files

Last publish

Collaborators

Weekly Downloads