Cross‑Platform Component Library: Shared Logic and Design Tokens for React Web and React Native

Sharing UI components between React web and React Native saves development time and guarantees a consistent user experience across platforms. The key is to isolate the logic from the rendering layer and to use a shared design system that works everywhere. First, create a design token file that defines colors, spacing, typography and other visual constants in a platform‑agnostic format such as JSON or TypeScript constants. Both the web and native projects can import this file, ensuring that the visual language stays identical. Second, write the core component logic in pure JavaScript or TypeScript functions that receive props and return plain data or simple calculations. Avoid using browser‑specific APIs like document or window, and stay away from native UI modules inside the shared code. This makes the logic reusable on any target. Third, build a thin wrapper component that decides which rendering implementation to use. For example, check Platform.OS at runtime; if it is 'web' render a standard HTML element, otherwise render a native view. The wrapper receives the same props as the shared component, so the API stays uniform. Fourth, test the component in both environments. Use Jest for unit tests and React Native Testing Library for the native side, while the web side can be tested with React Testing Library. Writing tests that run on both platforms catches regressions early. Fifth, publish the library to npm with a clear README that shows usage examples for the web and for React Native. Include a simple button component that changes its background color based on a token, demonstrating how the same code works on a browser button and on a TouchableOpacity. Tips for success: keep props platform‑agnostic, avoid inline style objects that differ between web and native, use StyleSheet for native styles and CSS classes for the web, and centralize token usage so a single change updates both platforms. Also, document the supported props and provide a small demo app for each platform. By following these steps you can build a robust, reusable component kit that works seamlessly on React web and React Native, reducing duplicated code and maintaining visual consistency.