diff --git a/examples/default/src/components/VerticalListTile.tsx b/examples/default/src/components/VerticalListTile.tsx index 923a0b6e0..f16d7b953 100644 --- a/examples/default/src/components/VerticalListTile.tsx +++ b/examples/default/src/components/VerticalListTile.tsx @@ -17,6 +17,7 @@ export const VerticalListTile: React.FC = ({ title, onPress, chil borderBottomWidth="1" borderColor="coolGray.300" bg="coolGray.100" + accessible={false} _pressed={{ bg: 'coolGray.200' }}> {title} diff --git a/examples/default/src/screens/CallbackHandlersScreen.tsx b/examples/default/src/screens/CallbackHandlersScreen.tsx index 086e89fdc..6c09e6512 100644 --- a/examples/default/src/screens/CallbackHandlersScreen.tsx +++ b/examples/default/src/screens/CallbackHandlersScreen.tsx @@ -1,46 +1,45 @@ -import React from 'react'; -import { View, Text, FlatList, StyleSheet, TouchableOpacity } from 'react-native'; -import { useCallbackHandlers } from '../contexts/callbackContext'; -import { createMaterialTopTabNavigator } from '@react-navigation/material-top-tabs'; +import React from "react"; +import { + View, + Text, + FlatList, + StyleSheet, + TouchableOpacity, +} from "react-native"; +import { useCallbackHandlers } from "../contexts/callbackContext"; +import { createMaterialTopTabNavigator } from "@react-navigation/material-top-tabs"; type CallBackScreenProps = { title: string }; +const TAB_TITLES = [ + "Invoke Handler", + "onSDKDismissedHandler", + "onReportSubmitHandler", + "Network Obfuscated", + "sync callback", + "session replay link", + "on crash report", +]; + const CallbackScreen: React.FC = () => { - const { callbackHandlers } = useCallbackHandlers(); - const titles = Object.keys(callbackHandlers); const Tab = createMaterialTopTabNavigator(); return ( - {titles.length > 0 ? ( - titles.map((title) => ( - - {() => } - - )) - ) : ( - ( - No Data - ), - }}> - {() => ( - - No callback handlers yet - - )} + tabBarActiveTintColor: "black", + tabBarInactiveTintColor: "gray", + tabBarLabelStyle: { fontWeight: "bold", fontSize: 14 }, + tabBarStyle: { backgroundColor: "white" }, + tabBarIndicatorStyle: { backgroundColor: "black", height: 3 }, + }} + > + {TAB_TITLES.map((title) => ( + + {() => } - )} + ))} ); }; @@ -53,9 +52,14 @@ const CallBackTabScreen: React.FC = ({ title }) => { Items: {items.length} - clearList(title)}> - Clear Data - + {items.length > 0 && ( + clearList(title)} + > + Clear Data + + )} = ({ title }) => { {item.fields.map((field, idx) => ( {field.key}: - {field.value} + {field.value} ))} @@ -80,30 +84,30 @@ const CallBackTabScreen: React.FC = ({ title }) => { export default CallbackScreen; const styles = StyleSheet.create({ - container: { flex: 1, padding: 16, backgroundColor: '#fff' }, + container: { flex: 1, padding: 16, backgroundColor: "#fff" }, header: { - flexDirection: 'row', - justifyContent: 'space-between', - alignItems: 'center', + flexDirection: "row", + justifyContent: "space-between", + alignItems: "center", marginBottom: 10, }, - countText: { fontSize: 16, fontWeight: 'bold' }, - clearButton: { backgroundColor: '#ff5555', padding: 8, borderRadius: 8 }, - clearText: { color: '#fff', fontWeight: 'bold' }, + countText: { fontSize: 16, fontWeight: "bold" }, + clearButton: { backgroundColor: "#ff5555", padding: 8, borderRadius: 8 }, + clearText: { color: "#fff", fontWeight: "bold" }, item: { padding: 12, - backgroundColor: '#f0f0f0', + backgroundColor: "#f0f0f0", borderRadius: 6, marginBottom: 8, }, fieldRow: { - flexDirection: 'row', - justifyContent: 'space-between', + flexDirection: "row", + justifyContent: "space-between", marginBottom: 4, }, - keyText: { fontWeight: 'bold', color: '#333' }, - valueText: { color: '#555', marginLeft: 8 }, - empty: { textAlign: 'center', color: '#888', marginTop: 20 }, - emptyContainer: { flex: 1, justifyContent: 'center', alignItems: 'center' }, - emptyText: { fontSize: 16, color: '#888' }, + keyText: { fontWeight: "bold", color: "#333" }, + valueText: { color: "#555", marginLeft: 8 }, + empty: { textAlign: "center", color: "#888", marginTop: 20 }, + emptyContainer: { flex: 1, justifyContent: "center", alignItems: "center" }, + emptyText: { fontSize: 16, color: "#888" }, }); diff --git a/examples/default/src/screens/HomeScreen.tsx b/examples/default/src/screens/HomeScreen.tsx index 012db7020..7a5aeeb46 100644 --- a/examples/default/src/screens/HomeScreen.tsx +++ b/examples/default/src/screens/HomeScreen.tsx @@ -20,7 +20,6 @@ export const HomeScreen: React.FC navigation.navigate('APM')} /> navigation.navigate('SessionReplay')} /> navigation.navigate('LegacyMode')} /> - navigation.navigate('CallbackScreen')} /> ); }; diff --git a/examples/default/src/screens/apm/HttpScreen.tsx b/examples/default/src/screens/apm/HttpScreen.tsx index 472e1e56a..e1cfe3802 100644 --- a/examples/default/src/screens/apm/HttpScreen.tsx +++ b/examples/default/src/screens/apm/HttpScreen.tsx @@ -29,6 +29,31 @@ export const HttpScreen: React.FC = () => { showNotification('Error', 'Failed'); } }; + const makeGetCallWithTrace = async () => { + setLoading(true); + const url = 'https://httpbin.org/anything'; + try { + const response = await fetch(url, { + method: 'GET', + headers: { + 'Content-Type': 'application/json', + 'traceparent': 'non-ibg-trace-value', + 'tracestate': 'non-ibg=value', + }, + }); + + const responseBody = await response.json(); + console.log('Response with trace headers:', responseBody); + + setLoading(false); + showNotification('Success', 'Succeeded with trace'); + } catch (error) { + console.error('Error with trace call:', error); + setLoading(false); + showNotification('Error', 'Failed with trace'); + } + }; + const makePostCall = async () => { setLoading(true); @@ -157,6 +182,7 @@ export const HttpScreen: React.FC = () => { {loading && } + diff --git a/examples/default/src/screens/bug-reporting/BugReportingScreen.tsx b/examples/default/src/screens/bug-reporting/BugReportingScreen.tsx index 90c7410c6..e549ed091 100644 --- a/examples/default/src/screens/bug-reporting/BugReportingScreen.tsx +++ b/examples/default/src/screens/bug-reporting/BugReportingScreen.tsx @@ -280,7 +280,8 @@ export const BugReportingScreen: React.FC< addItem('Invoke Handler', { id: `event-${Math.random()}`, - fields: [{ key: 'Date', value: new Date().toLocaleString() }], + fields: [{ key: 'Date', value: new Date().toLocaleString() }, { key: 'status value', value: 'triggered' }, + ], }); }) } @@ -309,13 +310,18 @@ export const BugReportingScreen: React.FC< testID="enable_on_dismiss_handler" title="Enable on Did-Dismiss Callback Handler" onPress={() => - BugReporting.onSDKDismissedHandler(function () { + BugReporting.onSDKDismissedHandler(function (dismissType, reportType) { toast.show({ description: 'onSDKDismissedHandler Callback Handler', }); addItem('onSDKDismissedHandler', { id: `event-${Math.random()}`, - fields: [{ key: 'Date', value: new Date().toLocaleString() }], + fields: [{ key: 'Date', value: new Date().toLocaleString() }, + { key: 'issue type', value: dismissType.toString()}, + { key: 'report type', value: reportType.toString()}, + { key: 'status value', value: 'triggered'}, + + ], }); }) } @@ -341,6 +347,7 @@ export const BugReportingScreen: React.FC< }) } /> + navigation.navigate('CallbackScreen')} /> diff --git a/examples/default/src/screens/settings/SettingsScreen.tsx b/examples/default/src/screens/settings/SettingsScreen.tsx index e8e1a7e60..6541d8f3f 100644 --- a/examples/default/src/screens/settings/SettingsScreen.tsx +++ b/examples/default/src/screens/settings/SettingsScreen.tsx @@ -6,6 +6,7 @@ import Instabug, { InvocationEvent, Locale, NetworkLogger, + WelcomeMessageMode, ReproStepsMode, } from 'instabug-reactnative'; import { InputGroup, InputLeftAddon, useToast, VStack, Button } from 'native-base'; @@ -30,12 +31,21 @@ export const SettingsScreen: React.FC('debug'); + const [instabugLog, setInstabugLog] = useState('') const [featureFlagName, setFeatureFlagName] = useState(''); const [featureFlagVariant, setfeatureFlagVariant] = useState(''); const [isUserStepEnabled, setIsUserStepEnabled] = useState(true); + const [isSessionProfilerEnabled, setIsSessionProfilerEnabled] = useState(true); const toast = useToast(); const [userAttributesFormError, setUserAttributesFormError] = useState({}); + const [userDataFormError, setUserDataFormError] = useState({}) + const [userEventFormError, setUserEventFormError] = useState({}) + const [tagFormError, setTagFormError] = useState({}) const [featureFlagFormError, setFeatureFlagFormError] = useState({}); const { addItem } = useCallbackHandlers(); @@ -50,6 +60,30 @@ export const SettingsScreen: React.FC { + const errors: any = {}; + if (userData.length === 0) { + errors.userDataValue = 'Value is required'; + } + setUserDataFormError(errors); + return Object.keys(errors).length === 0; + }; + const validateUserEventForm = () => { + const errors: any = {}; + if (userData.length === 0) { + errors.userEventValue = 'Value is required'; + } + setUserEventFormError(errors); + return Object.keys(errors).length === 0; + }; + const validateTagForm = () => { + const errors: any = {}; + if (userData.length === 0) { + errors.tagValue = 'Value is required'; + } + setTagFormError(errors); + return Object.keys(errors).length === 0; + }; const validateFeatureFlagForm = () => { const errors: any = {}; if (featureFlagName.length === 0) { @@ -89,6 +123,35 @@ export const SettingsScreen: React.FC { + if (validateUserDataForm()) { + Instabug.setUserData(userData); + toast.show({ + description: 'User Data added successfully', + }); + setUserData('') + } + }; + const saveUserEvent = () => { + if (validateUserEventForm()) { + Instabug.logUserEvent(userEvent); + toast.show({ + description: 'User Event added successfully', + }); + setUserData('') + } + }; + const saveTag = () => { + if (validateTagForm()) { + Instabug.appendTags([tag]) + toast.show({ + description: 'Tag added successfully', + }); + setTag('') + } + }; + const saveFeatureFlags = () => { if (validateFeatureFlagForm()) { Instabug.addFeatureFlag({ @@ -140,6 +203,34 @@ export const SettingsScreen: React.FC { + if (!instabugLog.trim()) { + toast.show({ description: 'Please enter a log message' }); + return; + } + + switch (instabugLogLevel) { + case 'verbose': + Instabug.logVerbose(instabugLog); + break; + case 'debug': + Instabug.logDebug(instabugLog); + break; + case 'info': + Instabug.logInfo(instabugLog); + break; + case 'warn': + Instabug.logWarn(instabugLog); + break; + case 'error': + Instabug.logError(instabugLog); + break; + } + + toast.show({ description: `Logged ${instabugLogLevel} message` }); + setInstabugLog(''); + }; + return ( @@ -250,6 +341,31 @@ export const SettingsScreen: React.FC + + { + navigation.navigate('SessionProfiler', { + isEnabled: isSessionProfilerEnabled, + setIsEnabled: (enabled: boolean) => { + setIsSessionProfilerEnabled(enabled); + Instabug.setSessionProfilerEnabled(enabled); + navigation.goBack(); + }, + }); + }} + testID="id_session_profiler" + /> + + Instabug.showWelcomeMessage(WelcomeMessageMode.beta)} + /> + Instabug.showWelcomeMessage(WelcomeMessageMode.live)} + /> @@ -316,6 +432,60 @@ export const SettingsScreen: React.FC + + + + + setUserData(userData)} + value={userData} + errorText={userDataFormError.userDataValue} + /> + + + + + + + + + + + setUserEvent(userEvent)} + value={userEvent} + errorText={userEventFormError.userEventValue} + /> + + + + + + + + + + + setTag(tag)} + value={tag} + errorText={tagFormError.tagValue} + /> + + + + + + @@ -412,33 +582,34 @@ export const SettingsScreen: React.FC - + navigation.navigate('CallbackScreen')} /> + - Instabug.logVerbose('log Verbose message')} - /> - Instabug.logDebug('log Debug message')} - /> - Instabug.logWarn('log Warn message')} - /> - Instabug.logError('log Error message')} - /> - Instabug.logInfo('log Info message')} +