[Sw-l] Problem with showing of signwriting in iOS

[Uta Meißner]

Hello coders,

we have a problem to display signwriting as image correctly in app on IOS.
There are no problems with Android.
Does anyone know this and has a solution?

Description of the problem:

We use react-native (expo bare workflow) for our Sign4All App. We use the
`@sutton-signwriting/font-ttf` to get the SVG XML from SWU code and uses
`react-native-svg` to render it.

The issue is it renders on iOS with some box and question mark for
“unknown” symbols.

Here’s a sample code:

```tsx
import { ReactNode, useEffect, useState } from 'react';

import { ActivityIndicator, View, ViewStyle } from 'react-native';

import { swu } from '@sutton-signwriting/font-ttf';

import { SvgXml } from 'react-native-svg';



export type SwuImageProps = { style: ViewStyle } & {

  children?: ReactNode;

  loadingColor?: string;

  scale?: number;

  SWU: string;

};



/**

* Renders a SWU image

* @example <SwuImage SWU="
𝠃𝥍𝥓񋾡𝤐𝣵񈗡𝣭𝤶񈗣𝤮𝥅񋵡𝤔𝥄񁲃𝤮𝤮񂈉𝤔𝤦񆇡𝤢𝤪񍲁𝣘𝣵񅳁𝣭𝤣" scale={0.5}
loadingColor="#2c2c2c" style={{ width:150, height:50 }} />

* @param props SwuImageProps

* @constructor

*/

export function SwuImage(props: SwuImageProps) {

  const [loading, setLoading] = useState(true);

  const { children } = props;

  const [svg, setSvg] = useState<string | null>(null);



  useEffect(() => {

    const swuSvg = swu.signSvg(props.SWU);

    setSvg(swuSvg);

    setLoading(false);

  }, [props.SWU]);



  const viewStyle = {

    width: props.style.width,

    height: props.style.height,

    aspectRatio: props.style.aspectRatio,

    backgroundColor: props.style.backgroundColor,

    justifyContent: props.style.justifyContent || 'center',

    alignItems: props.style.alignItems || 'center',

    borderRadius: props.style.borderRadius,

  } as ViewStyle;



  return (

    <View style={viewStyle}>

      {svg && <SvgXml xml={svg} scaleX={props.scale} scaleY={props.scale}
onError={console.warn} />}

      {loading && <ActivityIndicator size="large"
color={props.loadingColor} />}

      {!loading && children}

    </View>

  );

}

```

When I manually modify the SVG code to remove the lines of some symbols
which doesn’t have `fill` in it then iOS doesn’t render the question mark
boxes anymore. But I can’t figure out which symbol doesn’t have `fill` or
`line`.

Also when I paint all `line`s to red and paint all `fill`s to green, the
question mark boxes remains white or black.

Anyone ever has this issue too?



[image: image.png]


I hope someone knows the problem and can help with tips or solutions.

Best regards

Uta
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://listserv.linguistlist.org/pipermail/sw-l/attachments/20240213/39f208f5/attachment-0001.htm>
-------------- next part --------------
A non-text attachment was scrubbed...
Name: image.png
Type: image/png
Size: 158934 bytes
Desc: not available
URL: <http://listserv.linguistlist.org/pipermail/sw-l/attachments/20240213/39f208f5/attachment-0001.png>