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:

| Component | Description | | :------------- | :------------------------- | | Accordion| A customizable accordion-style list component for React Native applications. It allows you to display a list of items with expandable content sections. | |Avatar| A customizable image component for displaying user avatars or other images in different shapes and sizes. | |Bar Graph| A customizable bar graph component that allows you to display a bar graph. | |Bouncing Dots| A customizable loading animation component for that displays a series of dots bounce in a sequence | |Card| A customizable card component that allows you to display content within a styled card layout.| |Carousel| A customizable carousel component that allows you to display a list of items in a horizontally scrollable carousel layout.| |Checkbox| A customizable checkbox component allows you to display a checkbox with a label.| |Circular Graph| A a customizable circular graph component that allows you to display a circular progress graph with an optional percentage label in the center. | |Countdown Timer| A is a customizable countdown component that allows you to display a countdown timer that triggers a callback function when the time is up. | |Counter Box| A customizable counter component that allows you to display a counter with increment and decrement buttons.| |Input| A customizable Text Input component that allows you to display a text input field with optional icon, placeholder, and custom styles.| |DropDown| A customizable dropdown component that displays a dropdown list with selectable options, each of which can have an optional icon. | |Grid| A customizable grid component that displays a table-like structure with rows and columns.| |OTP Input| A customizable One-Time Password (OTP) input component that displays a series of input fields for OTP entry.| |Password Input| A customizable password input component.| |Phone Input| A customizable phone number component that allows you to display a phone number input field with an integrated country code picker| |Radio Button| A customizable radio button that allows you to display a group of radio buttons with selectable options.| |Vertical Stepper| A customizable vertical stepper component.|

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:

| Props | Description | | :-------- | :------------------------- | |data | An array of objects, where each object represents an accordion item. Each object should have the following properties:title: The title of the accordion item. component: The content to be displayed when the accordion item is expanded. expanded: A boolean indicating whether the accordion item is initially expanded or not.| |viewStyle| A string representing additional Tailwind CSS classes to be applied to the accordion item container.| |textStyle| A TextStyle object for customizing the style of the accordion item title. It uses default css| |dividerColor| A string representing the color of the divider line that appears when an accordion item is expanded.| |pageSize| A number representing the number of accordion items to be displayed per page. If this prop is provided, pagination buttons will be displayed.|

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:

| Props | Description | | :-------- | :------------------------- | |source| The image source for the avatar. This can be a local asset or a URL to a remote image.| |variant| The shape of the avatar. This can be one of the following::'circle': The avatar will be displayed as a circle.'square': The avatar will be displayed as a square.'drop': The avatar will be displayed as a droplet shape, with a rounded top and a flat bottom.| |size| The size of the avatar in pixels. This will determine both the width and the height of the avatar.| |style| Additional Tailwind CSS classes to be applied to the avatar.|

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:

| Props | Description | | :-------- | :------------------------- | |percentage| A number representing the percentage to be displayed by the bar graph. This value should be between 0 and 100.| |barColor| An optional string representing the color of the active bars in the graph. If not provided, the default color will be used.| |inactiveColor| An optional string representing the color of the inactive bars in the graph. If not provided, the default color will be used.|

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:

| Props | Description | | :-------- | :------------------------- | |dots| The number of dots to display. Default is 3.| |colors| An array of colors for the dots.| |size| The size of the dots in pixels. Default is 10.| |bounceHeight| The height of the bounce in pixels. Default is 10.| |borderRadius| The border radius of the dots. If not provided, the dots will be circular.| |components| An array of custom components to use instead of dots.|

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:

| Props | Description | | :-------- | :------------------------- | |children|The content to be displayed within the card.| |viewStyle|An optional string representing additional Tailwind CSS classes to be applied to the card.| |props|Any additional props to be passed to the underlying TouchableOpacity component.|

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:

| Props | Description | | :-------- | :------------------------- | |data|An array of items to be displayed in the carousel.| |renderComponent|The component to be rendered in ths carousel| |autoplayInterval|An optional number representing the interval (in milliseconds) at which the carousel should automatically scroll to the next item. Default is 3000 (3 seconds).|

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:

| Props | Description | | :-------- | :------------------------- | |label| The label to be displayed next to the checkbox.| |onSelect| A function that is called when the checkbox is selected or deselected. The function receives a boolean argument indicating whether the checkbox is checked.| |isChecked| An optional boolean indicating whether the checkbox is initially checked. Default is false.| |color| An optional string representing the color of the checkbox when it is checked. If not provided, the default color is used.| |width| An optional string representing the width of the checkbox. If not provided, the default width is '100%'.| |textStyle| An optional TextStyle object for customizing the style of the label.|

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:

| Props | Description | | :-------- | :------------------------- | |percentage| A number representing the percentage to be displayed by the circular graph. This value should be between 0 and 100.| |radius| The radius of the circular graph in pixels. |strokeWidth| The width of the stroke used to draw the circular graph in pixels.| |strokeColor| An optional string representing the color of the progress stroke. If not provided, the default color is used.| |displayText| An optional boolean indicating whether to display the percentage text in the center of the graph. Default is false.|

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:

| Props | Description | | :-------- | :------------------------- | |seconds|The initial number of seconds for the countdown.| |onTimeUp|A function that is called when the countdown reaches zero.| |textStyle|An optional TextStyle object for customizing the style of the countdown text.|

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:

