diff --git a/types/styled-components/test/native.tsx b/types/styled-components/test/native.tsx index 66b0f975ce..da2ba83390 100644 --- a/types/styled-components/test/native.tsx +++ b/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 = ; + +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 ( + + <> + + + + + {theme => { + // $ExpectType string + theme.color; + return theme.color; + }} + + + + ); +} + +async function reexportCompatibility() { + const sc = await import("styled-components/native"); + const themed = sc as ReactNativeThemedStyledComponentsModule; + + 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} // $ExpectError + > + {() => null} + + ({ + ...base, + accent: "blue" + })} + > + {() => null} + + + + ); +}