<div dir="ltr"><div>Hello coders,<br><br>we have a problem to display signwriting as image correctly in app on IOS. There are no problems with Android. <br>Does anyone know this and has a solution?<br><br>Description of the problem:<br></div><div><br></div><div><p class="gmail-x_MsoNormal" style="margin:0cm;font-size:11pt;font-family:Calibri,sans-serif;color:rgb(36,36,36)"><span lang="EN-US" style="border:0px;font:inherit;margin:0px;padding:0px;vertical-align:baseline;color:inherit">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.</span></p><p class="gmail-x_MsoNormal" style="margin:0cm;font-size:11pt;font-family:Calibri,sans-serif;color:rgb(36,36,36)"><span lang="EN-US" style="border:0px;font:inherit;margin:0px;padding:0px;vertical-align:baseline;color:inherit">The issue is it renders on iOS with some box and question mark for “unknown” symbols.</span></p><p class="gmail-x_MsoNormal" style="margin:0cm;font-size:11pt;font-family:Calibri,sans-serif;color:rgb(36,36,36)"><span lang="EN-US" style="border:0px;font:inherit;margin:0px;padding:0px;vertical-align:baseline;color:inherit">Here’s a sample code:</span></p><p class="gmail-x_MsoNormal" style="margin:0cm;font-size:11pt;font-family:Calibri,sans-serif;color:rgb(36,36,36)"><span lang="EN-US" style="border:0px;font:inherit;margin:0px;padding:0px;vertical-align:baseline;color:inherit">```tsx<br aria-hidden="true">import { ReactNode, useEffect, useState } from 'react';</span></p><p class="gmail-x_MsoNormal" style="margin:0cm;font-size:11pt;font-family:Calibri,sans-serif;color:rgb(36,36,36)"><span lang="EN-US" style="border:0px;font:inherit;margin:0px;padding:0px;vertical-align:baseline;color:inherit">import { ActivityIndicator, View, ViewStyle } from 'react-native';</span></p><p class="gmail-x_MsoNormal" style="margin:0cm;font-size:11pt;font-family:Calibri,sans-serif;color:rgb(36,36,36)"><span lang="EN-US" style="border:0px;font:inherit;margin:0px;padding:0px;vertical-align:baseline;color:inherit">import { swu } from '@sutton-signwriting/font-ttf';</span></p><p class="gmail-x_MsoNormal" style="margin:0cm;font-size:11pt;font-family:Calibri,sans-serif;color:rgb(36,36,36)"><span lang="EN-US" style="border:0px;font:inherit;margin:0px;padding:0px;vertical-align:baseline;color:inherit">import { SvgXml } from 'react-native-svg';</span></p><p class="gmail-x_MsoNormal" style="margin:0cm;font-size:11pt;font-family:Calibri,sans-serif;color:rgb(36,36,36)"><span lang="EN-US" style="border:0px;font:inherit;margin:0px;padding:0px;vertical-align:baseline;color:inherit"> </span></p><p class="gmail-x_MsoNormal" style="margin:0cm;font-size:11pt;font-family:Calibri,sans-serif;color:rgb(36,36,36)"><span lang="EN-US" style="border:0px;font:inherit;margin:0px;padding:0px;vertical-align:baseline;color:inherit">export type SwuImageProps = { style: ViewStyle } & {</span></p><p class="gmail-x_MsoNormal" style="margin:0cm;font-size:11pt;font-family:Calibri,sans-serif;color:rgb(36,36,36)"><span lang="EN-US" style="border:0px;font:inherit;margin:0px;padding:0px;vertical-align:baseline;color:inherit">  children?: ReactNode;</span></p><p class="gmail-x_MsoNormal" style="margin:0cm;font-size:11pt;font-family:Calibri,sans-serif;color:rgb(36,36,36)"><span lang="EN-US" style="border:0px;font:inherit;margin:0px;padding:0px;vertical-align:baseline;color:inherit">  loadingColor?: string;</span></p><p class="gmail-x_MsoNormal" style="margin:0cm;font-size:11pt;font-family:Calibri,sans-serif;color:rgb(36,36,36)"><span lang="EN-US" style="border:0px;font:inherit;margin:0px;padding:0px;vertical-align:baseline;color:inherit">  scale?: number;</span></p><p class="gmail-x_MsoNormal" style="margin:0cm;font-size:11pt;font-family:Calibri,sans-serif;color:rgb(36,36,36)"><span lang="EN-US" style="border:0px;font:inherit;margin:0px;padding:0px;vertical-align:baseline;color:inherit">  SWU: string;</span></p><p class="gmail-x_MsoNormal" style="margin:0cm;font-size:11pt;font-family:Calibri,sans-serif;color:rgb(36,36,36)"><span lang="EN-US" style="border:0px;font:inherit;margin:0px;padding:0px;vertical-align:baseline;color:inherit">};</span></p><p class="gmail-x_MsoNormal" style="margin:0cm;font-size:11pt;font-family:Calibri,sans-serif;color:rgb(36,36,36)"><span lang="EN-US" style="border:0px;font:inherit;margin:0px;padding:0px;vertical-align:baseline;color:inherit"> </span></p><p class="gmail-x_MsoNormal" style="margin:0cm;font-size:11pt;font-family:Calibri,sans-serif;color:rgb(36,36,36)"><span lang="EN-US" style="border:0px;font:inherit;margin:0px;padding:0px;vertical-align:baseline;color:inherit">/**</span></p><p class="gmail-x_MsoNormal" style="margin:0cm;font-size:11pt;font-family:Calibri,sans-serif;color:rgb(36,36,36)"><span lang="EN-US" style="border:0px;font:inherit;margin:0px;padding:0px;vertical-align:baseline;color:inherit">* Renders a SWU image</span></p><p class="gmail-x_MsoNormal" style="margin:0cm;font-size:11pt;font-family:Calibri,sans-serif;color:rgb(36,36,36)"><span lang="EN-US" style="border:0px;font:inherit;margin:0px;padding:0px;vertical-align:baseline;color:inherit">* @example <SwuImage SWU="</span><span lang="EN-US" style="border:0px;font:inherit;margin:0px;padding:0px;vertical-align:baseline;color:inherit">𝠃𝥍𝥓񋾡𝤐𝣵񈗡𝣭𝤶񈗣𝤮𝥅񋵡𝤔𝥄񁲃𝤮𝤮񂈉𝤔𝤦񆇡𝤢𝤪񍲁𝣘𝣵񅳁𝣭𝤣</span><span lang="EN-US" style="border:0px;font:inherit;margin:0px;padding:0px;vertical-align:baseline;color:inherit">" scale={0.5} loadingColor="#2c2c2c" style={{ width:150, height:50 }} /></span></p><p class="gmail-x_MsoNormal" style="margin:0cm;font-size:11pt;font-family:Calibri,sans-serif;color:rgb(36,36,36)"><span lang="EN-US" style="border:0px;font:inherit;margin:0px;padding:0px;vertical-align:baseline;color:inherit">* @param props SwuImageProps</span></p><p class="gmail-x_MsoNormal" style="margin:0cm;font-size:11pt;font-family:Calibri,sans-serif;color:rgb(36,36,36)"><span lang="EN-US" style="border:0px;font:inherit;margin:0px;padding:0px;vertical-align:baseline;color:inherit">* @constructor</span></p><p class="gmail-x_MsoNormal" style="margin:0cm;font-size:11pt;font-family:Calibri,sans-serif;color:rgb(36,36,36)"><span lang="EN-US" style="border:0px;font:inherit;margin:0px;padding:0px;vertical-align:baseline;color:inherit">*/</span></p><p class="gmail-x_MsoNormal" style="margin:0cm;font-size:11pt;font-family:Calibri,sans-serif;color:rgb(36,36,36)"><span lang="EN-US" style="border:0px;font:inherit;margin:0px;padding:0px;vertical-align:baseline;color:inherit">export function SwuImage(props: SwuImageProps) {</span></p><p class="gmail-x_MsoNormal" style="margin:0cm;font-size:11pt;font-family:Calibri,sans-serif;color:rgb(36,36,36)"><span lang="EN-US" style="border:0px;font:inherit;margin:0px;padding:0px;vertical-align:baseline;color:inherit">  const [loading, setLoading] = useState(true);</span></p><p class="gmail-x_MsoNormal" style="margin:0cm;font-size:11pt;font-family:Calibri,sans-serif;color:rgb(36,36,36)"><span lang="EN-US" style="border:0px;font:inherit;margin:0px;padding:0px;vertical-align:baseline;color:inherit">  const { children } = props;</span></p><p class="gmail-x_MsoNormal" style="margin:0cm;font-size:11pt;font-family:Calibri,sans-serif;color:rgb(36,36,36)"><span lang="EN-US" style="border:0px;font:inherit;margin:0px;padding:0px;vertical-align:baseline;color:inherit">  const [svg, setSvg] = useState<string | null>(null);</span></p><p class="gmail-x_MsoNormal" style="margin:0cm;font-size:11pt;font-family:Calibri,sans-serif;color:rgb(36,36,36)"><span lang="EN-US" style="border:0px;font:inherit;margin:0px;padding:0px;vertical-align:baseline;color:inherit"> </span></p><p class="gmail-x_MsoNormal" style="margin:0cm;font-size:11pt;font-family:Calibri,sans-serif;color:rgb(36,36,36)"><span lang="EN-US" style="border:0px;font:inherit;margin:0px;padding:0px;vertical-align:baseline;color:inherit">  useEffect(() => {</span></p><p class="gmail-x_MsoNormal" style="margin:0cm;font-size:11pt;font-family:Calibri,sans-serif;color:rgb(36,36,36)"><span lang="EN-US" style="border:0px;font:inherit;margin:0px;padding:0px;vertical-align:baseline;color:inherit">    const swuSvg = swu.signSvg(props.SWU);</span></p><p class="gmail-x_MsoNormal" style="margin:0cm;font-size:11pt;font-family:Calibri,sans-serif;color:rgb(36,36,36)"><span lang="EN-US" style="border:0px;font:inherit;margin:0px;padding:0px;vertical-align:baseline;color:inherit">    setSvg(swuSvg);</span></p><p class="gmail-x_MsoNormal" style="margin:0cm;font-size:11pt;font-family:Calibri,sans-serif;color:rgb(36,36,36)"><span lang="EN-US" style="border:0px;font:inherit;margin:0px;padding:0px;vertical-align:baseline;color:inherit">    setLoading(false);</span></p><p class="gmail-x_MsoNormal" style="margin:0cm;font-size:11pt;font-family:Calibri,sans-serif;color:rgb(36,36,36)"><span lang="EN-US" style="border:0px;font:inherit;margin:0px;padding:0px;vertical-align:baseline;color:inherit">  }, [props.SWU]);</span></p><p class="gmail-x_MsoNormal" style="margin:0cm;font-size:11pt;font-family:Calibri,sans-serif;color:rgb(36,36,36)"><span lang="EN-US" style="border:0px;font:inherit;margin:0px;padding:0px;vertical-align:baseline;color:inherit"> </span></p><p class="gmail-x_MsoNormal" style="margin:0cm;font-size:11pt;font-family:Calibri,sans-serif;color:rgb(36,36,36)"><span lang="EN-US" style="border:0px;font:inherit;margin:0px;padding:0px;vertical-align:baseline;color:inherit">  const viewStyle = {</span></p><p class="gmail-x_MsoNormal" style="margin:0cm;font-size:11pt;font-family:Calibri,sans-serif;color:rgb(36,36,36)"><span lang="EN-US" style="border:0px;font:inherit;margin:0px;padding:0px;vertical-align:baseline;color:inherit">    width: props.style.width,</span></p><p class="gmail-x_MsoNormal" style="margin:0cm;font-size:11pt;font-family:Calibri,sans-serif;color:rgb(36,36,36)"><span lang="EN-US" style="border:0px;font:inherit;margin:0px;padding:0px;vertical-align:baseline;color:inherit">    height: props.style.height,</span></p><p class="gmail-x_MsoNormal" style="margin:0cm;font-size:11pt;font-family:Calibri,sans-serif;color:rgb(36,36,36)"><span lang="EN-US" style="border:0px;font:inherit;margin:0px;padding:0px;vertical-align:baseline;color:inherit">    aspectRatio: props.style.aspectRatio,</span></p><p class="gmail-x_MsoNormal" style="margin:0cm;font-size:11pt;font-family:Calibri,sans-serif;color:rgb(36,36,36)"><span lang="EN-US" style="border:0px;font:inherit;margin:0px;padding:0px;vertical-align:baseline;color:inherit">    backgroundColor: props.style.backgroundColor,</span></p><p class="gmail-x_MsoNormal" style="margin:0cm;font-size:11pt;font-family:Calibri,sans-serif;color:rgb(36,36,36)"><span lang="EN-US" style="border:0px;font:inherit;margin:0px;padding:0px;vertical-align:baseline;color:inherit">    justifyContent: props.style.justifyContent || 'center',</span></p><p class="gmail-x_MsoNormal" style="margin:0cm;font-size:11pt;font-family:Calibri,sans-serif;color:rgb(36,36,36)"><span lang="EN-US" style="border:0px;font:inherit;margin:0px;padding:0px;vertical-align:baseline;color:inherit">    alignItems: props.style.alignItems || 'center',</span></p><p class="gmail-x_MsoNormal" style="margin:0cm;font-size:11pt;font-family:Calibri,sans-serif;color:rgb(36,36,36)"><span lang="EN-US" style="border:0px;font:inherit;margin:0px;padding:0px;vertical-align:baseline;color:inherit">    borderRadius: props.style.borderRadius,</span></p><p class="gmail-x_MsoNormal" style="margin:0cm;font-size:11pt;font-family:Calibri,sans-serif;color:rgb(36,36,36)"><span lang="EN-US" style="border:0px;font:inherit;margin:0px;padding:0px;vertical-align:baseline;color:inherit">  } as ViewStyle;</span></p><p class="gmail-x_MsoNormal" style="margin:0cm;font-size:11pt;font-family:Calibri,sans-serif;color:rgb(36,36,36)"><span lang="EN-US" style="border:0px;font:inherit;margin:0px;padding:0px;vertical-align:baseline;color:inherit"> </span></p><p class="gmail-x_MsoNormal" style="margin:0cm;font-size:11pt;font-family:Calibri,sans-serif;color:rgb(36,36,36)"><span lang="EN-US" style="border:0px;font:inherit;margin:0px;padding:0px;vertical-align:baseline;color:inherit">  return (</span></p><p class="gmail-x_MsoNormal" style="margin:0cm;font-size:11pt;font-family:Calibri,sans-serif;color:rgb(36,36,36)"><span lang="EN-US" style="border:0px;font:inherit;margin:0px;padding:0px;vertical-align:baseline;color:inherit">    <View style={viewStyle}></span></p><p class="gmail-x_MsoNormal" style="margin:0cm;font-size:11pt;font-family:Calibri,sans-serif;color:rgb(36,36,36)"><span lang="EN-US" style="border:0px;font:inherit;margin:0px;padding:0px;vertical-align:baseline;color:inherit">      {svg && <SvgXml xml={svg} scaleX={props.scale} scaleY={props.scale} onError={console.warn} />}</span></p><p class="gmail-x_MsoNormal" style="margin:0cm;font-size:11pt;font-family:Calibri,sans-serif;color:rgb(36,36,36)"><span lang="EN-US" style="border:0px;font:inherit;margin:0px;padding:0px;vertical-align:baseline;color:inherit">      {loading && <ActivityIndicator size="large" color={props.loadingColor} />}</span></p><p class="gmail-x_MsoNormal" style="margin:0cm;font-size:11pt;font-family:Calibri,sans-serif;color:rgb(36,36,36)"><span lang="EN-US" style="border:0px;font:inherit;margin:0px;padding:0px;vertical-align:baseline;color:inherit">      {!loading && children}</span></p><p class="gmail-x_MsoNormal" style="margin:0cm;font-size:11pt;font-family:Calibri,sans-serif;color:rgb(36,36,36)"><span lang="EN-US" style="border:0px;font:inherit;margin:0px;padding:0px;vertical-align:baseline;color:inherit">    </View></span></p><p class="gmail-x_MsoNormal" style="margin:0cm;font-size:11pt;font-family:Calibri,sans-serif;color:rgb(36,36,36)"><span lang="EN-US" style="border:0px;font:inherit;margin:0px;padding:0px;vertical-align:baseline;color:inherit">  );</span></p><p class="gmail-x_MsoNormal" style="margin:0cm;font-size:11pt;font-family:Calibri,sans-serif;color:rgb(36,36,36)"><span lang="EN-US" style="border:0px;font:inherit;margin:0px;padding:0px;vertical-align:baseline;color:inherit">}</span></p><p class="gmail-x_MsoNormal" style="margin:0cm;font-size:11pt;font-family:Calibri,sans-serif;color:rgb(36,36,36)"><span lang="EN-US" style="border:0px;font:inherit;margin:0px;padding:0px;vertical-align:baseline;color:inherit">```</span></p><p class="gmail-x_MsoNormal" style="margin:0cm;font-size:11pt;font-family:Calibri,sans-serif;color:rgb(36,36,36)"><span lang="EN-US" style="border:0px;font:inherit;margin:0px;padding:0px;vertical-align:baseline;color:inherit">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`.</span></p><p class="gmail-x_MsoNormal" style="margin:0cm;font-size:11pt;font-family:Calibri,sans-serif;color:rgb(36,36,36)"><span lang="EN-US" style="border:0px;font:inherit;margin:0px;padding:0px;vertical-align:baseline;color:inherit">Also when I paint all `line`s to red and paint all `fill`s to green, the question mark boxes remains white or black.</span></p><p class="gmail-x_MsoNormal" style="margin:0cm;font-size:11pt;font-family:Calibri,sans-serif;color:rgb(36,36,36)"><span lang="EN-US" style="border:0px;font:inherit;margin:0px;padding:0px;vertical-align:baseline;color:inherit">Anyone ever has this issue too?</span></p><p class="gmail-x_MsoNormal" style="margin:0cm;font-size:11pt;font-family:Calibri,sans-serif;color:rgb(36,36,36)"><span lang="EN-US" style="border:0px;font:inherit;margin:0px;padding:0px;vertical-align:baseline;color:inherit"> </span></p><p class="gmail-x_MsoNormal" style="margin:0cm;font-size:11pt;font-family:Calibri,sans-serif;color:rgb(36,36,36)"><img src="cid:ii_lskhc1du0" alt="image.png" width="247" height="491"></p><p class="gmail-x_MsoNormal" style="margin:0cm;font-size:11pt;font-family:Calibri,sans-serif;color:rgb(36,36,36)"><br></p><p class="gmail-x_MsoNormal" style="margin:0cm;font-size:11pt;font-family:Calibri,sans-serif;color:rgb(36,36,36)">I hope someone knows the problem and can help with tips or solutions. <br><br>Best regards<br></p><p class="gmail-x_MsoNormal" style="margin:0cm;font-size:11pt;font-family:Calibri,sans-serif;color:rgb(36,36,36)">Uta</p></div></div>