feat(example): add back and forth example screen (#1144)

Author: ahmedAlaaInstabug

examples/default/src/navigation/HomeStack.tsx

@@ -15,6 +15,10 @@ import { FlatListScreen } from '../screens/user-steps/FlatListScreen';
 import { ComplexViewsScreen } from '../screens/user-steps/ComplexViewsScreen';
 import { SectionListScreen } from '../screens/user-steps/SectionListScreen';
 import { GesturesScreen } from '../screens/user-steps/GesturesScreen';
+import {
+  BackAndForthScreen,
+  type BackAndForthScreenProp,
+} from '../screens/user-steps/BackAndForthScreen';
 import { GoogleMapsScreen } from '../screens/user-steps/GoogleMapsScreen';
 import { LargeImageListScreen } from '../screens/user-steps/LargeImageListScreen';
 import { SessionReplayScreen } from '../screens/SessionReplayScreen';
@@ -36,6 +40,7 @@ export type HomeStackParamList = {
   GoogleMapsScreen: undefined;
   LargeImageList: undefined;
   SessionReplay: undefined;
+  BackAndForthScreen: BackAndForthScreenProp;
 };
 
 const HomeStack = createNativeStackNavigator<HomeStackParamList>();
@@ -60,6 +65,7 @@ export const HomeStackNavigator: React.FC = () => {
         options={{ title: 'Feature Requests' }}
       />
       <HomeStack.Screen name="Replies" component={RepliesScreen} />
+
       <HomeStack.Screen name="Surveys" component={SurveysScreen} />
       <HomeStack.Screen
         name="SessionReplay"
@@ -102,6 +108,11 @@ export const HomeStackNavigator: React.FC = () => {
         component={SectionListScreen}
         options={{ title: 'Section List' }}
       />
+      <HomeStack.Screen
+        name="BackAndForthScreen"
+        component={BackAndForthScreen}
+        options={{ title: 'Back And Forth Screen' }}
+      />
       <HomeStack.Screen
         name="LargeImageList"
         component={LargeImageListScreen}

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

@@ -0,0 +1,134 @@
+import React from 'react';
+import {
+  Center,
+  Heading,
+  HStack,
+  ScrollView,
+  Image,
+  Text,
+  VStack,
+  Button,
+  Stack,
+  Box,
+  AspectRatio,
+} from 'native-base';
+
+import { Screen } from '../../components/Screen';
+import type { HomeStackParamList } from '../../navigation/HomeStack';
+import type {
+  NativeStackNavigationProp,
+  NativeStackScreenProps,
+} from '@react-navigation/native-stack';
+
+export interface BackAndForthScreenProp {
+  image: string;
+  price: string;
+  name: string | null;
+  description: string | null;
+}
+export const navToBackAndForthScreen = (navigation: NativeStackNavigationProp<any>) => {
+  navigation.push('BackAndForthScreen', {
+    image: `https://picsum.photos/${Math.floor(Math.random() * 200) + 300}/${
+      Math.floor(Math.random() * 200) + 600
+    }`,
+    price: (Math.floor(Math.random() * 10000) + 1000).toString(),
+    name: 'Product ' + (Math.floor(Math.random() * 12) + 1).toString(),
+    description: Array.from(
+      { length: Math.floor(Math.random() * 5) + 2 },
+      () => "Bengaluru (also called Bangalore) is the center of India's high-tech industry.",
+    ).join(' '),
+  });
+};
+
+export const BackAndForthScreen: React.FC<
+  NativeStackScreenProps<HomeStackParamList, 'BackAndForthScreen'>
+> = ({ navigation, route }) => {
+  return (
+    <Screen>
+      <ScrollView>
+        <VStack space={'lg'}>
+          <Box alignItems="center">
+            <Box
+              rounded="lg"
+              borderColor="coolGray.200"
+              borderWidth="1"
+              _dark={{
+                borderColor: 'coolGray.600',
+                backgroundColor: 'gray.700',
+              }}
+              _web={{
+                shadow: 2,
+                borderWidth: 0,
+              }}
+              _light={{
+                backgroundColor: 'gray.50',
+              }}>
+              <Box>
+                <AspectRatio w="100%" ratio={16 / 9}>
+                  <Image
+                    source={{
+                      uri: route.params.image,
+                    }}
+                    alt="image"
+                  />
+                </AspectRatio>
+                <Center
+                  bg="violet.500"
+                  _dark={{
+                    bg: 'violet.400',
+                  }}
+                  _text={{
+                    color: 'warmGray.50',
+                    fontWeight: '700',
+                    fontSize: 'xs',
+                  }}
+                  position="absolute"
+                  bottom="0"
+                  px="3"
+                  py="1.5">
+                  PHOTOS
+                </Center>
+              </Box>
+              <Stack p="4" space={3}>
+                <Stack space={2}>
+                  <Heading size="md" ml="-1">
+                    {route.params.name}
+                  </Heading>
+                  <Text
+                    fontSize="xs"
+                    _light={{
+                      color: 'violet.500',
+                    }}
+                    _dark={{
+                      color: 'violet.400',
+                    }}
+                    fontWeight="500"
+                    ml="-0.5"
+                    mt="-1">
+                    {route.params.price}
+                  </Text>
+                </Stack>
+                <Text fontWeight="400">{route.params.description}</Text>
+                <HStack alignItems="center" space={4} justifyContent="space-between">
+                  <HStack alignItems="center">
+                    <Text
+                      color="coolGray.600"
+                      _dark={{
+                        color: 'warmGray.200',
+                      }}
+                      fontWeight="400">
+                      6 mins ago
+                    </Text>
+                  </HStack>
+                </HStack>
+              </Stack>
+            </Box>
+          </Box>
+          <Button key={'lg'} size={'lg'} onPress={() => navToBackAndForthScreen(navigation)}>
+            Next Product
+          </Button>
+        </VStack>
+      </ScrollView>
+    </Screen>
+  );
+};

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

@@ -4,6 +4,7 @@ import { ListTile } from '../../components/ListTile';
 import { Screen } from '../../components/Screen';
 import type { HomeStackParamList } from '../../navigation/HomeStack';
 import type { NativeStackScreenProps } from '@react-navigation/native-stack';
+import { navToBackAndForthScreen } from './BackAndForthScreen';
 
 export const UserStepsScreen: React.FC<NativeStackScreenProps<HomeStackParamList, 'UserSteps'>> = ({
   navigation,
@@ -18,6 +19,12 @@ export const UserStepsScreen: React.FC<NativeStackScreenProps<HomeStackParamList
       <ListTile title="Gestures" onPress={() => navigation.navigate('Gestures')} />
       <ListTile title="Google Map" onPress={() => navigation.navigate('GoogleMapsScreen')} />
       <ListTile title="Large Image List" onPress={() => navigation.navigate('LargeImageList')} />
+      <ListTile
+        title="Back and forth"
+        onPress={() => {
+          navToBackAndForthScreen(navigation);
+        }}
+      />
     </Screen>
   );
 };