saqib-test-lib-rn

saqib-test-lib-rn is a React Native component library that includes a customizable Product component for displaying product information such as images, titles, and prices in an interactive way.

Installation

To install the package, use:

npm install saqib-test-lib-rn

or

yarn add saqib-test-lib-rn

Usage

Here is a basic example of how to use the Product component:

import React from 'react';
import { View } from 'react-native';
import { Product } from 'saqib-test-lib-rn';

const ExampleScreen = () => {
  const productData = {
    id: 1,
    title: 'Sample Product',

    price: 29.99,

    thumbnail: 'https://via.placeholder.com/150',
  };

  const handleProductPress = () => {
    console.log('Product pressed!');
  };

  return (
    <View>
      <Product
        product={productData}
        handlePress={handleProductPress}
        Style={{ backgroundColor: 'white' }}
        ImageStyle={{ height: 200 }}
        TitleStyle={{ fontSize: 18, fontWeight: 'bold' }}
        PriceStyle={{ color: 'green' }}
      />
    </View>
  );
};

export default ExampleScreen;

Props

The Product component accepts the following props:

| Prop Name | Type | Description | Required | Default | | ------------- | ------------ | ---------------------------------------------- | -------- | ------- | | handlePress | () => void | Function to handle press events on the product | Yes | N/A | | product | IProduct | Product data object containing various details | Yes | N/A | | Style | ViewStyle | Custom style for the product container | No | N/A | | ImageStyle | ImageStyle | Custom style for the product image | No | N/A | | TitleStyle | TextStyle | Custom style for the product title text | No | N/A | | PriceStyle | TextStyle | Custom style for the product price text | No | N/A |

Product Data (IProduct Interface)

The product prop is an object with the following structure:

interface IProduct {
  id: number;
  title: string;
  price: number;
  thumbnail: string;
}

Example Product Data:

const productData = {
  id: 1,
  title: 'Sample Product',
  price: 29.99,
  thumbnail: 'https://via.placeholder.com/400',
};

Button Component (saqib-test-lib-rn)

The Button component is a customizable, reusable button for React Native projects. It supports styles for both the button and the text, and can be disabled when necessary.

Installation

To install the package, use:

npm install saqib-test-lib-rn

or

yarn add saqib-test-lib-rn

Usage

Here is a basic example of how to use the Button component:

import React from 'react';
import { View } from 'react-native';
import { Button } from 'saqib-test-lib-rn';

const ExampleScreen = () => {
  const handleButtonPress = () => {
    console.log('Button pressed!');
  };

  return (
    <View>
      <Button
        title="Click Me"
        onPress={handleButtonPress}
        className={{ backgroundColor: 'blue' }}
        textClass={{ color: 'white' }}
        disabled={false}
      />
    </View>
  );
};

export default ExampleScreen;

Props

The Button component accepts the following props:

| Prop Name | Type | Description | Required | Default | | ----------- | ------------ | -------------------------------------- | -------- | ------- | | title | string | The text displayed on the button | Yes | N/A | | onPress | () => void | Function to handle button press events | No | N/A | | disabled | boolean | Disables the button when set to true | No | false | | className | ViewStyle | Custom style for the button container | No | N/A | | textClass | TextStyle | Custom style for the button text | No | N/A |

Default Styles

The component comes with the following default styles:

const styles = StyleSheet.create({
  button: {
    backgroundColor: '#4CAF50',
    padding: 12,
    borderRadius: 5,
    alignItems: 'center',
  },
  buttonText: {
    color: '#fff',
    fontSize: 16,
    fontWeight: '600',
  },
  disabled: {
    backgroundColor: '#ccc',
  },
});

CartProduct Component (saqib-test-lib-rn)

The CartProduct component is a flexible and customizable React Native component for displaying individual products in a shopping cart, complete with quantity controls and a delete option.

Installation

To install the package, use:

npm install saqib-test-lib-rn

or

yarn add saqib-test-lib-rn

Usage

Here is a basic example of how to use the CartProduct component:

import React from 'react';
import { View } from 'react-native';
import { CartProduct } from 'saqib-test-lib-rn';

