feat(example): add user steps demos

examples/default/babel.config.js

@@ -1,3 +1,4 @@
 module.exports = {
   presets: ['module:metro-react-native-babel-preset'],
+  plugins: ['react-native-reanimated/plugin'],
 };

examples/default/index.js

@@ -1,3 +1,4 @@
+import 'react-native-gesture-handler';
 import { AppRegistry } from 'react-native';
 
 import { name as appName } from './app.json';

examples/default/ios/Podfile.lock

@@ -379,6 +379,8 @@ PODS:
     - glog
   - react-native-safe-area-context (4.7.1):
     - React-Core
+  - react-native-slider (4.4.3):
+    - React-Core
   - React-NativeModulesApple (0.72.3):
     - hermes-engine
     - React-callinvoker
@@ -489,9 +491,41 @@ PODS:
     - React-jsi (= 0.72.3)
     - React-logger (= 0.72.3)
     - React-perflogger (= 0.72.3)
+  - RNGestureHandler (2.13.4):
+    - RCT-Folly (= 2021.07.22.00)
+    - React-Core
   - RNInstabug (12.4.0):
     - Instabug (= 12.4.0)
     - React-Core
+  - RNReanimated (3.5.4):
+    - DoubleConversion
+    - FBLazyVector
+    - glog
+    - hermes-engine
+    - RCT-Folly
+    - RCTRequired
+    - RCTTypeSafety
+    - React-callinvoker
+    - React-Core
+    - React-Core/DevSupport
+    - React-Core/RCTWebSocket
+    - React-CoreModules
+    - React-cxxreact
+    - React-hermes
+    - React-jsi
+    - React-jsiexecutor
+    - React-jsinspector
+    - React-RCTActionSheet
+    - React-RCTAnimation
+    - React-RCTAppDelegate
+    - React-RCTBlob
+    - React-RCTImage
+    - React-RCTLinking
+    - React-RCTNetwork
+    - React-RCTSettings
+    - React-RCTText
+    - ReactCommon/turbomodule/core
+    - Yoga
   - RNScreens (3.24.0):
     - React-Core
     - React-RCTImage
@@ -552,6 +586,7 @@ DEPENDENCIES:
   - React-jsinspector (from `../node_modules/react-native/ReactCommon/jsinspector`)
   - React-logger (from `../node_modules/react-native/ReactCommon/logger`)
   - react-native-safe-area-context (from `../node_modules/react-native-safe-area-context`)
+  - "react-native-slider (from `../node_modules/@react-native-community/slider`)"
   - React-NativeModulesApple (from `../node_modules/react-native/ReactCommon/react/nativemodule/core/platform/ios`)
   - React-perflogger (from `../node_modules/react-native/ReactCommon/reactperflogger`)
   - React-RCTActionSheet (from `../node_modules/react-native/Libraries/ActionSheetIOS`)
@@ -569,7 +604,9 @@ DEPENDENCIES:
   - React-runtimescheduler (from `../node_modules/react-native/ReactCommon/react/renderer/runtimescheduler`)
   - React-utils (from `../node_modules/react-native/ReactCommon/react/utils`)
   - ReactCommon/turbomodule/core (from `../node_modules/react-native/ReactCommon`)
+  - RNGestureHandler (from `../node_modules/react-native-gesture-handler`)
   - RNInstabug (from `../node_modules/instabug-reactnative`)
+  - RNReanimated (from `../node_modules/react-native-reanimated`)
   - RNScreens (from `../node_modules/react-native-screens`)
   - RNSVG (from `../node_modules/react-native-svg`)
   - RNVectorIcons (from `../node_modules/react-native-vector-icons`)
@@ -640,6 +677,8 @@ EXTERNAL SOURCES:
     :path: "../node_modules/react-native/ReactCommon/logger"
   react-native-safe-area-context:
     :path: "../node_modules/react-native-safe-area-context"
+  react-native-slider:
+    :path: "../node_modules/@react-native-community/slider"
   React-NativeModulesApple:
     :path: "../node_modules/react-native/ReactCommon/react/nativemodule/core/platform/ios"
   React-perflogger:
