Instabug · ahmedAlaaInstabug · Feb 29, 2024 · Feb 26, 2024 · Feb 26, 2024 · Feb 26, 2024
diff --git a/examples/default/src/components/InputField.tsx b/examples/default/src/components/InputField.tsx
@@ -1,26 +1,48 @@
 import React, { forwardRef } from 'react';
 
-import { KeyboardTypeOptions, StyleSheet, TextInput } from 'react-native';
+import { KeyboardTypeOptions, StyleSheet, TextInput, View } from 'react-native';
+import { Text } from 'native-base';
 
 interface InputFieldProps {
   placeholder?: string;
   value?: string;
   onChangeText?: (text: string) => void;
   keyboardType?: KeyboardTypeOptions;
+  errorText?: string;
+  maxLength?: number;
+  accessibilityLabel?: string;
+  flex?: number;
 }
 
 export const InputField = forwardRef<TextInput, InputFieldProps>(
-  ({ placeholder, value, onChangeText, keyboardType, ...restProps }, ref) => {
+  (
+    {
+      placeholder,
+      value,
+      onChangeText,
+      accessibilityLabel,
+      maxLength,
+      keyboardType,
+      errorText,
+      ...restProps
+    },
+    ref,
+  ) => {
     return (
-      <TextInput
-        ref={ref}
-        placeholder={placeholder}
-        style={styles.textInput}
-        keyboardType={keyboardType}
-        value={value}
-        onChangeText={onChangeText}
-        {...restProps}
-      />
+      <View>
+        <TextInput
+          ref={ref}
+          placeholder={placeholder}
+          style={styles.textInput}
+          maxLength={maxLength}
+          accessibilityLabel={accessibilityLabel}
+          keyboardType={keyboardType}
+          value={value}
+          onChangeText={onChangeText}
+          {...restProps}
+        />
+        {errorText ? <Text style={styles.errorText}>{errorText}</Text> : null}
+      </View>
     );
   },
 );
@@ -35,4 +57,7 @@ const styles = StyleSheet.create({
     fontSize: 16,
     borderRadius: 5,
   },
+  errorText: {
+    color: '#ff0000',
+  },
 });
diff --git a/examples/default/src/navigation/RootTab.tsx b/examples/default/src/navigation/RootTab.tsx
@@ -8,6 +8,7 @@ import Icon from 'react-native-vector-icons/Ionicons';
 
 import { SettingsScreen } from '../screens/SettingsScreen';
 import { HomeStackNavigator } from './HomeStack';
