🚧 (example) add Instagram loop

Author: tpucci

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, SlideLeft } from 'react-gondola/transitions';
+import { CardSkewUp, SlideLeft, SlideUp } from 'react-gondola/transitions';
 import { getRandomUser } from './getRandomUser';
 
 interface State {
@@ -35,7 +35,6 @@ export class Instagram extends Component<Props, State> {
         <Screen
           name="profile"
           Component={ProfilePage}
-          Transitioner={CardSkewUp}
           visible
           props={{
             selectPost: (selectedPost: any) => this.setState({ selectedPost }),
@@ -50,7 +49,6 @@ export class Instagram extends Component<Props, State> {
           Transitioner={CardSkewUp}
           visible={this.state.isSneakPeeking && !!this.state.selectedPost}
           onBack={() => {
-            debugger;
             this.setState({ selectedPost: null, isSneakPeeking: false });
           }}
           props={{
@@ -64,12 +62,26 @@ export class Instagram extends Component<Props, State> {
           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,
+            selectUser: (user: any) => {
+              this.setState({ selectedUser: user });
+            },
+          }}
+        />
+        <Screen
+          name="nextProfile"
+          Component={Instagram}
+          Transitioner={SlideUp}
+          visible={!!this.state.selectedUser}
+          onBack={() => {
+            this.setState({ selectedUser: null });
+          }}
+          props={{
+            user: this.state.selectedUser,
           }}
         />
       </Canal>

example/src/canals/Instagram/PostPage.tsx

@@ -1,5 +1,5 @@
 import React, { Component } from 'react';
-import { StyleSheet, SafeAreaView, Text, View, Dimensions } from 'react-native';
+import { StyleSheet, SafeAreaView, Text, View, Dimensions, TouchableOpacity } from 'react-native';
 import { getRandomComments } from './getRandomComment';
 
 const { width: POST_SIZE } = Dimensions.get('window');
@@ -56,6 +56,7 @@ const styles = StyleSheet.create({
 interface Props {
   user: any;
   post: any;
+  selectUser: (user: any) => any;
 }
 
 export class PostPage extends Component<Props> {
@@ -79,9 +80,15 @@ export class PostPage extends Component<Props> {
         </View>
         {comments.map(comment => (
           <View style={styles.comment} key={comment.id}>
-            <View style={[styles.avatar, { backgroundColor: comment.author.color }]}>
-              <Text style={styles.emoji}>{comment.author.emoji}</Text>
-            </View>
+            <TouchableOpacity
+              onPress={() => {
+                this.props.selectUser(comment.author);
+              }}
+            >
+              <View style={[styles.avatar, { backgroundColor: comment.author.color }]}>
+                <Text style={styles.emoji}>{comment.author.emoji}</Text>
+              </View>
+            </TouchableOpacity>
             <View style={styles.commentComment}>
               <Text style={styles.commentAuthor}>{comment.author.name}</Text>
               <Text style={styles.commentCommentComment}>{comment.comment}</Text>