feat(example): add repro-steps button samples

Added buttons for testing purposes.

Author: abdelhamid-f-nasser

examples/default/src/App.tsx

@@ -3,7 +3,7 @@ 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 Instabug, { InvocationEvent, LogLevel, ReproStepsMode } from 'instabug-reactnative';
 import { NativeBaseProvider } from 'native-base';
 
 import { RootTabNavigator } from './navigation/RootTab';
@@ -17,6 +17,10 @@ export const App: React.FC = () => {
       invocationEvents: [InvocationEvent.floatingButton],
       debugLogsLevel: LogLevel.verbose,
     });
+
+    Instabug.setReproStepsConfig({
+      all: ReproStepsMode.enabled,
+    });
   }, []);
 
   return (

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

@@ -11,16 +11,18 @@ import {
   Switch,
   useWindowDimensions,
   ActivityIndicator,
+  View,
 } 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';
+import Icon from 'react-native-vector-icons/Ionicons';
 
 /**
- * A screen that demonstates the usage of user steps with basic React Native components.
+ * A screen that demonstrates 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.
@@ -62,13 +64,51 @@ export const BasicComponentsScreen: React.FC = () => {
           <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 onPress={onPress('Icon Pressable Button')} style={styles.button}>
+              <HStack space={2} alignItems="center" justifyContent="center">
+                <Icon name="alert-circle-outline" color="white" />
+                <Text style={styles.buttonText}>Icon Pressable Button</Text>
+              </HStack>
             </Pressable>
 
             <TouchableOpacity onPress={onPress('Touchable Opacity Button')} style={styles.button}>
               <Text style={styles.buttonText}>Touchable Button</Text>
             </TouchableOpacity>
+
+            <TouchableOpacity onPress={onPress('Touchable Opacity Button')} style={styles.button}>
+              <Text style={styles.buttonText}>Touchable Button</Text>
+              <Text style={styles.buttonText}>Multiple Texts</Text>
+            </TouchableOpacity>
+
+            <Pressable onPress={onPress('Touchable Opacity Button')} style={styles.button}>
+              <Text style={styles.buttonText}>Pressable Button</Text>
+              <View>
+                <HStack space={2} alignItems="center" justifyContent="center">
+                  <Icon name="alert-circle-outline" color="white" />
+                  <Text style={styles.buttonText}>Icon Pressable Button</Text>
+                </HStack>
+              </View>
+            </Pressable>
+
+            <Icon.Button
+              style={styles.button}
+              name="alert-circle-outline"
+              backgroundColor="#4A99E9"
+              size={12}
+              onPress={onPress('Icon.Button')}>
+              <Text style={styles.buttonText}>Icon Button</Text>
+            </Icon.Button>
+
+            <TouchableOpacity onPress={onPress('Touchable Opacity Button')} style={styles.button}>
+              <Text style={styles.buttonText}>1 Tier</Text>
+              <View>
+                <View>
+                  <View>
+                    <Text style={styles.buttonText}>4 Tier Nested Button</Text>
+                  </View>
+                </View>
+              </View>
+            </TouchableOpacity>
           </VStack>
         </Section>
 
@@ -129,6 +169,7 @@ const styles = StyleSheet.create({
     formControlStyles.formControl,
     {
       backgroundColor: nativeBaseTheme.colors.primary[600],
+      justifyContent: 'center',
     },
   ]),
 });