status-im
/
react-native-camera-kit
mirror of https://github.com/status-im/react-native-camera-kit.git
2
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

on the way

This commit is contained in:
Ran Greenberg 2016-06-14 18:12:50 +03:00
parent f2e22228ae
commit 5c497710fa
8 changed files with 795 additions and 448 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

104
example/AlbumsScreen.js Normal file
View File

@ -0,0 +1,104 @@
import React, { Component } from 'react';
import {
AppRegistry,
StyleSheet,
Text,
View,
ListView,
TouchableOpacity,
Image,
AlertIOS
} from 'react-native';
//import _ from 'lodash';
//import Immutable from 'seamless-immutable';
import {
CameraKitGallery,
CameraKitCamera,
} from 'react-native-camera-kit';
import GalleryScreen from './GalleryScreen';
export default class AlbumsScreen extends Component {
constructor(props) {
super(props);
const ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
this.state = {
albums:{},
albumsDS: ds,
albumName: undefined
}
}
componentDidMount() {
this.onGetAlbumsPressed();
}
render() {
if (this.state.albumName) {
const albumName = this.state.albumName;
return <GalleryScreen albumName={albumName}/>;
}
return (
<View style={styles.container}>
<ListView
style={styles.listView}
dataSource={this.state.albumsDS}
renderRow={(rowData) =>
this._renderRow(rowData)
}
/>
</View>
);
}
_renderRow(rowData) {
const base64Image = 'data:image/png;base64,' + rowData.image;
return (
<View style={{flex:1, backgroundColor: '#95a5a6', flexDirection: 'row', padding: 8 }}>
<Image
style={{width: 60, height: 60, backgroundColor: 'white'}}
source={{uri: base64Image, scale: 3}}
/>
<TouchableOpacity style={{alignSelf: 'center', padding: 4}} onPress={() => this.setState({albumName: rowData.albumName})}>
<Text style={{fontSize: 18}}>{rowData.albumName}</Text>
<Text style={{fontSize: 18}}>{rowData.imagesCount}</Text>
</TouchableOpacity>
</View>
)
}
async onGetAlbumsPressed() {
let albums = await CameraKitGallery.getAlbumsWithThumbnails();
albums = albums.albums;
this.setState({albumsDS:this.state.albumsDS.cloneWithRows(albums), albums:{albums}, shouldShowListView: true});
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
//justifyContent: 'center',
//alignItems: 'center',
backgroundColor: '#F5FCFF',
marginTop: 20
},
listView: {
//flex:1,
//flexDirection:'column',
margin: 8,
backgroundColor: '#D6DAC2'
//alignSelf: 'stretch'
}
});

122
example/CameraScreen.js Normal file
View File

@ -0,0 +1,122 @@
import React, { Component } from 'react';
import {
AppRegistry,
StyleSheet,
Text,
View,
ListView,
TouchableOpacity,
Image,
AlertIOS
} from 'react-native';
import _ from 'lodash';
import Immutable from 'seamless-immutable';
import {
CameraKitGallery,
CameraKitCamera,
} from 'react-native-camera-kit';
const FLASH_MODE_AUTO = "auto";
const FLASH_MODE_ON = "on";
const FLASH_MODE_OFF = "off";
export default class CameraScreen extends Component {
constructor(props) {
super(props);
const ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
this.state = {
albums:{},
albumsDS: ds,
shouldOpenCamera: false,
shouldShowListView: false,
image:{imageURI:""},
flashMode:FLASH_MODE_AUTO
}
}
render() {
return (
this._renderCameraView()
);
}
_renderCameraView() {
return (
<View style={{ flex:1, backgroundColor: 'gray', marginBottom:8}}>
<View style={{flex: 1, flexDirection:'column', backgroundColor:'black'}} onPress={this.onTakeIt.bind(this)}>
<CameraKitCamera
ref={(cam) => {
this.camera = cam;
}}
style={{flex: 1}}
cameraOptions= {{
flashMode: 'auto', // on/off/auto(default)
focusMode: 'on', // off/on(default)
zoomMode: 'on' // off/on(default)
}}
/>
<TouchableOpacity style={{alignSelf:'center', marginHorizontal: 4}} onPress={this.onTakeIt.bind(this)}>
<Text style={{fontSize: 22, color: 'lightgray', backgroundColor: 'hotpink'}}>TAKE IT!</Text>
</TouchableOpacity>
</View>
<View style={{flexDirection: 'row'}}>
<Image
style={{ flexDirection:'row', backgroundColor: 'black', width: 100, height: 100}}
source={{uri: this.state.image.imageURI, scale: 3}}
/>
<TouchableOpacity style={{alignSelf:'center', marginHorizontal: 4}} onPress={this.onSwitchCameraPressed.bind(this)}>
<Text>switch camera</Text>
</TouchableOpacity>
<View style={{ flexDirection:'column', justifyContent: 'space-between'}}>
<TouchableOpacity style={{ marginHorizontal: 4}} onPress={this.onSetFlash.bind(this, FLASH_MODE_AUTO)}>
<Text>flash auto</Text>
</TouchableOpacity>
<TouchableOpacity style={{ marginHorizontal: 4, }} onPress={this.onSetFlash.bind(this, FLASH_MODE_ON)}>
<Text>flash on</Text>
</TouchableOpacity>
<TouchableOpacity style={{ marginHorizontal: 4,}} onPress={this.onSetFlash.bind(this, FLASH_MODE_OFF)}>
<Text>flash off</Text>
</TouchableOpacity>
</View>
</View>
</View>
)
}
async onSwitchCameraPressed() {
const success = await this.camera.changeCamera();
}
async onCheckAuthoPressed() {
const success = await CameraKitCamera.checkDeviceAuthorizarionStatus();
if (success){
AlertIOS.alert('You rock!')
}
else {
AlertIOS.alert('You fucked!')
}
}
async onSetFlash(flashMode) {
const success = await this.camera.setFleshMode(flashMode);
}
async onTakeIt() {
const imageURI = await this.camera.capture(true);
let newImage = {imageURI: imageURI};
this.setState({...this.state, image:newImage});
}
}

