├── .eslintignore ├── .eslintrc.js ├── .gitattributes ├── .github ├── ISSUE_TEMPLATE │ ├── bug_report.md │ ├── feature_request.md │ └── question.md └── PULL_REQUEST_TEMPLATE.md ├── .gitignore ├── .npmignore ├── .prettierrc ├── .releaserc ├── CHANGELOG.md ├── CONTRIBUTING.md ├── LICENSE.md ├── README.md ├── babel.config.js ├── example ├── index.tsx ├── ios │ ├── ImagePickerIOSExample-tvOS │ │ └── Info.plist │ ├── ImagePickerIOSExample-tvOSTests │ │ └── Info.plist │ ├── ImagePickerIOSExample.xcodeproj │ │ ├── project.pbxproj │ │ └── xcshareddata │ │ │ └── xcschemes │ │ │ ├── ImagePickerIOSExample-tvOS.xcscheme │ │ │ └── ImagePickerIOSExample.xcscheme │ ├── ImagePickerIOSExample │ │ ├── AppDelegate.h │ │ ├── AppDelegate.m │ │ ├── Base.lproj │ │ │ └── LaunchScreen.xib │ │ ├── Images.xcassets │ │ │ ├── AppIcon.appiconset │ │ │ │ └── Contents.json │ │ │ └── Contents.json │ │ ├── Info.plist │ │ └── main.m │ └── ImagePickerIOSExampleTests │ │ ├── ImagePickerIOSExampleTests.m │ │ └── Info.plist ├── metro.config.js └── yarn.lock ├── index.js ├── ios ├── RNCImagePickerIOS.h ├── RNCImagePickerIOS.m └── RNCImagePickerIOS.xcodeproj │ ├── project.pbxproj │ └── xcshareddata │ └── xcschemes │ └── RNCImagePickerIOS.xcscheme ├── jest.config.js ├── jest.setup.js ├── package.json ├── react-native-image-picker-ios.podspec ├── src ├── __tests__ │ ├── canRecordVideos.ts │ ├── canUseCamera.ts │ ├── openCameraDialog.ts │ └── openSelectDialog.ts ├── index.ts └── internal │ ├── nativeInterface.ts │ ├── privateTypes.ts │ └── types.ts ├── tsconfig.json └── yarn.lock /.eslintignore: -------------------------------------------------------------------------------- 1 | typings 2 | node_modules 3 | example/ios-bundle.js 4 | 5 | # generated by bob 6 | lib/ -------------------------------------------------------------------------------- /.eslintrc.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Copyright (c) Facebook, Inc. and its affiliates. 3 | * 4 | * This source code is licensed under the MIT license found in the 5 | * LICENSE file in the root directory of this source tree. 6 | * 7 | * @format 8 | */ 9 | 10 | const typescriptEslintRecommended = require('@typescript-eslint/eslint-plugin/dist/configs/recommended.json'); 11 | const typescriptEslintPrettier = require('eslint-config-prettier/@typescript-eslint'); 12 | 13 | module.exports = { 14 | extends: ['@react-native-community'], 15 | overrides: [ 16 | { 17 | files: ['*.ts', '*.tsx'], 18 | // Apply the recommended Typescript defaults and the prettier overrides to all Typescript files 19 | rules: Object.assign( 20 | typescriptEslintRecommended.rules, 21 | typescriptEslintPrettier.rules, 22 | { 23 | '@typescript-eslint/explicit-member-accessibility': 'off', 24 | }, 25 | ), 26 | }, 27 | { 28 | files: ['example/**/*.ts', 'example/**/*.tsx'], 29 | rules: { 30 | // Turn off rules which are useless and annoying for the example files files 31 | '@typescript-eslint/explicit-function-return-type': 'off', 32 | 'react-native/no-inline-styles': 'off', 33 | }, 34 | }, 35 | { 36 | files: ['**/__tests__/**/*.ts', '**/*.spec.ts'], 37 | env: { 38 | jest: true, 39 | }, 40 | rules: { 41 | // Turn off rules which are useless and annoying for unit test files 42 | '@typescript-eslint/explicit-function-return-type': 'off', 43 | }, 44 | }, 45 | ], 46 | }; 47 | -------------------------------------------------------------------------------- /.gitattributes: -------------------------------------------------------------------------------- 1 | *.pbxproj -text -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE/bug_report.md: -------------------------------------------------------------------------------- 1 | --- 2 | name: 🐛 Report a bug 3 | about: Report a reproducible or regression bug. 4 | labels: 'bug' 5 | --- 6 | 7 | 8 | 9 | ## Environment 10 | 11 | 12 | ## Versions 13 | 14 | - iOS: 15 | - react-native-image-picker-ios: 16 | - react-native: 17 | - react: 18 | 19 | ## Description 20 | 21 | 22 | 23 | ## Reproducible Demo 24 | 25 | -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE/feature_request.md: -------------------------------------------------------------------------------- 1 | --- 2 | name: ✨ Feature request 3 | about: Suggest an idea. 4 | labels: 'enhancement' 5 | --- 6 | 7 | ## Describe the Feature 8 | 9 | 10 | ## Possible Implementations 11 | 12 | 13 | ## Related Issues 14 | -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE/question.md: -------------------------------------------------------------------------------- 1 | --- 2 | name: 💬 Question 3 | about: You need help with the library. 4 | labels: 'question' 5 | --- 6 | 7 | ## Ask your Question 8 | -------------------------------------------------------------------------------- /.github/PULL_REQUEST_TEMPLATE.md: -------------------------------------------------------------------------------- 1 | # Overview 2 | 3 | 4 | 5 | 6 | # Test Plan 7 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # OSX 2 | # 3 | .DS_Store 4 | 5 | # node.js 6 | # 7 | node_modules/ 8 | npm-debug.log 9 | yarn-error.log 10 | 11 | 12 | # Xcode 13 | # 14 | build/ 15 | *.pbxuser 16 | !default.pbxuser 17 | *.mode1v3 18 | !default.mode1v3 19 | *.mode2v3 20 | !default.mode2v3 21 | *.perspectivev3 22 | !default.perspectivev3 23 | xcuserdata 24 | *.xccheckout 25 | *.moved-aside 26 | DerivedData 27 | *.hmap 28 | *.ipa 29 | *.xcuserstate 30 | project.xcworkspace 31 | 32 | # BUCK 33 | buck-out/ 34 | \.buckd/ 35 | debug.keystore 36 | 37 | # Editor config 38 | .vscode 39 | 40 | # Outputs 41 | coverage 42 | 43 | .tmp 44 | example/ios-bundle.js 45 | index.ios.bundle 46 | 47 | # generated by bob 48 | lib/ -------------------------------------------------------------------------------- /.npmignore: -------------------------------------------------------------------------------- 1 | __tests__ 2 | -------------------------------------------------------------------------------- /.prettierrc: -------------------------------------------------------------------------------- 1 | { 2 | "requirePragma": true, 3 | "singleQuote": true, 4 | "trailingComma": "all", 5 | "bracketSpacing": false, 6 | "jsxBracketSameLine": true 7 | } 8 | -------------------------------------------------------------------------------- /.releaserc: -------------------------------------------------------------------------------- 1 | { 2 | "plugins": [ 3 | "@semantic-release/commit-analyzer", 4 | "@semantic-release/release-notes-generator", 5 | "@semantic-release/changelog", 6 | "@semantic-release/npm", 7 | "@semantic-release/github", 8 | [ 9 | "@semantic-release/git", 10 | { 11 | "assets": ["CHANGELOG.md", "package.json"], 12 | "message": "chore(release): ${nextRelease.version} [skip ci] \n\n${nextRelease.notes}" 13 | } 14 | ] 15 | ] 16 | } -------------------------------------------------------------------------------- /CHANGELOG.md: -------------------------------------------------------------------------------- 1 | # [x.x.x](https://github.com/react-native-community/react-native-image-picker-ios) (2019-05-25) 2 | 3 | Migrate native module to community module. 4 | -------------------------------------------------------------------------------- /CONTRIBUTING.md: -------------------------------------------------------------------------------- 1 | # Contributing to React Native ImagePickerIOS 2 | 3 | ## Development Process 4 | All work on React Native ImagePickerIOS happens directly on GitHub. Contributors send pull requests which go through a review process. 5 | 6 | > **Working on your first pull request?** You can learn how from this *free* series: [How to Contribute to an Open Source Project on GitHub](https://egghead.io/series/how-to-contribute-to-an-open-source-project-on-github). 7 | 8 | 1. Fork the repo and create your branch from `master` (a guide on [how to fork a repository](https://help.github.com/articles/fork-a-repo/)). 9 | 2. Run `yarn` or `npm install` to install all required dependencies. 10 | 3. Now you are ready to make your changes! 11 | 12 | ## Tests & Verifications 13 | Currently we use `flow` for typechecking, `eslint` with `prettier` for linting and formatting the code, and `jest` for unit testing. All of these are run on CircleCI for all opened pull requests, but you should use them locally when making changes. 14 | 15 | * `yarn test`: Run all tests and validations. 16 | * `yarn validate:eslint`: Run `eslint`. 17 | * `yarn validate:eslint --fix`: Run `eslint` and automatically fix issues. This is useful for correcting code formatting. 18 | * `yarn validate:typescript`: Run `typescript` typechecking. 19 | * `yarn test:jest`: Run unit tests with `jest`. 20 | 21 | ## Sending a pull request 22 | When you're sending a pull request: 23 | 24 | * Prefer small pull requests focused on one change. 25 | * Verify that all tests and validations are passing. 26 | * Follow the pull request template when opening a pull request. 27 | 28 | ## Commit message convention 29 | We prefix our commit messages with one of the following to signify the kind of change: 30 | 31 | * **build**: Changes that affect the build system or external dependencies. 32 | * **ci**, **chore**: Changes to our CI configuration files and scripts. 33 | * **docs**: Documentation only changes. 34 | * **feat**: A new feature. 35 | * **fix**: A bug fix. 36 | * **perf**: A code change that improves performance. 37 | * **refactor**: A code change that neither fixes a bug nor adds a feature. 38 | * **style**: Changes that do not affect the meaning of the code. 39 | * **test**: Adding missing tests or correcting existing tests. 40 | 41 | ## Release process 42 | We use [Semantic Release](http://semantic-release.org) to automatically release new versions of the library when changes are merged into master. Using the commit message convention described above, it will detect if we need to release a patch, minor, or major version of the library. 43 | 44 | ## Reporting issues 45 | You can report issues on our [bug tracker](https://github.com/react-native-community/react-native-image-picker-ios/issues). Please search for existing issues and follow the issue template when opening an issue. 46 | 47 | ## License 48 | By contributing to React Native ImagePickerIOS, you agree that your contributions will be licensed under the **MIT** license. 49 | -------------------------------------------------------------------------------- /LICENSE.md: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2015-present, Facebook, Inc. 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. -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # `@react-native-community/image-picker-ios` 2 | 3 | [![CircleCI Status](https://img.shields.io/circleci/project/github/react-native-community/react-native-image-picker-ios/master.svg)](https://circleci.com/gh/react-native-community/workflows/react-native-image-picker-ios/tree/master) ![Supports iOS](https://img.shields.io/badge/platforms-ios-lightgrey.svg) ![MIT License](https://img.shields.io/npm/l/@react-native-community/image-picker-ios.svg) 4 | 5 | 6 | ## Notice 7 | ___ 8 | This module was pulled out of React Native core part of the [☂️Lean Core](https://github.com/facebook/react-native/issues/23313) movement and is considered deprecated. 9 | 10 | We recommend you use either [react-native-image-picker](https://github.com/react-native-community/react-native-image-picker) or [expo-image-picker](https://docs.expo.io/versions/latest/sdk/imagepicker/). Both packages are well maintainer and have better cross platform support. 11 | ___ 12 | 13 | React Native ImagePicker for iOS. It allows you to get information on: 14 | 15 | * Can you use the Camera 16 | * Can you record video 17 | 18 | ## Getting started 19 | Install the library using either Yarn: 20 | 21 | ``` 22 | yarn add @react-native-community/image-picker-ios 23 | ``` 24 | 25 | or npm: 26 | 27 | ``` 28 | npm install --save @react-native-community/image-picker-ios 29 | ``` 30 | 31 | You then need to link the native parts of the library for the platforms you are using. The easiest way to link the library is using the CLI tool by running this command from the root of your project: 32 | 33 | ``` 34 | react-native link @react-native-community/image-picker-ios 35 | ``` 36 | 37 | If you can't or don't want to use the CLI tool, you can also manually link the library using the instructions below (click on the arrow to show them): 38 | 39 |
40 | Manually link the library on iOS 41 | 42 | Either follow the [instructions in the React Native documentation](https://facebook.github.io/react-native/docs/linking-libraries-ios#manual-linking) to manually link the framework or link using [Cocoapods](https://cocoapods.org) by adding this to your `Podfile`: 43 | 44 | ```ruby 45 | pod 'react-native-image-picker-ios', :path => '../node_modules/@react-native-community/image-picker-ios' 46 | ``` 47 | 48 |
49 | 50 |
51 | 52 | ## Migrating from the core `react-native` module 53 | This module was created when the ImagePickerIOS was split out from the core of React Native. To migrate to this module you need to follow the installation instructions above and then change you imports from: 54 | 55 | ```javascript 56 | import { ImagePickerIOS } from "react-native"; 57 | ``` 58 | 59 | to: 60 | 61 | ```javascript 62 | import ImagePickerIOS from "@react-native-community/image-picker-ios"; 63 | ``` 64 | 65 | Note that the API was updated after it was extracted from ImagePickerIOS to support some new features, however, the previous API is still available and works with no updates to your code. 66 | 67 | ## Usage 68 | Import the library: 69 | 70 | ```javascript 71 | import ImagePickerIOS from "@react-native-community/image-picker-ios"; 72 | ``` 73 | 74 | Can you use the camera: 75 | 76 | ```javascript 77 | ImagePickerIOS.canUseCamera(canUseCamera => { 78 | console.log("canUseCamera", canUseCamera); 79 | }); 80 | ``` 81 | 82 | Can you record videos: 83 | 84 | ```javascript 85 | ImagePickerIOS.canRecordVideos(canRecordVideos => { 86 | console.log("canRecordVideos", canRecordVideos); 87 | }); 88 | ``` 89 | 90 | ## API 91 | * **Types:** 92 | * [`OpenCameraDialogOptions`](#OpenCameraDialogOptions) 93 | * [`OpenSelectDialogOptions`](#OpenSelectDialogOptions) 94 | * **Methods:** 95 | * [`canUseCamera(callback)`](#canUseCamera) 96 | * [`canRecordVideos(callback)`](#canRecordVideos) 97 | * [`openCameraDialog(options, successCallback, cancelCallback)`](#openCameraDialog) 98 | * [`openSelectDialog(options, successCallback, cancelCallback)`](#openCameraDialog) 99 | 100 | ### Types 101 | 102 | #### `OpenCameraDialogOptions` 103 | Describes the settings for the camera: 104 | 105 | | Property | Type | Description | 106 | | --------------- | ------------------------------------------------ | -------------------------------------------------------------------------------------------------- | 107 | | `videoMode` | `boolean` | Should the camera open in video mode. | 108 | 109 | #### `OpenSelectDialogOptions` 110 | Describes the settings for the camera: 111 | 112 | | Property | Type | Description | 113 | | --------------- | ------------------------------------------------ | -------------------------------------------------------------------------------------------------- | 114 | | `showImages` | `boolean` | Should the results include images | 115 | | `showVideos` | `boolean` | Should the results include videos| 116 | 117 | ### Methods 118 | 119 | #### `canUseCamera()` 120 | 121 | Executes a callback with the a boolean value stating whether or not you can use the camera. 122 | 123 | **Example:** 124 | ```javascript 125 | ImagePickerIOS.canUseCamera(canUseCamera => { 126 | console.log("canUseCamera", canUseCamera); 127 | }); 128 | ``` 129 | 130 | #### `canRecordVideos()` 131 | 132 | Executes a callback with the a boolean value stating whether or not you can record videos. 133 | 134 | **Example:** 135 | ```javascript 136 | ImagePickerIOS.canRecordVideos(canRecordVideos => { 137 | console.log("canRecordVideos", canRecordVideos); 138 | }); 139 | ``` 140 | 141 | #### `openCameraDialog()` 142 | 143 | Opens the camera dialog with the specified [`OpenCameraDialogOptions`](#OpenCameraDialogOptions) and two callbacks, one for success and one for cancel. 144 | 145 | **Example:** 146 | ```javascript 147 | ImagePickerIOS.openCameraDialog({ 148 | unmirrorFrontFacingCamera: false 149 | videoMode: false 150 | }, () => { 151 | // success 152 | }, (error) => { 153 | // cancel 154 | }); 155 | ``` 156 | 157 | #### `openSelectDialog()` 158 | 159 | Opens the camera dialog with the specified [`OpenSelectDialogOptions`](#OpenSelectDialogOptions) and two callbacks, one for success and one for cancel. 160 | 161 | **Example:** 162 | ```javascript 163 | ImagePickerIOS.openCameraDialog({ 164 | showImages: true, 165 | showVideos: false 166 | }, (imageUrl, height, width) => { 167 | // success 168 | }, (error) => { 169 | // cancel 170 | }); 171 | ``` 172 | ## Troubleshooting 173 | 174 | ### Errors while running Jest tests 175 | 176 | If you do not have a Jest Setup file configured, you should add the following to your Jest settings and create the `jest.setup.js` file in project root: 177 | 178 | ```js 179 | setupFiles: ['/jest.setup.js'] 180 | ``` 181 | 182 | You should then add the following to your Jest setup file to mock the ImagePickerIOS Native Module: 183 | 184 | ```js 185 | import { NativeModules } from 'react-native'; 186 | 187 | NativeModules.RNCImagePickerIOS = { 188 | canRecordVideos: jest.fn(), 189 | canUseCamera: jest.fn(), 190 | openCameraDialog: jest.fn(), 191 | openSelectDialog: jest.fn(), 192 | }; 193 | ``` 194 | 195 | ### Issues with the iOS simulator 196 | 197 | As your simulator doesn't have a camera, there is no way to open the camera on the simulator. 198 | 199 | ## Maintainers 200 | 201 | * [Johan du Toit](https://github.com/johan-dutoit) - [Freelance React Native Developer]() 202 | 203 | ## Contributing 204 | 205 | Please see the [contributing guide](/CONTRIBUTING.md). 206 | 207 | ## License 208 | 209 | The library is released under the MIT license. For more information see [`LICENSE`](/LICENSE). 210 | -------------------------------------------------------------------------------- /babel.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | presets: ['module:metro-react-native-babel-preset'], 3 | }; 4 | -------------------------------------------------------------------------------- /example/index.tsx: -------------------------------------------------------------------------------- 1 | /** 2 | * Copyright (c) Facebook, Inc. and its affiliates. 3 | * 4 | * This source code is licensed under the MIT license found in the 5 | * LICENSE file in the root directory of this source tree. 6 | * 7 | * @format 8 | * @flow 9 | */ 10 | 11 | import * as React from 'react'; 12 | import { 13 | AppRegistry, 14 | SafeAreaView, 15 | ScrollView, 16 | StyleSheet, 17 | Text, 18 | View, 19 | Alert, 20 | Button, 21 | } from 'react-native'; 22 | 23 | import ImagePickerIOS from '../src/index'; 24 | import { 25 | OpenCameraDialogOptions, 26 | OpenSelectDialogOptions, 27 | } from '../src/internal/types'; 28 | 29 | const styles = StyleSheet.create({ 30 | container: { 31 | flex: 1, 32 | backgroundColor: '#F5FCFF', 33 | }, 34 | sectionTitle: { 35 | fontSize: 24, 36 | marginHorizontal: 8, 37 | marginTop: 24, 38 | }, 39 | exampleContainer: { 40 | padding: 16, 41 | marginVertical: 4, 42 | backgroundColor: '#FFF', 43 | borderColor: '#EEE', 44 | borderTopWidth: 1, 45 | borderBottomWidth: 1, 46 | }, 47 | exampleTitle: { 48 | fontSize: 18, 49 | marginHorizontal: 8, 50 | }, 51 | label: { 52 | fontWeight: 'bold', 53 | }, 54 | }); 55 | 56 | interface State { 57 | canUseCamera: boolean; 58 | canRecordVideos: boolean; 59 | 60 | imageUrl: string | null; 61 | height: number | null; 62 | width: number | null; 63 | } 64 | 65 | class ExampleApp extends React.Component<{}, State> { 66 | constructor(props: {}) { 67 | super(props); 68 | 69 | this.state = { 70 | canUseCamera: false, 71 | canRecordVideos: false, 72 | 73 | imageUrl: null, 74 | height: null, 75 | width: null, 76 | }; 77 | } 78 | 79 | componentDidMount() { 80 | ImagePickerIOS.canUseCamera(value => 81 | this.setState(() => ({canUseCamera: value})), 82 | ); 83 | ImagePickerIOS.canRecordVideos(value => 84 | this.setState(() => ({canRecordVideos: value})), 85 | ); 86 | } 87 | 88 | render() { 89 | const {canUseCamera, canRecordVideos, imageUrl, height, width} = this.state; 90 | return ( 91 | 92 | 93 | Static methods 94 | 95 | {`Can use camera: ${canUseCamera}!`} 96 | {`Can record video: ${canRecordVideos}!`} 97 | 98 | 99 | Open Camera Dialog 100 | (doesn't work on a simulator) 101 | 102 |