react-native-unicorn v1.2.2

react-native-unicorn

A customizable UI component library for react-native and expo

Installation

npm i react-native-unicorn

Usage

Components available in this library are as follows:

Components

The Accordion component is a versatile, customizable accordion-style list component for React Native applications. It allows you to display a list of items with expandable content sections.

The component accepts the following props:

Example

import Accordion from 'react-native-unicorn/accordion'

  <Accordion
    data={[
      {
        title: 'First Item',
        component: <Text>First Item Content</Text>,
        expanded: false,
      },
      {
        title: 'Second Item',
        component: <Text>Second Item Content</Text>,
        expanded: false,
      },
    ]}
    viewStyle="bg-white"
    textStyle={{ color: 'blue' }}
    dividerColor="red"
    pageSize={5}
    pageButtonStyle="bg-blue-500"
  />

The Avatar component is a customizable image component for React Native applications. It allows you to display user avatars or other images in different shapes and sizes.

The component accepts the following props:

Example

import Avatar from 'react-native-unicorn/avatar'

  <Avatar
    source={{ uri: 'https://example.com/avatar.jpg' }}
    variant="circle"
    size={100}
    style="bg-blue-500"
  />

The BarGraph component is a customizable bar graph component for React Native applications. It allows you to display a bar graph with different statuses based on the percentage provided.

The component accepts the following props:

Example

import BarGraph from 'react-native-unicorn/bar-graph'

  <BarGraph
    percentage={75}
    barColor="[#E4959E]"
    inactiveColor="neutral-100"
  />

The BouncingDots component is a customizable loading animation component that displays a series of dots that bounce in a sequence, creating a smooth loading animation.

The component accepts the following props:

Example

import BouncingDots from 'react-native-unicorn/dots'

  <BouncingDots
    dots={5}
    colors={['red', 'green', 'blue', 'yellow', 'purple']}
    size={15}
    bounceHeight={15}
  />

The Card component is a customizable card component that allows you to display content within a styled card layout.

The component accepts the following props:

Example

import Card from 'react-native-unicorn/card'

  <Card viewStyle={'p-2 m-4 justify-center flex-1'}>
    <View style={{ height: 50, justifyContent: 'center' }}>
      <Text>This is a card.</Text>
    </View>
  </Card>  

The Carousel component is a customizable carousel component that allows you to display a list of items in a horizontally scrollable carousel layout.

The component accepts the following props:

Example

import Carousel from 'react-native-unicorn/dots'

  <Carousel
    data={[{ title: 'Item 1' }, { title: 'Item 2' }, { title: 'Item 3' }]}
    renderComponent={(item, index) => <Text>{item.title}</Text>}
    autoplayInterval={5000}
  />

The Checkbox component is a customizable checkbox component that allows you to display a list of items in a horizontally scrollable checkbox layout.

The component accepts the following props:

Example

import Checkbox from 'react-native-unicorn/checkbox';

<View
  style={{
    width: Dimensions.get('window').width,
    padding: 5,
    justifyContent: 'center',
    alignItems: 'center',
    alignSelf: 'center',
  }}
>
  <Checkbox
    label={'Default Checked'}
    onSelect={() => {}}
    color="blue-500"
    isChecked={true}
  />
  <Checkbox
    label={'Default Unchecked'}
    onSelect={() => {}}
    color="red-500"
    isChecked={false}
  />
</View>

The CircularGraph component is a customizable circularGraph component that allows you to display a list of items in a horizontally scrollable circularGraph layout.

The component accepts the following props:

Example

import CircularGraph from 'react-native-unicorn/circular-graph';

<View
  style={{
    width: Dimensions.get('window').width,
    padding: 5,
    justifyContent: 'center',
    alignItems: 'center',
    alignSelf: 'center',
  }}
>
  <CircularGraph
    percentage={25}
    radius={35}
    strokeWidth={12}
    strokeColor="#048BA8"
    displayText={true}
  />
  <CircularGraph
    strokeColor="#F18F01"
    percentage={35}
    radius={35}
    strokeWidth={12}
    displayText={true}
  />
  <CircularGraph
    percentage={75}
    radius={35}
    strokeWidth={12}
    displayText={true}
  />
</View>

The Countdown component is a customizable countdown component that allows you to display a countdown timer that triggers a callback function when the time is up.

The component accepts the following props:

Example

import Countdown from 'react-native-unicorn/countdown';

<View
  style={{
    width: Dimensions.get('window').width,
    padding: 5,
    justifyContent: 'center',
    alignItems: 'center',
    alignSelf: 'center',
  }}
>
  <Countdown
    seconds={120}
    onTimeUp={() => {
      Alert.alert("Time's up!");
    }}
  />