153
example/GalleryScreen.js Normal file
View File

@ -0,0 +1,153 @@
import React, {Component} from 'react';
import {
AppRegistry,
StyleSheet,
Text,
View,
ListView,
TouchableOpacity,
Image,
AlertIOS,
CameraRoll
} from 'react-native';
import _ from 'lodash';
import Immutable from 'seamless-immutable';
import {
CameraKitGallery
} from 'react-native-camera-kit';
var groupByEveryN = require('groupByEveryN');
function renderImage(asset) {
var imageSize = 150;
var imageStyle = [styles.image, {width: imageSize, height: imageSize}];
return (
<Image
source={asset.node.image}
style={imageStyle}
/>
);
}
export default class GalleryScreen extends Component {
constructor(props) {
super(props);
const ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
this.state = {
albums: {},
dataSource: ds,
albumName: this.props.albumName,
assets: []
}
}
componentDidMount() {
if (this.state.albumName) {
CameraKitGallery.getPhotosForAlbum(this.state.albumName, 5, (data) => this._appendAssets(data), (e) => logError(e));
}
}
render() {
return (
<View style={styles.container}>
<Text>{this.state.albumName}</Text>
<ListView
renderRow={this._renderRow}
style={{flex: 1, backgroundColor: 'blue', }}
dataSource={this.state.dataSource}
/>
</View>
);
}
rendererChanged() {
console.log('ppppp');
var ds = new ListView.DataSource({rowHasChanged: this._rowHasChanged});
this.state.dataSource = ds.cloneWithRows(
groupByEveryN(this.state.assets, this.props.imagesPerRow)
);
}
_renderImage(asset) {
var imageSize = 150;
var imageStyle = [styles.image, {width: imageSize, height: imageSize}];
return (
<Image
source={asset.node.image}
style={imageStyle}
/>
);
}
_renderRow(rowData:Array<Image>, sectionID:string, rowID:string) {
console.log(rowID)
var images = rowData.map((image) => {
if (image === null) {
return null;
}
return renderImage(image);
});
return (
<View style={styles.row} key={rowID}>
{images}
</View>
);
}
_appendAssets(data) {
console.log('datadata', data);
if (data) {
var assets = data.edges;
var newState:Object = {loadingMore: false};
if (!data.page_info.has_next_page) {
newState.noMore = true;
}
if (assets.length > 0) {
newState.lastCursor = data.page_info.end_cursor;
newState.assets = this.state.assets.concat(assets);
newState.dataSource = this.state.dataSource.cloneWithRows(
groupByEveryN(newState.assets, 25)
);
}
this.setState(newState);
}
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
marginTop: 20
},
listView: {
//flex:1,
//flexDirection:'column',
margin: 8,
backgroundColor: '#D6DAC2',
//alignSelf: 'stretch'
},
row: {
flexDirection: 'row',
flex: 1,
},
image: {
margin: 4,
},
});

259
example/MainScreen.js Normal file
View File

