React Native Drivezy UI Components

Components

• View
• Text
• Button
• Checkbox
• FlatList
• Image
• ImageBackground
• RadioButton
• Switch
• TextInput
• TouchableOpacity
• ScrollView
• FormBuilder

Utils

• widthPercent
• heightPercent
• scaleText

Installation

$ yarn add react-native-drivezy-ui-components

Or

$ npm install --save react-native-drivezy-ui-components

Optional (recommended)

Link react-native-fast-image

$ yarn add react-native-fast-image

Setup

import {
  setColor,
  setTheme,
  widthPercent,
  heightPercent
} from "react-native-drivezy-ui-components";

setColor({
  PRIMARY: "#4c2d7c",
  PRIMARY_LIGHT: "#c0b9dd",
  SECONDARY: "#6345a2",
  SECODARY_LIGHT: "#6345a2",
  BACKGROUND: "#ffffff",
  SURFACE: "#ffffff",
  SUCCESS: "#5ad45a",
  WARNING: "#e67e22",
  ERROR: "#f15d61",
  TEXT_LIGHT: "#9b9b9b",
  TEXT_DARK: "#333333",
  TEXT_NORMAL: "#797979",
  ON_PRIMARY_TEXT: "#fff",
  BORDER: "#d4d4d4"
});

setTheme(COLORS => {
  return {
    Text: {
      primaryText: {
        color: COLORS.PRIMARY,
        fontSize: 24,
        fontWeight: "500"
      }
    },
    View: {
      box: {
        flex: 1,
        alignItems: "center",
        justifyContent: "center",
        backgroundColor: COLORS.BACKGROUND,
        width: widthPercent(50),
        height: heightPercent(50)
      }
    },
    Image: {
      icon: {
        width: 25,
        height: 25,
        resizeMode: "contain"
      }
    }
  };
});

Usage

import React from "react";
import { View, Text, Image } from "react-native-drivezy-ui-components";

function App() {
  return (
    <View theme="box">
      <Text theme="primaryText">Hello World</Text>
      <Image theme="icon" source={require("./image.png")} />
    </View>
  );
}

export default App;

Documentation

widthPercent

    {
        ...
        width: widthPercent(30) // returns 30% of screen width
    }

heightPercent

    {
        ...
        height: heightPercent(30) // returns 30% of screen height
    }

scaleText

NOTE: base device width id 375px

    {
        ...
        fontSize: scaleText(14)
    }

View

Use

import { View } from "react-native-drivezy-ui-components";

<View theme="themeName" style={styles.view} />;

Theme

{
 ...,
 View: {
   [theme-name]: {
    //view style
   }
 }
}

Text

Use

import { Text } from "react-native-drivezy-ui-components";

<Text theme="themeName" style={styles.text} />;

Theme

{
 ...,
 Text: {
   [theme-name]: {
    //text style
   }
 }
}

Button

Use

import { Button } from 'react-native-drivezy-ui-components';

<Button
    theme="themeName" OR ["themeEnabled", "themeDisabled"]
    containerStyle={styles.container}
    textStyle={styles.text}
>
  PRESS ME
</Button>

Theme

{
 ...,
 Button: {
   [theme-name]: {
    containerStyle: {
      //touchable opacity style
    },
    textStyle: {
      // text style
    }
   }
 }
}

Checkbox

Use

import { Checkbox } from "react-native-drivezy-ui-components";

<Checkbox
  theme="themeName"
  containerStyle={styles.container}
  checkboxStyle={styles.checkbox}
  checkedImage={require("./checked.png")}
  uncheckedImage={require("./unchecked.png")}
  label="Label"
  labelLines={1}
  checked={null}
  underlayColor={"transparent"}
  disabled={false}
  onChange={newState => {}}
/>;

Theme

{
 ...,
 Checkbox: {
   [theme-name]: {
    containerStyle: {
      //view style
    },
    checkboxStyle: {
      // image style
    },
    checkedImage: [IMAGESOURCE],
    uncheckedImage: [IMAGESOURCE]
   }
 }
}

FlatList

Use

import { FlatList } from "react-native-drivezy-ui-components";

<FlatList
  theme="themeName"
  style={styles.style}
  contentContainerStyle={styles.contentContainerStyle}
/>;

Theme

{
 ...,
 FlatList: {
   [theme-name]: {
    style: {
      //flat list style
    },
    contentContainerStyle: {
       //flat list content container style
    }
   }
 }
}

Image

Use

import { Image } from "react-native-drivezy-ui-components";

<Image theme="themeName" style={styles.style} />;

Theme

{
 ...,
 Image: {
   [theme-name]: {
     //image style
   }
 }
}

ImageBackground

Use

import { ImageBackground } from "react-native-drivezy-ui-components";

<ImageBackground theme="themeName" style={styles.style} />;

Theme

{
 ...,
 ImageBackground: {
   [theme-name]: {
     //image style
   }
 }
}

Dropdown

Use

import { Dropdown } from "react-native-drivezy-ui-components";

<Dropdown
  theme="themeName"
  textInputContainer={styles.textInput}
  containerStyle={styles.container}
  data={[1, 2, 3, 4, 5]}
/>;

Theme

{
 ...,
 Dropdown: {
   [theme-name]: {
     containerStyle:{
       //view style
     },
     listViewStyle: {

     }
   }
 }
}