const ExampleScreen = () => {
  const cartItem = {
    id: 1,
    title: 'Sample Cart Item',
    price: 29.99,
    quantity: 2,
    thumbnail: 'https://via.placeholder.com/150',
  };

  const handleDeleteItem = () => {
    console.log('Item deleted!');
  };

  const handleIncrement = () => {
    console.log('Increment item quantity!');
  };

  const handleDecrement = () => {
    console.log('Decrement item quantity!');
  };

  return (
    <View>
      <CartProduct
        item={cartItem}
        handleDelItem={handleDeleteItem}
        onIncrement={handleIncrement}
        onDecrement={handleDecrement}
        ContainerStyle={{ backgroundColor: 'white' }}
        ImageStyle={{ height: 100 }}
        TitleStyle={{ fontSize: 16 }}
        PriceStyle={{ color: 'green' }}
      />
    </View>
  );
};

export default ExampleScreen;

Props

The CartProduct component accepts the following props:

| Prop Name | Type | Description | Required | Default | | --------------------- | ------------ | ------------------------------------------ | -------- | ------- | | item | ICart | The cart item data | Yes | N/A | | handleDelItem | () => void | Function to handle item deletion | Yes | N/A | | onIncrement | () => void | Function to handle incrementing quantity | Yes | N/A | | onDecrement | () => void | Function to handle decrementing quantity | Yes | N/A | | ContainerStyle | ViewStyle | Custom style for the cart item container | No | N/A | | ImageContainerStyle | ViewStyle | Custom style for the image container | No | N/A | | ImageStyle | ImageStyle | Custom style for the product image | No | N/A | | InfoContainer | ViewStyle | Custom style for the information container | No | N/A | | TitleStyle | TextStyle | Custom style for the product title text | No | N/A | | PriceStyle | TextStyle | Custom style for the product price text | No | N/A | | DecrementStyle | ViewStyle | Custom style for the decrement button | No | N/A | | IncrementStyle | ViewStyle | Custom style for the increment button | No | N/A |

Default Styles

The component comes with the following default styles:

const styles = StyleSheet.create({
  container: {
    flexDirection: 'row',
    borderBottomWidth: 1,
    borderBottomColor: '#ccc',
    paddingVertical: 12,
    height: 'auto',
    justifyContent: 'space-between',
  },
  imageContainer: {
    width: '25%',
    height: '100%',
  },
  image: {
    width: '100%',
    height: 150,
    borderRadius: 10,
    backgroundColor: '#f0f0f0',
  },
  infoContainer: {
    width: '70%',
    flexDirection: 'column',
    justifyContent: 'space-between',
    marginLeft: 10,
  },
  header: {
    flexDirection: 'row',
    justifyContent: 'space-between',
  },
  title: {
    fontSize: 18,
    width: '80%',
    fontWeight: 'bold',
  },
  footer: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
    marginTop: 10,
    paddingBottom: 10,
  },
  quantityContainer: {
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'space-between',
    marginVertical: 10,
    paddingHorizontal: 15,
    paddingVertical: 10,
    backgroundColor: '#f9f9f9',
    borderRadius: 8,
  },
  button: {
    width: 40,
    height: 40,
    justifyContent: 'center',
    alignItems: 'center',
    borderRadius: 8,
  },
  buttonText: {
    fontSize: 20,
    color: 'white',
    fontWeight: 'bold',
  },
  quantityText: {
    fontSize: 18,
    fontWeight: 'bold',
    color: '#333',
    paddingHorizontal: 10,
  },
  priceText: {
    fontSize: 18,
    fontWeight: 'bold',
  },
});

CartSummary Component

The CartSummary component is designed to display a detailed order summary in a React Native application. It showcases order details such as the order value, delivery cost, and provides a button to proceed to checkout. Additionally, it includes payment icons and shipping information.

Installation

Install the library in your project:

npm install saqib-test-lib-rn

Usage

import React from 'react';
import { View } from 'react-native';
import { CartSummary } from 'saqib-test-lib-rn';