@ -0,0 +1,259 @@
import React, { Component } from 'react';
import {
AppRegistry,
StyleSheet,
Text,
View,
ListView,
TouchableOpacity,
Image,
AlertIOS
} from 'react-native';
import _ from 'lodash';
import Immutable from 'seamless-immutable';
import {
CameraKitGallery,
CameraKitCamera,
} from 'react-native-camera-kit';
import CameraScreen from './CameraScreen';
const FLASH_MODE_AUTO = "auto";
const FLASH_MODE_ON = "on";
const FLASH_MODE_OFF = "off";
export default class MainScreen extends Component {
constructor(props) {
super(props);
const ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
this.state = {
albums:{},
albumsDS: ds,
shouldOpenCamera: false,
shouldShowListView: false,
image:{imageURI:""},
flashMode:FLASH_MODE_AUTO
}
}
render() {
if (this.state.shouldOpenCamera) {
return (
this._renderCameraView()
)
}
return (
<View style={styles.container}>
<TouchableOpacity style={styles.apiButton} onPress={this.onGetAlbumsPressed.bind(this)}>
<Text style={styles.button}>get albums</Text>
</TouchableOpacity>
<TouchableOpacity style={styles.apiButton} onPress={this.onOpenCameraPressed.bind(this)}>
<Text style={styles.button}>{this.state.shouldOpenCamera ? "close camera" : "open camera"}</Text>
</TouchableOpacity>
<TouchableOpacity style={styles.apiButton} onPress={this.onCheckAuthoPressed.bind(this)}>
<Text style={styles.button}>check device authorizarion status </Text>
</TouchableOpacity>
{this._renderListView()}
{}
</View>
);
}
_renderListView() {
if (this.state.shouldShowListView) {
return(
<ListView
style={styles.listView}
dataSource={this.state.albumsDS}
renderRow={(rowData) =>
this._renderRow(rowData)
}
/>
)
}
}
_renderRow(rowData) {
console.log('rannnn', rowData.image);
const base64Image = 'data:image/png;base64,' + rowData.image;
return (
<View style={{flex:1, backgroundColor: '#95a5a6', flexDirection: 'row', padding: 8 }}>
<Image
style={{width: 60, height: 60, backgroundColor: 'white'}}
source={{uri: base64Image, scale: 3}}
/>
<TouchableOpacity style={{alignSelf: 'center', padding: 4}} onPress={this.onAlbumNamePressed.bind(this, rowData)}>
<Text style={{fontSize: 18}}>{rowData.albumName}</Text>
</TouchableOpacity>
</View>
)
}
async onGetAlbumsPressed() {
let albums = await CameraKitGallery.getAlbums();
albums = albums.albums;
console.log('albums',albums);
//if (!albums) return;
//const albumsNames = _.map(albums, 'albumName');
//const albumsThumbnails = _.map(albums, 'albumName');
const kk = this.state.albumsDS.cloneWithRows(albums);
//console.log('kkkkkkkkkkk', kk);
this.setState({...this.state, albumsDS:this.state.albumsDS.cloneWithRows(albums), albums:{albums}, shouldShowListView: true});
}
async onAlbumNamePressed(album) {
}
_renderCameraView() {
return (
<View style={{ flex:1, backgroundColor: 'gray', marginBottom:8}}>
<View style={{flex: 1, flexDirection:'column', backgroundColor:'black'}} onPress={this.onTakeIt.bind(this)}>
<CameraKitCamera
ref={(cam) => {
this.camera = cam;
}}
style={{flex: 1}}
cameraOptions= {{
flashMode: 'auto', // on/off/auto(default)
focusMode: 'on', // off/on(default)
zoomMode: 'on' // off/on(default)
}}
/>
<TouchableOpacity style={{alignSelf:'center', marginHorizontal: 4}} onPress={this.onTakeIt.bind(this)}>
<Text style={{fontSize: 22, color: 'lightgray', backgroundColor: 'hotpink'}}>TAKE IT!</Text>
</TouchableOpacity>
</View>
<View style={{flexDirection: 'row'}}>
<Image
style={{ flexDirection:'row', backgroundColor: 'black', width: 100, height: 100}}
source={{uri: this.state.image.imageURI, scale: 3}}
/>
<TouchableOpacity style={{alignSelf:'center', marginHorizontal: 4}} onPress={this.onSwitchCameraPressed.bind(this)}>
<Text>switch camera</Text>
</TouchableOpacity>
<View style={{ flexDirection:'column', justifyContent: 'space-between'}}>
<TouchableOpacity style={{ marginHorizontal: 4}} onPress={this.onSetFlash.bind(this, FLASH_MODE_AUTO)}>
<Text>flash auto</Text>
</TouchableOpacity>
<TouchableOpacity style={{ marginHorizontal: 4, }} onPress={this.onSetFlash.bind(this, FLASH_MODE_ON)}>
<Text>flash on</Text>
</TouchableOpacity>
<TouchableOpacity style={{ marginHorizontal: 4,}} onPress={this.onSetFlash.bind(this, FLASH_MODE_OFF)}>
<Text>flash off</Text>
</TouchableOpacity>
</View>
</View>
<TouchableOpacity style={{position: 'absolute', width:25, height: 100,top:20, left:10, backgroundColor: 'transparent'}} onPress={this.onOpenCameraPressed.bind(this)}>
<Text style={{fontWeight:'200', fontSize: 40, color:'lightgray'}}>X</Text>
</TouchableOpacity>
</View>
)
}
async onSwitchCameraPressed() {
const success = await this.camera.changeCamera();
}
async onCheckAuthoPressed() {
const success = await CameraKitCamera.checkDeviceAuthorizarionStatus();
if (success){
AlertIOS.alert('You rock!')
}
else {
AlertIOS.alert('You fucked!')
}
}
async onSetFlash(flashMode) {
const success = await this.camera.setFleshMode(flashMode);
}
async onTakeIt() {
const imageURI = await this.camera.capture(true);
let newImage = {imageURI: imageURI};
this.setState({...this.state, image:newImage});
}
onOpenCameraPressed() {
this.props.navigator.push({
title: 'kaki',
component: CameraScreen,
})
//this.setState({shouldOpenCamera:!this.state.shouldOpenCamera});
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
//justifyContent: 'center',
//alignItems: 'center',
backgroundColor: '#F5FCFF',
marginTop: 20
},
welcome: {
fontSize: 20,
textAlign: 'center',
margin: 10,
},
instructions: {
textAlign: 'center',
color: '#333333',
marginBottom: 5,
},
row: {
flexDirection: 'row',
justifyContent: 'center',
padding: 10,
backgroundColor: '#F6F6F6',
},
text: {
flex: 1,
},
button: {
fontSize: 22,
alignSelf: 'center',
backgroundColor: 'transparent'
},
listView: {
//flex:1,
//flexDirection:'column',
margin: 8,
backgroundColor: '#D6DAC2',
//alignSelf: 'stretch'
},
apiButton:{
marginTop: 20,
backgroundColor: 'gray',
padding: 10
}
});

