🚧 (example) improve instagram example

Author: tpucci

example/src/App.tsx

@@ -3,6 +3,7 @@ import { Instagram } from './canals/Instagram';
 import { SignIn } from './canals/SignIn';
 import { FullScreenPortal } from 'react-gondola';
 import { View, TouchableOpacity, Text } from 'react-native';
+import { Navigation } from 'react-gondola/Navigation';
 
 interface State {
   example: null | 'SignIn' | 'Instagram';
@@ -44,9 +45,19 @@ export default class App extends Component<{}, State> {
     const Example = EXAMPLES[this.state.example];
 
     return (
-      <FullScreenPortal>
-        <Example />
-      </FullScreenPortal>
+      <>
+        <FullScreenPortal>
+          <Example />
+        </FullScreenPortal>
+        <TouchableOpacity
+          style={{ position: 'absolute', bottom: 8, right: 8 }}
+          onPress={Navigation.instance.back}
+        >
+          <View style={{ backgroundColor: 'black', borderRadius: 4 }}>
+            <Text style={{ color: 'white', margin: 4 }}>Go Back</Text>
+          </View>
+        </TouchableOpacity>
+      </>
     );
   }
 }

example/src/canals/Instagram/Instagram.tsx

@@ -3,7 +3,7 @@ import { ProfilePage } from './ProfilePage';
 import { PostPage } from './PostPage';
 import { PostSneakPeek } from './PostSneakPeek';
 import { Screen, Canal } from 'react-gondola';
-import { CardSkewUp } from 'react-gondola/transitions';
+import { CardSkewUp, SlideLeft } from 'react-gondola/transitions';
 import { getRandomUser } from './getRandomUser';
 
 interface State {
@@ -49,6 +49,10 @@ export class Instagram extends Component<Props, State> {
           Component={PostSneakPeek}
           Transitioner={CardSkewUp}
           visible={this.state.isSneakPeeking && !!this.state.selectedPost}
+          onBack={() => {
+            debugger;
+            this.setState({ selectedPost: null, isSneakPeeking: false });
+          }}
           props={{
             user: this.user,
             post: this.state.selectedPost,
@@ -57,8 +61,12 @@ export class Instagram extends Component<Props, State> {
         <Screen
           name="post"
           Component={PostPage}
-          Transitioner={CardSkewUp}
+          Transitioner={SlideLeft}
           visible={!this.state.isSneakPeeking && !!this.state.selectedPost}
+          onBack={() => {
+            debugger;
+            this.setState({ selectedPost: null, isSneakPeeking: false });
+          }}
           props={{
             user: this.user,
             post: this.state.selectedPost,

example/src/canals/Instagram/PostSneakPeek.tsx

@@ -39,6 +39,14 @@ const styles = StyleSheet.create({
   },
   container: {
     marginHorizontal: SCREEN_MARGIN,
+    shadowColor: '#000',
+    shadowOffset: {
+      width: 0,
+      height: 2,
+    },
+    shadowOpacity: 0.25,
+    shadowRadius: 3.84,
+    elevation: 5,
   },
 });
 

example/src/canals/Instagram/ProfilePage.tsx

@@ -16,6 +16,7 @@ const POST_SIZE = SCREEN_WIDTH / 3;
 
 const styles = StyleSheet.create({
   container: {
+    backgroundColor: 'white',
     flex: 1,
   },
   header: {

src/transitions/CardSkewUp.tsx

@@ -98,7 +98,7 @@ export class CardSkewUp extends TransitionComponent {
         pointerEvents={this.state.hidden ? 'none' : 'auto'}
         style={[
           StyleSheet.absoluteFill,
-          { backgroundColor: '#00000050', alignItems: 'center', justifyContent: 'center' },
+          { backgroundColor: '#000000aa', alignItems: 'center', justifyContent: 'center' },
           { opacity: sub(new Value(1), this.trans) },
         ]}
       >