@@ -674,8 +713,12 @@ EXTERNAL SOURCES:
     :path: "../node_modules/react-native/ReactCommon/react/utils"
   ReactCommon:
     :path: "../node_modules/react-native/ReactCommon"
+  RNGestureHandler:
+    :path: "../node_modules/react-native-gesture-handler"
   RNInstabug:
     :path: "../node_modules/instabug-reactnative"
+  RNReanimated:
+    :path: "../node_modules/react-native-reanimated"
   RNScreens:
     :path: "../node_modules/react-native-screens"
   RNSVG:
@@ -722,6 +765,7 @@ SPEC CHECKSUMS:
   React-jsinspector: b511447170f561157547bc0bef3f169663860be7
   React-logger: c5b527272d5f22eaa09bb3c3a690fee8f237ae95
   react-native-safe-area-context: 9697629f7b2cda43cf52169bb7e0767d330648c2
+  react-native-slider: 1cdd6ba29675df21f30544253bf7351d3c2d68c4
   React-NativeModulesApple: c57f3efe0df288a6532b726ad2d0322a9bf38472
   React-perflogger: 6bd153e776e6beed54c56b0847e1220a3ff92ba5
   React-RCTActionSheet: c0b62af44e610e69d9a2049a682f5dba4e9dff17
@@ -739,7 +783,9 @@ SPEC CHECKSUMS:
   React-runtimescheduler: 837c1bebd2f84572db17698cd702ceaf585b0d9a
   React-utils: bcb57da67eec2711f8b353f6e3d33bd8e4b2efa3
   ReactCommon: 3ccb8fb14e6b3277e38c73b0ff5e4a1b8db017a9
+  RNGestureHandler: 6e46dde1f87e5f018a54fe5d40cd0e0b942b49ee
   RNInstabug: ae604474d8e74d7bd2bee96ccbcfd9d7e12a61fe
+  RNReanimated: ab2e96c6d5591c3dfbb38a464f54c8d17fb34a87
   RNScreens: b21dc57dfa2b710c30ec600786a3fc223b1b92e7
   RNSVG: 80584470ff1ffc7994923ea135a3e5ad825546b9
   RNVectorIcons: 8b5bb0fa61d54cd2020af4f24a51841ce365c7e9

examples/default/package.json

@@ -9,13 +9,16 @@
     "lint": "eslint ."
   },
   "dependencies": {
+    "@react-native-community/slider": "^4.4.3",
     "@react-navigation/bottom-tabs": "^6.5.7",
     "@react-navigation/native": "^6.1.6",
     "@react-navigation/native-stack": "^6.9.12",
     "instabug-reactnative": "link:../..",
     "native-base": "^3.4.28",
     "react": "18.2.0",
     "react-native": "0.72.3",
+    "react-native-gesture-handler": "^2.13.4",
+    "react-native-reanimated": "^3.5.4",
     "react-native-safe-area-context": "^4.5.3",
     "react-native-screens": "^3.20.0",
     "react-native-svg": "^13.9.0",

examples/default/src/App.tsx

@@ -1,5 +1,7 @@
 import React, { useEffect } from 'react';
+import { StyleSheet } from 'react-native';
 
+import { GestureHandlerRootView } from 'react-native-gesture-handler';
 import { NavigationContainer } from '@react-navigation/native';
 import Instabug, { InvocationEvent, LogLevel } from 'instabug-reactnative';
 import { NativeBaseProvider } from 'native-base';
@@ -18,10 +20,18 @@ export const App: React.FC = () => {
   }, []);
 
   return (
-    <NativeBaseProvider theme={nativeBaseTheme}>
-      <NavigationContainer onStateChange={Instabug.onStateChange} theme={navigationTheme}>
-        <RootTabNavigator />
-      </NavigationContainer>
-    </NativeBaseProvider>
+    <GestureHandlerRootView style={styles.root}>
+      <NativeBaseProvider theme={nativeBaseTheme}>
+        <NavigationContainer onStateChange={Instabug.onStateChange} theme={navigationTheme}>
+          <RootTabNavigator />
+        </NavigationContainer>
+      </NativeBaseProvider>
+    </GestureHandlerRootView>
   );
 };