284
example/index.ios.js
View File

@ -13,221 +13,55 @@ import {
import _ from 'lodash';
import Immutable from 'seamless-immutable';
import {
CameraKitGallery,
CameraKitCamera,
} from 'react-native-camera-kit';
const FLASH_MODE_AUTO = "auto";
const FLASH_MODE_ON = "on";
const FLASH_MODE_OFF = "off";
import CameraScreen from './CameraScreen';
import AlbumsScreen from './AlbumsScreen';
class example extends Component {
constructor(props) {
super(props);
const ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
this.state = {
albums:{},
albumsDS: ds,
shouldOpenCamera: false,
shouldShowListView: false,
image:{imageURI:""},
flashMode:FLASH_MODE_AUTO
}
example: undefined
};
}
render() {
if (this.state.shouldOpenCamera) {
return (
this._renderCameraView()
)
if (this.state.example) {
const Example = this.state.example;
return <Example />;
}
return (
<View style={styles.container}>
<TouchableOpacity style={styles.apiButton} onPress={this.onGetAlbumsPressed.bind(this)}>
<Text style={styles.button}>get albums</Text>
</TouchableOpacity>
<TouchableOpacity style={styles.apiButton} onPress={this.onOpenCameraPressed.bind(this)}>
<Text style={styles.button}>{this.state.shouldOpenCamera ? "close camera" : "open camera"}</Text>
</TouchableOpacity>
return (
<View style={styles.container}>
<TouchableOpacity style={styles.apiButton} onPress={this.onCheckAuthoPressed.bind(this)}>
<Text style={styles.button}>check device authorizarion status </Text>
</TouchableOpacity>
<TouchableOpacity onPress={() => this.setState({example: CameraScreen})}>
<Text style={styles.buttonText}>
Camera Screen
</Text>
</TouchableOpacity>
{this._renderListView()}
{}
<TouchableOpacity onPress={() => this.setState({example: AlbumsScreen})}>
<Text style={styles.buttonText}>
Albums Screen
</Text>
</TouchableOpacity>
<TouchableOpacity onPress={this.onCheckAuthoPressed.bind(this)}>
<Text style={styles.buttonText}>
Check Autotization Status
</Text>
</TouchableOpacity>
</View>
</View>
);
}
_renderListView() {
if (this.state.shouldShowListView) {
return(
<ListView
style={styles.listView}
dataSource={this.state.albumsDS}
renderRow={(rowData) =>
this._renderRow(rowData)
}
/>
)
}
}
_renderRow(rowData) {
console.log('rannnn', rowData.image);
const base64Image = 'data:image/png;base64,' + rowData.image;
return (
<View style={{flex:1, backgroundColor: 'green'}}>
<Image
style={{width: 60, height: 60, backgroundColor: 'white'}}
source={{uri: base64Image, scale: 3}}
/>
<TouchableOpacity style={{marginTop: 10}} onPress={this.onAlbumNamePressed.bind(this, rowData)}>
<Text style={{fontSize: 18}}>{rowData.name}</Text>
</TouchableOpacity>
</View>
)
}
async onGetAlbumsPressed() {
let albums = await CameraKitGallery.getAlbums();
albums = albums.albums;
console.log('albums',albums);
//if (!albums) return;
//const albumsNames = _.map(albums, 'albumName');
//const albumsThumbnails = _.map(albums, 'albumName');
const kk = this.state.albumsDS.cloneWithRows(albums);
//console.log('kkkkkkkkkkk', kk);
this.setState({...this.state, albumsDS:this.state.albumsDS.cloneWithRows(albums), albums:{albums}, shouldShowListView: true});
}
async onAlbumNamePressed(album) {
let base64Image = await CameraKitGallery.getThumbnailForAlbumName(album.name);
base64Image = 'data:image/png;base64,' + base64Image;
album.image = base64Image;
let albums = {};
_.merge(albums, this.state.albums);
albums = albums.albums;
console.log('before', albums);
const key = album.name;
albums.key = album;
//
//console.log('after', _.toArray(albums));
//
////console.log('llll', albums);
//
this.setState({...this.state, albumsDS:this.state.albumsDS.cloneWithRows(albums), albums:{albums}, shouldShowListView: true});
//let album = _.find(newAlbums, function(o) {
// return o === albumName;
//});
//
//console.log('newAlbums', newAlbums);
//console.log('album', album);
//const albumIndex = _.indexOf(newAlbums, album);
//if (albumIndex < 0) {
// console.error('ERROR: albumIndex is' + albumIndex);
// return;
//}
//
//let newArray = _.remove(newAlbums, function(o) {
// return o === album;
//});
//let albumWithImage = {...album, image:base64Image };
//console.log('a', album);
//newAlbums[albumIndex] = album;
//console.error(album);
//
//let albums = this.state.albums;
//albums = albums.albums;
//console.log('before', albums);
////const key = album.name;
////albums.key = album;
////
////console.log('after', _.toArray(albums));
////
//////console.log('llll', albums);
////
//this.setState({...this.state, albumsDS:this.state.albumsDS.cloneWithRows(albums), albums:{albums}, shouldShowListView: true});
}
_renderCameraView() {
return (
<View style={{ flex:1, backgroundColor: 'gray', marginBottom:8}}>
<View style={{flex: 1, flexDirection:'column', backgroundColor:'black'}} onPress={this.onTakeIt.bind(this)}>
<CameraKitCamera
ref={(cam) => {
this.camera = cam;
}}
style={{flex: 1}}
cameraOptions= {{
flashMode: 'auto', // on/off/auto(default)
focusMode: 'on', // off/on(default)
zoomMode: 'on' // off/on(default)
}}
/>
<TouchableOpacity style={{alignSelf:'center', marginHorizontal: 4}} onPress={this.onTakeIt.bind(this)}>
<Text style={{fontSize: 22, color: 'lightgray', backgroundColor: 'hotpink'}}>TAKE IT!</Text>
</TouchableOpacity>
</View>
<View style={{flexDirection: 'row'}}>
<Image
style={{ flexDirection:'row', backgroundColor: 'black', width: 100, height: 100}}
source={{uri: this.state.image.imageURI, scale: 3}}
/>
<TouchableOpacity style={{alignSelf:'center', marginHorizontal: 4}} onPress={this.onSwitchCameraPressed.bind(this)}>
<Text>switch camera</Text>
</TouchableOpacity>
<View style={{ flexDirection:'column', justifyContent: 'space-between'}}>
<TouchableOpacity style={{ marginHorizontal: 4}} onPress={this.onSetFlash.bind(this, FLASH_MODE_AUTO)}>
<Text>flash auto</Text>
</TouchableOpacity>
<TouchableOpacity style={{ marginHorizontal: 4, }} onPress={this.onSetFlash.bind(this, FLASH_MODE_ON)}>
<Text>flash on</Text>
</TouchableOpacity>
<TouchableOpacity style={{ marginHorizontal: 4,}} onPress={this.onSetFlash.bind(this, FLASH_MODE_OFF)}>
<Text>flash off</Text>
</TouchableOpacity>
</View>
</View>
<TouchableOpacity style={{position: 'absolute', width:25, height: 100,top:20, left:10, backgroundColor: 'transparent'}} onPress={this.onOpenCameraPressed.bind(this)}>
<Text style={{fontWeight:'200', fontSize: 40, color:'lightgray'}}>X</Text>
</TouchableOpacity>
</View>
)
}
async onSwitchCameraPressed() {
const success = await this.camera.changeCamera();
}
async onCheckAuthoPressed() {
const success = await CameraKitCamera.checkDeviceAuthorizarionStatus();
if (success){
@ -237,70 +71,24 @@ class example extends Component {
AlertIOS.alert('You fucked!')
}
}
async onSetFlash(flashMode) {
const success = await this.camera.setFleshMode(flashMode);
}
async onTakeIt() {
const imageURI = await this.camera.capture(true);
let newImage = {imageURI: imageURI};
this.setState({...this.state, image:newImage});
}
onOpenCameraPressed() {
this.setState({shouldOpenCamera:!this.state.shouldOpenCamera});
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
//justifyContent: 'center',
//alignItems: 'center',
backgroundColor: '#F5FCFF',
marginTop: 20
},
welcome: {
fontSize: 20,
textAlign: 'center',
margin: 10,
},
instructions: {
textAlign: 'center',
color: '#333333',
marginBottom: 5,
},
row: {
flexDirection: 'row',
justifyContent: 'center',
padding: 10,
backgroundColor: '#F6F6F6',
alignItems: 'center',
backgroundColor: '#F5FCFF',
},
text: {
flex: 1,
},
button: {
fontSize: 22,
alignSelf: 'center',
backgroundColor: 'transparent'
},
listView: {
//flex:1,
//flexDirection:'column',
margin: 8,
backgroundColor: '#D6DAC2',
//alignSelf: 'stretch'
buttonText: {
color: 'blue',
marginBottom: 20,
fontSize: 20
},
apiButton:{
marginTop: 20,
backgroundColor: 'gray',
padding: 10
}
});
AppRegistry.registerComponent('example', () => example);

2
example/ios/example/AppDelegate.m
View File

@ -31,7 +31,7 @@
* on the same Wi-Fi network.
*/
jsCodeLocation = [NSURL URLWithString:@"http://172.31.8.239:8081/index.ios.bundle?platform=ios&dev=true"];
jsCodeLocation = [NSURL URLWithString:@"http://172.31.9.92:8081/index.ios.bundle?platform=ios&dev=true"];
/**
* OPTION 2

280
ios/lib/ReactNativeCameraKit/CKGalleryManager.m
View File

@ -33,12 +33,6 @@ RCT_EXPORT_MODULE();
return self;
}
//
//-(void)iterateAllAlbums:(AlbumsNamesBlock)block {
//
//
//}
-(void)initAlbums {
@ -49,39 +43,12 @@ RCT_EXPORT_MODULE();
albumsOptions.predicate = [NSPredicate predicateWithFormat:@"estimatedAssetCount > 0"];
self.allPhotos = [PHAsset fetchAssetsWithOptions:allPhotosOptions];
self.smartAlbums = [PHAssetCollection fetchAssetCollectionsWithType:PHAssetCollectionTypeSmartAlbum subtype:PHAssetCollectionSubtypeAlbumRegular options:nil];
// self.smartAlbums = [PHAssetCollection fetchAssetCollectionsWithType:PHAssetCollectionTypeSmartAlbum subtype:PHAssetCollectionSubtypeAlbumMyPhotoStream options:nil];
self.topLevelUserCollections = [PHCollectionList fetchTopLevelUserCollectionsWithOptions:nil];
}
//-(void)getAlbumsName:(PHFetchResult*)albums block:(AlbumsNamesBlock)block {
//
// NSMutableDictionary *albumsInfo = [[NSMutableDictionary alloc] init];
// NSInteger albumsCount = [albums count];
//
// if (albumsCount == 0) {
// block(nil);
// }
//
// [albums enumerateObjectsUsingBlock:^(PHAssetCollection *collection, NSUInteger idx, BOOL *stop) {
//
//
// // NSMutableDictionary *albumInfoDict = [[NSMutableDictionary alloc] init];
// if (collection.estimatedAssetCount != NSNotFound) {
// albumsInfo[collection.localizedTitle] = @{@"name": collection.localizedTitle};
// }
//
// if (idx == albumsCount-1) {
// if (block) {
// block(albumsInfo);
// }
// }
//
// }];
//
//}
-(void)getAllAlbumsNameAndThumbnails:(AlbumsBlock)block {
@ -96,7 +63,6 @@ RCT_EXPORT_MODULE();
NSInteger smartAlbumsCount = self.smartAlbums.count;
NSLog(@"### smartAlbums");
dispatch_async(dispatch_get_global_queue(DISPATCH_QUEUE_PRIORITY_DEFAULT, 0), ^{
@ -118,6 +84,7 @@ RCT_EXPORT_MODULE();
NSMutableDictionary *albumInfo = [[NSMutableDictionary alloc] init];
albumInfo[@"albumName"] = albumName;
albumInfo[@"imagesCount"] = [NSNumber numberWithInteger:collectionCount];
albumsDict[albumName] = albumInfo;
@ -128,7 +95,6 @@ RCT_EXPORT_MODULE();
options:cropToSquare
resultHandler:^(UIImage *result, NSDictionary *info) {
NSLog(@"albumName:%@", albumName);
if (!albumInfo[@"image"]) {
albumInfo[@"image"] = [UIImageJPEGRepresentation(result, 1.0) base64Encoding];
@ -136,7 +102,6 @@ RCT_EXPORT_MODULE();
if (idx == smartAlbumsCount-1) {
NSLog(@"%@", albumsDict );
dispatch_semaphore_signal(sem);
}
@ -151,7 +116,6 @@ RCT_EXPORT_MODULE();
dispatch_semaphore_wait(sem, DISPATCH_TIME_FOREVER);
}
NSLog(@"### topLevelUserCollections");
NSInteger topLevelAlbumsCount = self.topLevelUserCollections.count;
@ -169,6 +133,7 @@ RCT_EXPORT_MODULE();
NSMutableDictionary *albumInfo = [[NSMutableDictionary alloc] init];
albumInfo[@"albumName"] = [NSString stringWithFormat:@"%@", albumName];
albumInfo[@"imagesCount"] = [NSNumber numberWithInteger:collectionCount];
albumsDict[albumName] = albumInfo;
@ -183,176 +148,74 @@ RCT_EXPORT_MODULE();
resultHandler:^(UIImage *result, NSDictionary *info) {
if (!albumInfo[@"image"]) {
NSLog(@"albumName:%@", albumName);
albumInfo[@"image"] = [UIImageJPEGRepresentation(result, 1.0) base64Encoding];
}
if (idx == topLevelAlbumsCount-1) {
if (block) {
NSLog(@"cool");
block(albumsDict);
}
// if (block) {
//
// block(albumsDict);
// }
}
}];
}
}];
});
}
//-(NSDictionary*)dictionaryForCollection:(PHAssetCollection*)collection semaphore:(dispatch_semaphore_t)sem albumsDict:(NSDictionary) {
//
//}
RCT_EXPORT_METHOD(getAllAlbumsNamesAndThumbnails:(RCTPromiseResolveBlock)resolve
reject:(__unused RCTPromiseRejectBlock)reject)
{
}
RCT_EXPORT_METHOD(getAllAlbumsName:(RCTPromiseResolveBlock)resolve
reject:(__unused RCTPromiseRejectBlock)reject)
{
[self getAllAlbumsNameAndThumbnails:^(NSDictionary *albums) {
if (resolve) {
NSInteger allPhotosCount = self.allPhotos.count;
// NSInteger collectionCount = [PHAsset fetchAssetsInAssetCollection:collection options:nil].count;
if (allPhotosCount > 0){
// NSArray *arr = [NSArray arrayWithObject:albums];
NSDictionary *ans = @{[NSString stringWithFormat:@"albums"]: albums};
resolve(ans);
NSString *albumName = @"All Photos";
albumName = [NSString stringWithFormat:@"%@", albumName];
// PHFetchResult *fetchResult = [PHAsset fetchKeyAssetsInAssetCollection:self.allPhotos options:nil];
PHAsset *thumbnail = [self.allPhotos firstObject];
NSMutableDictionary *albumInfo = [[NSMutableDictionary alloc] init];
albumInfo[@"albumName"] = [NSString stringWithFormat:@"%@", albumName];
albumInfo[@"imagesCount"] = [NSNumber numberWithInteger:allPhotosCount];
albumsDict[albumName] = albumInfo;
// __block BOOL isInvokeBlock = NO;
[[PHImageManager defaultManager]
requestImageForAsset:thumbnail
targetSize:retinaSquare
contentMode:PHImageContentModeAspectFit
options:cropToSquare
resultHandler:^(UIImage *result, NSDictionary *info) {
if (!albumInfo[@"image"]) {
albumInfo[@"image"] = [UIImageJPEGRepresentation(result, 1.0) base64Encoding];
}
// if (idx == topLevelAlbumsCount-1) {
if (block) {
block(albumsDict);
}
// }
}];
}
}];
// // NSMutableDictionary *albumsInfo = [[NSMutableDictionary alloc] init];
// PHFetchResult *userAlbums = [self getAllAlbums:PHAssetCollectionTypeAlbum];
//
// [self getAlbumsName:userAlbums block:^(NSDictionary *albumsNames) {
// PHFetchResult *userSmartAlbums = [self getAllAlbums:PHAssetCollectionTypeSmartAlbum];
//
// if (userSmartAlbums.count == 0) {
// if(resolve) {
// resolve(albumsNames);
// return;
// }
// }
//
// [self getAlbumsName:userSmartAlbums block:^(NSDictionary *smartAlbumsNames) {
//
// NSMutableDictionary *userAlbumsFull = [NSMutableDictionary dictionaryWithDictionary:albumsNames];
// [userAlbumsFull addEntriesFromDictionary:smartAlbumsNames];
//
// if(resolve) {
// resolve(userAlbumsFull);
// }
// }];
// }];
//
// // [userAlbums enumerateObjectsUsingBlock:^(PHAssetCollection *collection, NSUInteger idx, BOOL *stop) {
// //
// // NSMutableDictionary *albumInfoDict = [[NSMutableDictionary alloc] init];
// // albumInfoDict[@"albumName"] = collection.localizedTitle;
// // [albumsInfo addObject:albumInfoDict];
// //
// // if (idx == albumsCount-1) {
// // if (resolve) {
// // resolve(albumsInfo);
// // }
// // }
// //
// // }];
});
}
//RCT_EXPORT_METHOD(getThumbnailForAlbumName:(NSString*)albumName
// resolve:(RCTPromiseResolveBlock)resolve
// reject:(__unused RCTPromiseRejectBlock)reject)
//{
//
// NSInteger retinaScale = [UIScreen mainScreen].scale;
// CGSize retinaSquare = CGSizeMake(100*retinaScale, 100*retinaScale);
//
// PHImageRequestOptions *cropToSquare = [[PHImageRequestOptions alloc] init];
// cropToSquare.resizeMode = PHImageRequestOptionsResizeModeExact;
//
// PHFetchResult *userAlbums = [self getAllAlbums:PHAssetCollectionTypeAlbum]; // TODO ######################
//
// [self getThumbnial:userAlbums albumName:albumName cropToSquare:cropToSquare retinaSquare:retinaSquare block:^(BOOL success, NSString *encodeImage) {
//
// if (success) {
// if (resolve) {
// resolve(encodeImage);
// }
// }
//
// else {
// PHFetchResult *userSmartAlbums = [self getAllAlbums:PHAssetCollectionTypeSmartAlbum];
// [self getThumbnial:userSmartAlbums albumName:albumName cropToSquare:cropToSquare retinaSquare:retinaSquare block:^(BOOL success, NSString *encodeImage) {
// if (resolve) {
// resolve(encodeImage);
// }
// }];
//
// }
// }];
//
// // [userAlbums enumerateObjectsUsingBlock:^(PHAssetCollection *collection, NSUInteger idx, BOOL *stop) {
// //
// // if ([albumName isEqualToString:collection.localizedTitle]) {
// //
// // *stop = YES;
// //
// // PHFetchResult *fetchResult = [PHAsset fetchKeyAssetsInAssetCollection:collection options:nil];
// // PHAsset *asset = [fetchResult firstObject];
// //
// // CGFloat cropSideLength = MIN(asset.pixelWidth, asset.pixelHeight);
// // CGRect square = CGRectMake(0, 0, cropSideLength, cropSideLength);
// // CGRect cropRect = CGRectApplyAffineTransform(square,
// // CGAffineTransformMakeScale(1.0 / asset.pixelWidth,
// // 1.0 / asset.pixelHeight));
// //
// // // make sure resolve call only once
// // __block BOOL isInvokeResolve = NO;
// //
// // [[PHImageManager defaultManager]
// // requestImageForAsset:asset
// // targetSize:retinaSquare
// // contentMode:PHImageContentModeAspectFit
// // options:cropToSquare
// // resultHandler:^(UIImage *result, NSDictionary *info) {
// //
// // NSData *imageData = UIImageJPEGRepresentation(result, 1.0);
// //
// // if (!imageData) {
// // imageData = UIImagePNGRepresentation(result);
// // }
// //
// // NSString *encodedString = [imageData base64Encoding];
// //
// // // CGDataProviderRef provider = CGImageGetDataProvider(result.CGImage);
// // // NSData* data = (id)CFBridgingRelease(CGDataProviderCopyData(provider));
// // // NSString *encodedString = [data base64Encoding];
// //
// // if (resolve && !isInvokeResolve) {
// // isInvokeResolve = YES;
// // resolve(encodedString);
// // }
// // }];
// // }
// // }];
//}
-(void)getThumbnial:(PHFetchResult*)albums albumName:(NSString*)albumName cropToSquare:(PHImageRequestOptions*)cropToSquare retinaSquare:(CGSize)retinaSquare block:(CallbackGalleryBlock)block {
-(void)getThumbnial:(PHFetchResult*)albums
albumName:(NSString*)albumName
cropToSquare:(PHImageRequestOptions*)cropToSquare
retinaSquare:(CGSize)retinaSquare block:(CallbackGalleryBlock)block {
[albums enumerateObjectsUsingBlock:^(PHAssetCollection *collection, NSUInteger idx, BOOL *stop) {
if ([albumName isEqualToString:collection.localizedTitle]) {
NSLog(@"collection.localizedTitle:%@", collection.localizedTitle);
*stop = YES;
PHFetchResult *fetchResult = [PHAsset fetchKeyAssetsInAssetCollection:collection options:nil];
@ -411,4 +274,41 @@ RCT_EXPORT_METHOD(getAllAlbumsName:(RCTPromiseResolveBlock)resolve
}];
}
RCT_EXPORT_METHOD(getAlbumsWithThumbnails:(RCTPromiseResolveBlock)resolve
reject:(__unused RCTPromiseRejectBlock)reject)
{
[self getAllAlbumsNameAndThumbnails:^(NSDictionary *albums) {
if (resolve) {
NSDictionary *ans = @{[NSString stringWithFormat:@"albums"]: albums};
resolve(ans);
}
}];
}
RCT_EXPORT_METHOD(getImagesForAlbumName:(NSInteger)numberOfImages
albumName:(NSString*)albumName
resolve:(RCTPromiseResolveBlock)resolve
reject:(__unused RCTPromiseRejectBlock)reject)
{
// [self.imageManager requestImageForAsset:asset
// targetSize:AssetGridThumbnailSize
// contentMode:PHImageContentModeAspectFill
// options:nil
// resultHandler:^(UIImage *result, NSDictionary *info) {
// // Set the cell's thumbnail image if it's still showing the same asset.
// if ([cell.representedAssetIdentifier isEqualToString:asset.localIdentifier]) {
// cell.thumbnailImage = result;
// }
// }];
}
@end

39
src/CameraKitGallery.js
View File

@ -1,23 +1,44 @@
import {
NativeModules
NativeModules,
CameraRoll
} from 'react-native';
var CKGallery = NativeModules.CKGalleryManager;
import _ from 'lodash';
async function getAlbums() {
const albums = await CKGallery.getAllAlbumsName();
return albums;
async function getAlbumsWithThumbnails() {
const albums = await CKGallery.getAlbumsWithThumbnails();
return albums;
}
async function getThumbnailForAlbumName(albumName) {
const albumsThumbnail = await CKGallery.getThumbnailForAlbumName(albumName);
const albumsThumbnail = await CKGallery.getThumbnailForAlbumName(albumName);
return albumsThumbnail;
return albumsThumbnail;
}
function getPhotosForAlbum(albumName, numberOfPhotos, callback, error) {
let groupType = (albumName === 'Camera Roll') ? 'SavedPhotos' : 'All';
//const photoStream = ['Bursts', 'Recently Added', 'Selfies', 'Recently Added', 'Screenshots', 'My Photo Stream'];
//if (_.include(photoStream, albumName)) {
// groupType = 'PhotoStream';
//}
const fetchParams = {
first: numberOfPhotos,
groupName: albumName,
groupTypes: groupType,
};
CameraRoll.getPhotos(fetchParams)
.then((data) => callback(data), (e) => error(e));
}
export default {
getAlbums,
getThumbnailForAlbumName
getAlbumsWithThumbnails,
getThumbnailForAlbumName,
getPhotosForAlbum
}