There's nothing inherently wrong with what you're suggesting, slicing the reuse at different levels brings different benefits and challenges. web-components is about as high level as you can go between React and Angular, if you want something lower that's cross platform, I suggest you look at design tokens, implemented using something like https://amzn.github.io/style-dictionary/

You can take this as far as you want - we use this to deliver common theme spacing, sizing, colours across Swift, Kotlin, React Native, Svelte and React, but you can go further and define more, just check out their examples. It offers a good way to have a JSON representation of a styled system with a native wrapper on top that consumes this.

You can checkout https://nx.dev. it's a powerful build tool that allows you to share components between angular and react project. explanation and example here: https://nx.dev/p/a/examples/react-and-angular

And as you mentioned you can use the created web-components in your react-native app and focus on managing them using services like bit.dev

In your case, you use multiple frontend frameworks to build products and to share the same style and user-experience between these 3 technologies you need to use Nx.

What is Nx

Nx is a smart and extensible build framework to help you architect, test, and build at any scale — integrating seamlessly with modern technologies and frameworks while providing a distributed graph-based task execution, computation caching, smart rebuilds of affected projects, powerful code generators, editor support, GitHub apps, and more and with Nx, you can:

• Use modern tools like Cypress and Jest.
• Build full-stack applications and share code between the backend and the frontend.
• Use effective development practices pioneered at Google.

You can see all documentation here Nx and here how to Building Angular and React Applications Together With Nx and finally you can see in GitHub framework project Nx - GitHub