Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

feat: add web implementation SvgXml and others component #2382

Merged
merged 12 commits into from
Jul 31, 2024
Merged

feat: add web implementation SvgXml and others component #2382

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
12 commits
Select commit Hold shift + click to select a range
92e821a
fix: Require cycles are allowed, but can result in uninitialized valu…
bohdanprog Jul 30, 2024
aab003c
feat: extract svg components, utils function, and types
bohdanprog Jul 30, 2024
313044e
feat: change file type, reordering object variable
bohdanprog Jul 30, 2024
51b6157
feat: create elements file with imports all svg elements, update impo…
bohdanprog Jul 30, 2024
6f6dabd
feat: fix web implementation for SvgXml
bohdanprog Jul 30, 2024
6cb5268
fix: clean code
bohdanprog Jul 30, 2024
6a71789
fix: test examples on web
jakex7 Jul 31, 2024
b25e4f2
fix: import camelCaseToDashed
jakex7 Jul 31, 2024
062a38d
Merge branch '@bohdanprog/fix-circular-dependencies' of github.com:so…
bohdanprog Jul 31, 2024
21060d5
Merge branch 'main' of github.com:software-mansion/react-native-svg i…
bohdanprog Jul 31, 2024
251f528
rebase main
bohdanprog Jul 31, 2024
8861782
chore: update yarn.lock
bohdanprog Jul 31, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
17 changes: 9 additions & 8 deletions src/css/LocalSvg.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,15 +1,16 @@
import * as React from 'react';
import { useState, useEffect, Component } from 'react';
import type { ImageSourcePropType } from 'react-native';
import { Platform, Image } from 'react-native';

import { fetchText } from 'react-native-svg';
import { Image, Platform, type ImageSourcePropType } from 'react-native';
import { fetchText, type SvgProps } from 'react-native-svg';
import { resolveAssetUri } from '../lib/resolveAssetUri';
import { SvgCss, SvgWithCss } from './css';
import type { SvgProps } from 'react-native-svg';

export function getUriFromSource(source: ImageSourcePropType) {
const resolvedAssetSource = Image.resolveAssetSource(source);
return resolvedAssetSource.uri;
const resolvedAssetSource =
Platform.OS === 'web'
? resolveAssetUri(source)
: Image.resolveAssetSource(source);
return resolvedAssetSource?.uri;
}

export function loadLocalRawResourceDefault(source: ImageSourcePropType) {
Expand All @@ -23,7 +24,7 @@

export async function loadAndroidRawResource(uri: string) {
try {
const RNSVGRenderableModule: any =

Check warning on line 27 in src/css/LocalSvg.tsx

View workflow job for this annotation

GitHub Actions / build 

Unexpected any. Specify a different type
// neeeded for new arch
// eslint-disable-next-line @typescript-eslint/no-var-requires
require('../fabric/NativeSvgRenderableModule').default;
Expand All @@ -39,7 +40,7 @@

export function loadLocalRawResourceAndroid(source: ImageSourcePropType) {
const uri = getUriFromSource(source);
if (isUriAnAndroidResourceIdentifier(uri)) {
if (uri && isUriAnAndroidResourceIdentifier(uri)) {
return loadAndroidRawResource(uri);
} else {
return fetchText(uri);
Comment on lines 42 to 46
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

If there's no URI, fetchText should be executed?

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

In that case, when I updated the getUriFromSource function, it is required to add a check on line 43 to ensure that the URI exists for some reason.

Expand Down
10 changes: 9 additions & 1 deletion src/xml.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -78,7 +78,10 @@ export function SvgXml(props: XmlProps) {
}
}

export async function fetchText(uri: string) {
export async function fetchText(uri?: string) {
if (!uri) {
return null;
}
Comment on lines +82 to +84
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I believe we should check for that earlier

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I believe it's better to check the URI only in that specific place, especially if we have multiple areas where we utilize that function.

const response = await fetch(uri);
if (response.ok || (response.status === 0 && uri.startsWith('file://'))) {
return await response.text();
Expand Down Expand Up @@ -207,6 +210,11 @@ export function astToReact(
): JSX.Element | string {
if (typeof value === 'object') {
const { Tag, props, children } = value;
if (props?.class) {
props.className = props.class;
delete props.class;
}

return (
<Tag key={index} {...props}>
{(children as (AST | string)[]).map(astToReact)}
Expand Down
Loading