Adds tests for ReactNativeThemedStyledComponentsModule

types/styled-components/test/native.tsx

@@ -9,6 +9,7 @@ import styled, {
     ThemeProvider,
     withTheme,
     ThemeConsumer,
+    ReactNativeThemedStyledComponentsModule,
 } from "styled-components/native";
 import {} from "styled-components/cssprop";
 
@@ -57,3 +58,141 @@ const TomatoButton = styled(MyButton)`
 
 // needs name prop, but not theme prop
 const tomatoElement = <TomatoButton name="needed" />;
+
+async function typedThemes() {
+  const theme = {
+      color: "green"
+  };
+
+  // abuse "await import(...)" to be able to reference the styled-components namespace
+  // without actually doing a top level namespace import
+  const {
+      default: styled,
+      css,
+      ThemeProvider,
+      ThemeConsumer
+  } = (await import("styled-components/native")) as any as ReactNativeThemedStyledComponentsModule<
+      typeof theme
+  >;
+
+  const ThemedView = styled.View`
+      background: ${props => {
+          // $ExpectType string
+          props.theme.color;
+          // $ExpectType string | undefined
+          props.testID;
+          return props.theme.color;
+      }};
+  `;
+  const ThemedView2 = styled.View(props => {
+    // $ExpectType string
+    props.theme.color;
+    // $ExpectType string | undefined
+    props.testID;
+
+    return {
+        background: props.theme.color
+    };
+  });
+  const ThemedView3 = styled.View(props => {
+    // $ExpectType string
+    props.theme.color;
+    // $ExpectType string | undefined
+    props.testID;
+
+    return css`
+        background: ${props.theme.color};
+    `;
+});
+const themedCss = css`
+    background: ${props => {
+        // $ExpectType string
+        props.theme.color;
+        // $ExpectType "theme"
+        type Keys = keyof typeof props;
+        return props.theme.color;
+    }};
+`;
+//  can't use a FlattenInterpolation as the first argument, would make broken css
+// $ExpectError
+const ThemedView4 = styled.View(themedCss);
+
+const themedCssWithNesting = css(props => ({
+    color: props.theme.color,
+    [ThemedView3]: {
+        color: "green"
+    }
+}));
+
+return (
+    <ThemeProvider theme={theme}>
+        <>
+            <ThemedView />
+            <ThemedView2 />
+            <ThemedView3 />
+            <ThemeConsumer>
+                {theme => {
+                    // $ExpectType string
+                    theme.color;
+                    return theme.color;
+                }}
+            </ThemeConsumer>
+        </>
+    </ThemeProvider>
+  );
+}
+
+async function reexportCompatibility() {
+  const sc = await import("styled-components/native");
+  const themed = sc as ReactNativeThemedStyledComponentsModule<any>;
+
+  let { ...scExports } = sc;
+  let { ...themedExports } = themed;
+  // both branches must be assignable to each other
+  if (Math.random()) {
+      scExports = themedExports;
+  } else {
+      themedExports = scExports;
+  }
+}
+
+async function themeAugmentation() {
+  interface BaseTheme {
+      background: string;
+  }
+  interface ExtraTheme extends BaseTheme {
+      accent: string;
+  }
+
+  const base = (await import("styled-components/native")) as any as ReactNativeThemedStyledComponentsModule<
+      BaseTheme
+  >;
+  const extra = (await import("styled-components/native")) as any as ReactNativeThemedStyledComponentsModule<
+      ExtraTheme,
+      BaseTheme
+  >;
+
+  return (
+      <base.ThemeProvider
+          theme={{
+              background: "black"
+          }}
+      >
+          <>
+              <extra.ThemeProvider
+                  theme={base => base} // $ExpectError
+              >
+                  <extra.ThemeConsumer>{() => null}</extra.ThemeConsumer>
+              </extra.ThemeProvider>
+              <extra.ThemeProvider
+                  theme={base => ({
+                      ...base,
+                      accent: "blue"
+                  })}
+              >
+                  <extra.ThemeConsumer>{() => null}</extra.ThemeConsumer>
+              </extra.ThemeProvider>
+          </>
+      </base.ThemeProvider>
+  );
+}