+
+const styles = StyleSheet.create({
+  root: {
+    flex: 1,
+  },
+});

examples/default/src/components/Screen.tsx

@@ -4,7 +4,7 @@ import { VStack } from 'native-base';
 
 export const Screen: React.FC<PropsWithChildren> = ({ children }) => {
   return (
-    <VStack alignItems="stretch" padding="2">
+    <VStack alignItems="stretch" padding="2" flex={1}>
       {children}
     </VStack>
   );

examples/default/src/components/Section.tsx

@@ -0,0 +1,20 @@
+import React from 'react';
+import { Heading, VStack } from 'native-base';
+
+interface SectionProps {
+  title: string;
+  flex?: number;
+  children?: React.ReactNode;
+}
+
+export const Section: React.FC<SectionProps> = ({ title, flex, children }) => {
+  return (
+    <VStack marginBottom="4" flex={flex}>
+      <Heading size="md" marginBottom="1.5">
+        {title}
+      </Heading>
+
+      {children}
+    </VStack>
+  );
+};

examples/default/src/navigation/HomeStack.tsx

@@ -8,6 +8,12 @@ import { FeatureRequestsScreen } from '../screens/FeatureRequestsScreen';
 import { HomeScreen } from '../screens/HomeScreen';
 import { RepliesScreen } from '../screens/RepliesScreen';
 import { SurveysScreen } from '../screens/SurveysScreen';
+import { UserStepsScreen } from '../screens/user-steps/UserStepsScreen';
+import { BasicComponentsScreen } from '../screens/user-steps/BasicComponentsScreen';
+import { ScrollViewScreen } from '../screens/user-steps/ScrollViewScreen';
+import { FlatListScreen } from '../screens/user-steps/FlatListScreen';
+import { SectionListScreen } from '../screens/user-steps/SectionListScreen';
+import { GesturesScreen } from '../screens/user-steps/GesturesScreen';
 
 export type HomeStackParamList = {
   Home: undefined;
@@ -16,6 +22,12 @@ export type HomeStackParamList = {
   FeatureRequests: undefined;
   Replies: undefined;
   Surveys: undefined;
+  UserSteps: undefined;
+  BasicComponents: undefined;
+  ScrollView: undefined;
+  FlatList: undefined;
+  SectionList: undefined;
+  Gestures: undefined;
 };
 
 const HomeStack = createNativeStackNavigator<HomeStackParamList>();
@@ -41,6 +53,32 @@ export const HomeStackNavigator: React.FC = () => {
       />
       <HomeStack.Screen name="Replies" component={RepliesScreen} />
       <HomeStack.Screen name="Surveys" component={SurveysScreen} />
+      <HomeStack.Screen
+        name="UserSteps"
+        component={UserStepsScreen}
+        options={{ title: 'User Steps' }}
+      />
+      <HomeStack.Screen
+        name="BasicComponents"
+        component={BasicComponentsScreen}
+        options={{ title: 'Basic Components' }}
+      />
+      <HomeStack.Screen
+        name="ScrollView"
+        component={ScrollViewScreen}
+        options={{ title: 'Scroll View' }}
+      />
+      <HomeStack.Screen
+        name="FlatList"
+        component={FlatListScreen}
+        options={{ title: 'Flat List' }}
+      />
+      <HomeStack.Screen
+        name="SectionList"
+        component={SectionListScreen}
+        options={{ title: 'Section List' }}
+      />
+      <HomeStack.Screen name="Gestures" component={GesturesScreen} />
     </HomeStack.Navigator>
   );
 };

examples/default/src/screens/HomeScreen.tsx

@@ -16,6 +16,7 @@ export const HomeScreen: React.FC<NativeStackScreenProps<HomeStackParamList, 'Ho
       <ListTile title="Feature Requests" onPress={() => navigation.navigate('FeatureRequests')} />
       <ListTile title="Replies" onPress={() => navigation.navigate('Replies')} />
       <ListTile title="Surveys" onPress={() => navigation.navigate('Surveys')} />
+      <ListTile title="User Steps" onPress={() => navigation.navigate('UserSteps')} />
     </Screen>
   );
 };

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

