<ul class="contains-task-list">
<li class="task-list-item"><input type="checkbox" id="" disabled="" class="task-list-item-checkbox" checked=""> I tried using the <code class="notranslate">@types/xxxx</code> package and had problems.</li>
<li class="task-list-item"><input type="checkbox" id="" disabled="" class="task-list-item-checkbox" checked=""> I tried using the latest stable version of tsc. <a href="https://www.npmjs.com/package/typescript" rel="nofollow">https://www.npmjs.com/package/typescript</a></li>
<li class="task-list-item"><input type="checkbox" id="" disabled="" class="task-list-item-checkbox" checked=""> I have a question that is inappropriate for <a href="https://stackoverflow.com/" rel="nofollow">StackOverflow</a>.  (Please ask any appropriate questions there).</li>
<li class="task-list-item"><input type="checkbox" id="" disabled="" class="task-list-item-checkbox" checked=""> <a href="https://github.com/blog/821-mention-somebody-they-re-notified">Mention</a> the authors (see <code class="notranslate">Definitions by:</code> in <code class="notranslate">index.d.ts</code>) so they can respond.
<ul dir="auto">
<li>Authors: <a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/Igorbek/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="https://github.com/Igorbek">@Igorbek</a> <a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/Igmat/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="https://github.com/Igmat">@Igmat</a> @Lavoaster</li>
</ul>
</li>
</ul>
<p dir="auto">TS v3.4.3<br>
styled-components v4.2.0<br>
@types/styled-components v4.1.9 and above</p>
<p dir="auto">In every version since v4.1.9 I get a lot of errors about <code class="notranslate">@types/react-native/global.d.ts</code> on build - I've copied a few of these below.</p>
<p dir="auto">I'm using styled-components in a React web project. From digging around I think that these conflicts are caused by react-native declaring types globally that conflict with types in node/the dom.</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="ERROR in [at-loader] ./node_modules/@types/react-native/globals.d.ts:210:5
    TS2717: Subsequent property declarations must have the same type.  Property 'onloadstart' must be of type '((this: XMLHttpRequest, ev: ProgressEvent) =&gt; any) | null', but here has type '((this: XMLHttpRequest, ev: Event) =&gt; any) | null'.

ERROR in [at-loader] ./node_modules/@types/react-native/globals.d.ts:211:5
    TS2717: Subsequent property declarations must have the same type.  Property 'onprogress' must be of type '((this: XMLHttpRequest, ev: ProgressEvent) =&gt; any) | null', but here has type '((this: XMLHttpRequest, ev: Event) =&gt; any) | null'.

ERROR in [at-loader] ./node_modules/@types/react-native/globals.d.ts:212:5
    TS2717: Subsequent property declarations must have the same type.  Property 'ontimeout' must be of type '((this: XMLHttpRequest, ev: ProgressEvent) =&gt; any) | null', but here has type '((this: XMLHttpRequest, ev: Event) =&gt; any) | null'.

ERROR in [at-loader] ./node_modules/@types/react-native/globals.d.ts:243:6
    TS2300: Duplicate identifier 'XMLHttpRequestResponseType'.

ERROR in [at-loader] ./node_modules/@types/react-native/index.d.ts:9542:18
    TS2717: Subsequent property declarations must have the same type.  Property 'geolocation' must be of type 'Geolocation', but here has type 'GeolocationStatic'.

ERROR in [at-loader] ./node_modules/@types/react-native/index.d.ts:9545:11
    TS2451: Cannot redeclare block-scoped variable 'navigator'."><pre class="notranslate"><code class="notranslate">ERROR in [at-loader] ./node_modules/@types/react-native/globals.d.ts:210:5
    TS2717: Subsequent property declarations must have the same type.  Property 'onloadstart' must be of type '((this: XMLHttpRequest, ev: ProgressEvent) =&gt; any) | null', but here has type '((this: XMLHttpRequest, ev: Event) =&gt; any) | null'.

ERROR in [at-loader] ./node_modules/@types/react-native/globals.d.ts:211:5
    TS2717: Subsequent property declarations must have the same type.  Property 'onprogress' must be of type '((this: XMLHttpRequest, ev: ProgressEvent) =&gt; any) | null', but here has type '((this: XMLHttpRequest, ev: Event) =&gt; any) | null'.

ERROR in [at-loader] ./node_modules/@types/react-native/globals.d.ts:212:5
    TS2717: Subsequent property declarations must have the same type.  Property 'ontimeout' must be of type '((this: XMLHttpRequest, ev: ProgressEvent) =&gt; any) | null', but here has type '((this: XMLHttpRequest, ev: Event) =&gt; any) | null'.

ERROR in [at-loader] ./node_modules/@types/react-native/globals.d.ts:243:6
    TS2300: Duplicate identifier 'XMLHttpRequestResponseType'.

ERROR in [at-loader] ./node_modules/@types/react-native/index.d.ts:9542:18
    TS2717: Subsequent property declarations must have the same type.  Property 'geolocation' must be of type 'Geolocation', but here has type 'GeolocationStatic'.