</View>

The CounterBox component is a customizable CounterBox component that allows you to display a counter with increment and decrement buttons.

The component accepts the following props:

Example

import CounterBox from 'react-native-unicorn/counterBox';

<View
  style={{
    width: Dimensions.get('window').width,
    padding: 5,
    justifyContent: 'center',
    alignItems: 'center',
    alignSelf: 'center',
  }}
>
  <CounterBox
    onTextChanged={(value) => console.log(`Counter value is ${value}`)}
    counterValue={10}
    title="Quantity"
    textStyle={{ fontSize: 20 }}
    viewStyle="bg-red-500"
    />
</View>

The CustomInput component is a customizable TextInput component that allows you to display a text input field with optional icon, placeholder, and custom styles.

The component accepts the following props:

Example

import Input from 'react-native-unicorn/custom-input';

<View
  style={{
    width: Dimensions.get('window').width,
    padding: 5,
    justifyContent: 'center',
    alignItems: 'center',
    alignSelf: 'center',
  }}
>
  <Input
    variant="medium"
    placeholder="Medium Input"
    onTextChange={(text: string) => {
      console.log(text);
    }}
  />
</View>

The DropDown component is a customizable dropdown component that displays a dropdown list with selectable options, each of which can have an optional icon.

The component accepts the following props:

Example

import DropDown from 'react-native-unicorn/dropdown';

<View
  style={{
    width: Dimensions.get('window').width,
    padding: 5,
    justifyContent: 'center',
    alignItems: 'center',
    alignSelf: 'center',
  }}
>
  <DropDown
    options={[
        { id: '1', label: 'Option 1', value: '1', icon: <Icon name="home" /> },
        { id: '2', label: 'Option 2', value: '2' },
    ]}
    onSelect={(value) => console.log(`Selected value is ${value}`)}
    title="Select an option"
    />
</View>

The Grid component is a customizable grid component that displays a table-like structure with rows and columns.

The component accepts the following props:

Example

import { Grid } from 'react-native-unicorn/grid';

<Grid
  data={[
    { id: '1', name: 'John Doe', age: 30 },
    { id: '2', name: 'Jane Doe', age: 25 },
  ]}
  columns={['ID', 'Name', 'Age']}
  keys={['id', 'name', 'age']}
/>

The OTPInput component is a customizable One-Time Password (OTP) input component that displays a series of input fields for OTP entry. Long pressing on the first cell allows users to paste the OTP in all the cells.

The component accepts the following props:

Example

import { OTPInput } from './otp-input';

<OTPInput
  length={6}
  onOtpChange={(value) => console.log(`OTP value is ${value}`)}
  incorrect={false}
  textStyle={{ color: 'black', fontSize: 16 }}
/>

The PasswordInput component is a customizable password input component for React Native applications. It allows you to display a password input field with an integrated show/hide password toggle.

The component accepts the following props:

Example

import { PasswordInput } from './password-input';

  <PasswordInput
    onChangePassword={(text: string) => console.log(text)}
  />

The PhoneNumberInput component is a customizable phone number component that allows you to display a phone number input field with an integrated country code picker.

The component accepts the following props:

Example

import { PhoneNumberInput } from './phone-input';

  <PhoneNumberInput
    onPhoneNumberChange={(text: string) => console.log(text)}
  />

  <PhoneNumberInput
     onPhoneNumberChange={(text: string) => console.log(text)}

     viewStyle="my-4"
     codes={['KE', 'UG', 'TZ']}
  />

The RadioButton component is a customizable radio button that allows you to display a group of radio buttons with selectable options.

The component accepts the following props:

Example

import { RadioButton } from './radio-button';

  <RadioButton
    data={[
      { id: '1', label: 'Option 1' },
      { id: '2', label: 'Option 2' },
    ]}
    onSelect={(item: any) => {
                console.log(item.name);
              }}
    type={''}
    orientation={'row'}
  />

The VerticalStepper component is a customizable vertical stepper component for React Native applications. It allows you to display a series of steps in a vertical layout.

The component accepts the following props:

Example

import { VerticalStepper } from './vertical-stepper';

<VerticalStepper
  steps={[
    { title: 'Step 1', component: <Text>Step 1 Content</Text> },
    { title: 'Step 2', component: <Text>Step 2 Content</Text>, pointStyle: 'bg-red-500' },
  ]}
  viewStyle="bg-blue-500 my-5"
/>

In this example, the VerticalStepper component is used to display a vertical stepper with two steps: 'Step 1' and 'Step 2'. The content of each step is a Text component. The point of 'Step 2' has a red background. The container view of the stepper has a blue background. The text in the stepper is white and has a font size of 16.