# 📱 Inteck Design System Mobile

A powerful, modular React Native component library for building consistent, reusable UI across mobile apps.

Supports both **Expo** and **bare React Native** apps.

---

## 🚀 Features

- ⚡ Built with `react-native` & `react-native-reanimated`
- 🎨 Beautiful, customizable components
- 🧩 Works seamlessly in Expo environments
- 🛠️ Easy to extend and scale

---

## 📦 Installation

### 1. Install the package

```bash
npm install inteck-design-system-mobile
# or
yarn add inteck-design-system-mobile

🛠 Peer Dependencies

To use this library, make sure these peer dependencies are installed.

✅ For Expo Users :

Expo SDK already includes most dependencies. You only need to install the datetime picker:

npx expo install @react-native-community/datetimepicker

✅ You can skip installing @expo/vector-icons, react-native-svg, react-native-reanimated, etc. — Expo has them preinstalled.

🧱 For Bare React Native Users :

Install the required dependencies manually:

npm install react react-native
npm install react-native-svg
npm install react-native-reanimated
npm install @react-native-community/datetimepicker
npm install @expo/vector-icons expo-modules-core

You may also need to link native modules and run pod install for iOS:

cd ios && pod install

⚙️ Setup

1. Configure Babel (Required for Reanimated)

In your babel.config.js, ensure the Reanimated plugin is added last :

module.exports = function (api) {
  api.cache(true);
  return {
    presets: ["babel-preset-expo"], // or 'module:metro-react-native-babel-preset' for bare RN
    plugins: ["react-native-reanimated/plugin"],
  };
};

2. Import Reanimated at the top of your app

In App.js or index.js:

import "react-native-reanimated";

✨ Usage

import React from "react";
import { View } from "react-native";
import { Button } from "inteck-design-system-mobile";

export default function App() {
  return (
    <View style={{ padding: 20 }}>
      <Button title="Click Me" onPress={() => alert("Pressed!")} />
    </View>
  );
}

Replace MyButton with any component you've exported in your design system.

📁 Components (Examples)

• MyButton
• CustomInput
• DatePicker
• Card
• Modal

✍️ Customize or extend these components to match your design language.

🧪 Testing

Build locally:

npm run build

📄 License

MIT © [inteck ]

🤝 Contributing

PRs and feature suggestions are welcome! Open an issue or fork and submit a PR.

---

## ✅ What to do next:
- Replace `MyButton`, `CustomInput`, etc., with the actual components you export.
- Replace `Your Name` with your real name or GitHub handle.
- You can rename the title and subtitle as needed to match your brand (e.g., `@inteck/design-system-mobile`).
- You can also add a badges section (npm version, downloads, license) at the top if you like.