Example project updated with unsupported image types for android

example/AlbumsScreen.ios.js

@@ -75,7 +75,7 @@ export default class AlbumsScreen extends Component {
                     this.imageTapped(result.nativeEvent.selected);
           }}
           fileTypeSupport={{
-                      supportedFileTypes: ['image/jpeg', 'image/png'],
+                      supportedFileTypes: ['image/png'],
                       unsupportedOverlayColor: "#00000055",
                       unsupportedImage: require('./images/unsupportedImage.png'),
                       unsupportedText: 'Unsupported',

example/GalleryScreen.android.js

@@ -1,28 +1,26 @@
 import React, {Component} from 'react';
 import {
-  AppRegistry,
+    AppRegistry,
-  StyleSheet,
+    StyleSheet,
-  Text,
+    Text,
-  View,
+    View,
-  ListView,
+    ListView,
-  TouchableOpacity,
+    TouchableOpacity,
-  Image,
+    Image,
-  Dimensions
+    AlertIOS,
+    CameraRoll,
+    Dimensions
 } from 'react-native';
 
-import _ from 'lodash';
-
 import {
-  CameraKitGalleryView
+    CameraKitGalleryView
 } from 'react-native-camera-kit';
 
-const ds = new ListView.DataSource({
-  rowHasChanged: (r1, r2) => r1 !== r2
-});
-
 const size = Math.floor((Dimensions.get('window').width) / 3);
 const innerSize = size - 6;
 
+const resolveAssetSource = require('react-native/Libraries/Image/resolveAssetSource');
+
 export default class GalleryScreenNative extends Component {
 
   static navigatorButtons = {
@@ -34,92 +32,38 @@ export default class GalleryScreenNative extends Component {
     ]
   };
 
-  async onNavigatorEvent(event) {
-    if (event.type === 'NavBarButtonPress') {
-      if (event.id === 'navBarDone') {
-        const selected = await this.gallery.getSelectedImages();
-
-        this.props.navigator.push({
-          screen: 'media.PreviewScreen',
-          title: 'Preview',
-          backButtonTitle: 'Albums',
-          passProps: {
-            imagesData: selected.selectedImages
-          },
-          navigatorStyle: {
-            navBarHidden: true
-          }
-        });
-      }
-    }
-  }
-
   constructor(props) {
     super(props);
     this.state = {
       album: this.props.albumName,
-      uris: []
-    }
-  }
-
-  onTapImage(event) {
-    if(_.includes(this.state.uris, event.uri)) {
-      const index = this.state.uris.indexOf(event.uri);
-      this.setState({uris: [...this.state.uris.slice(0, index - 1), ...this.state.uris.slice(index + 1)]});
-    } else {
-      this.setState({uris: [...this.state.uris, event.uri]});
     }
   }
 
   render() {
     return (
-      <CameraKitGalleryView
+        <CameraKitGalleryView
-        ref={(gallery) => {
+            ref={(gallery) => {
                   this.gallery = gallery;
                 }}
-        style={{flex:1}}
+            style={{flex:1, margin: 0, backgroundColor: '#ffffff', marginTop: 50}}
-        albumName={this.state.album}
+            albumName={this.state.album}
-        minimumInteritemSpacing={10}
+            minimumInteritemSpacing={10}
-        minimumLineSpacing={10}
+            minimumLineSpacing={10}
-        columnCount={3}
+            columnCount={3}
-        selectedUris={this.state.uris}
+            onSelected={(result) => {
-        onTapImage={this.onTapImage.bind(this)}
+
-      />
+        }}
+            fileTypeSupport={{
+                      supportedFileTypes: ['image/png'],
+                      unsupportedOverlayColor: "#00000055",
+                      unsupportedImage: resolveAssetSource(require('./images/unsupportedImage.png')).uri,
+                      //unsupportedText: 'JPEG!!',
+                      unsupportedTextColor: '#ff0000'
+          }}
+        />
     )
   }
 }
 
-const styles = StyleSheet.create({
+const styles = StyleSheet.create({});
-  container: {
-    flex: 1,
-    justifyContent: 'center',
-    alignItems: 'center',
-    backgroundColor: '#F5FCFF',
-    marginTop: 20
-  },
-  listView: {
-    //flex:1,
-    //flexDirection:'column',
-    paddingTop: 0,
-    margin: 8,
-    backgroundColor: '#D6DAC2',
-
-  },
-  row: {
-    flexDirection: 'column',
-    flex: 1,
-  },
-  image: {
-    width: innerSize,
-    height: innerSize,
-    alignItems: 'center',
-    justifyContent: 'center'
-  },
-  rowContainer: {
-    width: size,
-    height: size,
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
-});