const items = [
  {
    id: 1,
    title: 'Product 1',
    price: 100,
    quantity: 2,
    thumbnail: 'https://example.com/image1.jpg',
    // Other product properties...
  },
  {
    id: 2,
    title: 'Product 2',
    price: 150,
    quantity: 1,
    thumbnail: 'https://example.com/image2.jpg',
    // Other product properties...
  },
];

export default function App() {
  return (
    <View>
      <CartSummary
        items={items}
        delivery={5}
        handlePress={() => console.log('Proceed to checkout')}
      />
    </View>
  );
}

Props

| Prop | Type | Required | Description | | ----------------- | ----------- | -------- | ----------------------------------------------------------------------------------------------------- | | items | ICart[] | Yes | List of cart items. Each item is an object containing product details (price, title, quantity, etc.). | | delivery | number | Yes | The delivery cost for the order. If set to 0, it shows as "Free". | | handlePress | function | No | Function to handle the checkout button press event. | | ContainerStyle | ViewStyle | No | Custom style for the container of the order summary. | | ButtonStyle | ViewStyle | No | Custom style for the checkout button. | | ButtonTextStyle | TextStyle | No | Custom style for the text inside the checkout button. |

Example

Here is how you can customize the CartSummary component using optional props:

<CartSummary
  items={items}
  delivery={5}
  handlePress={() => console.log('Checkout pressed')}
  ContainerStyle={{ backgroundColor: '#fff', padding: 20 }}
  ButtonStyle={{ backgroundColor: '#000' }}
  ButtonTextStyle={{ color: '#fff' }}
/>

Checkbox Component (saqib-test-lib-rn)

The Checkbox component is a flexible and customizable checkbox for React Native applications, allowing users to toggle between checked and unchecked states with a label for context.

Installation

To install the package, use:

npm install saqib-test-lib-rn

or

yarn add saqib-test-lib-rn

Usage

import React from 'react';
import { View } from 'react-native';
import { Checkbox } from 'saqib-test-lib-rn';

const ExampleScreen = () => {
  const handleCheckboxChange = (checked: boolean) => {
    console.log('Checkbox state:', checked);
  };

  return (
    <View>
      <Checkbox
        label="Accept terms and conditions"
        checked={true}
        onChange={handleCheckboxChange}
        ContainerStyle={{ marginVertical: 10 }}
        CheckboxStyle={{ borderColor: 'blue' }}
        TextStyle={{ fontSize: 16, color: 'black' }}
      />
    </View>
  );
};

export default ExampleScreen;

Props

The Checkbox component accepts the following props:

| Prop Name | Type | Description | Required | Default | | ---------------- | ---------------------------- | ------------------------------------------------ | -------- | ------- | | label | string | The label displayed next to the checkbox. | Yes | N/A | | checked | boolean | Initial checked state of the checkbox. | No | false | | onChange | (checked: boolean) => void | Function to handle the change of checkbox state. | No | N/A | | ContainerStyle | ViewStyle | Custom style for the checkbox container. | No | N/A | | CheckboxStyle | ViewStyle | Custom style for the checkbox appearance. | No | N/A | | TextStyle | TextStyle | Custom style for the label text. | No | N/A |

Example

Here is how you can customize the Checkbox component using the optional props:

<Checkbox
  label="Subscribe to newsletter"
  checked={false}
  onChange={(newChecked) => console.log('Checked state:', newChecked)}
  ContainerStyle={{ padding: 10 }}
  CheckboxStyle={{ borderColor: 'blue', backgroundColor: 'lightgray' }}
  TextStyle={{ color: 'darkblue', fontWeight: 'bold' }}
/>

In this example, the Checkbox component is configured with custom styles and an onChange handler that logs the new checked state whenever the user toggles the checkbox.

Default Styles

The component comes with the following default styles:

const styles = StyleSheet.create({
  container: {
    flexDirection: 'row',
    alignItems: 'center',
    marginBottom: 10,
  },
  checkbox: {
    width: 20,
    height: 20,
    borderWidth: 1,
    borderColor: '#ccc',
    borderRadius: 3,
    alignItems: 'center',
    justifyContent: 'center',
    marginRight: 8,
  },
  checked: {
    backgroundColor: '#4CAF50',
    borderColor: '#4CAF50',
  },
  checkmark: {
    width: 10,
    height: 10,
    backgroundColor: '#fff',
  },
  label: {
    fontSize: 16,
  },
});

