Generic Family fonts ignored on iOS

Description

On iOS, when providing the generic-family 'serif' for a font, the system default san-serif font San Francisco is used instead. This generic-family font works on Android and web projects using react-native-svg.

This can be reproduced using https://snack.expo.dev/.

From the CSS Fonts Module Level 3 (https://www.w3.org/TR/2018/REC-css-fonts-3-20180920/)

generic-family
The following generic family keywords are defined: ‘serif’, ‘sans-serif’, ‘cursive’, ‘fantasy’, and ‘monospace’. These keywords can be used as a general fallback mechanism when an author's desired font choices are not available. As keywords, they must not be quoted. Authors are encouraged to append a generic font family as a last alternative for improved robustness.

Here is a screenshot from expo snack using an iOS emulator. Notice the first svg is showing the system default sans-serif font (San Francisco for iOS). Notice the second svg should be showing the generic system selection for a serif font (typically Georgia on iOS). However, instead it is showing the system default font instead.

Steps to reproduce

1. Add the script below as an Expo Snack
2. Launch the script on an iOS emulator.
3. Note the first svg shows the default system font, which is a sans-serif font.
4. Note the second svg should show a serif font (typically Georgia on iOS), however instead is shows the system default sans-serif font

import { View } from 'react-native'
import { Svg, Text } from 'react-native-svg'

export default function App() {
  return (
    <View style={{ paddingTop: 60, paddingHorizontal: 60, gap: 16 }}>

      {/* Demonstrate the system default font (San Francisco on iOS) */}
      <Svg height="60"><Text y="40" fontSize={33}>System Font: The quick brown fox</Text></Svg>

      {/* Demonstrate the generic font serif resolves to the system font (a non-serifed font)*/}
      <Svg height="60">
        <Text y="40" fontFamily="serif" fontSize={33}>Should be a font with serifs: The quick brown fox</Text>
      </Svg>

    </View>
  )
}

{
  "dependencies": {
    "react-native-paper": "4.9.2",
    "@expo/vector-icons": "^15.0.3",
    "react-native-svg": "15.12.1"
  }
}

Snack or a link to a repository

https://snack.expo.dev/@brett208/react-native-svg-generic-font-bug

SVG version

15.12.1

React Native version

4.9.2

Platforms

iOS

JavaScript runtime

None

Workflow

None

Architecture

Paper (Old Architecture)

Build type

None

Device

iOS simulator

Device model

I haven't tested on actual hardware

Acknowledgements

Yes

Run the linked Expo Snack on an iOS simulator and compare the default font with fontFamily="serif". Trace how react-native-svg handles fontFamily on iOS, then verify that the generic serif family resolves to a serif system font rather than San Francisco and add regression coverage if the existing test structure provides a suitable place.