RadioButton

Use

import { RadioButton } from 'react-native-drivezy-ui-components';

<RadioButton
    theme="themeName"
    style={styles.radioButton}
    radioButtons={[
      {
        label: '',
        data: '',
        selected: false
      },
      ...
    ]}
    onPress={(radioButtons) => {

    }}
/>

Theme

{
 ...,
 RadioButton: {
   [theme-name]: {
     color: '#fafafa',
     size: 14
   }
 }
}

ScrollView

Use

import { ScrollView } from "react-native-drivezy-ui-components";

<ScrollView
  theme="themeName"
  style={styles.style}
  contentContainerStyle={styles.contentContainerStyle}
/>;

Theme

{
 ...,
 ScrollView: {
   [theme-name]: {
    style: {
      //style
    },
    contentContainerStyle: {
       //content container style
    }
   }
 }
}

Switch

Use

import { Switch } from "react-native-drivezy-ui-components";

<Switch
  theme="themeName"
  style={styles.style}
  circleStyle={styles.circleStyle}
  with={250}
  height={100}
  value={true}
  onAsyncPress={newState => {}}
  onSyncPress={newState => {}}
/>;

Theme

{
 ...,
 Switch: {
   [theme-name]: {
    circleStyle: {
      //style
    },
    style: {
       //content container style
    }
   }
 }
}

TextInput

Use

import { TextInput } from 'react-native-drivezy-ui-components';

<TextInput
    theme="themeName"
    placeholder="enter your placeholder"
    containerStyle={styles.containerStyle}
    textInputStyle={styles.textInputStyle}
    leftContainerStyle={styles.leftContainerStyle}
    leftComponentStyle={styles.leftComponentStyle}
    rightContinerStyle={styles.rightContinerStyle}
    rightComponentStyle={styles.rightComponentStyle}
    leftComponent={() => <Component> OR require('')}
    rightComponent={() => <Component> OR require('')}
/>

Theme

{
 ...,
 TextInput: {
   [theme-name]: {
     containerStyle: {
        width: widthPercent(90),
        padding: 10,
        backgroundColor: 'white',
        elevation: 2,
        borderRadius: 7,
        justifyContent: 'center',
        alignItems: 'center'
      },
      textInputStyle: {
        flex: 1,
        height: 45
      },
      leftContainerStyle: {
        padding: 5
      },
      leftComponentStyle: {
        width: 25,
        height: 25,
        resizeMode: 'contain',
      },
      rightContinerStyle: {
        padding: 5
      },
      rightComponentStyle: {
        width: 25,
        height: 25,
        resizeMode: 'contain',
      }
   }
 }
}

TouchableOpacity

Use

import { TouchableOpacity } from "react-native-drivezy-ui-components";

<TouchableOpacity theme="themeName" style={styles.style} />;

Theme

{
 ...,
 TouchableOpacity: {
   [theme-name]: {
     //style
   }
 }
}

FormBuilder

Theme setup steps

import { setFormTheme } from "react-native-drivezy-ui-components";

setFormTheme({
  TextInput: "FormTextInputTheme",
  Checkbox: "FormCheckboxTheme",
  Label: "FormLabelTheme",
  FooterText: "FooterText",
  ErrorText: "ErrorText"
});

NOTE: Following FormTextInputTheme, FormCheckboxTheme, FooterText, ErrorText and FormLabelTheme themes must be in theme constants file

How to use

import { FormBuilder } from "react-native-drivezy-ui-components";

const formFields = [
  [
    {
      name: "cardNumber",
      label: "Card Number*",
      required: true,
      type: "TextInput",
      footerText: "UPI ID is of format 'mobilenumber@bank' or 'username@bank' ",
      componentProps: {
        keyboardType: "",
        placeholder: "Enter your card number"
      },
      validate: value => {
        if (value.length == 10) {
          return { valid: true };
        }

        return { valid: false, error: "Card number must be of 10 digits" };
      }
    }
  ],
  [
    {
      name: "nameOnCard",
      label: "Name on card*",
      required: true,
      type: "TextInput",
      componentProps: {
        keyboardType: "",
        placeholder: "Enter name on card"
      }
    }
  ],
  [
    {
      flex: 3,
      name: "expiry",
      label: "Expiry (MM/YY)*",
      required: true,
      type: "TextInput",
      componentProps: {
        keyboardType: "",
        placeholder: "MM/YY"
      },
      mask: value => ccDateMask(value)
    },
    {
      flex: 1,
      name: "cvv",
      label: "CVV",
      required: true,
      type: "TextInput",
      componentProps: {
        keyboardType: "",
        placeholder: "***"
      }
    }
  ],
  [
    {
      name: "save",
      label: "Save this card for faster checkout in future",
      type: "Checkbox"
    }
  ]
];

const defaultValue = {
  cardNumber: "",
  nameOnCard: "",
  expiry: "",
  cvv: "",
  save: false
};

const formRef = React.useRef(null);

<FormBuilder
  ref={formRef}
  formFields={fields}
  defaultValue={defaultValue}
  onSubmit={data => {
    console.log("got data", data);
  }}
/>;

<Button
  onPress={() => {
    if (formRef.current) {
      formRef.current.submit();
    }
  }}
>
  Submit
</Button>;