Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
react-native-camera
Advanced tools
react-native-camera - npm Package Compare versions
Comparing version 0.0.4 to 0.0.5
@@ -15,3 +15,3 @@ var React = require('React'); | ||
| aspect: PropTypes.string, | ||
| camera: PropTypes.string, | ||
| type: PropTypes.string, | ||
| orientation: PropTypes.string, | ||
@@ -31,3 +31,3 @@ }, | ||
| aspect: this.props.aspect || 'Fill', | ||
| camera: this.props.camera || 'Back', | ||
| type: this.props.type || 'Back', | ||
| orientation: this.props.orientation || 'Portrait' | ||
@@ -48,3 +48,3 @@ }; | ||
| aspect = NativeModules.CameraManager.aspects[this.state.aspect]; | ||
| camera = NativeModules.CameraManager.cameras[this.state.camera]; | ||
| type = NativeModules.CameraManager.cameras[this.state.type]; | ||
| orientation = NativeModules.CameraManager.orientations[this.state.orientation]; | ||
@@ -55,3 +55,3 @@ | ||
| aspect: aspect, | ||
| camera: camera, | ||
| type: type, | ||
| orientation: orientation, | ||
@@ -64,3 +64,3 @@ }); | ||
| switch: function() { | ||
| this.state.camera = this.state.camera == 'Back' ? 'Front' : 'Back'; | ||
| this.state.type = this.state.type == 'Back' ? 'Front' : 'Back'; | ||
| this.setState(this.state); | ||
@@ -77,3 +77,3 @@ }, | ||
| aspect: true, | ||
| camera: true, | ||
| type: true, | ||
| orientation: true | ||
@@ -85,7 +85,5 @@ }), | ||
| var styles = StyleSheet.create({ | ||
| base: { | ||
| overflow: 'hidden' | ||
| }, | ||
| base: { }, | ||
| }); | ||
| module.exports = Camera; |
@@ -5,5 +5,5 @@ { | ||
| "type" : "git", | ||
| "url" : "http://github.com/lwansbrough/react-native-camera.git" | ||
| "url" : "https://github.com/lwansbrough/react-native-camera.git" | ||
| }, | ||
| "version": "0.0.4", | ||
| "version": "0.0.5", | ||
| "description": "A Camera element for React Native", | ||
@@ -10,0 +10,0 @@ "main": "Camera.ios.js", |
| # react-native-camera | ||
| A camera viewport for React Native. This module is currently in the very early stages of development, currently supporting camera switching and basic image capture. | ||
| A camera viewport for React Native. This module is currently in the very early stages of development. | ||
| Note: The capture feature is currently not working properly. Pull requests welcome. | ||
| ## Known Issues | ||
| Below is a list of known issues. Pull requests are welcome for any of these issues! | ||
| - [Camera module may cause app to crash in simulator](https://github.com/lwansbrough/react-native-camera/issues/8) | ||
| ## Getting started | ||
| 1. `npm install react-native-camera@latest --save` | ||
| 2. In XCode, in the project navigator right click `Libraries` ➜ `Add Files to [your project's name]` | ||
| 2. In XCode, in the project navigator, right click `Libraries` ➜ `Add Files to [your project's name]` | ||
| 3. Go to `node_modules` ➜ `react-native-camera` and add `RCTCamera.xcodeproj` | ||
| 4. Add `libRCTCamera.a` to your project's `Build Phases` ➜ `Link Binary With Libraries` | ||
| 5. Click `RCTCamera.xcodeproj` in the project navigator and go the `Build Settings` tab. Look for `Header Search Paths` and make sure it contains both `$(SRCROOT)/../react-native/React` and `$(SRCROOT)/../../React` - mark both as `recursive`. | ||
| 4. In XCode, in the project navigator, select your project. Add `libRCTCamera.a` to your project's `Build Phases` ➜ `Link Binary With Libraries` | ||
| 5. Click `RCTCamera.xcodeproj` in the project navigator and go the `Build Settings` tab. Make sure 'All' is toggled on (instead of 'Basic'). Look for `Header Search Paths` and make sure it contains both `$(SRCROOT)/../react-native/React` and `$(SRCROOT)/../../React` - mark both as `recursive`. | ||
| 5. Run your project (`Cmd+R`) | ||
@@ -28,2 +31,3 @@ | ||
| View, | ||
| TouchableHighlight | ||
| } = React; | ||
@@ -41,2 +45,3 @@ var Camera = require('react-native-camera'); | ||
| aspect="Stretch" | ||
| type="Front" | ||
| orientation="PortraitUpsideDown" | ||
@@ -58,3 +63,3 @@ style={{height: 200, width: 200}} | ||
| ### Props | ||
| ## Properties | ||
@@ -65,9 +70,9 @@ #### `aspect` | ||
| The `aspect` prop allows you to define how your viewfinder renders the camera's view. For instance, if you have a square viewfinder and you want to fill the it entirely, you have two options: `Fill`, where the aspect ratio of the camera's view is preserved by cropping the view or `Stretch`, where the aspect ratio is skewed in order to fit the entire image inside the viewfinder. The other option is `Fit`, which ensures the camera's entire view fits inside your viewfinder without altering the aspect ratio. | ||
| The `aspect` property allows you to define how your viewfinder renders the camera's view. For instance, if you have a square viewfinder and you want to fill the it entirely, you have two options: `Fill`, where the aspect ratio of the camera's view is preserved by cropping the view or `Stretch`, where the aspect ratio is skewed in order to fit the entire image inside the viewfinder. The other option is `Fit`, which ensures the camera's entire view fits inside your viewfinder without altering the aspect ratio. | ||
| #### `camera` | ||
| #### `type` | ||
| Values: `Front`, `Back` (default) | ||
| Use the `camera` prop to specify which camera to use. | ||
| Use the `type` property to specify which camera to use. | ||
@@ -79,3 +84,3 @@ | ||
| The `orientation` prop allows you to specify the current orientation of the phone to ensure the viewfinder is "the right way up." | ||
| The `orientation` property allows you to specify the current orientation of the phone to ensure the viewfinder is "the right way up." | ||
@@ -85,3 +90,3 @@ TODO: Add support for an `Auto` value to automatically adjust for orientation changes. | ||
| ### Component methods | ||
| ## Component methods | ||
@@ -99,7 +104,16 @@ You can access component methods by adding a `ref` (ie. `ref="camera"`) prop to your `<Camera>` element, then you can use `this.refs.camera.switch()`, etc. inside your component. | ||
| ### Subviews | ||
| ## Subviews | ||
| This component supports subviews, so if you wish to use the camera view as a background or if you want to layout buttons/images/etc. inside the camera then you can do that. | ||
| ## Todo | ||
| These are some features I think would be important/beneficial to have included with this module. Pull requests welcome! | ||
| - [ ] Video support | ||
| - [ ] Flash mode setting | ||
| - [ ] Automatic orientation adjustment | ||
| - [ ] Tap to focus | ||
| - [ ] Optional facial recognition (w/ ability to style box around face) | ||
| ------------ | ||
| Thanks to Brent Vatne (@brentvatne) for the `react-native-video` module which provided me with a great example of how to set up this module. |
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
New alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Fixed alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Improved metrics
- Total package byte prevSize
- increased by35.3%
38477
- Number of package files
- increased by16.67%
14
- Number of lines in readme file
- increased by14.14%
113
Worsened metrics
- Lines of code
- decreased by-2.86%
68
No dependency changes