1.0.11 • Published 10 months ago

ci-rn-kit v1.0.11

Weekly downloads
-
License
MIT
Repository
-
Last release
10 months ago

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.

1.0.11

10 months ago

1.0.9

10 months ago

1.0.8

10 months ago

1.0.7

10 months ago

1.0.6

10 months ago

1.0.5

10 months ago

1.0.4

10 months ago

1.0.10

10 months ago

1.0.3

11 months ago

1.0.2

11 months ago

1.0.1

11 months ago

1.0.0

11 months ago