Fullscreen image with mode changing and prev/next callbacks

.babelrc

@@ -1,3 +1,3 @@
 {
-"presets": ["react-native"]
-}
+"presets": ["react-native", "react-native-stage-0/decorator-support"]
+}

Constants.js

@@ -0,0 +1,8 @@
+
+const LANDSCAPE = 'LANDSCAPE',
+      PORTRAIT = 'PORTRAIT'
+
+export {
+    LANDSCAPE,
+    PORTRAIT
+}

Store.js

@@ -0,0 +1,22 @@
+
+
+import { observable, action } from 'mobx';
+import { PORTRAIT } from './Constants';
+
+class Store {
+    @observable orientation = PORTRAIT;
+
+    @action changeOrientation(orientation) {
+        this.orientation = orientation;
+    }
+
+    @action prevImage() {
+        console.log('previous');
+    }
+
+    @action nextImage() {
+        console.log('next');
+    }
+}
+
+export default new Store();

components/Carousel.js

@@ -7,14 +7,24 @@ import {
     Image,
     TouchableHighlight
 } from 'react-native';
+import { inject, observer } from 'mobx-react/native';
 
+@inject('store')
 class TouchableImage extends Component {
     state = {
         width: null
     }
 
-    onPress() {
+    onPress(event) {
+        const { width } = this.state,
+              { store } = this.props,
+              X = event.nativeEvent.locationX;
 
+        if (X < width/2) {
+            store.prevImage();
+        }else{
+            store.nextImage();
+        }
     }
 
     onImageLayout(event) {
@@ -24,13 +34,13 @@ class TouchableImage extends Component {
     }
 
     render() {
-        const { image } = this.props;
+        const { image, orientation } = this.props;
 
         return (
             <TouchableHighlight onPress={this.onPress.bind(this)}
                                 style={styles.fullscreen}>
                 <Image source={{uri: image.uri}}
-                       style={styles.backgroundImage}
+                       style={[styles.backgroundImage, styles[orientation.toLowerCase()]]}
                        onLayout={this.onImageLayout.bind(this)}>
                     <Text style={styles.imageLabel}>{image.label}</Text>
                 </Image>
@@ -39,13 +49,15 @@ class TouchableImage extends Component {
     }
 }
 
+@inject('store') @observer
 class ImageCarousel extends Component {
     render() {
-        const { image } = this.props;
+        const { image, store } = this.props;
 
         return (
             <TouchableImage image={{uri: "https://i.imgur.com/6cFNnJp.jpg",
-                                    label: "Its my cake day, why am i happier about this then my real birthday, i will never know. First fav. Post"}} />
+                                    label: "Its my cake day, why am i happier about this then my real birthday, i will never know. First fav. Post"}}
+                            orientation={store.orientation} />
         );
     }
 }
@@ -59,10 +71,15 @@ const styles = StyleSheet.create({
     backgroundImage: {
         flex: 1,
         justifyContent: 'flex-end',
-        resizeMode: 'cover',
         width: null,
         height: null
     },
+    portrait: {
+        resizeMode: 'contain'
+    },
+    landscape: {
+        resizeMode: 'cover'
+    },
     imageLabel: {
         textAlign: 'center',
         backgroundColor: 'rgba(100, 100, 100, 0.5)',

index.ios.js

@@ -13,26 +13,42 @@ import {
   Image
 } from 'react-native';
 
+import { Provider as MobXProvider, observer } from 'mobx-react/native';
+
 import ImageCarousel from './components/Carousel';
+import { LANDSCAPE, PORTRAIT } from './Constants';
+import Store from './Store';
+
+@observer
+class ImgurApp extends Component {
+    onLayout(event) {
+        const { width, height } = event.nativeEvent.layout;
+        const orientation = ( width > height ) ? LANDSCAPE : PORTRAIT;
 
-export default class ImgurApp extends Component {
-  render() {
-    return (
-        <View style={styles.container}>
-            <ImageCarousel />
-        </View>
-    );
-  }
+        Store.changeOrientation(orientation);
+    }
+
+    render() {
+        return (
+            <MobXProvider store={Store}>
+                <View style={styles.container}
+                      onLayout={this.onLayout.bind(this)}>
+                    <ImageCarousel />
+                </View>
+            </MobXProvider>
+        );
+    }
 }
 
 const styles = StyleSheet.create({
     container: {
         flex: 1,
-        backgroundColor: '#F5FCFF',
+        backgroundColor: 'black',
     },
     empty: {
         flex: 1
     }
 });
 
 AppRegistry.registerComponent('ImgurApp', () => ImgurApp);
+export default ImgurApp;

ios/ImgurApp/AppDelegate.m

@@ -12,6 +12,7 @@
 #import <React/RCTBundleURLProvider.h>
 #import <React/RCTRootView.h>
 
+
 @implementation AppDelegate
 
 - (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions

package.json

@@ -1,22 +1,26 @@
 {
-	"name": "ImgurApp",
-	"version": "0.0.1",
-	"private": true,
-	"scripts": {
-		"start": "node node_modules/react-native/local-cli/cli.js start",
-		"test": "jest"
-	},
-	"dependencies": {
-		"react": "15.4.2",
-		"react-native": "0.41.2"
-	},
-	"devDependencies": {
-		"babel-jest": "18.0.0",
-		"babel-preset-react-native": "1.9.1",
-		"jest": "18.1.0",
-		"react-test-renderer": "15.4.2"
-	},
-	"jest": {
-		"preset": "react-native"
-	}
-}
+  "name": "ImgurApp",
+  "version": "0.0.1",
+  "private": true,
+  "scripts": {
+    "start": "node node_modules/react-native/local-cli/cli.js start",
+    "test": "jest"
+  },
+  "dependencies": {
+    "babel-preset-react-native-stage-0": "^1.0.1",
+    "mobx": "^3.1.0",
+    "mobx-react": "^4.1.0",
+    "react": "15.4.2",
+    "react-native": "0.41.2",
+    "react-native-orientation": "^1.17.0"
+  },
+  "devDependencies": {
+    "babel-jest": "18.0.0",
+    "babel-preset-react-native": "1.9.1",
+    "jest": "18.1.0",
+    "react-test-renderer": "15.4.2"
+  },
+  "jest": {
+    "preset": "react-native"
+  }
+}