docs: Add React Native to FRAMEWORK-GUIDE #4

kurdev2020 · 2025-11-11T10:08:18Z

Add React Native framework entry to support table
Include React Native usage examples
Document react-native-svg prerequisites
Add ComponentRef and StyleProp best practices

…ration tests

…lidation checks

…ndencies

This commit refactors the CLI command definitions in `cli.js` to use a more concise syntax. Additionally, it updates the framework options to include 'react-native' across various commands, improving the overall usability of the CLI tool.

This commit refactors the CLI command definitions in `cli.ts` for improved readability and consistency. It also enhances error handling across various commands and ensures the inclusion of 'react-native' in framework options, further improving the CLI's functionality.

… SVG component generation This commit adds functionality to the FrameworkTemplateEngine to support the 'react-native' framework. It includes methods for generating React Native components from SVG content, enhancing the overall capability of the framework to handle various front-end technologies.

This commit updates the framework templates to improve TypeScript support for SVG components in React Native. It includes the addition of type imports and extends the component props interface to include `SvgProps`, ensuring better type safety and integration with React Native's styling system.

- Validate ComponentRef usage (not ElementRef) - Enforce StyleProp<ViewStyle> for style prop - Add react-native-svg import checks - Ensure forwardRef wrapper presence

- Generate Arrowbenddownleft and Vite components - Include TypeScript props and forwardRef support - Add index.ts for component exports

- Add React Native usage examples - Include code samples and installation notes

- Update framework count to 9+ - Add React Native usage section - Include code examples and prerequisites - Update CLI framework options list

- Add React Native framework entry to support table - Include React Native usage examples - Document react-native-svg prerequisites - Add ComponentRef and StyleProp best practices

Copilot

Pull Request Overview

This PR adds React Native framework support to svger-cli, expanding it from 8 to 9 supported frameworks. The implementation generates React Native components using react-native-svg with proper TypeScript types and modern React best practices.

Key Changes

Added react-native as a supported framework type
Implemented React Native component generation with react-native-svg integration
Added proper TypeScript typing using React.ComponentRef<typeof Svg> and StyleProp<ViewStyle>
Documented React Native usage with examples and prerequisites

Reviewed Changes

Copilot reviewed 11 out of 13 changed files in this pull request and generated 4 comments.

Show a summary per file

File	Description
`yarn.lock`	Added TypeScript 5.9.3 dependency entry (misplaced location)
`src/types/index.ts`	Added `react-native` to FrameworkType union
`src/core/framework-templates.ts`	Implemented React Native component generator with SVG element conversion
`src/cli.ts`	Updated CLI help text to include react-native option
`frameworks.test.js`	Added React Native test cases and validation logic
`docs/IMPLEMENTATION-SUMMARY.md`	Updated framework count and documentation
`docs/FRAMEWORK-GUIDE.md`	Added comprehensive React Native usage guide
`cli-test-react-native/*`	Added example generated React Native components
`dist/cli.js`	Compiled output of CLI changes
`README.md`	Updated framework count in main documentation
`cli-framework.test.js`	Added react-native to test frameworks array

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

Copilot · 2025-11-12T12:30:54Z

cli-test-react-native/Vite.tsx

+        style={style}
+        {...props}
+      >
+        <Defs><LinearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><Stop offset="0%" stop-color="#41D1FF"></Stop><Stop offset="100%" stop-color="#BD34FE"></Stop></LinearGradient><LinearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><Stop offset="0%" stop-color="#FFEA83"></Stop><Stop offset="8.333%" stop-color="#FFDD35"></Stop><Stop offset="100%" stop-color="#FFA800"></Stop></LinearGradient></Defs><Path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></Path><Path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></Path>


The SVG attribute conversion is incomplete. The stop-color attribute has not been converted to stopColor in camelCase format. React Native requires all hyphenated SVG attributes to be in camelCase. The convertSVGToReactNative function should include a replacement for stop-color to stopColor.

Suggested change

<Defs><LinearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><Stop offset="0%" stop-color="#41D1FF"></Stop><Stop offset="100%" stop-color="#BD34FE"></Stop></LinearGradient><LinearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><Stop offset="0%" stop-color="#FFEA83"></Stop><Stop offset="8.333%" stop-color="#FFDD35"></Stop><Stop offset="100%" stop-color="#FFA800"></Stop></LinearGradient></Defs><Path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></Path><Path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></Path>

<Defs><LinearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><Stop offset="0%" stopColor="#41D1FF"></Stop><Stop offset="100%" stopColor="#BD34FE"></Stop></LinearGradient><LinearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><Stop offset="0%" stopColor="#FFEA83"></Stop><Stop offset="8.333%" stopColor="#FFDD35"></Stop><Stop offset="100%" stopColor="#FFA800"></Stop></LinearGradient></Defs><Path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></Path><Path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></Path>

Copilot · 2025-11-12T12:30:54Z

src/core/framework-templates.ts

