example with Typescript?

[readthaiapp]

Thanks for this Library, I'm using it in 3 different project ;) works quite well.

I decided to start with typescript for my new project, but I've no idea how to use it with this Library ... :<

Here is an example with ScaledSheet :

const styles = ScaledSheet.create({
  iconButtonFab: { color: colors.white, fontSize: "22@ms" },
});

What type should be styles ?
Thanks

[Nir Hadassi]

Hey @readthaiapp, glad you enjoy the lib!
The type returned is the same type returned from react-native StyleSheet.create.
You can check it out on the index.d.ts file.

But since the type is already declared there I wouldn't bother stating it again on the styles declaration, it's already inferred from the index.d.ts file.

[readthaiapp]

Hey thanks for answering.
That's maybe the problem then (I mean, it use the same as Stylesheet) ?

Normally, you cannot set a string to "fontSize" for example. (margin neither etc etc)

[Nir Hadassi]

I see what you're saying, but it shouldn't affect the type returned from the create function.
Are you getting any specific errors from TS?

[readthaiapp]

Oh yeah no, I don't get any issue from the return.

I get issues with the object that I pass to the create function.

Here is the text:

Argument of type '{ moreText: { fontSize: string; fontFamily: string; }; }' is not assignable to parameter of type 'NamedStyles<{ moreText: { fontSize: string; fontFamily: string; }; }>'.
  Types of property 'moreText' are incompatible.
    Type '{ fontSize: string; fontFamily: string; }' is not assignable to type 'ViewStyle | TextStyle | ImageStyle'.
      Type '{ fontSize: string; fontFamily: string; }' has no properties in common with type 'ImageStyle'.
(property) moreText: {
    fontSize: string;
    fontFamily: string;
}

[Nir Hadassi]

I'm unable to reproduce locally. Can you please attach your tsconfig? I'll try to check if it helps me to reproduce.

[readthaiapp]

aw :< Thanks for your help ;)

Here is my tsconfig

{
  "compilerOptions": {
    "allowSyntheticDefaultImports": true,
    "experimentalDecorators": true,
    "forceConsistentCasingInFileNames": true,
    "importHelpers": true,
    "jsx": "react-native",
    "lib": ["dom", "es2015", "es2016", "es2017"],
    "module": "es2015",
    "moduleResolution": "node",
    "noEmitHelpers": true,
    "noImplicitReturns": true,
    "noUnusedLocals": true,
    "outDir": "build/dist",
    "sourceMap": true,
    "strict": true,
    "target": "es2017"
  },
  "exclude": ["build", "node_modules"],
  "types": ["typePatches"]
}

[Nir Hadassi]

Cool, I was able to reproduce :)
I'll publish a fix soon, hopefully today.

[readthaiapp]

wow great thanks ;)

[Nir Hadassi]

Fixed on PR #20.
Published with version 0.1.4.
Please let me know if this solved your issue.

[readthaiapp]

Hey thanks,

I went through all my components and everything works ;) (wow it's nice to see all green ^^).