CheckoutSummery Component (saqib-test-lib-rn)

The CheckoutSummery component is designed to display a summary of an order, including the list of items, delivery cost, and the subtotal. This component allows custom styling and layout for various elements like the container, image, title, and price.

Installation

Make sure you have the necessary dependencies installed in your project:

npm install

Usage

Here is an example of how to use the CheckoutSummery component:

import React from 'react';
import { CheckoutSummery } from 'saqib-test-lib-rn';

const orderItems = [
  {
    id: 1,
    title: 'Product 1',
    price: 20,
    quantity: 2,
    thumbnail: 'https://example.com/product1.jpg',
  },
  {
    id: 2,
    title: 'Product 2',
    price: 15,
    quantity: 1,
    thumbnail: 'https://example.com/product2.jpg',
  },
];

const App = () => {
  return <CheckoutSummery items={orderItems} delivery={5} />;
};

export default App;

Props

| Prop | Type | Description | | ---------------- | ------------ | ----------------------------------------------------------------------------------------- | | items | ICart[] | The array of items in the order, including title, price, quantity, and thumbnail. | | delivery | number | The delivery cost for the order. | | ContainerStyle | ViewStyle | Custom styles for the container wrapping the entire component. | | ImageStyle | ImageStyle | Custom styles for the product image. | | TitleStyle | TextStyle | Custom styles for the title text. | | PriceStyle | TextStyle | Custom styles for the price text. |

Example with Custom Styles

<CheckoutSummery
  items={orderItems}
  delivery={5}
  ContainerStyle={{ backgroundColor: '#f5f5f5', padding: 20 }}
  ImageStyle={{ width: 50, height: 50, borderRadius: 5 }}
  TitleStyle={{ fontSize: 16, fontWeight: 'bold' }}
  PriceStyle={{ color: '#ff0000' }}
/>

Types

Here are the TypeScript interfaces used in the component:

import { ImageStyle, TextStyle, ViewStyle } from 'react-native';
import type { ICart } from '../cart-summery/types';

export interface ICheckoutSummery {
  items: ICart[];
  delivery: number;
  ContainerStyle?: ViewStyle;
  ImageStyle?: ImageStyle;
  TitleStyle?: TextStyle;
  PriceStyle?: TextStyle;
}

Styling

You can style the various elements of the component using the ContainerStyle, ImageStyle, TitleStyle, and PriceStyle props. This gives you flexibility to adapt the component to fit your design requirements.

Input Component

The Input component is a customizable text input field with an optional label for React Native projects.

Installation

npm install saqib-test-lib-rn

Import

import { Input } from 'saqib-test-lib-rn';

Usage

import React, { useState } from 'react';
import { View } from 'react-native';
import { Input } from 'saqib-test-lib-rn';

const App = () => {
  const [value, setValue] = useState('');

  return (
    <View>
      <Input
        label="Username"
        value={value}
        onChangeText={setValue}
        placeholder="Enter your username"
        style={{ borderColor: 'blue' }}
        LabelStyle={{ color: 'red' }}
      />
    </View>
  );
};

export default App;

Props

| Prop Name | Type | Default | Description | | ---------------- | ---------------- | ------- | ---------------------------------------- | | label | string | null | Text label for the input field. | | LabelStyle | TextStyle | null | Custom style for the label text. | | ContainerStyle | ViewStyle | null | Custom style for the input container. | | style | TextInputProps | null | Custom style for the input field itself. | | ...rest | TextInputProps | N/A | Any additional TextInput properties. |

Example

<Input
  label="Password"
  placeholder="Enter your password"
  secureTextEntry={true}
  LabelStyle={{ fontSize: 16, color: '#333' }}
  style={{ backgroundColor: '#f9f9f9', padding: 12 }}
/>

Customization

