feat: add web implementation SvgXml and others component (#2382)

# Summary
We want to make available SvgXml and other components in the web
platform.

## Test Plan
We can easily check how that works by opening `Test1813`.

## Compatibility

| OS      | Implemented |
| ------- | :---------: |
| Web     |         |

---------

Co-authored-by: Jakub Grzywacz <jakub.grzywacz@swmansion.com>
This commit is contained in:
Bohdan Artiukhov
2024-07-31 11:56:48 +02:00
committed by GitHub
parent a27e17f505
commit a2e843bc9c
2 changed files with 18 additions and 9 deletions

View File

@@ -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) {
@@ -39,7 +40,7 @@ export async function loadAndroidRawResource(uri: string) {
export function loadLocalRawResourceAndroid(source: ImageSourcePropType) {
const uri = getUriFromSource(source);
if (isUriAnAndroidResourceIdentifier(uri)) {
if (uri && isUriAnAndroidResourceIdentifier(uri)) {
return loadAndroidRawResource(uri);
} else {
return fetchText(uri);

View File

@@ -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;
}
const response = await fetch(uri);
if (response.ok || (response.status === 0 && uri.startsWith('file://'))) {
return await response.text();
@@ -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)}