{"id":26222671,"url":"https://github.com/ayoubdev/react-native-android-kit","last_synced_at":"2025-03-12T17:01:56.942Z","repository":{"id":57335246,"uuid":"48878758","full_name":"adbayb/react-native-android-kit","owner":"adbayb","description":":package: Android Native Kit for React-Native","archived":false,"fork":false,"pushed_at":"2023-12-15T17:50:30.000Z","size":256,"stargazers_count":111,"open_issues_count":8,"forks_count":20,"subscribers_count":9,"default_branch":"master","last_synced_at":"2024-10-29T13:49:51.847Z","etag":null,"topics":["library"],"latest_commit_sha":null,"homepage":"","language":"Java","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/adbayb.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null}},"created_at":"2016-01-01T13:28:31.000Z","updated_at":"2024-07-29T21:50:07.000Z","dependencies_parsed_at":"2024-01-08T01:01:52.138Z","dependency_job_id":"d0d250d4-e76e-4ccb-bdcf-35383b09966c","html_url":"https://github.com/adbayb/react-native-android-kit","commit_stats":null,"previous_names":["aybadb/react-native-android-kit","ayoubdev/react-native-android-kit"],"tags_count":8,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/adbayb%2Freact-native-android-kit","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/adbayb%2Freact-native-android-kit/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/adbayb%2Freact-native-android-kit/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/adbayb%2Freact-native-android-kit/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/adbayb","download_url":"https://codeload.github.com/adbayb/react-native-android-kit/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243258487,"owners_count":20262298,"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","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":["library"],"created_at":"2025-03-12T17:01:38.874Z","updated_at":"2025-03-12T17:01:56.899Z","avatar_url":"https://github.com/adbayb.png","language":"Java","readme":"# React Native Android Kit \u003cbr/\u003e [![npm version](https://img.shields.io/badge/npm-v1.2.0-green.svg)](https://www.npmjs.com/package/react-native-android-kit)\t[![react-native version](https://img.shields.io/badge/react--native-min%20v0.38.0-blue.svg)](https://github.com/facebook/react-native) \n\n\u003cbr/\u003e\n\nA set of native Android UI components and modules for React Native framework. \nThe purpose of this kit is to offer to React Native developers some new Android native components that are currently not implemented by React Native core team. \nFor example, some components from Android Design Support Library are now available through this kit.\n\n\u003cbr/\u003e\n\n## Table of Contents\n\n- [Installation](#installation)\n\t* [Automatic](#automatic)\n\t* [Manual](#manual)\n- [Components](#components)\n\t* [TabLayoutAndroid](#tablayoutandroid)\n\t\t* [Introduction](#introduction)\n\t\t* [Props](#props)\n\t\t* [Example](#example)\n\t* [ButtonAndroid](#buttonandroid)\n\t\t* [Introduction](#introduction-1)\n\t\t* [Props](#props-1)\n\t\t* [Example](#example-1)\n\t* [FloatingButtonAndroid](#floatingbuttonandroid)\n\t\t* [Introduction](#introduction-2)\n\t\t* [Props](#props-2)\n\t\t* [Example](#example-2)\n- [Misc](#misc)\n\t* [Color](#color)\n\t* [Drawable](#drawable)\n\t* [Demo](#demo)\n\t* [Todo](#todo)\n- [License](#license)\n\n\u003cbr/\u003e\u003cbr/\u003e\u003cbr/\u003e\n\n## Installation\n\n\u003cbr/\u003e\n\n### Automatic\n\n- [x] Go to your root project folder\n- [x] Install react-native-android-kit from npm repository: \n\n\t```\n\tnpm install react-native-android-kit --save\n\t```\n\n- [x] Link native dependencies to your project:\n\n\t```\n\tnode node_modules/react-native/local-cli/cli.js link react-native-android-kit\n\t```\n\n\tOr, via react-native-cli if installed globally:\n\n\t```\n\treact-native link react-native-android-kit\n\t```\n\n\n### Manual\n\nTo use this kit inside your react native project, you must follow these steps:\n\n- [x] Go to your root project folder\n- [x] Install react-native-android-kit from npm repository: \n\n\t```\n\tnpm install react-native-android-kit --save\n\t```\n\n- [x] Add the following lines to your `android/settings.gradle`:\n\n\t```gradle\n\tinclude ':ReactNativeAndroidKit'\n\tproject(':ReactNativeAndroidKit').projectDir = file('../node_modules/react-native-android-kit/android')\n\t```\n\n- [x] Inside `android/app/build.gradle` file, add compilation instruction for ReactNativeAndroidKit like that:\n\n\t```gradle\n\tdependencies {\n\t\t...\n\t\tcompile project(':ReactNativeAndroidKit')\t\t\t\n\t}\n\t```\n\n- [x] Finally, edit `MainApplication` class (generally located at `android/app/src/main/java/\u003cmain-package-path\u003e/MainApplication.java`):\n\n\t```java\n\t...\n\n\timport com.facebook.react.ReactPackage;\n\timport com.facebook.react.shell.MainReactPackage;\n\timport fr.aybadb.rnak.RNAKPackage;\t//\u003c------------------------- Add this import statement\n\n\t...\n\n\tpublic class MainApplication extends Application implements ReactApplication {\n\t\t\n\t\t...\n\n\t\t\t@Override\n\t\t\tprotected List\u003cReactPackage\u003e getPackages() {\n\t\t\t\treturn Arrays.\u003cReactPackage\u003easList(\n\t\t\t\t\tnew MainReactPackage(),\n\t\t\t\t\tnew RNAKPackage()\t//\u003c-------------------------- Add this statement\n\t\t\t\t);\n\t\t\t}\n\t\t};\n\t\n\t...\n\t```\n\n\u003cbr/\u003e\u003cbr/\u003e\u003cbr/\u003e\u003cbr/\u003e\n\n## Components\n\n\u003cbr/\u003e\n\n### TabLayoutAndroid\n\n#### Introduction\n\nTabLayoutAndroid component provides a horizontal layout to display tabs.\nPopulation of the tabs to display is done through TabLayoutAndroid.Item component.\nTransition between tabs are managed by a ViewPager instance (you don't need to care about it: all is managed by TabLayoutAndroid component).\u003cbr/\u003e\nFor more details, see: [Native TabLayout documentation](http://developer.android.com/reference/android/support/design/widget/TabLayout.html \"TabLayout Android Developers\")\n\n#### Props:\n\n##### TabLayoutAndroid props:\nIt is important all children of TabLayoutAndroid are TabLayoutAndroid.Item component(s) and not composite components:\n\n\u003e [View props...](https://facebook.github.io/react-native/docs/view.html#props)\u003cbr/\u003e\u003cbr/\u003e\n\u003e [ViewPagerAndroid props...](https://facebook.github.io/react-native/docs/viewpagerandroid.html#props)\u003cbr/\u003e\u003cbr/\u003e\n\u003e **backgroundColor** [color](#color) *optional* \u003cbr/\u003eSets the background color for TabLayout container.\u003cbr/\u003e\u003cbr/\u003e\n\u003e **indicatorTabColor** [color](#color) *optional* \u003cbr/\u003eSets the tab indicator's color for the currently selected tab.\u003cbr/\u003e\u003cbr/\u003e\n\u003e **indicatorTabHeight** number *optional* \u003cbr/\u003eSets the tab indicator's height for the currently selected tab.\u003cbr/\u003e\u003cbr/\u003e\n\u003e **scrollable** boolean *optional, default = true* \u003cbr/\u003eSet the behavior mode for the Tabs in this layout: \u003cbr/\u003etrue = SCROLLABLE tabs mode. \u003cbr/\u003efalse = FIXED tabs mode.\u003cbr/\u003e\u003cbr/\u003e\n\u003e **backgroundImage** string *optional* \u003cbr/\u003eSet the background's TabLayout to a given Drawable (see [Drawable](#drawable)).\u003cbr/\u003e\u003cbr/\u003e\n\u003e **center** boolean *optional, default = true* \u003cbr/\u003eSet the gravity to use when laying out the tabs: \u003cbr/\u003etrue = CENTER tabs gravity (only takes effect if you are on FIXED tabs Mode).\u003cbr/\u003efalse = FILL tabs gravity.\u003cbr/\u003e\u003cbr/\u003e\n\n*By default, 60 is the height value for tabs container.*\n\n\n##### TabLayoutAndroid.Item props:\nTabLayoutAndroid.Item represents a child for TabLayoutAndroid (i.e a tab instance). Especially, it's a container that allows you to store child view(s) for current tab instance. In a nutshell, it works like a \u003cView\u003e container but for TabLayoutAndroid. \n\nBesides, each TabLayoutAndroid.Item can be customized by several properties:\n\n\u003e [View props...](https://facebook.github.io/react-native/docs/view.html#props)\u003cbr/\u003e\u003cbr/\u003e\n\u003e **text** string *optional* \u003cbr/\u003eSets the tab label.\u003cbr/\u003e\u003cbr/\u003e\n\u003e **icon** string *optional* \u003cbr/\u003eSets the tab icon (see [Drawable](#drawable)).\u003cbr/\u003e\u003cbr/\u003e\n\u003e **iconPosition** string *optional, default = 'top' [only, if customView prop === true]* \u003cbr/\u003eSets the Drawables (if any) to appear to the left of, above, to the right of, and below the text.\u003cbr/\u003eAllowed values: left, top, right, bottom (if wrong string, top value is set by default).\u003cbr/\u003e\u003cbr/\u003e\n\u003e **textSize** number *optional [only, if customView prop === true]* \u003cbr/\u003eSet the default text size to the given value, interpreted as \"scaled pixel\" unit (sp unit).\u003cbr/\u003e\u003cbr/\u003e\n\u003e **textColor** [color](#color) *optional [only, if customView prop === true]* \u003cbr/\u003eSets the text color for the normal state.\u003cbr/\u003e\u003cbr/\u003e\n\u003e **selectedTextColor** [color](#color) *optional [only, if customView prop === true]* \u003cbr/\u003eSets the text color for the selected state.\u003cbr/\u003e\u003cbr/\u003e\n\u003e **customView** boolean *optional, default = true* \u003cbr/\u003eSets custom view behavior for current tab.\u003cbr/\u003etrue = Custom View enabled.\u003cbr/\u003efalse = Custom View disabled: only, text and icon properties take effect.\u003cbr/\u003e\u003cbr/\u003e\n\n#### Example\n\n###### Basic Usage:\n\n```jsx\nimport React, { AppRegistry, StyleSheet, Text, View } from \"react-native\";\nimport { TabLayoutAndroid } from \"react-native-android-kit\";\n\nclass TabLayoutExample extends React.Component {\n\trender() {\n\t\treturn (\n\t\t\t\u003cView style={{flex:1}}\u003e\n\t\t\t\n\t\t\t\t\u003cTabLayoutAndroid style={{height:60}} backgroundColor='#009688' indicatorTabColor='#ffc400'\n\t\t\t\t\t\t\t\t  indicatorTabHeight={2} scrollable={false} center={false}\u003e\n\n\t\t\t\t\t\u003cTabLayoutAndroid.Item text='Tab1' textSize={16} textColor=\"white\" selectedTextColor='#ffc400'\n\t\t\t\t\t\t\t\ticon='ic_home_black_24dp' iconPosition='left'\u003e\n\t\t\t\t\t\t\n\t\t\t\t\t\t\u003cText\u003eI'm the first Tab content!\u003c/Text\u003e\n\t\t\t\t\t\t\n\t\t\t\t\t\u003c/TabLayoutAndroid.Item\u003e\n\t\t\t\t\t\n\t\t\t\t\t\u003cTabLayoutAndroid.Item text='Tab2' textSize={16} textColor='white' selectedTextColor='#ffc400'\n\t\t\t\t\t\t\t\ticon='ic_important_devices_black_24dp' iconPosition='left'\u003e\n\t\t\t\t\t\t\n\t\t\t\t\t\t\u003cText\u003eI'm the second Tab content!\u003c/Text\u003e\n\t\t\t\t\t\t\n\t\t\t\t\t\u003c/TabLayoutAndroid.Item\u003e\n\n\t\t\t\t\u003c/TabLayoutAndroid\u003e\n\t\t\t\t\n\t\t\t\u003c/View\u003e\n\t\t);\n\t}\n}\n```\n\n###### Demonstration:\n\n\u003cp align=\"center\"\u003e\n\t\u003cimg src=\"https://raw.githubusercontent.com/ayoubdev/assets/master/react-native-android-kit/tablayout.Gif\" title=\"TabLayout Demonstration\" alt=\"TabLayoutAndroid \u0026 TabLayoutAndroid.Item\"/\u003e\n\u003c/p\u003e\n*For corresponding code, see [Code from demonstration application](example/src/index.js)*\n\n\u003cbr/\u003e\u003cbr/\u003e\u003cbr/\u003e\n\n### ButtonAndroid\n\n**Important Note:** Since 0.37 react-native release, you can use ```\u003cButton /\u003e``` as a cross native component between Android and iOS. I recommend you to use it instead of this ```\u003cButtonAndroid /\u003e``` component.\n\n#### Introduction\n\nRepresents a push-button widget. Push-buttons can be pressed, or clicked, by the user to perform an action.\u003cbr/\u003e\nFor more details, see: [Native Button documentation](http://developer.android.com/reference/android/widget/Button.html \"Button Android Developers\")\n\n#### Props:\n\n\u003e [View props...](https://facebook.github.io/react-native/docs/view.html#props)\u003cbr/\u003e\u003cbr/\u003e\n\u003e [TouchableWithoutFeedback props...](https://facebook.github.io/react-native/docs/touchablewithoutfeedback.html#props)\u003cbr/\u003e\u003cbr/\u003e\n\u003e **text** string *optional* \u003cbr/\u003eSets the button label.\u003cbr/\u003e\u003cbr/\u003e\n\u003e **textSize** number *optional, default = 15* \u003cbr/\u003eSet the default text size to the given value, interpreted as \"scaled pixel\" unit (sp unit).\u003cbr/\u003e\u003cbr/\u003e\n\u003e **textColor** [color](#color) *optional, default = 'black'* \u003cbr/\u003eSets the text color.\u003cbr/\u003e\u003cbr/\u003e\n\u003e **backgroundColor** [color](#color) *optional* \u003cbr/\u003eSets the background color.\u003cbr/\u003e\u003cbr/\u003e\n\n#### Example\n\n###### Basic Usage:\n\n```jsx\nimport React, { StyleSheet, View, ToastAndroid } from \"react-native\";\nimport { ButtonAndroid } from \"react-native-android-kit\";\n\nclass ButtonExample extends React.Component {\n\trender() {\n\t\treturn (\n\t\t\t\u003cView style={{flex:1}}\u003e\n\t\t\t\t\u003cButtonAndroid\n\t\t\t\t\ttextColor='red'\n\t\t\t\t\tbackgroundColor='#FF009688'\n\t\t\t\t\ttextSize={12}\n\t\t\t\t\ttext='Custom Button'\n\t\t\t\t\tonPress={\n\t\t\t\t\t\t() =\u003e {\n\t\t\t\t\t\t\tToastAndroid.show(\"Event onPress\", ToastAndroid.SHORT);\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\t\t\t\t/\u003e\n\t\t\t\u003c/View\u003e\n\t\t);\n\t}\n}\n```\n\n###### Demonstration:\n\n\u003cp align=\"center\"\u003e\n\t\u003cimg src=\"https://raw.githubusercontent.com/aybadb/assets/master/react-native-android-kit/button.Gif\" title=\"Button Demonstration\" alt=\"ButtonAndroid\"/\u003e\n\u003c/p\u003e\n\n*For corresponding code, see [Code from demonstration application](example/src/components/button.js)*\n\n\u003cbr/\u003e\u003cbr/\u003e\u003cbr/\u003e\n\n### FloatingButtonAndroid\n\n#### Introduction\n\nFloating action buttons are used for a special type of promoted action. They are distinguished by a circled icon floating above the UI.\u003cbr/\u003e\nFor more details, see: [Native FloatingActionButton documentation](http://developer.android.com/reference/android/support/design/widget/FloatingActionButton.html \"FloatingActionButton Android Developers\")\n\n#### Props:\n\n\u003e [View props...](https://facebook.github.io/react-native/docs/view.html#props)\u003cbr/\u003e\u003cbr/\u003e\n\u003e [TouchableWithoutFeedback props...](https://facebook.github.io/react-native/docs/touchablewithoutfeedback.html#props)\u003cbr/\u003e\u003cbr/\u003e\n\u003e **icon** string *optional* \u003cbr/\u003eSets the button icon (see [Drawable](#drawable)).\u003cbr/\u003e\u003cbr/\u003e\n\u003e **backgroundColor** [color](#color) *optional* \u003cbr/\u003eSets the background color.\u003cbr/\u003e\u003cbr/\u003e\n\u003e **rippleColor** [color](#color) *optional* \u003cbr/\u003eSets the ripple color.\u003cbr/\u003e\u003cbr/\u003e\n\u003e **hidden** boolean *optional, default = false* \u003cbr/\u003eHides/Shows the button: \u003cbr/\u003etrue = Hides the button.\u003cbr/\u003efalse = Shows the button.\u003cbr/\u003e\u003cbr/\u003e\n\u003e **rippleEffect** boolean *optional, default = true* \u003cbr/\u003eDefines whether this view reacts to click by a ripple effect or not: \u003cbr/\u003etrue = Ripple effect enabled.\u003cbr/\u003efalse = Ripple effect disabled.\u003cbr/\u003e\u003cbr/\u003e\n\n#### Example:\n\n###### Basic Usage:\n\n```jsx\nimport React, { StyleSheet, View, ToastAndroid } from \"react-native\";\nimport { FloatingButtonAndroid } from \"react-native-android-kit\";\n\nclass FloatingButtonExample extends React.Component {\n\trender() {\n\t\treturn (\n\t\t\t\u003cView style={{flex:1}}\u003e\n\t\t\t\t\u003cFloatingButtonAndroid\n\t\t\t\t\tstyle={[styles.fab,{height:100, width:100}]}\n\t\t\t\t\tbackgroundColor='#ffff0000'\n\t\t\t\t\trippleColor='black'\n\t\t\t\t\ticon='ic_reply_all_black_24dp'\n\t\t\t\t\tonPress={\n\t\t\t\t\t\t() =\u003e {\n\t\t\t\t\t\t\tToastAndroid.show(\"Event onPress\", ToastAndroid.SHORT);\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\t\t\t\t/\u003e\n\t\t\t\u003c/View\u003e\n\t\t);\n\t}\n}\n```\n\n###### Demonstration:\n\n\u003cp align=\"center\"\u003e\n\t\u003cimg src=\"https://raw.githubusercontent.com/aybadb/assets/master/react-native-android-kit/fab.Gif\" title=\"FloatingActionButton Demonstration\" alt=\"FloatingButtonAndroid\"/\u003e\n\u003c/p\u003e\n\n*For corresponding code, see [Code from demonstration application](example/src/components/floatingButton.js)*\n\n\u003cbr/\u003e\u003cbr/\u003e\u003cbr/\u003e\u003cbr/\u003e\n\n## Misc\n\n\u003cbr/\u003e\n\n### Color\n\nColor value property is set via a string input. \u003cbr/\u003e\nSupported formats are: `'#RRGGBB' , '#AARRGGBB'` or one of the following names: `'red', 'blue', 'green', 'black', 'white', 'gray', 'cyan', 'magenta', 'yellow', 'lightgray', 'darkgray', 'grey', 'lightgrey', 'darkgrey', 'aqua', 'fuchsia', 'lime', 'maroon', 'navy', 'olive', 'purple', 'silver', 'teal'`.\n\n\u003cbr/\u003e\n\n### Drawable\n\nFor now, only static images resources are supported. They must be located inside one of drawable folders (usually located at `android/app/src/main/res/drawable` or `android/app/src/main/res/drawable-XXXXXX` if you want to manage icon size according to display format). \u003cbr/\u003e\nTo target a resource, you only need to specify string basename (i.e. without extension) and it must respect underscored name. For example, if you have an image called toto-tata.png, you must specify 'toto_tata' as a property value.\n\n\u003cbr/\u003e\n\n### Demo\n\nIf you want an overview of RNAK, it's interesting to try the demonstration code located inside `./example` folder.\n\nTo build and test this demo, just follow these steps:\n\n- [x] Connect your device or launch your Android emulator\n- [x] Clone this repository\n- [x] Go to the example folder: `cd ./example`\n- [x] Install npm dependencies, build and deploy the demonstration application by running: `npm install`\n- [x] Enjoy RNAK demo on your device/emulator !\n\n\u003cbr/\u003e\n\n### Todo\n\n- [x] **TabLayoutAndroid:** Homogenize component props and naming with TabBarIOS react-native implementation\n- [x] **TabLayoutAndroid:** Programmatically set the current active tab\n\n\u003cbr/\u003e\u003cbr/\u003e\u003cbr/\u003e\u003cbr/\u003e\n\n## License\n\n[MIT](./LICENSE \"License MIT\")\n","funding_links":[],"categories":["Components"],"sub_categories":["UI"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fayoubdev%2Freact-native-android-kit","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fayoubdev%2Freact-native-android-kit","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fayoubdev%2Freact-native-android-kit/lists"}