ci-rn-kit

A React Native toolkit with reusable components, built to streamline development and enhance productivity in React Native applications.

Table of Contents

•	Installation
•	Usage
•	Available Components
•	Development
•	Contributing
•	License

Installation

To install the toolkit, use npm:

npm install ci-rn-kit

Ensure that react and react-native are also installed in your project, as they are peer dependencies:

npm install react react-native

Usage

After installation, import the components into your React Native project as needed.

Example

Here’s a quick example using the Button component: import React from 'react'; import { View } from 'react-native'; import { Button } from 'ci-rn-kit';

const App = () => { return ( <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}> <Button title="Click Me" onPress={() => alert('Button Pressed!')} /> ); };

export default App;

Available Components

This toolkit includes the following components:

1.	Button
•	A customizable button component.
•	Props: title, onPress.
2.	TextInput
•	A styled text input component.
•	Props: Inherits all native TextInput props from React Native.
3.	Onboarding
•	A swipable onboarding component with customizable pages.
•	Props: pages (array of { title: string, description: string }).
4.	ProgressBar
•	A progress bar to indicate progress visually.
•	Props: progress, height, backgroundColor, progressColor.
5.	Card
•	A container with a shadow and padding for displaying content blocks.
•	Props: children, style.
6.	Avatar
•	A circular image component, ideal for profile pictures.
•	Props: source, size.
7.	Badge
•	A small, customizable notification badge.
•	Props: count, color.
8.	Checkbox
•	A simple checkbox with an optional label.
•	Props: checked, label, onToggle.
9.	Switch
•	A toggle switch component.
•	Props: value, onValueChange, trackColor.
10.	Modal
•	A customizable modal component.
•	Props: visible, onRequestClose, children.

Development

Running the Project Locally

To develop and test the toolkit locally:

1.	Clone the repository.
2.	Install dependencies:

npm install

3.	Run the TypeScript and Babel build processes:
npm run prepare

Testing the Package

If you want to test your changes in a separate project, use npm link:

1.	In the toolkit root directory, link the package:

npm link

2.	In your test project, link the package:

npm link ci-rn-kit


Scripts

•	npm run build: Compiles the source code using Babel.
•	npm run build:types: Generates type declarations using TypeScript.
•	npm run prepare: Runs both build and build:types.
•	npm run lint: Lints the source code using ESLint.
•	npm run format: Formats the source code with Prettier.

Contributing

Contributions are welcome! If you would like to contribute:

1.	Fork the repository.
2.	Create a new branch (git checkout -b feature/my-feature).
3.	Commit your changes (git commit -m 'Add feature').
4.	Push to the branch (git push origin feature/my-feature).
5.	Open a pull request.

License

This project is licensed under the MIT License. See the LICENSE file for details.