Closed jaredpalmer closed 6 years ago
I'm not familiar with TypeScript but probably don't want to maintain types for it (as RN doesn't either). Is this something that can be added to @types/react-native
?
Adding that script to automatically run on react-native-web
post install is not that good idea. It could easily break things if things change in @types/react-native
.
@jaredpalmer Why don't you just create a repository that has the script and instructions on how to use it? There could be a mention about the script in react-native-web
docs. That way anyone who needs it can add it to their project.
@kristerkari I think that is the best way forward. Imho the script is about as fragile as the typings themselves, but I get your point.
Happy to include something in the docs as a start
@jaredpalmer this looks great! Any chance you will publish this?
I’ve updated this a little since posting. There are significant differences related to strings vs. numbers in the types. Will try to publish soon
@jaredpalmer that's great to hear.
One type annotation that I noticed was missing is the one for the function AppRegistry.getApplication
.
Yeah it’s incomplete for sure.
@jaredpalmer I was wondering. If we had a @types/react-native-web
package maybe we could find a way to alias @types/react-native
to that? I mean the same way webpack aliases react-native as react-native-web.
@teebot yeah it is possible to do this in package.json
:
"@types/react-native": "mygithubusername/myrepo",
I'm a newbie at TypeScript so this may sound stupid, but: would it be possibile to have @types/react-native-web
"globally" extend @types/react-native
and only add the stuff that is missing?
We can add something to the docs once y'all figure this out. Thanks :)
I'm currently creating a @types/react-native-web
alias to @types/react-native
using a yarn/npm hack :
yarn add -D @types/react-native-web@npm:@types/react-native
npm :
npm i -D @types/react-native-web@npm:@types/react-native
Not the best way, but it works(-ish).
If anyone else finds this thread, I made a boilerplate for react-native-web with typescript: https://github.com/ethanneff/react-native-web-typescript
@ethanneff Thank you! Works like a charm :)
Thank you @ethanneff will give it a try. In the mean time, does ‘react-native-web’ team recommend any particular type system?
@types/react-native-web
does not exists. @ethanneff does not solve the problem with React Native Web custom types.
Because there are no TypeScript types for React Native Web, my workaround is wrappers with types added as we go.
import React from 'react';
import { Text, TextProps } from 'react-native';
// Add React Native Web custom props.
type AppTextProps = TextProps & {
accessibilityRole: 'link';
onMouseEnter: () => void;
onMouseLeave: () => void;
};
const AppText: React.FunctionComponent<AppTextProps> = props => {
return <Text {...props} />;
};
export default AppText;
Hmm, but that's not correct for universal components. This is the better and spread operator is not type checked. It's an interesting thing to think by the way. How to properly type different platforms? I believe it should be possible with TypeScript conditional types. Aka, accessibilityRole: 'link' only in web platform etc. Meanwhile, I use this:
<Text
{...Platform.select({
web: {
accessibilityRole: 'link',
onMouseEnter: () => setIsActive(true),
onMouseLeave: () => setIsActive(false),
},
})}
style={[
style || theme.link,
(isActive || routeIsActive()) && (activeStyle || theme.linkActive),
]}
>
{children}
</Text>
Also looking for a decent option for using RNW with TS
@steida Instead of wrapping in new FC, why not just playing with types and adding the link?
type TextProps = React.ComponentProps<typeof Text>
type WebTextProps = TextProps & {
href?: string
}
const FixedText = Text as ComponentType<WebTextProps>
Any updates on typescript support for RNW or is aliasing still the way for types?
What's the current supported solution to use Create React App with TypeScript and React Native for Web? I just went to start a new project and realized it doesn't work out of the box.
My team has been using react-native-web and ended up creating a repo with the type conversions from Flow to TypeScript. We haven't completed translations for all of the types just yet but have covered most of the highly used UI components. Hopefully, this helps!
I successfully added TS support to React Native Web with a single file. Declaration merging handles this for you.
You can see my solution here: https://github.com/necolas/react-native-web/issues/1684#issuecomment-766451866
@nandorojo Can you share the file If possible? I'd love to contribute with recent 0.15 accessibility changes in RN Web. Also, I need it for one of my projects.
I don't have a fully-made file yet unfortunately, I've just been going prop-by-prop as shown in my linked comment. It would be awesome to have this, though.
Cool, no worries. Looks like a bit of work for one person 😅. Should we have a temp repo for this, till we figure out something? A single file will make it painful to update though.
I successfully added TS support to React Native Web with a single file.
@nandorojo, would you be keen to share your d.ts
file that uses declaration merging. There's still nothing on @types/react-native-web and I don't want to have to augment all the interfaces by hand if folks in the community have done this already. Thanks in advance!
Edit: this seems to have some level of type coverage, but it's not using the approach you mentioned and I'm a bit skeptical that it's up to date with RNW.
here you go:
// react-native-web/overrides.ts
declare module 'react-native' {
interface PressableStateCallbackType {
hovered?: boolean
focused?: boolean
}
interface ViewStyle {
transitionProperty?: string
transitionDuration?: string
}
interface TextProps {
accessibilityComponentType?: never
accessibilityTraits?: never
href?: string
hrefAttrs?: {
rel: 'noreferrer'
target?: '_blank'
}
}
interface ViewProps {
accessibilityRole?: string
href?: string
hrefAttrs?: {
rel: 'noreferrer'
target?: '_blank'
}
onClick?: (e: React.MouseEvent<HTMLAnchorElement, MouseEvent>) => void
}
}
Thanks @nandorojo for getting me started here! I added a bunch more types that are relevant to my codebase, in case anyone else finds these helpful, I've dropped it into a Gist here: https://gist.github.com/sstur/9693aa41e95078c8c6bcf3d8f1216872
@nandorojo looks like 'ViewStyle' needs a cursor prop ;-) https://github.com/necolas/react-native-web/issues/1847#issuecomment-1066233154 Nice solution on the overrides types file, would be excellent to see it mainlined here
@sstur I do not see an import 'react-native'
in your overrides, how do you combine the base types and your overrides?
I don't remember, I think it just works without that.
AppRegistry.getApplication
still missing
here you go:
// react-native-web/overrides.ts declare module 'react-native' { interface PressableStateCallbackType { hovered?: boolean focused?: boolean } interface ViewStyle { transitionProperty?: string transitionDuration?: string } interface TextProps { accessibilityComponentType?: never accessibilityTraits?: never href?: string hrefAttrs?: { rel: 'noreferrer' target?: '_blank' } } interface ViewProps { accessibilityRole?: string href?: string hrefAttrs?: { rel: 'noreferrer' target?: '_blank' } onClick?: (e: React.MouseEvent<HTMLAnchorElement, MouseEvent>) => void } }
do we still need to do this?
Happy to include something in the docs as a start
We can add something to the docs once y'all figure this out. Thanks :)
Types for react-native-web are now available on DefinitelyTyped.
@necolas Are you still open to the idea of making a mention in the docs?
Yeah sounds good. Thanks!
For those that are interested, this is how I am monkey patching
@types/react-native
to work with React Native Web. This postinstall script fixes the react-native / node conflict and adds my RN-Web -specific types to@types/react-native
without augmenting any of the core@types/react-native
typings. This is because TS will effectively combine interface declarations with the same name. My typings are as of 0.4.0, but should work with 0.5.0. The only thing that is a little hand-wavy is thatTextStyle
has aresize?: string
that only actually applies toTextInput
. This is documented in the comments and should thus show up in VSCode autocomplete. Hope this helps anyone else.@necolas lmk if you'd be willing to accept a PR for either docs and/or for the typings. Could be nice to add a
react-native-web/ts-setup.js
that runs the script below.