Skip to content
This repository was archived by the owner on Nov 3, 2025. It is now read-only.

Commit 8c7cf45

Browse files
tpuccitpucci
committed
🚧 (example) add Instagram example
1 parent 3c3d127 commit 8c7cf45

10 files changed

Lines changed: 457 additions & 2 deletions

File tree

‎example/src/App.tsx‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import React, { Component } from 'react';
2+
import { Instagram } from './canals/Instagram';
23
import { SignIn } from './canals/SignIn';
34
import { FullScreenPortal } from 'react-gondola';
45
import { View, TouchableOpacity, Text } from 'react-native';
@@ -7,11 +8,11 @@ interface State {
78
example: null | 'SignIn' | 'Instagram';
89
}
910

10-
const EXAMPLES = { SignIn, Instagram: SignIn };
11+
const EXAMPLES = { SignIn, Instagram };
1112

1213
export default class App extends Component<{}, State> {
1314
state: State = {
14-
example: null,
15+
example: 'Instagram',
1516
};
1617

1718
render() {

‎example/src/canals/Instagram/Instagram.tsx‎

Lines changed: 70 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,70 @@
1+
import React, { Component } from 'react';
2+
import { ProfilePage } from './ProfilePage';
3+
import { PostPage } from './PostPage';
4+
import { PostSneakPeek } from './PostSneakPeek';
5+
import { Screen, Canal } from 'react-gondola';
6+
import { CardSkewUp } from 'react-gondola/transitions';
7+
import { getRandomUser } from './getRandomUser';
8+
9+
interface State {
10+
selectedPost: any | null;
11+
selectedUser: any | null;
12+
isSneakPeeking: boolean;
13+
}
14+
15+
interface Props {
16+
user?: any;
17+
}
18+
19+
export class Instagram extends Component<Props, State> {
20+
constructor(props: Props) {
21+
super(props);
22+
this.user = props.user || getRandomUser();
23+
}
24+
user: any;
25+
26+
state = {
27+
isSneakPeeking: false,
28+
selectedPost: null,
29+
selectedUser: null,
30+
};
31+
32+
render() {
33+
return (
34+
<Canal>
35+
<Screen
36+
name="profile"
37+
Component={ProfilePage}
38+
Transitioner={CardSkewUp}
39+
visible
40+
props={{
41+
selectPost: (selectedPost: any) => this.setState({ selectedPost }),
42+
sneakPeekPost: (selectedPost: any) =>
43+
this.setState({ selectedPost, isSneakPeeking: true }),
44+
user: this.user,
45+
}}
46+
/>
47+
<Screen
48+
name="sneakPeek"
49+
Component={PostSneakPeek}
50+
Transitioner={CardSkewUp}
51+
visible={this.state.isSneakPeeking && !!this.state.selectedPost}
52+
props={{
53+
user: this.user,
54+
post: this.state.selectedPost,
55+
}}
56+
/>
57+
<Screen
58+
name="post"
59+
Component={PostPage}
60+
Transitioner={CardSkewUp}
61+
visible={!this.state.isSneakPeeking && !!this.state.selectedPost}
62+
props={{
63+
user: this.user,
64+
post: this.state.selectedPost,
65+
}}
66+
/>
67+
</Canal>
68+
);
69+
}
70+
}

‎example/src/canals/Instagram/PostPage.tsx‎

Lines changed: 94 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,94 @@
1+
import React, { Component } from 'react';
2+
import { StyleSheet, SafeAreaView, Text, View, Dimensions } from 'react-native';
3+
import { getRandomComments } from './getRandomComment';
4+
5+
const { width: POST_SIZE } = Dimensions.get('window');
6+
7+
const styles = StyleSheet.create({
8+
container: {
9+
flex: 1,
10+
backgroundColor: 'white',
11+
},
12+
header: {
13+
padding: 8,
14+
flexDirection: 'row',
15+
},
16+
avatar: {
17+
width: 32,
18+
height: 32,
19+
borderRadius: 16,
20+
justifyContent: 'center',
21+
alignItems: 'center',
22+
},
23+
info: {
24+
paddingVertical: 8,
25+
marginLeft: 8,
26+
flex: 1,
27+
},
28+
post: {
29+
height: POST_SIZE,
30+
justifyContent: 'center',
31+
alignItems: 'center',
32+
},
33+
emoji: {
34+
fontSize: 24,
35+
},
36+
postEmoji: {
37+
fontSize: POST_SIZE,
38+
},
39+
comment: {
40+
padding: 8,
41+
flexDirection: 'row',
42+
alignItems: 'center',
43+
},
44+
commentAuthor: {
45+
fontWeight: 'bold',
46+
},
47+
commentComment: {
48+
flexDirection: 'row',
49+
marginLeft: 8,
50+
},
51+
commentCommentComment: {
52+
marginLeft: 8,
53+
},
54+
});
55+
56+
interface Props {
57+
user: any;
58+
post: any;
59+
}
60+
61+
export class PostPage extends Component<Props> {
62+
render() {
63+
const { user, post } = this.props;
64+
65+
const comments = getRandomComments();
66+
67+
return (
68+
<SafeAreaView style={styles.container}>
69+
<View style={styles.header}>
70+
<View style={[styles.avatar, { backgroundColor: user.color }]}>
71+
<Text style={styles.emoji}>{user.emoji}</Text>
72+
</View>
73+
<View style={styles.info}>
74+
<Text>{user.name}</Text>
75+
</View>
76+
</View>
77+
<View style={[styles.post, { backgroundColor: post.color }]} key={post.id}>
78+
<Text style={styles.postEmoji}>{post.emoji}</Text>
79+
</View>
80+
{comments.map(comment => (
81+
<View style={styles.comment} key={comment.id}>
82+
<View style={[styles.avatar, { backgroundColor: comment.author.color }]}>
83+
<Text style={styles.emoji}>{comment.author.emoji}</Text>
84+
</View>
85+
<View style={styles.commentComment}>
86+
<Text style={styles.commentAuthor}>{comment.author.name}</Text>
87+
<Text style={styles.commentCommentComment}>{comment.comment}</Text>
88+
</View>
89+
</View>
90+
))}
91+
</SafeAreaView>
92+
);
93+
}
94+
}

‎example/src/canals/Instagram/PostSneakPeek.tsx‎

Lines changed: 69 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,69 @@
1+
import React, { Component } from 'react';
2+
import { StyleSheet, Text, View, Dimensions } from 'react-native';
3+
4+
const { width: SCREEN_WIDTH } = Dimensions.get('window');
5+
6+
const SCREEN_MARGIN = 16;
7+
const POST_SIZE = SCREEN_WIDTH - SCREEN_MARGIN;
8+
9+
const styles = StyleSheet.create({
10+
header: {
11+
padding: 8,
12+
flexDirection: 'row',
13+
borderTopRightRadius: 8,
14+
borderTopLeftRadius: 8,
15+
backgroundColor: 'white',
16+
},
17+
info: {
18+
paddingVertical: 8,
19+
marginLeft: 8,
20+
flex: 1,
21+
},
22+
avatar: {
23+
width: 32,
24+
height: 32,
25+
borderRadius: 16,
26+
justifyContent: 'center',
27+
alignItems: 'center',
28+
},
29+
post: {
30+
height: POST_SIZE,
31+
justifyContent: 'center',
32+
alignItems: 'center',
33+
},
34+
emoji: {
35+
fontSize: 24,
36+
},
37+
postEmoji: {
38+
fontSize: POST_SIZE,
39+
},
40+
container: {
41+
marginHorizontal: SCREEN_MARGIN,
42+
},
43+
});
44+
45+
interface Props {
46+
user: any;
47+
post: any;
48+
}
49+
50+
export class PostSneakPeek extends Component<Props> {
51+
render() {
52+
const { user, post } = this.props;
53+
return (
54+
<View style={styles.container}>
55+
<View style={styles.header}>
56+
<View style={[styles.avatar, { backgroundColor: user.color }]}>
57+
<Text style={styles.emoji}>{user.emoji}</Text>
58+
</View>
59+
<View style={styles.info}>
60+
<Text>{user.name}</Text>
61+
</View>
62+
</View>
63+
<View style={[styles.post, { backgroundColor: post.color }]} key={post.id}>
64+
<Text style={styles.postEmoji}>{post.emoji}</Text>
65+
</View>
66+
</View>
67+
);
68+
}
69+
}

‎example/src/canals/Instagram/ProfilePage.tsx‎

Lines changed: 100 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,100 @@
1+
import React, { Component } from 'react';
2+
import {
3+
View,
4+
StyleSheet,
5+
SafeAreaView,
6+
Text,
7+
ScrollView,
8+
Dimensions,
9+
TouchableOpacity,
10+
} from 'react-native';
11+
import { getRandomPosts } from './getRandomPost';
12+
13+
const { width: SCREEN_WIDTH } = Dimensions.get('window');
14+
15+
const POST_SIZE = SCREEN_WIDTH / 3;
16+
17+
const styles = StyleSheet.create({
18+
container: {
19+
flex: 1,
20+
},
21+
header: {
22+
padding: 16,
23+
flexDirection: 'row',
24+
},
25+
avatar: {
26+
width: 64,
27+
height: 64,
28+
borderRadius: 32,
29+
justifyContent: 'center',
30+
alignItems: 'center',
31+
},
32+
info: {
33+
paddingVertical: 8,
34+
marginLeft: 8,
35+
flex: 1,
36+
},
37+
description: {
38+
marginTop: 8,
39+
color: 'grey',
40+
},
41+
postRow: {
42+
flexDirection: 'row',
43+
},
44+
post: {
45+
flex: 1,
46+
height: POST_SIZE,
47+
justifyContent: 'center',
48+
alignItems: 'center',
49+
margin: 1,
50+
},
51+
emoji: {
52+
fontSize: 48,
53+
},
54+
postEmoji: {
55+
fontSize: POST_SIZE,
56+
},
57+
});
58+
59+
export class ProfilePage extends Component<{
60+
selectPost: (post: any) => any;
61+
sneakPeekPost: (post: any) => any;
62+
user: any;
63+
}> {
64+
posts = getRandomPosts();
65+
render() {
66+
const { user } = this.props;
67+
const { posts } = this;
68+
69+
return (
70+
<SafeAreaView style={styles.container}>
71+
<ScrollView>
72+
<View style={styles.header}>
73+
<View style={[styles.avatar, { backgroundColor: user.color }]}>
74+
<Text style={styles.emoji}>{user.emoji}</Text>
75+
</View>
76+
<View style={styles.info}>
77+
<Text>{user.name}</Text>
78+
<Text style={styles.description}>{user.description}</Text>
79+
</View>
80+
</View>
81+
{posts.map((row, index) => (
82+
<View style={styles.postRow} key={index}>
83+
{row.map(post => (
84+
<TouchableOpacity
85+
onPress={() => this.props.selectPost(post)}
86+
key={post.id}
87+
onLongPress={() => this.props.sneakPeekPost(post)}
88+
>
89+
<View style={[styles.post, { backgroundColor: post.color }]}>
90+
<Text style={styles.postEmoji}>{post.emoji}</Text>
91+
</View>
92+
</TouchableOpacity>
93+
))}
94+
</View>
95+
))}
96+
</ScrollView>
97+
</SafeAreaView>
98+
);
99+
}
100+
}

‎example/src/canals/Instagram/getRandomComment.ts‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
import { getRandomUser } from './getRandomUser';
2+
3+
let idCounter = 0;
4+
5+
const comments = ['I love it!', 'Splendid 😍', 'What is your camera ?', 'This is beautiful!!'];
6+
7+
function getRandomComment() {
8+
idCounter = idCounter + 1;
9+
return {
10+
id: idCounter,
11+
comment: comments[Math.floor(Math.random() * comments.length)],
12+
author: getRandomUser(),
13+
};
14+
}
15+
16+
export function getRandomComments() {
17+
const numberOfComments = Math.ceil(Math.random() * 3);
18+
let result = [];
19+
for (let index = 0; index < numberOfComments; index++) {
20+
result.push(getRandomComment());
21+
}
22+
return result;
23+
}

0 commit comments

Comments
 (0)