• Label: You can add a label by using the label prop.
• Styles: Customize the label, input container, or the input itself using LabelStyle, ContainerStyle, and style props.

ProductTags Component

The ProductTags component is designed to display a list of tags associated with a product. It can be used to highlight features, categories, or any relevant labels related to a product.

Installation

To install the saqib-test-lib-rn package and use the ProductTags component, run the following command:

npm install saqib-test-lib-rn

Usage

import React from 'react';
import { ProductTags } from 'saqib-test-lib-rn';

const tags = ['New Arrival', 'Best Seller', 'Limited Edition'];

const App = () => {
  return (
    <ProductTags
      tags={tags}
      title="Product Highlights"
      ContainerStyle={{ marginTop: 20 }}
      TitleStyle={{ fontSize: 18, color: 'blue' }}
      TagContainerStyle={{ backgroundColor: 'lightgray' }}
      TagTitleStyle={{ color: 'darkblue' }}
    />
  );
};

export default App;

Props

| Prop | Type | Required | Description | | ------------------- | ----------- | -------- | ----------------------------------------------------- | | tags | string[] | Yes | An array of strings representing the tags to display. | | title | string | Yes | The title or header text for the tags section. | | ContainerStyle | ViewStyle | No | Style for the container wrapping the tags. | | TitleStyle | TextStyle | No | Style for the title of the tags section. | | TagContainerStyle | ViewStyle | No | Style for the container of individual tags. | | TagTitleStyle | TextStyle | No | Style for the text inside each tag. |

Example

This example demonstrates how to customize the appearance of the ProductTags component:

<ProductTags
  tags={['Free Shipping', 'Sale', 'Limited Stock']}
  title="Features"
  ContainerStyle={{ marginTop: 16 }}
  TitleStyle={{ fontSize: 18, color: '#333' }}
  TagContainerStyle={{ backgroundColor: '#FFDDC1' }}
  TagTitleStyle={{ color: '#FF4500' }}
/>

Default Styles

The ProductTags component comes with the following default styles:

const styles = StyleSheet.create({
  tagsContainer: {
    marginTop: 16,
  },
  tagsHeader: {
    fontSize: 16,
    fontWeight: 'bold',
    color: '#1F2937',
  },
  tagsList: {
    flexDirection: 'row',
    flexWrap: 'wrap',
    marginTop: 8,
  },
  tag: {
    backgroundColor: '#E5E7EB',
    borderRadius: 20,
    paddingVertical: 4,
    paddingHorizontal: 8,
    marginRight: 8,
    marginBottom: 8,
  },
  tagText: {
    fontSize: 14,
    color: '#374151',
  },
});

ProductReviews Component

The ProductReviews component is designed to display user reviews for a product. It presents a list of reviews, including the reviewer's name, rating, and comment.

Installation

To install the saqib-test-lib-rn package and use the ProductReviews component, run the following command:

npm install saqib-test-lib-rn

Usage

import React from 'react';
import { ProductReviews } from 'saqib-test-lib-rn';

const reviews = [
  {
    reviewerName: 'John Doe',
    reviewerEmail: '[email protected]',
    rating: 4.5,
    comment: 'Great product, really enjoyed using it!',
    date: '2024-10-01',
  },
  {
    reviewerName: 'Jane Smith',
    reviewerEmail: '[email protected]',
    rating: 3,
    comment: "It's good but could be better.",
    date: '2024-09-21',
  },
];

const App = () => {
  return (
    <ProductReviews
      reviews={reviews}
      heading="Customer Reviews"
      TitleStyle={{ fontSize: 18, color: 'blue' }}
      ReviewStyle={{ borderColor: 'lightgray' }}
      ReviwerStyle={{ fontSize: 16, color: 'black' }}
      RatingStyle={{ color: 'green' }}
      CommentStyle={{ fontSize: 14, color: '#333' }}
    />
  );
};

export default App;

Props

