Missing type exports since v12.4.1

[leethree]

Bug

A few type exports are missing since v12.4.1. I think the exported types shouldn't change as it's a patch release.

Unexpected behavior

import {
  Svg,
  Defs,
  Rect,
  LinearGradient,
  Stop,
  StopProps,
  NumberProp,
} from 'react-native-svg';

NumberProp no longer exists from the exports.

import { TSpanProps, TextAnchor, AlignmentBaseline } from 'react-native-svg'

TextAnchor and AlignmentBaseline are also missing.

Environment info

React native info output:

System:
    OS: macOS 12.5
    CPU: (12) x64 Intel(R) Core(TM) i7-8750H CPU @ 2.20GHz
    Memory: 31.29 MB / 16.00 GB
    Shell: 5.8.1 - /bin/zsh
  Binaries:
    Node: 14.17.6 - /var/folders/72/hzvg960s14db828r10szzy180000gn/T/yarn--1658916962021-0.8512067571991415/node
    Yarn: 1.22.19 - /var/folders/72/hzvg960s14db828r10szzy180000gn/T/yarn--1658916962021-0.8512067571991415/yarn
    npm: 6.14.17 - ~/.nvm/versions/node/v14.17.6/bin/npm
    Watchman: 2022.07.04.00 - /usr/local/bin/watchman
  Managers:
    CocoaPods: Not Found
  SDKs:
    iOS SDK:
      Platforms: DriverKit 21.4, iOS 15.5, macOS 12.3, tvOS 15.4, watchOS 8.5
    Android SDK:
      API Levels: 29, 30, 31
      Build Tools: 30.0.2, 30.0.3, 31.0.0, 33.0.0
      System Images: android-30 | Google APIs Intel x86 Atom
      Android NDK: Not Found
  IDEs:
    Android Studio: 2021.2 AI-212.5712.43.2112.8609683
    Xcode: 13.4.1/13F100 - /usr/bin/xcodebuild
  Languages:
    Java: 11.0.16 - /usr/bin/javac
  npmPackages:
    @react-native-community/cli: Not Found
    react: 17.0.2 => 17.0.2 
    react-native: 0.68.2 => 0.68.2 
    react-native-macos: Not Found
  npmGlobalPackages:
    *react-native*: Not Found

Library version: 12.4.3

Steps To Reproduce

Try import NumberProp and you'll see typescript error:

error TS2614: Module '"react-native-svg"' has no exported member 'NumberProp'. Did you mean to use 'import NumberProp from "react-native-svg"' instead?

[JoseLion]

I'm still having this issue on v12.4.3. It seems that the missing types are also affecting other type inferences. For example, if I try to create an animated component of Circle the resulting component props are not inferred from ComponentType<CircleProps>, instead it only uses typeof Circle.

const AnimatedCircle = Animated.createAnimatedComponent(Circle);
//    ^ type: Animated.AnimatedComponent<typeof Circle>

<AnimatedCircle r={10} cx={0} cy={0} />
//              ^ error: all props are unknow

[shanedaugherty]

SvgProps also missing

[ginnymin]

When trying to bump to 12.4.3 I started getting type errors for transform, using it like transform={[{ rotate: '180deg' }]}. When I tried changing it to the newly requested types to remove the typescript errors, none of the rotations worked anymore, so I decided to hold off on bumping the version. I wonder if this is related?

[Dewsk]

TransformObject export also seems to have moved. We're now needing to import it via:

import { TransformObject } from 'react-native-svg/src/lib/extract/types';

rather than directly from 'react-native-svg'.

[WoLewicki]

@ginnymin could you post a reproduction that shows the regression of transform prop? Problems mentioned here should be solved by https://github.com/react-native-svg/react-native-svg/pull/1829 since we now export the types that were available before.

[WoLewicki]

@ginnymin the problem you mentioned might be caused by this line: https://github.com/react-native-svg/react-native-svg/blob/6d1110b9c06742ebdcf09d0e16b9921a22735777/src/lib/extract/types.ts#L209 and I am not sure how to fix this correctly. Reproduction would help with this for sure.

[ginnymin]

@WoLewicki I ended up working around the TS issue by appending the transform to styles instead. I'll see if the original issue is still happening after I try the recent release. I was basically just using the transform prop on an SvgXml implementation. If I tried using the new transform types, the TS error went away but the transform wouldn't be rendered (I specifically was just doing a rotation)

[WoLewicki]

@ginnymin It would be best to have a reproduction of this so it is easy to spot the exact problem.

[joshuaobrien]

I'm experiencing this. I'm using the moduleSuffixes tsconfig compiler option. I think it's due to differences in type exports between ReactNativeSVG.ts and ReactNativeSVG.web.ts