Add Pressable to the list of supported react-native components (emoti…

…on-js#1958) * add Pressable component to native types * add new Pressable component to @emotion/native * Remove ReactNativeComponentNames and simplify typings in the result Co-authored-by: Mateusz Burzyński <mateuszburzynski@gmail.com>
louisgv · Aug 9, 2020 · 5695f76 · 5695f76
1 parent fa273c0
commit 5695f76
Show file tree

Hide file tree

Showing 3 changed files with 66 additions and 54 deletions.
diff --git a/packages/native/src/index.js b/packages/native/src/index.js
@@ -19,6 +19,7 @@ const components = [
   'NavigatorIOS',
   'Picker',
   'PickerIOS',
+  'Pressable',
   'ProgressBarAndroid',
   'ProgressViewIOS',
   'RecyclerViewBackedScrollView',

diff --git a/packages/native/types/base.d.ts b/packages/native/types/base.d.ts
@@ -8,51 +8,6 @@ type ReactNative = typeof RN
 
 export type ReactNativeStyle = RN.ViewStyle | RN.TextStyle | RN.ImageStyle
 
-export type ReactNativeComponentNames =
-  | 'ActivityIndicator'
-  | 'Button'
-  | 'DatePickerIOS'
-  | 'DrawerLayoutAndroid'
-  | 'FlatList'
-  | 'Image'
-  | 'ImageBackground'
-  | 'KeyboardAvoidingView'
-  | 'ListView'
-  | 'Modal'
-  | 'NavigatorIOS'
-  | 'Picker'
-  | 'PickerIOS'
-  | 'ProgressBarAndroid'
-  | 'ProgressViewIOS'
-  | 'RecyclerViewBackedScrollView'
-  | 'RefreshControl'
-  | 'SafeAreaView'
-  | 'ScrollView'
-  | 'SectionList'
-  | 'SegmentedControlIOS'
-  | 'Slider'
-  | 'SnapshotViewIOS'
-  | 'StatusBar'
-  | 'SwipeableListView'
-  | 'Switch'
-  | 'SwitchIOS'
-  | 'TabBarIOS'
-  | 'Text'
-  | 'TextInput'
-  | 'ToolbarAndroid'
-  | 'TouchableHighlight'
-  | 'TouchableNativeFeedback'
-  | 'TouchableOpacity'
-  | 'TouchableWithoutFeedback'
-  | 'View'
-  | 'ViewPagerAndroid'
-
-export type ReactNativeComponents = Pick<ReactNative, ReactNativeComponentNames>
-
-export type ReactNativeComponentProps<
-  ComponentName extends ReactNativeComponentNames
-> = React.ComponentProps<ReactNativeComponents[ComponentName]>
-
 export type ReactNativeStyleType<Props> = Props extends {
   style?: RN.StyleProp<infer StyleType>
 }

diff --git a/packages/native/types/index.d.ts b/packages/native/types/index.d.ts
@@ -1,6 +1,7 @@
 // Definitions by: Pat Sissons <https://github.com/patsissons>
 // TypeScript Version: 3.4
 
+import * as RN from 'react-native'
 import { Theme } from '@emotion/react'
 
 import {
@@ -9,9 +10,6 @@ import {
   CSSInterpolation,
   Interpolation,
   ReactNativeStyle,
-  ReactNativeComponentNames,
-  ReactNativeComponentProps,
-  ReactNativeComponents,
   ReactNativeStyleType
 } from './base'
 
@@ -29,6 +27,8 @@ export {
   StyledOptions
 } from './base'
 
+type ReactNative = typeof RN
+
 export function css<StyleType extends ReactNativeStyle = ReactNativeStyle>(
   template: TemplateStringsArray,
   ...args: Array<Interpolation>
@@ -40,13 +40,69 @@ export function css<StyleType extends ReactNativeStyle = ReactNativeStyle>(
   ...args: Array<CSSInterpolation>
 ): StyleType
 
-export type StyledComponents = {
-  [ComponentName in ReactNativeComponentNames]: CreateStyledComponent<
-    ReactNativeComponentProps<ComponentName> & { theme?: Theme },
-    {},
-    { ref?: React.Ref<InstanceType<ReactNativeComponents[ComponentName]>> },
-    ReactNativeStyleType<ReactNativeComponentProps<ComponentName>>
+// those 2 are just copies of the `BaseCreateStyled` with supplied `C` type argument
+type HostClassComponent<
+  C extends React.ComponentClass<any>
+> = CreateStyledComponent<
+  React.ComponentProps<C> & { theme?: Theme },
+  {},
+  { ref?: React.Ref<InstanceType<C>> },
+  ReactNativeStyleType<React.ComponentProps<C>>
+>
+type HostFunctionComponent<
+  C extends React.FunctionComponent<any>
+> = CreateStyledComponent<
+  React.ComponentProps<C> & { theme?: Theme },
+  {},
+  {},
+  ReactNativeStyleType<React.ComponentProps<C>>
+>
+
+export interface StyledComponents {
+  ActivityIndicator: HostClassComponent<ReactNative['ActivityIndicator']>
+  Button: HostClassComponent<ReactNative['Button']>
+  DatePickerIOS: HostClassComponent<ReactNative['DatePickerIOS']>
+  DrawerLayoutAndroid: HostClassComponent<ReactNative['DrawerLayoutAndroid']>
+  FlatList: HostClassComponent<ReactNative['FlatList']>
+  Image: HostClassComponent<ReactNative['Image']>
+  ImageBackground: HostClassComponent<ReactNative['ImageBackground']>
+  KeyboardAvoidingView: HostClassComponent<ReactNative['KeyboardAvoidingView']>
+  ListView: HostClassComponent<ReactNative['ListView']>
+  Modal: HostClassComponent<ReactNative['Modal']>
+  NavigatorIOS: HostClassComponent<ReactNative['NavigatorIOS']>
+  Picker: HostClassComponent<ReactNative['Picker']>
+  PickerIOS: HostClassComponent<ReactNative['PickerIOS']>
+  Pressable: HostFunctionComponent<ReactNative['Pressable']>
+  ProgressBarAndroid: HostClassComponent<ReactNative['ProgressBarAndroid']>
+  ProgressViewIOS: HostClassComponent<ReactNative['ProgressViewIOS']>
+  RecyclerViewBackedScrollView: HostClassComponent<
+    ReactNative['RecyclerViewBackedScrollView']
+  >
+  RefreshControl: HostClassComponent<ReactNative['RefreshControl']>
+  SafeAreaView: HostClassComponent<ReactNative['SafeAreaView']>
+  ScrollView: HostClassComponent<ReactNative['ScrollView']>
+  SectionList: HostClassComponent<ReactNative['SectionList']>
+  SegmentedControlIOS: HostClassComponent<ReactNative['SegmentedControlIOS']>
+  Slider: HostClassComponent<ReactNative['Slider']>
+  SnapshotViewIOS: HostClassComponent<ReactNative['SnapshotViewIOS']>
+  StatusBar: HostClassComponent<ReactNative['StatusBar']>
+  SwipeableListView: HostClassComponent<ReactNative['SwipeableListView']>
+  Switch: HostClassComponent<ReactNative['Switch']>
+  SwitchIOS: HostClassComponent<ReactNative['SwitchIOS']>
+  TabBarIOS: HostClassComponent<ReactNative['TabBarIOS']>
+  Text: HostClassComponent<ReactNative['Text']>
+  TextInput: HostClassComponent<ReactNative['TextInput']>
+  ToolbarAndroid: HostClassComponent<ReactNative['ToolbarAndroid']>
+  TouchableHighlight: HostClassComponent<ReactNative['TouchableHighlight']>
+  TouchableNativeFeedback: HostClassComponent<
+    ReactNative['TouchableNativeFeedback']
+  >
+  TouchableOpacity: HostClassComponent<ReactNative['TouchableOpacity']>
+  TouchableWithoutFeedback: HostClassComponent<
+    ReactNative['TouchableWithoutFeedback']
   >
+  View: HostClassComponent<ReactNative['View']>
+  ViewPagerAndroid: HostClassComponent<ReactNative['ViewPagerAndroid']>
 }
 
 export interface CreateStyled extends BaseCreateStyled, StyledComponents {}