+      .replace(/font-size=/g, 'fontSize=')
+      .replace(/font-weight=/g, 'fontWeight=')
+      .replace(/text-anchor=/g, 'textAnchor=')
+      .replace(/xlink:href=/g, 'href=')


The attribute conversion is missing stop-color to stopColor and stop-opacity to stopOpacity conversions. These are commonly used in SVG gradients (as seen in the generated Vite.tsx file). Add .replace(/stop-color=/g, 'stopColor=') and .replace(/stop-opacity=/g, 'stopOpacity=') to the conversion chain.

Suggested change

.replace(/xlink:href=/g, 'href=')

.replace(/xlink:href=/g, 'href=')

.replace(/stop-color=/g, 'stopColor=')

.replace(/stop-opacity=/g, 'stopOpacity=')

Copilot · 2025-11-12T12:30:55Z

src/core/framework-templates.ts

+      const regex = new RegExp(svgTag, 'gi')
+      converted = converted.replace(regex, reactNativeTag)


Creating a new RegExp object for each element in the loop is inefficient. The 'gi' flag makes this case-insensitive, which could cause unintended replacements (e.g., matching 'PATH' as well as 'path'). Since SVG tags are case-sensitive in the source and the target React Native components use specific casing, use string replacement with a global flag or compile the regex outside the loop. Consider using .replaceAll() or pre-compiled regexes stored in the elementMap.

Suggested change

const regex = new RegExp(svgTag, 'gi')

converted = converted.replace(regex, reactNativeTag)

converted = converted.replaceAll(svgTag, reactNativeTag)

Copilot · 2025-11-12T12:30:55Z

cli-test-react-native/Vite.tsx

@@ -0,0 +1,36 @@
+import React from "react";
+import Svg, { Defs, Line, LinearGradient, Path, Stop } from "react-native-svg";


Unused import Line.

Suggested change

import Svg, { Defs, Line, LinearGradient, Path, Stop } from "react-native-svg";

import Svg from "react-native-svg";

amanj-kurdev and others added 14 commits November 11, 2025 12:59

feat: Add support for 'react-native' framework in file extension gene…

b6a7305

…ration tests

feat: Update framework tests to include 'react-native' and improve va…

76cef84

…lidation checks

chore: Update yarn.lock to remove unnecessary version ranges for depe…

26208d7

…ndencies

feat: Add 'react-native' to FrameworkType for enhanced type support

e15a8d5

feat: Add React Native test validations

28bcf71

- Validate ComponentRef usage (not ElementRef) - Enforce StyleProp<ViewStyle> for style prop - Add react-native-svg import checks - Ensure forwardRef wrapper presence

feat: Add React Native component examples

4024a7f

- Generate Arrowbenddownleft and Vite components - Include TypeScript props and forwardRef support - Add index.ts for component exports

docs: Add React Native section to README

ef1164c

- Add React Native usage examples - Include code samples and installation notes

docs: Add React Native support to README

21af588

- Update framework count to 9+ - Add React Native usage section - Include code examples and prerequisites - Update CLI framework options list

docs: Add React Native to FRAMEWORK-GUIDE

6912ac7

- Add React Native framework entry to support table - Include React Native usage examples - Document react-native-svg prerequisites - Add ComponentRef and StyleProp best practices

Merge branch 'main' into feat/support-react-native

93296dd

navidrezadoost requested a review from Copilot November 12, 2025 12:28

Copilot started reviewing on behalf of navidrezadoost November 12, 2025 12:28 View session

Copilot finished reviewing on behalf of navidrezadoost November 12, 2025 12:29

Copilot AI reviewed Nov 12, 2025

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

docs: Add React Native to FRAMEWORK-GUIDE #4

docs: Add React Native to FRAMEWORK-GUIDE #4

Uh oh!

kurdev2020 commented Nov 11, 2025

Uh oh!

Copilot AI left a comment

Uh oh!

Copilot AI Nov 12, 2025

Uh oh!

Copilot AI Nov 12, 2025

Uh oh!

Copilot AI Nov 12, 2025

Uh oh!

Copilot AI Nov 12, 2025

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

		const regex = new RegExp(svgTag, 'gi')
		converted = converted.replace(regex, reactNativeTag)

	const regex = new RegExp(svgTag, 'gi')
	converted = converted.replace(regex, reactNativeTag)
	converted = converted.replaceAll(svgTag, reactNativeTag)

		@@ -0,0 +1,36 @@
		import React from "react";
		import Svg, { Defs, Line, LinearGradient, Path, Stop } from "react-native-svg";

	import Svg, { Defs, Line, LinearGradient, Path, Stop } from "react-native-svg";
	import Svg from "react-native-svg";

docs: Add React Native to FRAMEWORK-GUIDE #4

Are you sure you want to change the base?

docs: Add React Native to FRAMEWORK-GUIDE #4

Uh oh!

Conversation

kurdev2020 commented Nov 11, 2025

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull Request Overview

Key Changes

Reviewed Changes

Uh oh!

Copilot AI Nov 12, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Nov 12, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Nov 12, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Nov 12, 2025

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants