added lightbox for image gallery

fixed inverted option

package.json

@@ -45,7 +45,8 @@
     "rollup": "^0.67.4",
     "rollup-plugin-babel": "^4.0.3",
     "rollup-plugin-commonjs": "^9.2.0",
-    "rollup-plugin-node-resolve": "^3.4.0"
+    "rollup-plugin-node-resolve": "^3.4.0",
+    "rollup-plugin-postcss": "^1.6.3"
   },
   "dependencies": {
     "md5": "2.2.1",
@@ -56,6 +57,7 @@
     "react-art": "^16.6.3",
     "react-dev-utils": "^6.1.1",
     "react-dom": "^16.6.3",
+    "react-image-lightbox": "^5.1.0",
     "react-native-web": "0.9.9",
     "shallowequal": "1.1.0",
     "uuid": "3.3.2"

rollup.config.js

@@ -1,6 +1,7 @@
 import resolve from 'rollup-plugin-node-resolve';
 import babel from 'rollup-plugin-babel';
 import commonjs from 'rollup-plugin-commonjs';
+import postcss from 'rollup-plugin-postcss';
 import fs from 'fs';
 
 
@@ -32,5 +33,8 @@ export default {
       runtimeHelpers: true,
       exclude: 'node_modules/**',
     }),
+    postcss({
+      plugins: [],
+    }),
   ],
 };

src/MessageImage.js

@@ -9,19 +9,38 @@ import {
   ViewPropTypes,
   Dimensions,
 } from 'react-native';
+import Lightbox from 'react-image-lightbox';
+import 'react-image-lightbox/style.css';
+import TouchableOpacity from './TouchableOpacity';
 
 export default class MessageImage extends React.Component {
-  render() {
-    const {width, height} = Dimensions.get('window');
+  state = {
+    isOpen: false,
+  };
+
+  onClickImage = () => {
+    this.setState({ isOpen: true });
+  }
 
+  render() {
+    const { isOpen } = this.state;
     return (
-      <View style={[styles.container, this.props.containerStyle]}>
+      <TouchableOpacity
+        onPress={this.onClickImage}
+        style={[styles.container, this.props.containerStyle]}
+      >
         <Image
           {...this.props.imageProps}
           style={[styles.image, this.props.imageStyle]}
-          source={{uri: this.props.currentMessage.image}}
+          source={{ uri: this.props.currentMessage.image }}
         />
-      </View>
+        {isOpen && (
+          <Lightbox
+            mainSrc={this.props.currentMessage.image}
+            onCloseRequest={() => this.setState({ isOpen: false })}
+          />
+        )}
+      </TouchableOpacity>
     );
   }
 }

src/WebScrollView.js

@@ -12,7 +12,7 @@ export default class WebScrollView extends Component {
   render() {
     const { ListHeaderComponent, ListFooterComponent, data, inverted } = this.props;
     let messages = data;
-    if (inverted) {
+    if (!inverted) {
       messages = data.slice().reverse();
     }
     return (