Skip to content

Improve touch events breadcrumbs components tree #2863

@krystofwoldrich

Description

@krystofwoldrich

Description

The current components tree sent with UI Action Touch Breadcrumbs only lists components with defined displayName, which are mostly RN Core Components like View and Text. Comparing that with RN Dev Tools there are much more components in the tree. I'm sharing a code snippet of how this could be improved and a comparison to the current state and dev tools.

Current code:

} else if (currentInst.elementType) {

A snippet of an enhanced tree reader:

if (typeof elementType === 'string') {
  // tree.push(elementType); //native components like RTCView elementType
} else if (elementType.displayName) {
  tree.push(elementType.displayName);
} else if (typeof elementType.name === 'string') {
  //tree.push(elementType.toString().match(/([a-zA-Z_{1}][a-zA-Z0-9_]+)(?=\()/g)?.[0]); //unnecessary
  tree.push(elementType.name)
} else if ((elementType as any)._context && (elementType as any)._context.displayName) {
  tree.push((elementType as any)._context.displayName); //context provides and consumers
}

Todo:

  • Test with different RN version
  • Obfuscation - by default in release there is none
  • Performance impact - elementType.toString().match(/([a-zA-Z_{1}][a-zA-Z0-9_]+)(?=\()/g)?.[0])

Current components tree:

[
	View
	SafeAreaInsetsContext, 
	SafeAreaInsetsContext, 
	HeaderShownContext, 
	View, 
	View, 
	View, 
	PanGestureHandler, 
	View, 
	View, 
	View, 
	View, 
	ScrollView, 
	View, 
	TouchableNativeFeedback, 
	View, 
	Text, 
]

With the snippet:

[
	View,
	TextAncestorContext,
	ReactNativeProfiler,
	App,
	GestureHandlerRootView,
	View,
	TextAncestorContext,
	Provider,
	ReactRedux,
	LinkingContext,
	ThemeProvider,
	ThemeContext,
	EnsureSingleNavigator,
	StackNavigator,
	NavigationContent,
	PreventRemoveProvider,
	StackView,
	GestureHandlerRootView,
	View,
	TextAncestorContext,
	SafeAreaProviderCompat,
	SafeAreaInsetsContext,
	SafeAreaProvider,
	SafeAreaFrameContext,
	SafeAreaInsetsContext,
	SafeAreaInsetsContext,
	HeaderShownContext,
	CardStack,
	Background,
	View,
	TextAncestorContext,
	MaybeScreenContainer,
	ScreenContainer,
	MaybeScreen,
	Screen,
	InnerScreen,
	DelayedFreeze,
	Freeze,
	Suspender,
	AnimatedComponent,
	Card,
	View,
	TextAncestorContext,
	AnimatedComponent,
	View,
	TextAncestorContext,
	PanGestureHandler,
	PanGestureHandler,
	AnimatedComponent,
	View,
	TextAncestorContext,
	View,
	TextAncestorContext,
	View,
	TextAncestorContext,
	View,
	TextAncestorContext,
	HeaderBackContext,
	HeaderShownContext,
	HeaderHeightContext,
	SceneView,
	EnsureSingleNavigator,
	StaticContainer,
	HomeScreen,
	ScrollView,
	ScrollView,
	ScrollViewContext,
	Button,
	Button,
	TouchableOpacity,
	TouchableOpacity,
	AnimatedComponent,
	View,
	TextAncestorContext,
	View,
	TextAncestorContext,
	Text,
	TextAncestorContext
]

React Native Dev Tools for reference:
Screenshot 2023-03-01 at 15 52 23

Metadata

Metadata

Assignees

Labels

No labels
No labels

Projects

Status

Done

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions