Skip to content

Commit 3e2790f

Browse files
feat(example): add back and forth example screen (#1144)
1 parent 5d3676b commit 3e2790f

File tree

3 files changed

+152
-0
lines changed

3 files changed

+152
-0
lines changed

examples/default/src/navigation/HomeStack.tsx

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,10 @@ import { FlatListScreen } from '../screens/user-steps/FlatListScreen';
1515
import { ComplexViewsScreen } from '../screens/user-steps/ComplexViewsScreen';
1616
import { SectionListScreen } from '../screens/user-steps/SectionListScreen';
1717
import { GesturesScreen } from '../screens/user-steps/GesturesScreen';
18+
import {
19+
BackAndForthScreen,
20+
type BackAndForthScreenProp,
21+
} from '../screens/user-steps/BackAndForthScreen';
1822
import { GoogleMapsScreen } from '../screens/user-steps/GoogleMapsScreen';
1923
import { LargeImageListScreen } from '../screens/user-steps/LargeImageListScreen';
2024
import { SessionReplayScreen } from '../screens/SessionReplayScreen';
@@ -36,6 +40,7 @@ export type HomeStackParamList = {
3640
GoogleMapsScreen: undefined;
3741
LargeImageList: undefined;
3842
SessionReplay: undefined;
43+
BackAndForthScreen: BackAndForthScreenProp;
3944
};
4045

4146
const HomeStack = createNativeStackNavigator<HomeStackParamList>();
@@ -60,6 +65,7 @@ export const HomeStackNavigator: React.FC = () => {
6065
options={{ title: 'Feature Requests' }}
6166
/>
6267
<HomeStack.Screen name="Replies" component={RepliesScreen} />
68+
6369
<HomeStack.Screen name="Surveys" component={SurveysScreen} />
6470
<HomeStack.Screen
6571
name="SessionReplay"
@@ -102,6 +108,11 @@ export const HomeStackNavigator: React.FC = () => {
102108
component={SectionListScreen}
103109
options={{ title: 'Section List' }}
104110
/>
111+
<HomeStack.Screen
112+
name="BackAndForthScreen"
113+
component={BackAndForthScreen}
114+
options={{ title: 'Back And Forth Screen' }}
115+
/>
105116
<HomeStack.Screen
106117
name="LargeImageList"
107118
component={LargeImageListScreen}
Lines changed: 134 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,134 @@
1+
import React from 'react';
2+
import {
3+
Center,
4+
Heading,
5+
HStack,
6+
ScrollView,
7+
Image,
8+
Text,
9+
VStack,
10+
Button,
11+
Stack,
12+
Box,
13+
AspectRatio,
14+
} from 'native-base';
15+
16+
import { Screen } from '../../components/Screen';
17+
import type { HomeStackParamList } from '../../navigation/HomeStack';
18+
import type {
19+
NativeStackNavigationProp,
20+
NativeStackScreenProps,
21+
} from '@react-navigation/native-stack';
22+
23+
export interface BackAndForthScreenProp {
24+
image: string;
25+
price: string;
26+
name: string | null;
27+
description: string | null;
28+
}
29+
export const navToBackAndForthScreen = (navigation: NativeStackNavigationProp<any>) => {
30+
navigation.push('BackAndForthScreen', {
31+
image: `https://picsum.photos/${Math.floor(Math.random() * 200) + 300}/${
32+
Math.floor(Math.random() * 200) + 600
33+
}`,
34+
price: (Math.floor(Math.random() * 10000) + 1000).toString(),
35+
name: 'Product ' + (Math.floor(Math.random() * 12) + 1).toString(),
36+
description: Array.from(
37+
{ length: Math.floor(Math.random() * 5) + 2 },
38+
() => "Bengaluru (also called Bangalore) is the center of India's high-tech industry.",
39+
).join(' '),
40+
});
41+
};
42+
43+
export const BackAndForthScreen: React.FC<
44+
NativeStackScreenProps<HomeStackParamList, 'BackAndForthScreen'>
45+
> = ({ navigation, route }) => {
46+
return (
47+
<Screen>
48+
<ScrollView>
49+
<VStack space={'lg'}>
50+
<Box alignItems="center">
51+
<Box
52+
rounded="lg"
53+
borderColor="coolGray.200"
54+
borderWidth="1"
55+
_dark={{
56+
borderColor: 'coolGray.600',
57+
backgroundColor: 'gray.700',
58+
}}
59+
_web={{
60+
shadow: 2,
61+
borderWidth: 0,
62+
}}
63+
_light={{
64+
backgroundColor: 'gray.50',
65+
}}>
66+
<Box>
67+
<AspectRatio w="100%" ratio={16 / 9}>
68+
<Image
69+
source={{
70+
uri: route.params.image,
71+
}}
72+
alt="image"
73+
/>
74+
</AspectRatio>
75+
<Center
76+
bg="violet.500"
77+
_dark={{
78+
bg: 'violet.400',
79+
}}
80+
_text={{
81+
color: 'warmGray.50',
82+
fontWeight: '700',
83+
fontSize: 'xs',
84+
}}
85+
position="absolute"
86+
bottom="0"
87+
px="3"
88+
py="1.5">
89+
PHOTOS
90+
</Center>
91+
</Box>
92+
<Stack p="4" space={3}>
93+
<Stack space={2}>
94+
<Heading size="md" ml="-1">
95+
{route.params.name}
96+
</Heading>
97+
<Text
98+
fontSize="xs"
99+
_light={{
100+
color: 'violet.500',
101+
}}
102+
_dark={{
103+
color: 'violet.400',
104+
}}
105+
fontWeight="500"
106+
ml="-0.5"
107+
mt="-1">
108+
{route.params.price}
109+
</Text>
110+
</Stack>
111+
<Text fontWeight="400">{route.params.description}</Text>
112+
<HStack alignItems="center" space={4} justifyContent="space-between">
113+
<HStack alignItems="center">
114+
<Text
115+
color="coolGray.600"
116+
_dark={{
117+
color: 'warmGray.200',
118+
}}
119+
fontWeight="400">
120+
6 mins ago
121+
</Text>
122+
</HStack>
123+
</HStack>
124+
</Stack>
125+
</Box>
126+
</Box>
127+
<Button key={'lg'} size={'lg'} onPress={() => navToBackAndForthScreen(navigation)}>
128+
Next Product
129+
</Button>
130+
</VStack>
131+
</ScrollView>
132+
</Screen>
133+
);
134+
};

examples/default/src/screens/user-steps/UserStepsScreen.tsx

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ import { ListTile } from '../../components/ListTile';
44
import { Screen } from '../../components/Screen';
55
import type { HomeStackParamList } from '../../navigation/HomeStack';
66
import type { NativeStackScreenProps } from '@react-navigation/native-stack';
7+
import { navToBackAndForthScreen } from './BackAndForthScreen';
78

89
export const UserStepsScreen: React.FC<NativeStackScreenProps<HomeStackParamList, 'UserSteps'>> = ({
910
navigation,
@@ -18,6 +19,12 @@ export const UserStepsScreen: React.FC<NativeStackScreenProps<HomeStackParamList
1819
<ListTile title="Gestures" onPress={() => navigation.navigate('Gestures')} />
1920
<ListTile title="Google Map" onPress={() => navigation.navigate('GoogleMapsScreen')} />
2021
<ListTile title="Large Image List" onPress={() => navigation.navigate('LargeImageList')} />
22+
<ListTile
23+
title="Back and forth"
24+
onPress={() => {
25+
navToBackAndForthScreen(navigation);
26+
}}
27+
/>
2128
</Screen>
2229
);
2330
};

0 commit comments

Comments
 (0)