| Prop | Type | Required | Description | | -------------- | ------------ | -------- | ------------------------------------------------------- | | reviews | IReviews[] | Yes | An array of review objects containing reviewer details. | | heading | string | Yes | The title or heading for the reviews section. | | TitleStyle | TextStyle | No | Style for the title of the reviews section. | | ReviewStyle | ViewStyle | No | Style for each individual review item container. | | ReviwerStyle | TextStyle | No | Style for the reviewer's name text. | | RatingStyle | TextStyle | No | Style for the review rating text. | | CommentStyle | TextStyle | No | Style for the review comment text. |

IReviews Interface

The reviews prop uses the following structure for each review:

| Field | Type | Description | | --------------- | -------- | --------------------------------------------- | | rating | number | The rating out of 5 for the product. | | comment | string | The user's comment about the product. | | date | string | The date the review was submitted. | | reviewerName | string | The name of the reviewer. | | reviewerEmail | string | The email of the reviewer (for internal use). |

Example

This example demonstrates how to customize the appearance of the ProductReviews component:

<ProductReviews
  reviews={[
    {
      reviewerName: 'Alex',
      rating: 5,
      comment: 'Excellent!',
      date: '2024-10-02',
      reviewerEmail: '[email protected]',
    },
  ]}
  heading="User Feedback"
  TitleStyle={{ fontSize: 20, color: 'darkblue' }}
  ReviewStyle={{ borderColor: '#FFDDC1' }}
  ReviwerStyle={{ fontWeight: 'bold', color: '#333' }}
  RatingStyle={{ color: '#FF4500' }}
  CommentStyle={{ color: '#666' }}
/>

Default Styles

The ProductReviews component comes with the following default styles:

const styles = StyleSheet.create({
  reviewsContainer: {
    marginTop: 16,
  },
  reviewsHeader: {
    fontSize: 16,
    fontWeight: 'bold',
    color: '#1F2937',
  },
  reviewItem: {
    borderColor: '#E5E7EB', // Equivalent to border-gray-200
    borderWidth: 1,
    borderRadius: 8,
    padding: 12,
    marginTop: 8,
  },
  reviewHeader: {
    flexDirection: 'row',
    justifyContent: 'space-between',
  },
  reviewerName: {
    fontSize: 14,
    fontWeight: 'bold',
    color: '#1F2937',
  },
  reviewRating: {
    fontSize: 14,
    color: '#4B5563',
  },
  reviewComment: {
    fontSize: 14,
    color: '#4B5563',
    marginTop: 4,
  },
  noReviewsText: {
    fontSize: 14,
    color: '#4B5563',
    marginTop: 4,
  },
});

Navbar Component

The Navbar component is part of the saqib-test-lib-rn React Native library. It provides a customizable navigation bar with icons for toggling, displaying the company logo, and a cart icon showing the number of items in the cart.

Installation

First, install the library using npm or yarn:

npm install saqib-test-lib-rn

or

yarn add saqib-test-lib-rn

Usage

import React from 'react';
import { Navbar } from 'saqib-test-lib-rn';
import ToggleIcon from './ToggleIcon'; // Your custom toggle icon
import CartIcon from './CartIcon'; // Your custom cart icon
import CompanyIcon from './CompanyIcon'; // Your custom company icon

const App = () => {
  return (
    <Navbar
      cart={2} // Number of items in the cart
      ToggleIcon={ToggleIcon}
      CartIcon={CartIcon}
      CompanyIcon={CompanyIcon}
      ContainerStyle={{ backgroundColor: '#fff000' }} // Optional container styling
    />
  );
};

export default App;

Props

Required Props

| Prop | Type | Description | | ------------- | ------ | ----------------------------------------- | | cart | number | The number of items in the cart. | | ToggleIcon | any | A component for the toggle icon. | | CartIcon | any | A component for the cart icon. | | CompanyIcon | any | A component for the company logo or icon. |

Optional Props

| Prop | Type | Description | | ---------------- | --------- | ------------------------------------------------- | | ContainerStyle | ViewStyle | Optional styling for the container of the navbar. |

Example

<Navbar
  cart={5}
  ToggleIcon={YourToggleIconComponent}
  CartIcon={YourCartIconComponent}
  CompanyIcon={YourCompanyIconComponent}
  ContainerStyle={{ backgroundColor: '#f0f0f0' }}
/>