├── .DS_Store ├── .gitignore ├── .npmignore ├── LICENSE ├── README.md ├── assets ├── image.jpg └── video.jpg ├── dist ├── AwesomeCamera.d.ts ├── AwesomeCamera.js ├── AwesomeCamera.js.map ├── Images │ ├── close.png │ ├── flash.png │ ├── swap.png │ └── video.png ├── Media.d.ts ├── Media.js ├── Media.js.map ├── Permissions.d.ts ├── Permissions.js ├── Permissions.js.map ├── index.d.ts ├── index.js └── index.js.map ├── example ├── .bundle │ └── config ├── .eslintrc.js ├── .gitignore ├── .prettierrc.js ├── .watchmanconfig ├── App.tsx ├── Gemfile ├── Gemfile.lock ├── README.md ├── __tests__ │ └── App.test.tsx ├── android │ ├── app │ │ ├── build.gradle │ │ ├── debug.keystore │ │ ├── proguard-rules.pro │ │ └── src │ │ │ ├── debug │ │ │ ├── AndroidManifest.xml │ │ │ └── java │ │ │ │ └── com │ │ │ │ └── example │ │ │ │ └── ReactNativeFlipper.java │ │ │ ├── main │ │ │ ├── AndroidManifest.xml │ │ │ ├── java │ │ │ │ └── com │ │ │ │ │ └── example │ │ │ │ │ ├── MainActivity.java │ │ │ │ │ └── MainApplication.java │ │ │ └── res │ │ │ │ ├── drawable │ │ │ │ └── rn_edit_text_material.xml │ │ │ │ ├── mipmap-hdpi │ │ │ │ ├── ic_launcher.png │ │ │ │ └── ic_launcher_round.png │ │ │ │ ├── mipmap-mdpi │ │ │ │ ├── ic_launcher.png │ │ │ │ └── ic_launcher_round.png │ │ │ │ ├── mipmap-xhdpi │ │ │ │ ├── ic_launcher.png │ │ │ │ └── ic_launcher_round.png │ │ │ │ ├── mipmap-xxhdpi │ │ │ │ ├── ic_launcher.png │ │ │ │ └── ic_launcher_round.png │ │ │ │ ├── mipmap-xxxhdpi │ │ │ │ ├── ic_launcher.png │ │ │ │ └── ic_launcher_round.png │ │ │ │ └── values │ │ │ │ ├── strings.xml │ │ │ │ └── styles.xml │ │ │ └── release │ │ │ └── java │ │ │ └── com │ │ │ └── example │ │ │ └── ReactNativeFlipper.java │ ├── build.gradle │ ├── gradle.properties │ ├── gradle │ │ └── wrapper │ │ │ ├── gradle-wrapper.jar │ │ │ └── gradle-wrapper.properties │ ├── gradlew │ ├── gradlew.bat │ └── settings.gradle ├── app.json ├── babel.config.js ├── index.js ├── ios │ ├── .xcode.env │ ├── Podfile │ ├── Podfile.lock │ ├── example.xcodeproj │ │ ├── project.pbxproj │ │ └── xcshareddata │ │ │ └── xcschemes │ │ │ └── example.xcscheme │ ├── example.xcworkspace │ │ └── contents.xcworkspacedata │ ├── example │ │ ├── AppDelegate.h │ │ ├── AppDelegate.mm │ │ ├── Images.xcassets │ │ │ ├── AppIcon.appiconset │ │ │ │ └── Contents.json │ │ │ └── Contents.json │ │ ├── Info.plist │ │ ├── LaunchScreen.storyboard │ │ └── main.m │ └── exampleTests │ │ ├── Info.plist │ │ └── exampleTests.m ├── jest.config.js ├── metro.config.js ├── package.json ├── tsconfig.json └── yarn.lock ├── lib ├── AwesomeCamera.tsx ├── Images │ ├── close.png │ ├── flash.png │ ├── swap.png │ └── video.png ├── Media.tsx ├── Permissions.ts └── index.ts ├── package.json ├── tsconfig.json └── yarn.lock /.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/krinish291/react-native-awesome-camera/edfff9f7258ae6a665d2e63daf1ad07e0862328e/.DS_Store -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | -------------------------------------------------------------------------------- /.npmignore: -------------------------------------------------------------------------------- 1 | camera 2 | node_modules 3 | assets 4 | example -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2022 Krinish Radadiya 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 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # `📷 React Native Awesome Camera` 2 | 3 | [![npm version](https://badge.fury.io/js/react-native-awesome-camera.svg)](https://badge.fury.io/js/react-native-awesome-camera) [![npm downloads](https://img.shields.io/npm/dm/react-native-awesome-camera.svg)](https://www.npmjs.com/package/react-native-camera) 4 | 5 | ## Features List 6 | 7 |
8 | 9 | - High-quality camera support in Android and iOS 10 | - Select images and videos from phone storage with an option of multiple selection 11 | - Capture images and videos using the awesome camera 12 | - Flash, manual focus, and camera zoom features available 13 | - Customize theme color 14 | 15 |
16 |