+import { Platform } from 'react-native';
 
 export type RootTabParamList = {
   HomeStack: undefined;
@@ -22,7 +23,7 @@ const createTabBarIcon = (name: string): BottomTabNavigationOptions['tabBarIcon'
 
 export const RootTabNavigator: React.FC = () => {
   return (
-    <RootTab.Navigator>
+    <RootTab.Navigator screenOptions={{ tabBarHideOnKeyboard: Platform.OS !== 'ios' }}>
       <RootTab.Screen
         name="HomeStack"
         component={HomeStackNavigator}

diff --git a/examples/default/src/screens/SettingsScreen.tsx b/examples/default/src/screens/SettingsScreen.tsx
@@ -1,83 +1,221 @@
 import React, { useState } from 'react';
 
 import Instabug, { BugReporting, ColorTheme, InvocationEvent } from 'instabug-reactnative';
-import { Input, InputGroup, InputLeftAddon } from 'native-base';
+import { InputGroup, InputLeftAddon, useToast, VStack, Button } from 'native-base';
 
 import { ListTile } from '../components/ListTile';
 import { Screen } from '../components/Screen';
 import { Select } from '../components/Select';
+import { StyleSheet, View, ScrollView } from 'react-native';
+import { VerticalListTile } from '../components/VerticalListTile';
+import { InputField } from '../components/InputField';
 
 export const SettingsScreen: React.FC = () => {
   const [color, setColor] = useState('1D82DC');
+  const [userEmail, setUserEmail] = useState('');
+  const [userName, setUserName] = useState('');
+  const [userID, setUserID] = useState('');
+  const [userAttributeKey, setUserAttributeKey] = useState('');
+  const [userAttributeValue, setUserAttributeValue] = useState('');
+  const toast = useToast();
+  const [userAttributesFormError, setUserAttributesFormError] = useState<any>({});
+
+  const validateUserAttributeForm = () => {
+    const errors: any = {};
+    if (userAttributeValue.length === 0) {
+      errors.userAttributeValue = 'Value is required';
+    }
+    if (userAttributeKey.length === 0) {
+      errors.userAttributeKey = 'Key is required';
+    }
+    setUserAttributesFormError(errors);
+    return Object.keys(errors).length === 0;
+  };
+  const styles = StyleSheet.create({
+    inputWrapper: {
+      padding: 4,
+      flex: 1,
+    },
+
+    formContainer: {
+      flexDirection: 'row',
+      alignItems: 'stretch',
+    },
+  });
+
+  const clearUserAttributes = () => {
+    Instabug.clearAllUserAttributes();
+    toast.show({
+      description: 'User Attributes cleared successfully',
+    });
+  };
+
+  const saveUserAttributes = () => {
+    if (validateUserAttributeForm()) {
+      Instabug.setUserAttribute(userAttributeKey, userAttributeValue);
+      toast.show({
+        description: 'User Attributes added successfully',
+      });
+      setUserAttributeKey('');
+      setUserAttributeValue('');
+    }
+  };
+
+  const logout = () => {
+    Instabug.logOut();
+    toast.show({
+      description: 'User logout successfully',
+    });
+    setUserID('');
+    setUserName('');
+    setUserEmail('');
+  };
+
+  const identifyUser = () => {
+    Instabug.identifyUser(userEmail, userName, userID);
+    setUserID('');
+    setUserName('');
+    setUserEmail('');
+    toast.show({
+      description: 'User identified successfully',
+    });
+  };
 
   return (
-    <Screen>
-      <ListTile title="Invocation Event">
-        <Select
-          label="Select Invocation Event"
-          items={[
-            {
-              label: 'None',
-              value: InvocationEvent.none,
-            },
-            {
-              label: 'Shake',
-              value: InvocationEvent.shake,
-            },
-            {
-              label: 'Screenshot',
-              value: InvocationEvent.screenshot,
-            },
-            {
-              label: 'Two fingers swipe left',
-              value: InvocationEvent.twoFingersSwipe,
-            },
-            {
-              label: 'Floating button',
-              value: InvocationEvent.floatingButton,
-              isInitial: true,
-            },
-          ]}
-          onValueChange={(value) => {
-            BugReporting.setInvocationEvents([value]);
-          }}
-        />
-      </ListTile>
-
-      <ListTile title="Primary Color">
-        <InputGroup>
-          <InputLeftAddon>#</InputLeftAddon>
-          <Input
-            value={color}
-            maxLength={6}
-            flex={1}
-            accessibilityLabel="Primary Color Value"
-            onChangeText={(value) => {
-              setColor(value);
-              if (/^[0-9A-F]{6}$/i.test(value)) {
-                Instabug.setPrimaryColor(`#${value}`);
-              }
+    <ScrollView>
+      <Screen>
+        <ListTile title="Invocation Event">
+          <Select
+            label="Select Invocation Event"
+            items={[
+              {
+                label: 'None',
+                value: InvocationEvent.none,
+              },
+              {
+                label: 'Shake',
+                value: InvocationEvent.shake,
+              },
+              {
+                label: 'Screenshot',
+                value: InvocationEvent.screenshot,
+              },
+              {
+                label: 'Two fingers swipe left',
+                value: InvocationEvent.twoFingersSwipe,
+              },
+              {
+                label: 'Floating button',
+                value: InvocationEvent.floatingButton,
+                isInitial: true,
+              },
+            ]}
+            onValueChange={(value) => {
+              BugReporting.setInvocationEvents([value]);
             }}
           />
-        </InputGroup>
-      </ListTile>
-
-      <ListTile title="Theme">
-        <Select
-          label="Select Theme"
-          items={[
-            {
-              label: 'Light',
-              value: ColorTheme.light,
-            },
-            {
-              label: 'Dark',
-              value: ColorTheme.dark,
-            },
-          ]}
-          onValueChange={Instabug.setColorTheme}
-        />
-      </ListTile>
-    </Screen>
+        </ListTile>
+
+        <ListTile title="Primary Color">
+          <InputGroup>
+            <InputLeftAddon>#</InputLeftAddon>
+            <InputField
+              value={color}
+              maxLength={6}
+              accessibilityLabel="Primary Color Value"
+              onChangeText={(value) => {
+                setColor(value);
+                if (/^[0-9A-F]{6}$/i.test(value)) {
+                  Instabug.setPrimaryColor(`#${value}`);
+                }
+              }}
+            />
+          </InputGroup>
+        </ListTile>
+
+        <ListTile title="Theme">
+          <Select
+            label="Select Theme"
+            items={[
+              {
+                label: 'Light',
+                value: ColorTheme.light,
+              },
+              {
+                label: 'Dark',
+                value: ColorTheme.dark,
+              },
+            ]}
+            onValueChange={Instabug.setColorTheme}
+          />
+        </ListTile>
+
+        <VerticalListTile title="User Identification">
+          <VStack>
+            <View style={styles.formContainer}>
+              <View style={styles.inputWrapper}>
+                <InputField
+                  placeholder="User Email"
+                  keyboardType="email-address"
+                  onChangeText={(name) => setUserEmail(name)}
+                  value={userEmail}
+                />
+              </View>
+              <View style={styles.inputWrapper}>
+                <InputField
+                  placeholder=" user name"
+                  onChangeText={(name) => setUserName(name)}
+                  value={userName}
+                />
+              </View>
+              <View style={styles.inputWrapper}>
+                <InputField
+                  placeholder=" user id"
+                  onChangeText={(name) => setUserID(name)}
+                  value={userID}
+                />
+              </View>
+            </View>
+            <Button mt="4" onPress={identifyUser}>
+              Identify user
+            </Button>
+
+            <Button mt="4" colorScheme="red" onPress={logout}>
+              Logout user
+            </Button>
+          </VStack>
+        </VerticalListTile>
+        <VerticalListTile title="User Attributes">
+          <VStack>
+            <View style={styles.formContainer}>
+              <View style={styles.inputWrapper}>
+                <InputField
+                  placeholder="User attribute key"
+                  onChangeText={(key) => setUserAttributeKey(key)}
+                  value={userAttributeKey}
+                  errorText={userAttributesFormError.userAttributeKey}
+                />
+              </View>
+              <View style={styles.inputWrapper}>
+                <InputField
+                  placeholder="User attribute value"
+                  onChangeText={(value) => setUserAttributeValue(value)}
+                  value={userAttributeValue}
+                  errorText={userAttributesFormError.userAttributeValue}
+                />
+              </View>
+            </View>
+
+            <Button mt="4" onPress={saveUserAttributes}>
+              Save user attributes
+            </Button>
+
+            <Button mt="4" colorScheme="red" onPress={clearUserAttributes}>
+              Clear user attributes
+            </Button>
+          </VStack>
+        </VerticalListTile>
+      </Screen>
+    </ScrollView>
   );
 };