├── .gitignore ├── assets ├── hero.png ├── ios.png ├── .DS_Store ├── android.png ├── macos.png └── windows.png ├── package.json ├── LICENSE ├── wiki ├── Tutorials.md ├── Setup.md ├── Creation │ ├── iOS.md │ └── Android.md └── Introduction.md └── README.md /.gitignore: -------------------------------------------------------------------------------- 1 | .history/ -------------------------------------------------------------------------------- /assets/hero.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/prscX/awesome-react-native-native-modules/HEAD/assets/hero.png -------------------------------------------------------------------------------- /assets/ios.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/prscX/awesome-react-native-native-modules/HEAD/assets/ios.png -------------------------------------------------------------------------------- /assets/.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/prscX/awesome-react-native-native-modules/HEAD/assets/.DS_Store -------------------------------------------------------------------------------- /assets/android.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/prscX/awesome-react-native-native-modules/HEAD/assets/android.png -------------------------------------------------------------------------------- /assets/macos.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/prscX/awesome-react-native-native-modules/HEAD/assets/macos.png -------------------------------------------------------------------------------- /assets/windows.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/prscX/awesome-react-native-native-modules/HEAD/assets/windows.png -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "awesome-react-native-native-modules", 3 | "version": "0.0.0", 4 | "description": "Awesome ReactNative: Native Modules Guidelines/Components/News/Tools/Learning Materials", 5 | "main": "", 6 | "scripts": { 7 | "test": "echo \"Error: no test specified\" && exit 1" 8 | }, 9 | "keywords": [ ], 10 | "author": "Pranav Raj Singh Chauhan", 11 | "license": "Apache License", 12 | "repository": { 13 | "type": "git", 14 | "url": "https://github.com/prscX/awesome-react-native-native-modules.git" 15 | }, 16 | "dependencies": { }, 17 | "devDependencies": { }, 18 | "peerDependencies": { } 19 | } -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2018 Pranav Raj Singh Chauhan 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /wiki/Tutorials.md: -------------------------------------------------------------------------------- 1 | 2 | # Tutorials 3 | 4 | ## Blogs 5 | 6 | - [React Native: Guidelines - native-modules-ios](https://facebook.github.io/react-native/docs/native-modules-ios.html) 7 | - [React Native - Guidelines - native-modules-android](https://www.decoide.org/react-native/docs/native-modules-android.html) 8 | - [Infinite.Red: native-modules-for-react-native-android](https://shift.infinite.red/native-modules-for-react-native-android-ac05dbda800d) 9 | - [how-to-achieve-react-native-and-ios-bridging](http://www.tothenew.com/blog/how-to-achieve-react-native-and-ios-bridging/) 10 | - [Tyler Buchea: how-to-create-a-react-native-ios-native-module](http://blog.tylerbuchea.com/how-to-create-a-react-native-ios-native-module/) 11 | - [writing-native-modules-for-react-native](https://www.promptworks.com/blog/writing-native-modules-for-react-native) 12 | - [react-native-bridging-modules-android](http://www.codepool.biz/react-native-bridging-modules-android.html) 13 | - [tadeuzagallo/react-native-bridge](https://tadeuzagallo.com/blog/react-native-bridge/) 14 | - [access-platform-apis-with-react-native-modules](https://www.sitepoint.com/access-platform-apis-with-react-native-modules/) 15 | 16 | ## Videos 17 | 18 | - [How to bridge native modules and UI components in React Native by Peggy Rayzis](https://www.youtube.com/watch?v=OrIIPNEjQfs) 19 | - [Chain React 2017: Breaking Down Bridging in React Native by Peggy Rayzis 20 | ](https://www.youtube.com/watch?v=GiUo88TGebs) 21 | 22 | ## Samples 23 | 24 | Please refer below working projects for the hands on: 25 | 26 | - [react-native-shine-button](https://github.com/prscX/react-native-shine-button) 27 | - [react-native-popover-menu](https://github.com/prscX/react-native-popover-menu) -------------------------------------------------------------------------------- /wiki/Setup.md: -------------------------------------------------------------------------------- 1 | 2 | # Setup 3 | 4 | ## How to create a Native Module 5 | 6 | - Please install [react-native-create-library](https://github.com/frostney/react-native-create-library) library for creating a base structure of your Native Module 7 | 8 | `npm install -g react-native-create-library` 9 | 10 | - Navigate into an empty directory to execute the command: 11 | 12 | `$ react-native-create-library MyNativeModule` 13 | 14 | > This will generate native Android, iOS & Windows library projects, based on your need to can remove other platform generated libraries. 15 | 16 | ## How to add Native Module to your app 17 | 18 | - Automatic 19 | 20 | `$ npm install react-native-my-native-module --save` 21 | 22 | `$ react-native link react-native-my-native-module` 23 | 24 | - Manually 25 | 26 | 27 | #### iOS 28 | 29 | 1. In XCode, in the project navigator, right click `Libraries` ➜ `Add Files to [your project's name]` 30 | 2. Go to `node_modules` ➜ `react-native-my-native-module` and add `RNMyNativeModule.xcodeproj` 31 | 3. In XCode, in the project navigator, select your project. Add `libRNMyNativeModule.a` to your project's `Build Phases` ➜ `Link Binary With Libraries` 32 | 4. Run your project (`Cmd+R`)< 33 | 34 | #### Android 35 | 36 | 1. Open up `android/app/src/main/java/[...]/MainActivity.java` 37 | - Add `import com.reactlibrary.RNMyNativeModulePackage;` to the imports at the top of the file 38 | - Add `new RNMyNativeModulePackage()` to the list returned by the `getPackages()` method 39 | 2. Append the following lines to `android/settings.gradle`: 40 | ``` 41 | include ':react-native-my-native-module' 42 | project(':react-native-my-native-module').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-my-native-module/android') 43 | ``` 44 | 3. Insert the following lines inside the dependencies block in `android/app/build.gradle`: 45 | ``` 46 | compile project(':react-native-my-native-module') 47 | ``` 48 | 49 | #### Windows 50 | 51 | 1. In Visual Studio add the `RNMyNativeModule.sln` in `node_modules/react-native-my-native-module/windows/RNMyNativeModule.sln` folder to their solution, reference from their app. 52 | 2. Open up your `MainPage.cs` app 53 | - Add `using My.Native.Module.RNMyNativeModule;` to the usings at the top of the file 54 | - Add `new RNMyNativeModulePackage()` to the `List` returned by the `Packages` method 55 | 56 | [Read it! :D](https://github.com/Microsoft/react-native-windows) 57 | -------------------------------------------------------------------------------- /wiki/Creation/iOS.md: -------------------------------------------------------------------------------- 1 | 2 | ## Macros 3 | 4 | - **RCTBridgeModule**: RCTBridgeModule is a protocol. It provides an interface for registering a bridge module RCTBridgeModule `@protocol RCTBridgeModule` 5 | 6 | - **RCT_EXPORT_MODULE(js_name)**: Register your module with the bridge during class implementation. It has an argument js_name which is optional and it is used as the JS module name. In case if it is not defined, Objective-C class name will be defined as the JS module name. 7 | 8 | - **RCT_EXPORT_METHOD(method)\RCT_REMAP_METHOD(, method)**: Bridge modules can also define methods that are exported to JavaScript as `NativeModules.ModuleName.methodName` 9 | 10 | ```objectivec 11 | RCT_EXPORT_METHOD(funcName:(NSString *)onlyString 12 | secondName:(NSInteger)argInteger) 13 | { ... } 14 | ``` 15 | 16 | This is exposed to JavaScript as `NativeModules.ModuleName.funcName` 17 | 18 | ## How to create a Native Module Package 19 | 20 | We’ll need to add two files to our project: a header file and its implementation file. 21 | 22 | 23 | 24 | ```objectivec 25 | - MyNativePackage.h 26 | 27 | #import "RCTBridgeModule.h" 28 | 29 | @interface MyNativePackage : NSObject 30 | @end 31 | 32 | - MyNativePackage.m 33 | 34 | #import "MyNativePackage.h" 35 | 36 | @implementation MyNativePackage 37 | 38 | RCT_EXPORT_MODULE(); 39 | 40 | @end 41 | ``` 42 | 43 | ## Creating a Module Method 44 | 45 | We can now add a method to actually get the system volume in Volume.m (see this commit in our example code): 46 | 47 | ```objectivec 48 | RCT_EXPORT_METHOD(Show:(RCTResponseSenderBlock)callback) { 49 | } 50 | ``` 51 | 52 | - Invoking Module Method from JavaScript 53 | 54 | ```javascript 55 | import { NativeModules } from 'react-native' 56 | 57 | const MyNativeModule = NativeModules.MyNativeModule; 58 | MyNativeModule.Show(() => {}) 59 | ``` 60 | 61 | ## Creating a Native View Component 62 | 63 | - Create a view method to return your native component 64 | 65 | ```objectivec 66 | - (UIView *)view { 67 | //Initialize & return your native component view 68 | } 69 | ``` 70 | 71 | - Creating native prop methods 72 | 73 | ```objectivec 74 | RCT_CUSTOM_VIEW_PROPERTY(prop, DATA_TYPE_OF_PROP, YOUR_NATIVE_COMPONENT_CLASS) { 75 | } 76 | ``` 77 | 78 | 79 | - Accessing in JavaScript 80 | 81 | ```javascript 82 | import { requireNativeComponent } from "react-native" 83 | 84 | const MyNativeComponent = requireNativeComponent("RNNativeComponent", RNNativeComponent, { 85 | nativeOnly: { } 86 | }) 87 | 88 | 89 | ``` -------------------------------------------------------------------------------- /wiki/Introduction.md: -------------------------------------------------------------------------------- 1 | # Introduction 2 | 3 | Native Modules enable an app to access platform API that are not exposed to JavaScript. There can be multiple use cases for creating a Native Module, maybe you want to reuse some existing Java/Objective-C/Swift/Kotlin code without having to reimplement it in JavaScript, or write some high performance components, multi-thread code such as for image processing or any number of advanced extensions. 4 | 5 | React Native is designed in such that it is possible for you to write real native code and have access to the full power of the platform in JavaScript. 6 | 7 | ## Things you should know BEFORE you create a Native Module 8 | 9 | 10 | | **Dev Stack**|| 11 | |----|----| 12 | |**`Platforms`**| Fair understanding of __Android, iOS__ Platform API's 13 | |**`IDE`**|Xcode, Android Studio 14 | |**`Languages`**| You need a basic knowledge of native language __JavaScript, Objective-C, Swift, Java__ in order to create a Native Module 15 | 16 | 17 | ## Eligibility Criteria for creating a Native Module 18 | 19 | The main vision of React Native is to Learn once, write anywhere, we also believe in the same ideology. Before creating any Native Module we should consider below points: 20 | 21 | - **Availability:** Please check the availability of Platform API's, Native Libraries for which you are planning to create a Native Module, ideally it should be supported on both Platforms (iOS, Android). 22 | - **Community & Maintenance:** Libraries which you are considering ideally should have a strong community, contributors backing, so that you can easily fulfil your community raised requests/queries. 23 | - **Performance**: If you are looking for HIGH performance and cannot be achieved using JavaScript. 24 | - **Scalability:** Native library which you are considering for Native Module should be scalable enough to fulfil your community needs. 25 | 26 | 27 | ## Advantages of Native Module 28 | 29 | - **Reusability & Time Saving:** Libraries already exist in native, you can simply create a RN Bridge in order to access it in JavaScript. 30 | 31 | - **Performance, Animation & Multithread:** Native Modules are always HIGH rich in performance and multithread since it can use full power of Platform API's. 32 | 33 | - **Look & Feel:** There are scenarios where only Native Modules can accomplish native look and feel of component. 34 | 35 | ## Disadvantage of Native Module 36 | 37 | - **Maintenance & Scalability:** Since Native Modules are written in different languages, it becomes hard to maintain same source in two different languages until you do not have a strong backing community. 38 | 39 | -------------------------------------------------------------------------------- /wiki/Creation/Android.md: -------------------------------------------------------------------------------- 1 | 2 | ## How to create a Native Module Package 3 | 4 | - Create a Java class for your Native Module Package by extending from ReactPackage, ideally it can look like below: 5 | 6 | - Override `createNativeModules` & `createViewManagers` methods 7 | 8 | ```java 9 | 10 | public class MyNativePackage implements ReactPackage { 11 | @Override 12 | public List createNativeModules(ReactApplicationContext reactContext) { 13 | } 14 | 15 | @Override 16 | public List createViewManagers(ReactApplicationContext reactContext) { 17 | } 18 | } 19 | 20 | ``` 21 | 22 | - Add your Native Modules to `createNativeModules` method 23 | 24 | ```java 25 | public List createNativeModules(ReactApplicationContext reactContext) { 26 | List modules = new ArrayList<>(); 27 | modules.add(new MyNativeModule(reactContext)); 28 | 29 | return modules; 30 | } 31 | ``` 32 | 33 | - Add your Native Module UI Components to `createViewManagers` method 34 | 35 | ```java 36 | public List createViewManagers(ReactApplicationContext reactContext) { 37 | List components = new ArrayList<>(); 38 | components.add(new RNNativeComponent()); 39 | 40 | return components; 41 | } 42 | ``` 43 | 44 | ## Creating a Module Class 45 | 46 | - We’ll start by creating the MyNativeModule class, and extending ReactContextBaseJavaModule. 47 | 48 | ```java 49 | public class MyNativeModule extends ReactContextBaseJavaModule { 50 | public MyNativeModule(ReactApplicationContext reactContext) { 51 | super(reactContext); 52 | } 53 | } 54 | ``` 55 | 56 | - That’s a good start, but in order for React Native to find our module in NativeModules we’ll need to override the getName method. 57 | 58 | ```java 59 | @Override 60 | public String getName() { 61 | return "MyNativeModule"; 62 | } 63 | ``` 64 | 65 | - We now have a fully functional (if totally useless) native module that we can import in our JavaScript code. Let’s make it do something a bit more interesting. 66 | 67 | - Exposing Module Methods: Let's defines an `Show` method that takes a config object and success and cancel callbacks. 68 | 69 | ```java 70 | public class MyNativeModule extends ReactContextBaseJavaModule { 71 | @ReactMethod 72 | public void Show(ReadableMap config, Callback successCallback, Callback cancelCallback) { 73 | Activity currentActivity = getCurrentActivity(); 74 | 75 | if (currentActivity == null) { 76 | cancelCallback.invoke("Activity doesn't exist"); 77 | return; 78 | } 79 | } 80 | } 81 | ``` 82 | 83 | - Invoking Module Method from JavaScript 84 | 85 | ```javascript 86 | import { NativeModules } from "react-native"; 87 | 88 | const { MyNativeModule } = NativeModules; 89 | 90 | MyNativeModule.Show( 91 | {}, //Config Parameters 92 | () => {}, //Success Callback 93 | () => {} //Cancel Callback 94 | ) 95 | 96 | ``` 97 | 98 | > **Note**: 99 | > - Module method are just for static invocation, it cannot be part of react tree 100 | 101 | ## Creating a Native View Component 102 | 103 | - If you want to render a Native View component in react tree 104 | 105 | - Create a Java Class extending from ReactNative ViewGroupManager 106 | 107 | ```java 108 | public class RNNativeComponent extends ViewGroupManager { 109 | public static final String REACT_CLASS = "RNNativeComponent"; 110 | } 111 | ``` 112 | 113 | - Override `getName` method: 114 | 115 | ```java 116 | @Override 117 | public String getName() { 118 | return REACT_CLASS; 119 | } 120 | ``` 121 | 122 | - Override `createViewInstance` method to return your custom native component 123 | 124 | ```java 125 | @Override 126 | protected FrameLayout createViewInstance(final ThemedReactContext reactContext) { 127 | return //Your-Native-Component-Wrappered-Inside-FrameLayout 128 | } 129 | ``` 130 | 131 | - Creating native prop methods 132 | 133 | ```java 134 | @ReactProp(name = "prop_name") 135 | public void setPropName(NativeComponent nativeComponent, propDataType prop) { 136 | } 137 | ``` 138 | 139 | 140 | - Accessing in JavaScript 141 | 142 | ```javascript 143 | import { requireNativeComponent } from "react-native" 144 | 145 | const MyNativeComponent = requireNativeComponent("RNNativeComponent", RNNativeComponent, { 146 | nativeOnly: { } 147 | }) 148 | 149 | 150 | ``` -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 |