ERROR in [at-loader] ./node_modules/@types/react-native/index.d.ts:9545:11
    TS2451: Cannot redeclare block-scoped variable 'navigator'.
</code></pre></div>
<p dir="auto">With version 4.1.8 of @types/styled-components, I don't get these errors.</p>
<p dir="auto">I noticed from 4.1.8 -&gt; 4.1.9 package.json incuded <code class="notranslate">@types/react-native</code> in dependencies and this is very likely related, I'd assume.</p>
<p dir="auto">v4.1.8</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content=" &quot;dependencies&quot;: {
    &quot;@types/node&quot;: &quot;*&quot;,
    &quot;@types/react&quot;: &quot;*&quot;,
    &quot;csstype&quot;: &quot;^2.2.0&quot;
  },"><pre class="notranslate"><code class="notranslate"> "dependencies": {
    "@types/node": "*",
    "@types/react": "*",
    "csstype": "^2.2.0"
  },
</code></pre></div>
<p dir="auto">v4.1.9</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="&quot;dependencies&quot;: {
    &quot;@types/react&quot;: &quot;*&quot;,
    &quot;@types/react-native&quot;: &quot;*&quot;,
    &quot;csstype&quot;: &quot;^2.2.0&quot;
},"><pre class="notranslate"><code class="notranslate">"dependencies": {
    "@types/react": "*",
    "@types/react-native": "*",
    "csstype": "^2.2.0"
},
</code></pre></div>
<p dir="auto">I guess I'm fine just sticking on 4.1.8 but just curious as to what the cause of this is? Do I need to change my own typescript config in some way to tell it not to include transitive dependencies on react-native?</p>
<p dir="auto">TLDR;: This issue is intended to raise a discussion regarding possible reorganisation of the React Native type definitions.</p>
<p dir="auto">All the following is mainly written for <a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/alloy/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="https://github.com/alloy">@alloy</a>, however it's open for all for the discussion.</p>
<h3 dir="auto">Intro</h3>
<p dir="auto">After spending some time contributing to the React Native definitions I found myself thinking about following big changes that might benefit them. If we can come up to the agreement regarding some of this suggestions we can then split work into chunks and do it together. In other words let's introduce it as small PRs (one component at a time) rather then one huge.</p>
<h3 dir="auto">Remove docs comments</h3>
<p dir="auto">Currently most of the properties/functions definitions are accompanied with docs. As we know comments <a href="https://github.com/DefinitelyTyped/DefinitelyTyped/blob/354cec620daccfa0ad167ba046651fb5fef69e8a/types/react-native/index.d.ts#L3367">always get stale</a>. And even though it might be useful to give a person nice description of what property is about on hover, it would be better to not show description at all then show the wrong one.</p>
<p dir="auto">Since this repository is a peer effort on types it's harder to keep track if docs has changed or not especially when the release schedule for the library is every month. If for code people come to change something because it doesn't work anymore, I guess nobody or almost nobody comes here to change docs.</p>
<p dir="auto">As for my experience I always check official docs to make sure that I will get up to date correct information, which makes comments in the definitions even more useless.</p>
<h3 dir="auto">Remove platform specific properties</h3>
<p dir="auto">Currently there are <a href="https://github.com/DefinitelyTyped/DefinitelyTyped/blob/354cec620daccfa0ad167ba046651fb5fef69e8a/types/react-native/index.d.ts#L3230">platform</a> <a href="https://github.com/DefinitelyTyped/DefinitelyTyped/blob/354cec620daccfa0ad167ba046651fb5fef69e8a/types/react-native/index.d.ts#L3274">specific</a> properties defined for each component which then got merged together with <a href="https://github.com/DefinitelyTyped/DefinitelyTyped/blob/354cec620daccfa0ad167ba046651fb5fef69e8a/types/react-native/index.d.ts#L3294">"common"</a> properties using extension mechanism.</p>
<p dir="auto">First of all sometimes it seems to be impossible to split type definitions. For example for <a href="https://facebook.github.io/react-native/docs/image.html#resizemode" rel="nofollow">union types</a>. It means that we either duplicate definitions for iOS with all described alternatives or <a href="https://github.com/DefinitelyTyped/DefinitelyTyped/blob/354cec620daccfa0ad167ba046651fb5fef69e8a/types/react-native/index.d.ts#L3341">put them under "common" properties</a>. In first case it may lead to errors when type is updated in one place, but not updated in another. In second case it means that we can't clearly separate platform specific definitions.</p>
<p dir="auto">Also sometimes React Native adds support for both platforms, so some property should be moved form platform specific type to "common" type. But since everything work even without it, most of the time it doesn't happen.</p>
<p dir="auto">I might be wrong, but I see no explicit value for consumers of type definitions in having platform specific properties types. Am I missing something?</p>
<h3 dir="auto">Rearrange fields in properties in accordance to docs</h3>
<p dir="auto">It would be much easier to update types for components if order of fields in will follow React Native official documentation. There is no way to enforce it, but we can at least make it so. And I guess it would quite easy for future contributors to spot this pattern and follow it.</p>