5

ThemeProvider from react-native-elements in not allowing childrens.

Here is the code :

const Root = () => {
  const {theme, isNewUser} = Settings.useContainer();
  const darkMode = useMemo(() => theme === 'dark', [theme]);
  return (
    <ThemeProvider theme={darkMode ? darkTheme : lightTheme} useDark={darkMode}>
      {isNewUser ? <OnboardingStack /> : <BottomTab />}
    </ThemeProvider>
  );
};

ThemeProvider is having red underline, on hover it is saying

Type '{ children: Element; theme: RCTheme; useDark: boolean; }' is not assignable to type 'IntrinsicAttributes & IntrinsicClassAttributes<ThemeProvider> & Pick<Readonly<ThemeProviderProps>, never> & InexactPartial<...> & InexactPartial<...>'.
  Property 'children' does not exist on type 'IntrinsicAttributes & IntrinsicClassAttributes<ThemeProvider> & Pick<Readonly<ThemeProviderProps>, never> & InexactPartial<...> & InexactPartial<...>'.ts(2322)

enter image description here

Aman Jat
  • 247
  • 1
  • 3
  • 14
  • Since React 18 you need to add children to the props explicitly. I guessing it's the same for React Native. How's `ThemeProvider` defined? – Anton Jun 19 '22 at 10:02
  • @Anton and how to add children to props, did you mean add children props in types in file `node_modules/react-native-elements/dist/config/ThemeProvider.d.ts` – Aman Jat Jun 19 '22 at 10:13

1 Answers1

0
type ExistingThemeProviderProps = ComponentProps<typeof ThemeProvider> & {children: ReactNode};
export const ThemeProviderExtended = (props: ExistingThemeProviderProps) => <ThemeProvider {...props}/>

This fixed the issue for me, till react-native-elements team releases type fix.

Ankush Dhiman
  • 1