react-native-demo-library-by-rinkal 1.2.7 → 1.3.0

package/Readme.md

@@ -1,3 +1,514 @@
-Hello
-This is my first library.
-I have added card component by using this library you can use TaskCard component, Pass title and description in it.
+# React Native Demo Library by Rinkal
+
+## Overview
+A React Native library for **MiniApp to Container communication**. Send events from your MiniApp (DemoLib) to your Container App (DemoApp).
+
+## 🎯 Simple Flow
+
+```
+MiniApp (DemoLib)  ----sends events---->  Container App (DemoApp)
+  TaskCard clicks                         Your app receives data
+```
+
+## Installation
+
+```bash
+npm install react-native-demo-library-by-rinkal
+```
+
+---
+
+## 🚀 Quick Start
+
+### For MiniApp (DemoLib) - Send Data
+
+```tsx
+import { TaskCard } from 'react-native-demo-library-by-rinkal';
+import MiniAppCommunication from 'react-native-demo-library-by-rinkal/MiniAppCommunication';
+
+// Use TaskCard - automatically sends events when clicked
+<TaskCard title="My Task" taskId="task_123" />
+
+// Or send custom events
+MiniAppCommunication.sendToContainer('myEvent', { 
+  data: 'Hello from MiniApp!' 
+});
+```
+
+### For Container App (DemoApp) - Receive Data
+
+```tsx
+import React, { useEffect, useState } from 'react';
+import ContainerCommunication from 'react-native-demo-library-by-rinkal/ContainerCommunication';
+
+const ContainerApp = () => {
+  const [events, setEvents] = useState([]);
+
+  useEffect(() => {
+    // Listen to task clicks from miniapp
+    const subscription = ContainerCommunication.onTaskClick((data) => {
+      console.log('Task clicked:', data.taskTitle);
+      setEvents(prev => [...prev, data]);
+    });
+
+    // Cleanup
+    return () => subscription.remove();
+  }, []);
+
+  return (
+    <View>
+      {events.map(event => (
+        <Text key={event.taskId}>{event.taskTitle}</Text>
+      ))}
+    </View>
+  );
+};
+```
+
+---
+
+## 📚 Complete Documentation
+
+- **[CONTAINER_APP_SETUP.md](./CONTAINER_APP_SETUP.md)** ⭐ **START HERE** - Complete setup guide for Container App
+- **[QUICK_REFERENCE.md](./QUICK_REFERENCE.md)** - Quick code examples
+- **[CommunicationExample.tsx](./CommunicationExample.tsx)** - Working examples with Container App code
+
+---
+
+## 📦 What's Included
+
+### UI Components
+- **TaskCard** - Interactive task card that sends events to container when clicked
+
+### Communication Methods
+
+#### From MiniApp (Send)
+```tsx
+import MiniAppCommunication from 'react-native-demo-library-by-rinkal/MiniAppCommunication';
+
+// Send task click
+MiniAppCommunication.sendTaskClick('task_123', 'Task Title');
+
+// Send user action
+MiniAppCommunication.sendUserAction('buttonClick', { button: 'submit' });
+
+// Send data update
+MiniAppCommunication.sendDataUpdate('settings', { theme: 'dark' });
+
+// Send custom event
+MiniAppCommunication.sendToContainer('customEvent', { any: 'data' });
+```
+
+#### From Container App (Receive)
+```tsx
+import ContainerCommunication from 'react-native-demo-library-by-rinkal/ContainerCommunication';
+
+// Listen to task clicks
+ContainerCommunication.onTaskClick((data) => {
+  console.log(data.taskId, data.taskTitle);
+});
+
+// Listen to user actions
+ContainerCommunication.onUserAction((data) => {
+  console.log(data.action, data.payload);
+});
+
+// Listen to data updates
+ContainerCommunication.onDataUpdate((data) => {
+  console.log(data.key, data.value);
+});
+
+// Listen to custom events
+ContainerCommunication.listenFromMiniApp('customEvent', (data) => {
+  console.log(data);
+});
+```
+
+---
+
+## 💡 Real Example
+
+### MiniApp Component (DemoLib)
+```tsx
+import React from 'react';
+import { View, Button } from 'react-native';
+import { TaskCard } from 'react-native-demo-library-by-rinkal';
+import MiniAppCommunication from 'react-native-demo-library-by-rinkal/MiniAppCommunication';
+
+const MiniAppScreen = () => {
+  return (
+    <View>
+      {/* TaskCard sends event automatically on click */}
+      <TaskCard title="Buy groceries" taskId="task_1" />
+      <TaskCard title="Pay bills" taskId="task_2" />
+      
+      {/* Custom button sends custom event */}
+      <Button 
+        title="Complete Purchase"
+        onPress={() => {
+          MiniAppCommunication.sendToContainer('purchase', {
+            productId: 'prod_123',
+            amount: 99.99
+          });
+        }}
+      />
+    </View>
+  );
+};
+```
+
+### Container App Component (DemoApp)
+```tsx
+import React, { useEffect, useState } from 'react';
+import { View, Text, FlatList } from 'react-native';
+import ContainerCommunication from 'react-native-demo-library-by-rinkal/ContainerCommunication';
+
+const ContainerAppScreen = () => {
+  const [tasks, setTasks] = useState([]);
+  const [purchases, setPurchases] = useState([]);
+
+  useEffect(() => {
+    // Listen to task clicks from MiniApp
+    const taskSub = ContainerCommunication.onTaskClick((data) => {
+      setTasks(prev => [...prev, data]);
+      // Navigate to task detail or show notification
+      alert(`Task clicked: ${data.taskTitle}`);
+    });
+
+    // Listen to purchase events from MiniApp
+    const purchaseSub = ContainerCommunication.listenFromMiniApp('purchase', (data) => {
+      setPurchases(prev => [...prev, data]);
+      // Process purchase
+      console.log('Processing purchase:', data.amount);
+    });
+
+    // Cleanup
+    return () => {
+      taskSub.remove();
+      purchaseSub.remove();
+    };
+  }, []);
+
+  return (
+    <View>
+      <Text>Tasks from MiniApp:</Text>
+      <FlatList
+        data={tasks}
+        keyExtractor={item => item.taskId}
+        renderItem={({ item }) => <Text>{item.taskTitle}</Text>}
+      />
+      
+      <Text>Purchases: {purchases.length}</Text>
+    </View>
+  );
+};
+```
+
+---
+
+## 📖 API Reference
+
+### MiniAppCommunication (Send from MiniApp)
+
+| Method | Description | Parameters |
+|--------|-------------|------------|
+| `sendTaskClick(taskId, title)` | Send task click event | taskId: string, title: string |
+| `sendUserAction(action, payload)` | Send user action | action: string, payload: any |
+| `sendDataUpdate(key, value)` | Send data update | key: string, value: any |
+| `sendToContainer(eventName, data)` | Send custom event | eventName: string, data: any |
+
+### ContainerCommunication (Receive in Container)
+
+| Method | Description | Returns |
+|--------|-------------|---------|
+| `onTaskClick(callback)` | Listen to task clicks | Subscription |
+| `onUserAction(callback)` | Listen to user actions | Subscription |
+| `onDataUpdate(callback)` | Listen to data updates | Subscription |
+| `listenFromMiniApp(eventName, callback)` | Listen to custom events | Subscription |
+| `removeAllListeners()` | Remove all listeners | void |
+
+---
+
+## 🔧 TypeScript Support
+
+Full TypeScript support included:
+
+```tsx
+import { TaskClickData, UserActionData, DataUpdateEvent } from 'react-native-demo-library-by-rinkal/MiniAppCommunication';
+
+ContainerCommunication.onTaskClick((data: TaskClickData) => {
+  console.log(data.taskId); // ✅ Type-safe
+});
+```
+
+---
+
+## 📖 Official Documentation
+
+Based on React Native's official event system:
+- **React Native Native Modules**: https://reactnative.dev/docs/native-modules-intro
+- **Native Modules iOS**: https://reactnative.dev/docs/native-modules-ios
+- **Native Modules Android**: https://reactnative.dev/docs/native-modules-android
+- **DeviceEventEmitter**: https://reactnative.dev/docs/native-modules-android
+
+---
+
+## 🎯 Key Features
+
+✅ **Simple** - Just 2 lines to send/receive events  
+✅ **Type-Safe** - Full TypeScript support  
+✅ **Reliable** - Based on React Native's official EventEmitter  
+✅ **Documented** - Comprehensive guides included  
+✅ **Production-Ready** - Console logging for debugging  
+
+---
+
+## 📚 Documentation Files
+
+| File | Description |
+|------|-------------|
+| [CONTAINER_APP_SETUP.md](./CONTAINER_APP_SETUP.md) | **Complete setup guide for Container App** ⭐ |
+| [QUICK_REFERENCE.md](./QUICK_REFERENCE.md) | Quick code snippets |
+| [CommunicationExample.tsx](./CommunicationExample.tsx) | Working examples |
+| [OFFICIAL_REFERENCES.md](./OFFICIAL_REFERENCES.md) | Official docs links |
+
+---
+
+## ✅ Quick Checklist
+
+### In MiniApp (DemoLib):
+- [x] Components already send events (TaskCard)
+- [x] Use `MiniAppCommunication.sendToContainer()` for custom events
+
+### In Container App (DemoApp):
+- [ ] Install library: `npm install react-native-demo-library-by-rinkal`
+- [ ] Import: `import ContainerCommunication from 'react-native-demo-library-by-rinkal/ContainerCommunication'`
+- [ ] Setup listeners in `useEffect`
+- [ ] Don't forget cleanup with `.remove()`
+
+---
+
+## 🐛 Troubleshooting
+
+**Events not received?**
+1. Check you're using `ContainerCommunication.onTaskClick()` or similar methods
+2. Make sure listener is set up before MiniApp sends events
+3. Verify cleanup is in place (`subscription.remove()`)
+4. Check console logs - all events are logged
+
+**See [CONTAINER_APP_SETUP.md](./CONTAINER_APP_SETUP.md) for detailed troubleshooting**
+
+---
+
+## 📄 License
+ISC
+
+## 👨‍💻 Author
+Rinkal
+
+## 📌 Version
+1.3.0
+
+---
+
+## 🚀 Get Started Now!
+
+1. **For Container App setup**: Read [CONTAINER_APP_SETUP.md](./CONTAINER_APP_SETUP.md)
+2. **For quick examples**: Read [QUICK_REFERENCE.md](./QUICK_REFERENCE.md)
+3. **For working code**: See [CommunicationExample.tsx](./CommunicationExample.tsx)
+
+## Features
+
+### UI Components
+- **TaskCard**: Customizable task card component
+- **TaskDemoCard**: Demo task card component
+
+### Communication Patterns
+1. **Event Emitter Pattern** - One-way event-based communication
+2. **Callback Pattern** - Direct function invocation
+3. **Promise-Based Pattern** - Async request-response
+4. **Shared State Pattern** - Bidirectional state synchronization
+5. **Native Bridge Pattern** - Direct native module communication
+6. **Message Queue Pattern** - Reliable message delivery
+
+## Installation
+
+```bash
+npm install react-native-demo-library-by-rinkal
+```
+
+## Quick Start
+
+### Using UI Components
+
+```typescript
+import { TaskCard, TaskDemoCard } from 'react-native-demo-library-by-rinkal';
+
+const App = () => {
+  return (
+    <View>
+      <TaskCard title="My Task" />
+      <TaskDemoCard />
+    </View>
+  );
+};
+```
+
+### Using Communication Patterns
+
+#### MiniApp Side
+```typescript
+import MiniAppCommunication from 'react-native-demo-library-by-rinkal';
+
+// Initialize
+MiniAppCommunication.initialize();
+
+// Send event
+MiniAppCommunication.sendEvent('userAction', { action: 'click' });
+
+// Send request and wait for response
+const result = await MiniAppCommunication.request('getData', { id: 123 });
+
+// Update shared state
+MiniAppCommunication.setState('userData', { name: 'John' });
+```
+
+#### Container Side
+```typescript
+import ContainerCommunication from 'react-native-demo-library-by-rinkal';
+
+// Initialize
+ContainerCommunication.initialize();
+
+// Listen to events
+ContainerCommunication.onEvent('userAction', (data) => {
+  console.log('Received:', data);
+});
+
+// Register request handler
+ContainerCommunication.registerHandler('getData', async (data) => {
+  return { result: 'success' };
+});
+
+// Subscribe to state changes
+ContainerCommunication.subscribeToState('userData', (newValue) => {
+  console.log('State updated:', newValue);
+});
+```
+
+## Documentation
+
+### Comprehensive Guides
+- **[COMMUNICATION_DOCS.md](./COMMUNICATION_DOCS.md)** - Complete usage guide with examples
+- **[OFFICIAL_REFERENCES.md](./OFFICIAL_REFERENCES.md)** - All official documentation references
+
+### Example Components
+- **[CommunicationExample.tsx](./CommunicationExample.tsx)** - Working examples for both miniapp and container
+
+## Official Documentation References
+
+All implementations are based on official documentation:
+
+1. **React Native Events**: https://reactnative.dev/docs/native-modules-ios#sending-events-to-javascript
+2. **React Native Callbacks**: https://reactnative.dev/docs/native-modules-ios#callbacks
+3. **React Native Promises**: https://reactnative.dev/docs/native-modules-ios#promises
+4. **Native Modules**: https://reactnative.dev/docs/native-modules-intro
+5. **Node.js EventEmitter**: https://nodejs.org/api/events.html
+6. **Redux Pattern**: https://redux.js.org/introduction/getting-started
+7. **MDN Web Docs - Promises**: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise
+8. **MDN Web Docs - postMessage**: https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage
+
+See [OFFICIAL_REFERENCES.md](./OFFICIAL_REFERENCES.md) for the complete list.
+
+## Communication Patterns Comparison
+
+| Pattern | Direction | Async | Reliability | Best For |
+|---------|-----------|-------|-------------|----------|
+| Event Emitter | Bi-directional | No | Medium | Real-time updates |
+| Callback | Uni-directional | No | High | Direct invocation |
+| Promise | Request-Response | Yes | High | Data fetching |
+| Shared State | Bi-directional | No | High | State sync |
+| Native Bridge | Uni-directional | Yes | Medium | Native features |
+| Message Queue | Uni-directional | Yes | Very High | Offline support |
+
+## Architecture
+
+```
+┌─────────────────────────────────────────────────────────┐
+│                      MiniApp                            │
+│  ┌──────────────────────────────────────────────────┐  │
+│  │  MiniAppCommunication                            │  │
+│  │  ✓ Event Emitter  ✓ Callbacks                   │  │
+│  │  ✓ Promises       ✓ Shared State                │  │
+│  │  ✓ Native Bridge  ✓ Message Queue               │  │
+│  └──────────────────────────────────────────────────┘  │
+└─────────────────┬───────────────────────────────────────┘
+                  │ Communication Layer
+┌─────────────────┴───────────────────────────────────────┐
+│                  Container App                          │
+│  ┌──────────────────────────────────────────────────┐  │
+│  │  ContainerCommunication                          │  │
+│  │  ✓ Event Listener ✓ Request Handlers            │  │
+│  │  ✓ State Manager  ✓ Message Handler             │  │
+│  └──────────────────────────────────────────────────┘  │
+└─────────────────────────────────────────────────────────┘
+```
+
+## Complete Example
+
+```typescript
+import React, { useEffect } from 'react';
+import { View, Button } from 'react-native';
+import { MiniAppExample, ContainerExample } from 'react-native-demo-library-by-rinkal';
+
+// For MiniApp
+const MiniApp = () => <MiniAppExample />;
+
+// For Container
+const Container = () => <ContainerExample />;
+```
+
+## API Reference
+
+### MiniAppCommunication
+
+- `initialize()` - Initialize communication system
+- `sendEvent(eventName, data)` - Send event to container
+- `onEvent(eventName, callback)` - Listen to events from container
+- `request(action, data)` - Send request and wait for response
+- `registerCallback(id, callback)` - Register callback function
+- `getState(key)` - Get shared state value
+- `setState(key, value)` - Set shared state value
+- `subscribeToState(key, listener)` - Subscribe to state changes
+- `callNative(module, method, ...args)` - Call native module method
+- `queueMessage(type, payload)` - Queue message for delivery
+- `cleanup()` - Cleanup resources
+
+### ContainerCommunication
+
+- `initialize()` - Initialize communication system
+- `sendEvent(eventName, data)` - Send event to miniapp
+- `onEvent(eventName, callback)` - Listen to events from miniapp
+- `registerHandler(action, handler)` - Register request handler
+- `getState(key)` - Get shared state value
+- `setState(key, value)` - Set shared state value
+- `subscribeToState(key, listener)` - Subscribe to state changes
+- `registerMessageHandler(type, handler)` - Register message handler
+- `cleanup()` - Cleanup resources
+
+## Requirements
+
+- React: 19.1.0
+- React Native: 0.81.5
+
+## License
+ISC
+
+## Author
+Rinkal
+
+## Version
+1.3.0
+
+## Support
+For issues and questions, please refer to the documentation files included in this package.