ThemeProvider error about Children
Nobody has claimed this yet.
Assessment
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Newbie friendliness
- 42/100
- Issue type
- Bug
- Clarity
- Mostly clear
- Activity status
- Stale
- Tech stack
- react-native, typescript
- Domain
- mobile
Research direction
Start with the provided TSX entry code and reproduce the TypeScript warning when ThemeProvider receives the theme prop. Trace the ThemeProvider prop type definitions and verify that children is accepted in this usage; done means the reproduction type-checks without the reported error.
Written by the indexing model from the issue text.
Description
Is there an existing issue for this?
- I have searched the existing issues
Explain what you did
Issue https://github.com/react-native-elements/react-native-elements/issues/3452 is marked closed. I am starting a new project today and when I wrap theThemeProvider at the top level, I get a TS warning about the children.
I am just trying to get the dark mode toggle to work, so I am adding ThemeProvider
This error appears only after I add the theme prop. Without the theme prop, there is no error.
Expected behavior
ThemeProvider props have children as expected prop with or without the theme prop.
Describe the bug
When I include the theme prop only is when I see the bug:
Type '{ children: Element; theme: CreateThemeOptions; }' is not assignable to type 'IntrinsicAttributes & IntrinsicClassAttributes & Pick<Readonly, never> & InexactPartial<...> & InexactPartial<...>'.
Property 'children' does not exist on type 'IntrinsicAttributes & IntrinsicClassAttributes & Pick<Readonly, never> & InexactPartial<...> & InexactPartial<...>'.ts(2322)
Steps To Reproduce
this entry code:
import {
createTheme,
darkColors,
lightColors,
useThemeMode,
} from '@rneui/themed';
import { StatusBar } from 'expo-status-bar';
import React, { useState } from 'react';
import { Platform, View } from 'react-native';
import { ColorSchemeName, useColorScheme } from 'react-native-appearance';
import { ThemeProvider, useTheme } from 'react-native-elements';
import { SafeAreaProvider } from 'react-native-safe-area-context';
const theme = createTheme({
lightColors: {
...Platform.select({
default: lightColors.platform.android,
ios: lightColors.platform.ios,
}),
},
darkColors: {
...Platform.select({
default: darkColors.platform.android,
ios: darkColors.platform.ios,
}),
},
});
const ColorScheme = ({ children }) => {
const [mode, setMode] = useState<ColorSchemeName>();
const colorMode = useColorScheme();
const { theme } = useTheme();
React.useEffect(() => {
setMode(colorMode);
}, [colorMode]);
return (
<View
style={{ backgroundColor: theme.colors?.platform?.default as string }}
>
{children}
</View>
);
};
export default function App() {
console.log(theme);
return (
<SafeAreaProvider>
<ThemeProvider theme={theme}>
<ColorScheme>
<StatusBar style="auto" />
</ColorScheme>
</ThemeProvider>
</SafeAreaProvider>
);
}
### Screenshots
<img width="816" alt="image" src="https://github.com/react-native-elements/react-native-elements/assets/15162169/9a1e513e-9333-47b2-aa9b-796bb2072df0">
### Your Environment
<details>
<summary>`npx @rneui/envinfo`</summary>
```
React Native Elements Env Info
## Global Dependencies:
No related dependency found
## Local Dependencies:
- @rneui/base : ^0.0.0-edge.2
- @rneui/themed : ^0.0.0-edge.2
- expo : ~48.0.15
- react : 18.2.0
- react-native : 0.71.7
- react-native-elements : ^3.4.3 ```
</details>
- Dominant language
- MDX
- Stars
- 25.9k
- Forks
- 4.7k
- PR merge metrics
- No merged PRs in 30d
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
More from react-native-elements/react-native-elements
-
Difficulty 2/5 1-3 hours Newbie friendliness 76/100
react-native-elements/react-native-elements#4035 · 1 comment ·
-
Needs Triage
Difficulty 2/5 1-3 hours Newbie friendliness 78/100
react-native-elements/react-native-elements#3963 · 2 comments · 2 reactions ·
-
component: Button
react-native-elements/react-native-elements#4032 · 1 assignee ·
-
TS Bug - @rneui/base@5.0.0 — Undeclared type dependency causes IconProps to lose color/name/size Opencomponent: Icon
react-native-elements/react-native-elements#4027 · 2 comments · 4 reactions · 1 assignee ·
-
📞 Needs Response from Author
react-native-elements/react-native-elements#4022 · 9 comments · 2 reactions · 1 assignee ·
All issues in react-native-elements/react-native-elements
Similar issues
-
Build Failure: agora_rtc_engine compiled against android-31 while dependencies require android-34+ Open
Difficulty 2/5 1-3 hours Newbie friendliness 72/100
-
bug
Difficulty 2/5 1-3 hours Newbie friendliness 76/100
avniproject/avni-client#2135 ·
-
react-doctor severity:warning tech-debt
Difficulty 1/5 Under an hour Newbie friendliness 88/100
digidem/comapeo-cloud-app#403 ·
-
Icon Requests Opensupported
Difficulty 2/5 1-3 hours Newbie friendliness 68/100
LawnchairLauncher/lawnicons#4100 ·
-
Difficulty 1/5 Under an hour Newbie friendliness 92/100
CypherBoxLLC/Cypher-Box#284 ·