| Props | Description | | :-------- | :------------------------- | |onTextChanged|A function that is called when the counter value changes. The function receives the new counter value as a string.| |counterValue|An optional number representing the initial value of the counter. Default is 1.| |title|An optional string representing the title to be displayed above the counter.| |textStyle|An optional TextStyle object for customizing the style of the counter text.| |viewStyle|An optional string representing additional Tailwind CSS classes to be applied to the counter.|

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:

| Props | Description | | :-------- | :------------------------- | |onTextChange|A function that is called when the text in the input field changes. The function receives the new text as a string.| |variant|A string representing the variant of the input field. This determines the height and multiline property of the input field. The accepted values are 'small', 'medium', and 'large'.| |placeholder|A string representing the placeholder text to be displayed in the input field.| |placeholderTextColor|An optional string representing the color of the placeholder text.| |viewStyle|An optional string representing additional Tailwind CSS classes to be applied to the input field.| |textStyle|An optional TextStyle object for customizing the style of the text in the input field.| |icon|An optional React Node to be displayed next to the input field.| |disabled|An optional boolean indicating whether the input field is disabled.| |caps|An optional boolean indicating whether the text in the input field should be auto-capitalized.| |length|An optional number representing the maximum length of the text in the input field.| |inputMode|An optional string representing the input mode of the input field.| |props|Any additional props to be passed to the underlying TextInput component.|

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:

| Props | Description | | :-------- | :------------------------- | |options|An array of objects representing the options to be displayed in the dropdown. Each object should have an id, label, and value property, and an optional icon property.| |onSelect|A function that is called when an option is selected. The function receives the value of the selected option.| |title|A string representing the title to be displayed on the dropdown button.| |viewStyle|An optional string representing additional Tailwind CSS classes to be applied to the dropdown button.| |textStyle|An optional TextStyle object for customizing the style of the text in the dropdown button and options.|

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:

| Props | Description | | :-------- | :------------------------- | |data|An array of objects representing the data to be displayed in the grid. Each object should have properties corresponding to the keys provided in the keys prop.| |columns|An array of strings representing the column headers of the grid.| |keys|An array of strings representing the keys of the data objects. The order of the keys determines the order of the columns in the grid.| |textStyle|An optional TextStyle object for customizing the style of the text in the grid cells.|

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:

| Props | Description | | :-------- | :------------------------- | |length|The number of digits in the OTP.| |value|The initial value of the OTP.| |onOtpChange|A function that is called when the OTP value changes. The function receives the new OTP value.| |incorrect|A boolean indicating whether the entered OTP is incorrect. If true, the input fields are highlighted in red.| |textStyle|An optional TextStyle object for customizing the style of the text in the input fields.| |viewStyle|An optional string representing additional Tailwind CSS classes to be applied to the container view of the input fields.|

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:

| Props | Description | | :-------- | :------------------------- | |onChangePassword|A function that is called when the password value changes. The function receives the new password value.| |placeholder|An optional string representing the placeholder text to be displayed in the input field.| |placeholderTextColor|An optional string representing the color of the placeholder text.| |textStyle|An optional TextStyle object for customizing the style of the text in the input field.| |viewStyle|An optional string representing additional Tailwind CSS classes to be applied to the container view of the input field.| |disabled|An optional boolean indicating whether the input field is disabled.| |props|An optional object containing additional TextInputProps to be passed to the TextInput component.|

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:

| Props | Description | | :-------- | :------------------------- | |onPhoneNumberChange|A function that is called when the phone number value changes. The function receives the new phone number value.| |placeholderTextColor|An optional string representing the color of the placeholder text.| |placeholder|An optional string representing the placeholder text to be displayed in the input field.| |textStyle|An optional TextStyle object for customizing the style of the text in the input field.| |viewStyle|An optional string representing additional Tailwind CSS classes to be applied to the container view of the input field.| |codeStyle|An optional string representing additional Tailwind CSS classes to be applied to the country code picker.| |props|An optional object containing additional TextInputProps to be passed to the TextInput component.| |disabled|An optional boolean indicating whether the input field is disabled.| |codes|An optional array of strings representing the country codes to be displayed in the country code picker.|

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:

| Props | Description | | :-------- | :------------------------- | |data|An array of objects representing the options to be displayed as radio buttons. Each object should have an id and label property.| |type|A string representing the type of the radio button.| |onSelect|A function that is called when a radio button is selected. The function receives the value of the selected option.| |orientation|A string representing the orientation of the radio buttons. It can be 'horizontal' or 'vertical'.| |viewStyle|An optional string representing additional Tailwind CSS classes to be applied to the container view of the radio buttons.| |textStyle|An optional TextStyle object for customizing the style of the text in the radio buttons.| |width|An optional string representing the width of the radio buttons.| |defaultSelected|An optional object representing the default selected option.|

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:

| Props | Description | | :-------- | :------------------------- | |steps|An array of objects representing the steps to be displayed in the stepper. Each object should have a title and component property, and an optional pointStyle property.| |viewStyle|An optional string representing additional Tailwind CSS classes to be applied to the container view of the stepper.| |textStyle|An optional TextStyle object for customizing the style of the text in the stepper.|

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.