status-im/react-native-camera
1
0
Fork 0
mirror of https://github.com/status-im/react-native-camera.git synced 2026-08-31 05:31:07 +00:00
Code Issues Packages Projects Releases Wiki Activity

Updated README: included TouchableHighlight component in example. Clarified example setup

Browse Source
This commit is contained in:
scottdixon
2015-04-03 15:59:25 -07:00
parent 8e8663b902
commit 568e31e5d9
1 changed files with 8 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files
README.md
+8 -7
View File
@@ -7,10 +7,10 @@ Note: The capture feature is currently not working properly. Pull requests welco
## 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`)
## Usage
@@ -25,6 +25,7 @@ var {
StyleSheet,
Text,
View,
TouchableHighlight
} = React;
var Camera = require('react-native-camera');
@@ -53,26 +54,26 @@ var cameraApp = React.createClass({
AppRegistry.registerComponent('cameraApp', () => cameraApp);
```
### Props
### Properties
#### `aspect`
Values: `Fit`, `Fill` (default), `Stretch`
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`
Values: `Front`, `Back` (default)
Use the `camera` prop to specify which camera to use.
Use the `camera` property to specify which camera to use.
#### `orientation`
Values: `LandscapeLeft`, `LandscapeRight`, `Portrait` (default), `PortraitUpsideDown`
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."
TODO: Add support for an `Auto` value to automatically adjust for orientation changes.