react-native-basic-elements v1.1.19

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

Method

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

Method

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

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

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

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

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

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

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

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

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

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