Photo viewer03

App/Components/ImageViewer.js

@@ -1,14 +1,18 @@
 import React, { Component } from 'react';
-import { Platform, View, ScrollView, Text, StatusBar, SafeAreaView } from 'react-native';
+import { Platform, View, ScrollView, Text, StatusBar, SafeAreaView, Dimensions } from 'react-native';
 import Carousel, { Pagination } from 'react-native-snap-carousel';
 import { sliderWidth, itemWidth } from './Styles/SliderEntryStyle';
 import SliderEntry from './sliderEntry';
 import styles, { colors } from './Styles/ImageViewerStyle';
 import { scrollInterpolators, animatedStyles } from '../Lib/animation';
+import Slick from 'react-native-slick';
+import SliderItem  from './SliderItem';
 
 const IS_ANDROID = Platform.OS === 'android';
 const SLIDER_1_FIRST_ITEM = 1;
 
+const ScreenWidth = Dimensions.get('window').width;
+
 export default class ImageViewerComponent extends Component {
 
     constructor (props) {
@@ -83,13 +87,49 @@ export default class ImageViewerComponent extends Component {
         );
     }
 
+    renderSlickSlider(){
+        const { data } = this.props;
+        return (
+            <Slick
+                dot={<View style={{ backgroundColor: 'rgba(220, 221, 208, 1)', width: 8, height: 8, borderRadius: 4, marginLeft: 7, marginRight: 7 }} />}
+                activeDot={<View style={{ backgroundColor: 'rgba(1, 135, 232, 1)', width: 8, height: 8, borderRadius: 4, marginLeft: 7, marginRight: 7 }} />}
+                paginationStyle={{
+                bottom: 20
+                }}
+                loop={true}
+                autoplay={true}
+                autoplayTimeout={5.0}>
+               { 
+                   data.map((imageData, i) => 
+                   <SliderItem
+                    keyValue={i} 
+                    image={imageData} imageDimension={ ScreenWidth / 2}
+                    height={ (ScreenWidth / 2) +  60 }
+                    onImageItemClick= {() => this.imageClicked}>
+                   </SliderItem>)
+                }
 
+          </Slick>
+        )
+    }
+
+    imageClicked = (image, keyValue) => {
+        //alert("Hello Testing .... ", keyValue);
+        console.log("Hello Testing...");
+        this.props.onFullScreenEvent();
+    }
 
     render () {
-        const carousel = this.mainExample(1, 'Default layout | Loop | Autoplay | Parallax | Scale | Opacity | Pagination with tappable dots');
-        const { data } = this.props;
+        var carousel;
+        const { data, onFullScreenEvent } = this.props;
+        if(onFullScreenEvent === undefined){
+            carousel = this.mainExample(1, 'Default layout | Loop | Autoplay | Parallax | Scale | Opacity | Pagination with tappable dots');
+        }else {
+            carousel  = this.renderSlickSlider(); 
+        }
+        console.log("Data..... ", this.props);
         return (
-            <SafeAreaView style={styles.safeArea}>
+            <SafeAreaView style={[styles.safeArea, { height: (ScreenWidth / 2) +  80 }]}>
               {data && data.length ? carousel : null}
             </SafeAreaView>
         );

App/Components/SliderFullIImage.js

@@ -0,0 +1,41 @@
+import React, { Component } from 'react';
+import { View, Dimensions, Image, PixelRatio, Text, TouchableWithoutFeedback } from 'react-native';
+
+// Create a component
+let ScreenWidth = Dimensions.get("window").width;
+
+class SliderFullImage extends Component {
+
+    constructor(props){
+        super(props);
+    }
+
+    render(){
+        return (
+            <View style={[styles.containerStyle]}>
+                 <TouchableWithoutFeedback>
+                 <Image 
+                         source={{ uri: this.props.image }}
+                         style={{width:this.props.width, 
+                                height: this.props.height, 
+                                resizeMode:'cover', 
+                                overflow: 'hidden',
+                                alignSelf:'center',
+                             }}
+                         />
+                 </TouchableWithoutFeedback>
+             </View>
+           );
+    }
+}
+
+export default SliderFullImage;
+
+const styles = {
+  containerStyle: {
+    flex:1,
+    justifyContent: 'center',
+    alignItems:'center',
+  },
+};
+

App/Components/SliderItem.js

@@ -0,0 +1,43 @@
+import React, { Component } from 'react';
+import { View, Dimensions, Image, PixelRatio, Text, TouchableWithoutFeedback } from 'react-native';
+
+// Create a component
+let ScreenWidth = Dimensions.get("window").width;
+
+class SliderItem extends Component {
+
+    constructor(props){
+        super(props);
+    }
+
+    render(){
+        return (
+            <View style={[styles.containerStyle, {height: this.props.height-30}]}>
+                 <TouchableWithoutFeedback
+                     onPressIn={this.props.onImageItemClick(this.props.image, this.props.keyValue)}>
+                 <Image 
+                         source={{ uri: this.props.image }}
+                         style={{width:this.props.imageDimension, height: this.props.imageDimension, 
+                             resizeMode:'cover', 
+                             borderRadius: 10,
+                             overflow: 'hidden',
+                             alignSelf:'center',
+                             }}
+                         />
+                 </TouchableWithoutFeedback>
+             </View>
+           );
+    }
+}
+
+export default SliderItem;
+
+const styles = {
+  containerStyle: {
+    flex:1,
+    justifyContent: 'center',
+    alignItems:'center',
+
+  },
+};
+

App/Components/sliderEntry.js

@@ -1,5 +1,5 @@
 import React, { Component } from 'react';
-import { View, Text, Image, TouchableOpacity } from 'react-native';
+import { View, Text, Image, TouchableOpacity, TouchableWithoutFeedback } from 'react-native';
 import PropTypes from 'prop-types';
 import { ParallaxImage } from 'react-native-snap-carousel';
 import styles from './Styles/SliderEntryStyle'
@@ -28,6 +28,11 @@ export default class SliderEntry extends Component {
         );
     }
 
+    imageClicked(){
+        alert("Hello Testing.... ");
+    }
+
+
     render () {
         const { data, even } = this.props;
 
@@ -37,7 +42,8 @@ export default class SliderEntry extends Component {
               style={styles.slideInnerContainer}
               >
                 <View style={styles.shadow} />
-                <View style={[styles.imageContainer, even ? styles.imageContainerEven : {}]}>
+                <View
+                    style={[styles.imageContainer, even ? styles.imageContainerEven : {}]}>
                     { this.image }
                     <View style={[styles.radiusMask, even ? styles.radiusMaskEven : {}]} />
                 </View>

App/Containers/DocumentViewer.js

@@ -0,0 +1,77 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { StatusBar, TouchableOpacity,Dimensions, Platform, WebView } from 'react-native';
+import { Container, Header, Content, Icon, Text, View, Badge } from 'native-base';
+
+import Styles from './Styles/BenefeciaryDetailViewStyle';
+import Pdf from 'react-native-pdf';
+
+
+const ScreenWidth = Dimensions.get('window').width;
+const ScreenHeight =  Dimensions.get('window').height;
+
+class DocumentViewer extends Component {
+    constructor(props){
+        super(props);
+    }
+
+
+    renderSliderImage(data){
+        if(Platform.OS === 'ios'){
+          return ( < WebView 
+                    source={{ uri: data.filePath }}
+                    onLoad={this.onFinish}
+                    style={{flex:1, width: ScreenWidth}}
+                    originWhitelist={['*']} /> );
+        }else {
+        return(
+                <Pdf
+                    source={'file://' + data.filePath}
+                    onLoadComplete={(numberOfPages,filePath)=>{
+                        console.log(`number of pages: ${numberOfPages}`);
+                    }}
+                    onPageChanged={(page,numberOfPages)=>{
+                        console.log(`current page: ${page}`);
+                    }}
+                    onError={(error)=>{
+                        console.log(error);
+                    }}
+                style={{flex:1, width: ScreenWidth}}/>
+            );
+        }
+
+    }
+
+    render(){
+        const {navigation} = this.props;
+        const backScreen = navigation.getParam('backScreen', 'NetworkError');
+        const data = navigation.getParam('data', {});
+        return (
+            <Container>
+                <Header style={Styles.navigation}>
+                    <StatusBar backgroundColor="#242A38" animated barStyle="light-content" />
+                    <View style={Styles.nav}>
+                        <View style={Styles.navLeft}>
+                            <View style={Styles.navLeft}>
+                            </View>
+                        </View>
+                        <View style={Styles.navMiddle}>
+                            <Text style={Styles.logo}>{data.label}</Text>
+                        </View>
+                        <TouchableOpacity style={Styles.navRight}
+                            onPress={() => { navigation.navigate(backScreen); }}>
+                            <Icon name='times' type="FontAwesome5" style={Styles.navIcon} />
+                        </TouchableOpacity>
+                    </View>
+                </Header> 
+                <Content contentContainerStyle={[Styles.layoutDefault, {backgroundColor: '#242A38'}]}>
+
+                    {this.renderSliderImage(data)}
+
+                </Content>   
+            </Container>
+        )
+    }
+}
+
+export default DocumentViewer;

App/Containers/EventsList.js

@@ -136,13 +136,13 @@ class EventsList extends Component {
       <Container>
         <HeaderComponent title={"Events"} {...this.props} />
         {this.renderContent()}
-        <LoadingOverlay
+        {/* <LoadingOverlay
           visible={fetching}
           color="white"
           indicatorSize="large"
           messageFontSize={24}
           message="Loading..."
-        />
+        /> */}
       </Container>
 
     )

App/Containers/FeedbackDetail.js

@@ -14,6 +14,12 @@ import Styles from './Styles/BenefeciaryDetailViewStyle'
 
 class FeedbackDetailView extends Component {
 
+  constructor(props){
+    super(props);
+
+    this.onFullScreenImage = this.onFullScreenImage.bind(this);
+  }
+
   refreshPage() {
     const { navigation, fetching } = this.props;
     const parentProps = navigation.getParam('selectedData', null);
@@ -26,11 +32,22 @@ class FeedbackDetailView extends Component {
     }
   }
 
+  onFullScreenImage(){
+    console.log("Data come .....");
+    //alert("Full Screen");
+    const { data } = this.props;
+    this.props.navigation.navigate("FullScreenImages", {
+                  data: data.images,
+                  backScreen: 'FeedbackDetailScreen'
+    });
+  }
+
   renderContent() {
     const { data, detailError } = this.props;
     if (detailError) {
       return <ErrorPage status={detailError} onButtonClick={() => this.refreshPage()} />
     }
+    console.log("data :- ", data);
     return (
       <Content contentContainerStyle={Styles.layoutDefault}>
         <Image source={Images.background} style={Styles.bgImg} />
@@ -78,7 +95,7 @@ class FeedbackDetailView extends Component {
           </View>
         </View>
         {
-          data.images && data.images.length ? <ImageViewerComponent data={data.images} /> : null
+          data.images && data.images.length ? <ImageViewerComponent data={data.images} onFullScreenEvent={this.onFullScreenImage} /> : null
         }
 
       </Content>