2 | 3 |

4 | 5 |

6 | 7 |

8 | awesome 9 | 10 | PRs Welcome 11 | 12 |

13 | 14 | 15 | Awesome React Native: Native Modules 16 | 17 | If this project has helped you out, please support us with a star 🌟 18 |

19 | 20 | A curated list of Awesome React Native: Native Modules Guidelines/Components/News/Tools/Learning Materials. For general React Native libraries please have a look at [awesome-react-native](https://github.com/jondot/awesome-react-native). 21 | 22 | 23 | ## Content 24 | 25 | - Introduction 26 | - [Things you should know BEFORE you create a Native Module](./wiki/Introduction.md#Things-you-should-know-BEFORE-you-create-a-Native-Module) 27 | - [Eligibility Criteria for creating a Native Module](./wiki/Introduction.md#Eligibility-Criteria-for-creating-a-Native-Module) 28 | - [Advantages of Native Module](./wiki/Introduction.md#Advantages-of-Native-Module) 29 | - [Disadvantage of Native Module](./wiki/Introduction.md#Disadvantage-of-Native-Module) 30 | 31 | - Setup 32 | - [How to create a Native Module](./wiki/Setup.md#How-to-create-a-Native-Module) 33 | - [How to add Native Module to your app](./wiki/Setup.md#How-to-add-Native-Module-to-your-app) 34 | 35 | - Creating Native Modules 36 | - [Android](./wiki/Creation/Android.md) 37 | - [iOS](./wiki/Creation/iOS.md) 38 | 39 | 40 | - Tutorials 41 | - [Blogs](./wiki/Tutorials.md#Blogs) 42 | - [Videos](./wiki/Tutorials.md#Videos) 43 | - [Samples](./wiki/Tutorials.md#Samples) 44 | 45 | - Native Modules 46 | - [UI Libraries](https://github.com/prscX/awesome-react-native-native-modules#UI:-Native-Modules) 47 | - [Loaders & Animation Libraries](https://github.com/prscX/awesome-react-native-native-modules#Loaders-&-Animation:-Native-Modules) 48 | - [Alert, Prompt, Action & Dialog Libraries](https://github.com/prscX/awesome-react-native-native-modules#Alter,-Prompt,-Action-&-Dialog:-Native-Modules) 49 | - [Image, Audio, Video & Docs Libraries](https://github.com/prscX/awesome-react-native-native-modules#Image-&-Audio-&-Video-&-Docs:-Native-Modules) 50 | - [Network Libraries](https://github.com/prscX/awesome-react-native-native-modules#Network:-Native-Modules) 51 | - [Motion Sensor Libraries](https://github.com/prscX/awesome-react-native-native-modules#Motion-Sensor:-Native-Modules) 52 | - [Widget Libraries](https://github.com/prscX/awesome-react-native-native-modules#Widget:-Native-Modules) 53 | - [OS, System & File Manager Libraries](https://github.com/prscX/awesome-react-native-native-modules#OS-&-System-&-File-Manager:-Native-Modules) 54 | - [Security & Auth Libraries](https://github.com/prscX/awesome-react-native-native-modules#Security-&-Auth:-Native-Modules) 55 | - [Charts & Graph Libraries](https://github.com/prscX/awesome-react-native-native-modules#Chart-&-Graph:-Native-Modules) 56 | - [Utility, Build & Publish Libraries](https://github.com/prscX/awesome-react-native-native-modules#Utility-&-Build-&-Publish:-Native-Modules) 57 | 58 | - [Credits](https://github.com/prscX/awesome-react-native-native-modules#Credits) 59 | - [Contributors](https://github.com/prscX/awesome-react-native-native-modules#Contribution) 60 | - [License](https://github.com/prscX/awesome-react-native-native-modules#License) 61 | 62 | 63 | 64 | ## UI: Native Modules 65 | 66 | - [react-native-linear-gradient ★1710](https://github.com/react-native-community/react-native-linear-gradient): A component for react-native. 67 | 68 | 69 | 70 | - [react-native-tableview ★921](https://github.com/aksonov/react-native-tableview): Native iOS UITableView for React Native with JSON support and more. 71 | 72 | 73 | 74 | - [react-native-overlay ★588](https://github.com/brentvatne/react-native-overlay): A component that brings content inside to the front of the view regardless of its current position in the component tree. 75 | 76 | 77 | 78 | - [react-native-search-bar ★582](https://github.com/umhan35/react-native-search-bar): The high-quality iOS native search bar for react native. 79 | 80 | 81 | 82 | - [react-native-bottom-sheet-behavior ★554](https://github.com/cesardeazevedo/react-native-bottom-sheet-behavior): React Native wrapper for Android BottomSheetBehavior. 83 | 84 | 85 | 86 | - [react-native-sketch ★363](https://github.com/jgrancher/react-native-sketch): A React Native component for touch-based drawing. 87 | 88 | 89 | 90 | - [react-native-signature-capture ★343](https://github.com/RepairShopr/react-native-signature-capture): A simple modular component for react native (iOS) to capture a signature as an image. 91 | 92 | 93 | 94 | - [react-native-effects-view ★275](https://github.com/voronianski/react-native-effects-view): Use iOS8 UIVisualEffectViews's blur and vibrancy with ReactNative. 95 | 96 | 97 | 98 | - [react-native-text-input-mask ★188](https://github.com/react-native-community/react-native-text-input-mask): Text input mask for React Native, Android and iOS. 99 | 100 | 101 | 102 | - [react-native-cardview ★153](https://github.com/Kishanjvaghela/react-native-cardview): CardView for react-native (All Android version and iOS). 103 | 104 | 105 | 106 | - [RCTAutoComplete ★148](https://github.com/nulrich/RCTAutoComplete): React Native Component for MLPAutoCompleteTextField. 107 | 108 | 109 | 110 | - [react-native-shimmer ★137](https://github.com/oblador/react-native-shimmer): Simple shimmering effect for any view in React Native. 111 | 112 | 113 | 114 | - [react-native-collapsing-toolbar ★130](https://github.com/cesardeazevedo/react-native-collapsing-toolbar): React Native wrapper for Android CollapsingToolbarLayout. 115 | 116 | 117 | 118 | - [react-native-custom-segmented-control ★102](https://github.com/wix/react-native-custom-segmented-control): Custom version of the IOS SegmentedControl component. 119 | 120 | 121 | 122 | - [react-native-android-kit ★94](https://github.com/adbayb/react-native-android-kit): Android Native Kit for React Native 123 | 124 | 125 | 126 | - [react-native-material-palette ★74](https://github.com/callstack/react-native-material-palette): Bringing Material Palette API to React Native. 127 | 128 | 129 | 130 | - [react-native-ios-drag-drop ★63](https://github.com/matt-oakes/react-native-ios-drag-drop): Support for the iOS 11+ inter-app drag and drop. 131 | 132 | 133 | 134 | - [react-native-android-activity ★37](https://github.com/petterh/react-native-android-activity): A React Native component for android view pager with tabs. 135 | 136 | 137 | 138 | - [react-native-full-screen ★31](https://github.com/Anthonyzou/react-native-full-screen): Full screen functionality for Android. 139 | 140 | 141 | 142 | - [react-native-tabbed-view-pager-android ★21](https://github.com/madhu314/react-native-tabbed-view-pager-android): A React Native component for android view pager with tabs. 143 | 144 | 145 | 146 | - [react-native-material-shadows ★19](https://github.com/prscX/react-native-material-shadows): React Native: Native Material Shadows. 147 | 148 | 149 | 150 | - [react-native-gradient-blur-view ★10](https://github.com/prscX/react-native-gradient-blur-view): React Native: Native Gradient with Blur Effect. 151 | 152 | 153 | 154 | - [react-native-android-bottom-navigation ★10](https://github.com/timomeh/react-native-android-bottom-navigation): Native UI Component of Android's BottomNavigation for react-native. 155 | 156 | 157 | 158 | - [react-native-radio-button-android ★4](https://github.com/sichacvah/react-native-radio-button-android): A React Native Radio using the stock android widget. 159 | 160 | 161 | 162 | - [react-native-android-slidingtabstrip ★3](https://github.com/Benjamin-Dobell/react-native-android-slidingtabstrip): React Native sliding tab strip implementation for Android. 163 | 164 | 165 | 166 | 167 | 168 | 169 | 170 | 171 | ## Loaders & Animation: Native Modules 172 | 173 | - [react-native-spinkit ★1230](https://github.com/maxs15/react-native-spinkit): A collection of animated loading indicators for React Native. 174 | 175 | 176 | 177 | - [react-native-spruce ★215](https://github.com/prscX/react-native-spruce): React Native Bridge for Native Spruce Animation Library. 178 | 179 | 180 | 181 | - [react-native-shine-button ★87](https://github.com/prscX/react-native-shine-button): React Native: Native Shine Button - Effects like shining. 182 | 183 | 184 | 185 | - [react-native-taptargetview ★66](https://github.com/prscX/react-native-taptargetview): React Native Bridge for Android KeepSafe/TapTargetView. 186 | 187 | 188 | 189 | - [react-native-iconic ★58](https://github.com/prscX/react-native-iconic): React Native - Native Animated Icons with different states. 190 | 191 | 192 | 193 | - [react-native-material-showcase-ios ★50](https://github.com/prscX/react-native-material-showcase-ios): React Native Bridge for aromajoin/material-showcase-ios. 194 | 195 | 196 | 197 | - [react-native-download-button ★35](https://github.com/prscX/react-native-download-button): React Native: Native Download Button: with pretty cool animation. 198 | 199 | 200 | 201 | - [react-native-progresshub ★11](https://github.com/frontendhot/react-native-progresshub): An implement of ProgressHUD for React-Native, similar to MBProgressHUD for iOS and KProgressHUD for Android. 202 | 203 | 204 | 205 | - [react-native-siri-wave-view ★8](https://github.com/prscX/react-native-siri-wave-view): React Native: Native Siri Wave View. 206 | 207 | 208 | 209 | - [react-native-dialog-progress ★1](https://github.com/cleandersonlobo/react-native-dialog-progress): A dialog showing a progress indicator for React Native. 210 | 211 | 212 | 213 | 214 | 215 | 216 | 217 | ## Alter, Prompt, Action & Dialog: Native Modules 218 | 219 | - [react-native-picker ★870](https://github.com/beefe/react-native-picker): A Native Picker with high performance. 220 | 221 | 222 | 223 | - [react-native-activity-view ★387](https://github.com/naoufal/react-native-activity-view): iOS share and action sheets for React Native. 224 | 225 | 226 | 227 | - [react-native-dialogs ★382](https://github.com/aakashns/react-native-dialogs): React Native wrappers for [material-dialogs](https://github.com/afollestad/material-dialogs). 228 | 229 | 230 | 231 | - [react-native-tooltip ★176](https://github.com/chirag04/react-native-tooltip): A react-native wrapper for showing tooltips. 232 | 233 | 234 | 235 | - [react-native-snackbar ★172](https://github.com/cooperka/react-native-snackbar): Material-design "Snackbar" component for Android and iOS. 236 | 237 | 238 | 239 | - [react-native-bottom-action-sheet ★90](https://github.com/prscX/react-native-bottom-action-sheet): React Native: Native Bottom Action Sheet. 240 | 241 | 242 | 243 | - [react-native-popover-menu ★68](https://github.com/prscX/react-native-popover-menu): React Native: Native Popover Menu. 244 | 245 | 246 | 247 | - [react-native-action-sheet ★66](https://github.com/yfuks/react-native-action-sheet): React native simple action sheet with native android (using the built-in AlertDialog). 248 | 249 | 250 | 251 | - [react-native-prompt-android ★53](https://github.com/shimohq/react-native-prompt-android): A polyfill library for Alert.prompt on Android platform, working both on Android and iOS platform. 252 | 253 | 254 | 255 | - [react-native-custom-actsheet ★39](https://github.com/guodong000/react-native-custom-actsheet): A custom ActionSheet for React Native. 256 | 257 | 258 | 259 | - [react-native-bem-check-box ★28](https://github.com/torifat/react-native-bem-check-box): React Native bridge for awesome BEMCheckBox. 260 | 261 | 262 | 263 | - [react-native-nmrangeslider-ios ★24](https://github.com/Enrise/react-native-nmrangeslider-ios): React Native Slider component with two markers based on NMRangeSlider. 264 | 265 | 266 | 267 | - [react-native-tooltips ★18](https://github.com/prscX/react-native-tooltips): React Native: Native Tooltip View. 268 | 269 | 270 | 271 | - [react-native-android-location-enabler ★11](https://github.com/Richou/react-native-android-location-enabler): Display a GoogleMap like android popup to ask for user to enable location services if disabled. 272 | 273 | 274 | 275 | 276 | 277 | 278 | 279 | 280 | ## Image, Audio, Video & Docs: Native Modules 281 | 282 | - [react-native-camera ★4725](https://github.com/react-native-community/react-native-camera): A Camera component for React Native. Also supports barcode scanning!. 283 | 284 | 285 | 286 | - [react-native-image-picker ★3446](https://github.com/react-community/react-native-image-picker): A React Native module that allows you to use native UI to select media from the device library or directly from the camera. 287 | 288 | 289 | 290 | - [react-native-video ★2582](https://github.com/react-native-community/react-native-video): A