react-native-camera/README.md

65 lines
2.3 KiB
Markdown
Raw Normal View History

2015-04-01 01:02:57 +00:00
# react-native-camera
2015-04-01 01:04:18 +00:00
2015-04-01 01:02:57 +00:00
A camera viewport for React Native. This module is currently in the very early stages of development and does not support image capture at this time, though it is coming.
## Getting started
1. `npm install react-native-camera --save`
2. In XCode, right click Libraries ➜ `Add Files to ______`
3. Go to `node_modules``react-native-camera` and add `RCTCamera.xcodeproj`
4. Add `libRCTCamera.a` (it's in workspace) to `Build Phases``Link Binary With Libraries`
2015-04-01 16:49:08 +00:00
5. Click `RCTCamera.xcodeproj` in the project navigator and go the `Build Phases` tab. Look for `Header Search Paths` and make sure it contains `$(SRCROOT)../react-native/React`.
5. Run (`Cmd+R`)
2015-04-01 01:02:57 +00:00
## Usage
All you need is to `require` the `react-native-camera` module and then use the
`<Camera/>` tag.
2015-04-01 01:45:47 +00:00
```javascript
2015-04-01 01:02:57 +00:00
var React = require('react-native');
var {
AppRegistry,
StyleSheet,
Text,
View,
} = React;
var Camera = require('react-native-camera');
var cameraApp = React.createClass({
render: function() {
return (
<View>
2015-04-01 02:44:32 +00:00
<Camera
aspect="Stretch"
orientation="PortraitUpsideDown"
style={{height: 200, width: 200}}
/>
2015-04-01 01:02:57 +00:00
</View>
);
}
});
AppRegistry.registerComponent('cameraApp', () => cameraApp);
```
2015-04-01 02:38:30 +00:00
### Props
#### `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.
#### `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."
TODO: Add support for an `Auto` value to automatically adjust for orientation changes.
2015-04-01 01:02:57 +00:00
------------
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.