@@ -0,0 +1,134 @@
+import React, { useState } from 'react';
+import {
+  Alert,
+  Button,
+  Image,
+  Pressable,
+  StyleSheet,
+  Text,
+  TextInput,
+  TouchableOpacity,
+  Switch,
+  useWindowDimensions,
+  ActivityIndicator,
+} from 'react-native';
+import Slider from '@react-native-community/slider';
+import { Center, HStack, ScrollView, VStack } from 'native-base';
+
+import { Screen } from '../../components/Screen';
+import { Section } from '../../components/Section';
+import { nativeBaseTheme } from '../../theme/nativeBaseTheme';
+
+/**
+ * A screen that demonstates the usage of user steps with basic React Native components.
+ *
+ * This specific screen doesn't use NativeBase in some parts since we need to focus on
+ * capturing React Native provided components rather than implementations built on top of it.
+ */
+export const BasicComponentsScreen: React.FC = () => {
+  const [isSwitchOn, setIsSwitchOn] = useState(false);
+  const { width } = useWindowDimensions();
+
+  const onPress = (label: string) => {
+    return () => {
+      Alert.alert(`Pressed "${label}"`);
+    };
+  };
+
+  return (
+    <ScrollView>
+      <Screen>
+        <Section title="Text">
+          <Text style={styles.text}>
+            Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias tempore inventore quas
+            cum cupiditate ratione, iusto itaque natus maiores fugit.
+          </Text>
+        </Section>
+
+        <Section title="Image">
+          <Center>
+            <Image
+              source={require('../../images/logo.png')}
+              style={[styles.image, { width: width / 2, height: width / 6 }]}
+            />
+          </Center>
+        </Section>
+
+        <Section title="Text Input">
+          <TextInput placeholder="Enter your name" style={styles.textInput} />
+        </Section>
+
+        <Section title="Button">
+          <VStack space="xs">
+            <Button onPress={onPress('Default Button')} title="Default Button" />
+
+            <Pressable onPress={onPress('Pressable Button')} style={styles.button}>
+              <Text style={styles.buttonText}>Pressable Button</Text>
+            </Pressable>
+
+            <TouchableOpacity onPress={onPress('Touchable Opacity Button')} style={styles.button}>
+              <Text style={styles.buttonText}>Touchable Button</Text>
+            </TouchableOpacity>
+          </VStack>
+        </Section>
+
+        <Section title="Switch">
+          <HStack alignItems="center" space="xs">
+            <Switch
+              value={isSwitchOn}
+              onValueChange={setIsSwitchOn}
+              accessibilityLabel="Is Switch On"
+            />
+            <Text>Is Switch On</Text>
+          </HStack>
+        </Section>
+
+        <Section title="Slider">
+          <Slider minimumValue={0} maximumValue={100} accessibilityLabel="Progress Bar" />
+        </Section>
+
+        <Section title="Activity Indicator">
+          <ActivityIndicator size="large" />
+        </Section>
+      </Screen>
+    </ScrollView>
+  );
+};
+
+const formControlStyles = StyleSheet.create({
+  formControl: {
+    paddingVertical: 16,
+    paddingHorizontal: 24,
+    fontSize: 16,
+    borderRadius: 5,
+  },
+});
+
+const styles = StyleSheet.create({
+  text: {
+    fontSize: 16,
+    lineHeight: 24,
+  },
+  image: {
+    resizeMode: 'contain',
+  },
+  textInput: StyleSheet.flatten([
+    formControlStyles.formControl,
+    {
+      backgroundColor: 'white',
+      borderWidth: 1,
+      borderColor: '#ccc',
+    },
+  ]),
+  buttonText: {
+    color: 'white',
+    textAlign: 'center',
+    fontWeight: 'bold',
+  },
+  button: StyleSheet.flatten([
+    formControlStyles.formControl,
+    {
+      backgroundColor: nativeBaseTheme.colors.primary[600],
+    },
+  ]),
+});