17 | Image Capture 18 |         19 | Video Capture 20 |

21 | 22 |
23 | 24 | ### Installation and Setup steps 25 | 26 |
27 | 28 | ``` 29 | yarn add react-native-awesome-camera 30 | ``` 31 | 32 | or 33 | 34 | ``` 35 | npm i react-native-awesome-camera 36 | ``` 37 | 38 | install dependencies 39 | 40 | ``` 41 | yarn add react-native-permissions react-native-vision-camera @react-native-camera-roll/camera-roll react-native-gesture-handler 42 | ``` 43 | 44 | we are using **react-native-vision-camera** 45 |

46 | 47 | ### Android Changes 48 | 49 |
50 | 51 | Add below permission in your **AndroidManifest.xml** 52 | 53 | ```xml 54 | 55 | .... 56 | 57 | 58 | 59 | 60 | 61 | 62 | .... 63 | 64 | ``` 65 | 66 | ### iOS Changes 67 | 68 |
69 | 70 | Add below lines in your **Podfile** 71 | 72 | ```podFile 73 | # with react-native >= 0.72 74 | - # Resolve react_native_pods.rb with node to allow for hoisting 75 | - require Pod::Executable.execute_command('node', ['-p', 76 | - 'require.resolve( 77 | - "react-native/scripts/react_native_pods.rb", 78 | - {paths: [process.argv[1]]}, 79 | - )', __dir__]).strip 80 | 81 | + def node_require(script) 82 | + # Resolve script with node to allow for hoisting 83 | + require Pod::Executable.execute_command('node', ['-p', 84 | + "require.resolve( 85 | + '#{script}', 86 | + {paths: [process.argv[1]]}, 87 | + )", __dir__]).strip 88 | + end 89 | 90 | + node_require('react-native/scripts/react_native_pods.rb') 91 | + node_require('react-native-permissions/scripts/setup.rb') 92 | ``` 93 | 94 | ``` 95 | # with react-native < 0.72 96 | require_relative '../node_modules/react-native/scripts/react_native_pods' 97 | require_relative '../node_modules/@react-native-community/cli-platform-ios/native_modules' 98 | + require_relative '../node_modules/react-native-permissions/scripts/setup' 99 | ``` 100 | 101 | ``` 102 | # … 103 | 104 | platform :ios, min_ios_version_supported 105 | prepare_react_native_project! 106 | 107 | # ⬇️ uncomment wanted permissions 108 | setup_permissions([ 109 | # 'AppTrackingTransparency', 110 | # 'BluetoothPeripheral', 111 | # 'Calendars', 112 | 'Camera', 113 | # 'Contacts', 114 | # 'FaceID', 115 | # 'LocationAccuracy', 116 | # 'LocationAlways', 117 | # 'LocationWhenInUse', 118 | # 'MediaLibrary', 119 | 'Microphone', 120 | # 'Motion', 121 | # 'Notifications', 122 | 'PhotoLibrary', 123 | # 'PhotoLibraryAddOnly', 124 | # 'Reminders', 125 | # 'Siri', 126 | # 'SpeechRecognition', 127 | # 'StoreKit', 128 | ]) 129 | 130 | # … 131 | ``` 132 | 133 | Also change your **Info.plist** 134 | 135 | ```xml 136 | 137 | .... 138 | NSCameraUsageDescription 139 | ${APP_NAME} Need camera access to take pictures or video. 140 | NSMicrophoneUsageDescription 141 | ${APP_NAME} Need microphone access to record audio. 142 | NSPhotoLibraryUsageDescription 143 | ${APP_NAME} Need photo library access to access photo gallery. 144 | .... 145 | 146 | ``` 147 | 148 | if you are facing any permission-related issues, you can refer to [react-native-permissions/issues](https://github.com/zoontek/react-native-permissions/issues) 149 | 150 | you can refer these links for fixing [React-bridging wrong paths](https://github.com/facebook/react-native/issues/34102), [Added correct namespace qualifier to .mm file](https://github.com/Shopify/react-native-skia/pull/629/files) 151 | 152 | ## Props: 153 | 154 | | Name | Type | Required | Description | Default | 155 | | --------------------------- | --------------------- | -------- | --------------------------------------------------------------------------------------- | -------- | 156 | | setIsOpen | Function | Yes | Close awesome camera screen | - | 157 | | getData | Function | Yes | Return selected or captured media | - | 158 | | multiSelect | boolean | No | Option to select multiple files (image or video) | true | 159 | | themeColor | string | No | Custom theme color | 'yellow' | 160 | | secondaryColor | string | No | Custom secondary color | 'black' | 161 | | takePhotoOptions | TakePhotoOptions | No | Extends react-native-vision-camera's TakePhotoOptions interface while capturing a photo | - | 162 | | recordVideoOptions | RecordVideoOptions | No | Extends react-native-vision-camera's RecordVideoOptions interface when recording starts | - | 163 | | cameraProps | CameraProps | No | Extends react-native-vision-camera's CameraProps interface | - | 164 | | showGallery | boolean | No | For showing images available on device | true | 165 | | photo | boolean | No | For allowing photo capture | true | 166 | | video | boolean | No | For allowing video capture | true | 167 | | closeContainerStyle | ViewStyle | No | For styling close icon container | - | 168 | | closeIconStyle | ImageStyle | No | For styling close icon | - | 169 | | closeIcon | ImageSourcePropType | No | For providing custom close image resource | - | 170 | | renderCloseComponent | ReactComponentElement | No | For rendering custom close component | - | 171 | | videoContainerStyle | ViewStyle | No | For styling video icon container | - | 172 | | videoIconStyle | ImageStyle | No | For styling video icon | - | 173 | | videoIcon | ImageSourcePropType | No | For providing custom video image resource | - | 174 | | renderVideoComponent | ReactComponentElement | No | For rendering custom video component | - | 175 | | flashContainerStyle | ViewStyle | No | For styling flash icon container | - | 176 | | flashIconStyle | ImageStyle | No | For styling flash icon | - | 177 | | flashIcon | ImageSourcePropType | No | For providing custom flash image resource | - | 178 | | renderFlashComponent | ReactComponentElement | No | For rendering custom flash component | - | 179 | | changeCameraContainerStyle | ViewStyle | No | For styling change camera icon container | - | 180 | | changeCameraIconStyle | ImageStyle | No | For styling change camera icon | - | 181 | | changeCameraIcon | ImageSourcePropType | No | For providing custom change camera image resource | - | 182 | | renderChangeCameraComponent | ReactComponentElement | No | For rendering custom change camera component | - | 183 | 184 |
185 | 186 | ## Example 187 | 188 | ```javascript 189 | import React, { useState } from "react"; 190 | import { Button, SafeAreaView, StyleSheet } from "react-native"; 191 | import AwesomeCamera from "react-native-awesome-camera"; 192 | 193 | const App = () => { 194 | const { container } = styles; 195 | const [isOpen, setIsOpen] = useState(false); 196 | 197 | const getData = (data: any) => { 198 | console.log({ data }); 199 | }; 200 | 201 | return ( 202 | 203 | {(!isOpen && ( 204 |