{"id":31799778,"url":"https://github.com/surajpurohitcode/react-native-kotlin-integration-app","last_synced_at":"2025-10-20T12:52:28.181Z","repository":{"id":314638794,"uuid":"1056188617","full_name":"Surajpurohitcode/react-native-kotlin-integration-app","owner":"Surajpurohitcode","description":null,"archived":false,"fork":false,"pushed_at":"2025-09-13T18:17:03.000Z","size":3832,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2025-10-10T22:50:44.804Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Surajpurohitcode.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2025-09-13T15:16:50.000Z","updated_at":"2025-09-13T18:17:07.000Z","dependencies_parsed_at":null,"dependency_job_id":"b5f02223-92d5-4539-9110-35b257e0f816","html_url":"https://github.com/Surajpurohitcode/react-native-kotlin-integration-app","commit_stats":null,"previous_names":["surajpurohitcode/react-native-kotlin-integration-app"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/Surajpurohitcode/react-native-kotlin-integration-app","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Surajpurohitcode%2Freact-native-kotlin-integration-app","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Surajpurohitcode%2Freact-native-kotlin-integration-app/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Surajpurohitcode%2Freact-native-kotlin-integration-app/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Surajpurohitcode%2Freact-native-kotlin-integration-app/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Surajpurohitcode","download_url":"https://codeload.github.com/Surajpurohitcode/react-native-kotlin-integration-app/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Surajpurohitcode%2Freact-native-kotlin-integration-app/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":280094904,"owners_count":26271003,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-10-20T02:00:06.978Z","response_time":62,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2025-10-10T22:49:52.093Z","updated_at":"2025-10-20T12:52:28.173Z","avatar_url":"https://github.com/Surajpurohitcode.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# 🚀 React Native + Kotlin Integration App\n\nA **React Native mobile app** built to demonstrate rapid learning, React Native fundamentals, mobile development best practices, and native Android integration using Kotlin.\n\n---\n\n## 📖 Preface\n\nThis project was developed as part of an assignment to evaluate:\n\n* Quick adaptation to **React Native** with prior Kotlin experience.\n* Building a functional mobile app with **networking, state management, navigation, and UI using native components**.\n* Integration of **native Android modules in Kotlin** exposed to JavaScript.\n* Emphasis on **debugging, performance optimization, and code readability**.\n\n---\n\n## ✨ Features\n\n### 1. Login Screen\n\n* Simple form for username and password.\n* On successful login, stores a persistent token using **AsyncStorage**.\n* Navigates to the main app screens after login.\n\n### 2. Users List Screen\n\n* Fetches users from the [DummyJSON Users API](https://dummyjson.com/docs/users).\n* Displays users in a scrollable `FlatList` with profile images.\n* Includes **loading** and **error states**.\n\n### 3. User Detail Screen\n\n* Displays selected user details:\n\n  * Name, email, phone\n  * Address \u0026 company information\n* Provides back navigation to the list.\n\n### 4. Native Kotlin Integration: BatteryModule\n\n#### Kotlin Module Code\n\n**BatteryModule.kt**\n\n```kotlin\npackage com.assignment\n\nimport android.content.Intent\nimport android.content.IntentFilter\nimport android.os.BatteryManager\nimport com.facebook.react.bridge.*\n\nclass BatteryModule(reactContext: ReactApplicationContext) : ReactContextBaseJavaModule(reactContext) {\n\n    override fun getName(): String = \"BatteryModule\"\n\n    @ReactMethod\n    fun getBatteryLevel(promise: Promise) {\n        try {\n            val intentFilter = IntentFilter(Intent.ACTION_BATTERY_CHANGED)\n            val batteryStatus = reactApplicationContext.registerReceiver(null, intentFilter)\n\n            val level = batteryStatus?.getIntExtra(BatteryManager.EXTRA_LEVEL, -1) ?: -1\n            val scale = batteryStatus?.getIntExtra(BatteryManager.EXTRA_SCALE, -1) ?: -1\n\n            val batteryPct = if (level \u003e= 0 \u0026\u0026 scale \u003e 0) (level * 100) / scale else -1\n\n            promise.resolve(batteryPct)\n        } catch (e: Exception) {\n            promise.reject(\"BATTERY_ERROR\", e)\n        }\n    }\n}\n```\n\n**BatteryPackage.kt**\n\n```kotlin\npackage com.assignment\n\nimport com.facebook.react.ReactPackage\nimport com.facebook.react.bridge.NativeModule\nimport com.facebook.react.bridge.ReactApplicationContext\nimport com.facebook.react.uimanager.ViewManager\n\nclass BatteryPackage : ReactPackage {\n    override fun createNativeModules(reactContext: ReactApplicationContext): List\u003cNativeModule\u003e =\n        listOf(BatteryModule(reactContext))\n\n    override fun createViewManagers(reactContext: ReactApplicationContext): List\u003cViewManager\u003c*, *\u003e\u003e =\n        emptyList()\n}\n```\n\n**Integration in MainApplication.kt**\n\n```kotlin\n// Inside getPackages() override in MainApplication\nadd(BatteryPackage()) // Manually adds BatteryModule to React Native\n```\n\n#### React Native Usage\n\n```javascript\nimport { useState, useEffect } from 'react';\nimport { NativeModules } from 'react-native';\nconst { BatteryModule } = NativeModules;\n\nconst [batteryLevel, setBatteryLevel] = useState\u003cnumber | null\u003e(null);\n\nuseEffect(() =\u003e {\n    const getBattery = async () =\u003e {\n        try {\n            const level = await BatteryModule.getBatteryLevel();\n            setBatteryLevel(level);\n        } catch (e) {\n            console.log(\"Battery fetch error:\", e);\n        }\n    };\n\n    getBattery();\n    const interval = setInterval(getBattery, 30000);\n    return () =\u003e clearInterval(interval);\n}, []);\n```\n\n**Output Example**\n\n```\nBattery Level: 87%\n```\n\n*Updates every 30 seconds automatically.*\n\n---\n\n### 5. UI \u0026 Debugging\n\n* Uses **native React Native components** with custom styling, no third-party UI libraries.\n* Debugging performed with **Flipper** and React Native Debugger.\n* Example bug solved: *AsyncStorage token retrieval intermittently failing*.\n  Solution: called async function in `useEffect` after component mount and verified using Flipper logs.\n\n### 6. Performance Optimizations\n\n* Optimized `FlatList` rendering using:\n\n  * `keyExtractor`\n  * Memoized list items with `React.memo`\n* Used `useCallback` and `useMemo` to prevent unnecessary re-renders.\n\n### 7. Cross-platform Notes\n\n* Fully functional on **Android**.\n* iOS support **not included** (testing environment limitation).\n\n---\n\n## 🖼 Screenshots\n\n| Login | Users List | User Detail |\n|-------|------------|------------|\n| ![Login](screenshots/react_app_sc_login.jpeg) | ![List](screenshots/react_app_sc_list.jpeg) | ![Detail](screenshots/react_app_sc_1.jpeg) |\n\n## ⚙️ Setup Instructions\n\n1. **Clone the repository**\n\n```bash\ngit clone https://github.com/Surajpurohitcode/react-native-kotlin-integration-app.git\ncd react-native-kotlin-integration-app\n```\n\n2. **Install dependencies**\n\n```bash\nnpm install\n# or\nyarn install\n```\n\n3. **Start Metro bundler**\n\n```bash\nnpx react-native start\n```\n\n4. **Run the Android app**\n\n```bash\nnpx react-native run-android\n```\n\n5. **Login credentials**\n\n```\nUsername: admin@test.com\nPassword: test@456\n```\n\n6. *(Optional)* Install APK directly: [Download APK](link-to-apk)\n\n---\n\n## 💡 Challenges \u0026 Solutions\n\n**Challenge:** Integrating Kotlin native module with React Native while ensuring asynchronous results are handled correctly.\n\n**Solution:**\n\n* Ensured Kotlin functions return Promises.\n* Called native functions after component mount with `useEffect`.\n* Verified output using Flipper logs to debug timing issues.\n\n---\n\n## 🔮 Future Improvements\n\n* Integrate **MVVM architecture** for better state management.\n* Add offline caching and persistent storage for the users list.\n* Implement unit tests and UI testing for higher reliability.\n* Explore **iOS support** and platform-specific optimizations.\n* Modularize native modules for reusability.\n\n---\n\n## 📝 Learnings\n\n* Rapidly learned and applied **React Native fundamentals** including navigation, FlatList, state management, and AsyncStorage.\n* Gained hands-on experience with **native module integration using Kotlin**.\n* Learned to optimize performance with **memoization and FlatList optimization**.\n* Improved debugging skills using **Flipper and React Native Debugger**.\n* Enhanced understanding of cross-platform development considerations.\n\n---\n\n## ⚠️ Known Issues / Limitations\n\n* iOS not supported.\n* Slight delay in battery updates on some Android devices.\n* No offline caching implemented for users list.\n\n---\n\n## 📎 References\n\n* [React Native Docs](https://reactnative.dev/docs/getting-started)\n* [DummyJSON Users API](https://dummyjson.com/docs/users)\n* [AsyncStorage](https://react-native-async-storage.github.io/async-storage/docs/install/)\n\n---\n\n## 🎬 Demo\n\n[Click to watch the demo video](screenshots/demo-video_oSqIobJc.mp4)\n[APK for Testing](https://drive.google.com/file/d/1S7l42p-sCyTpO1fwHY284QhSHwNQM_Hv/view?usp=sharing)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsurajpurohitcode%2Freact-native-kotlin-integration-app","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsurajpurohitcode%2Freact-native-kotlin-integration-app","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsurajpurohitcode%2Freact-native-kotlin-integration-app/lists"}