Can't theme Avatar.Accessory globally using AvatarAccessory key in createTheme #3634
Description
Is there an existing issue for this?
- I have searched the existing issues
Explain what you did
We're rendering something like this:
interface SomeComponentProps {}
const SomeComponent: React.FC<SomeComponentProps> = () => {
return (
<View>
<Avatar rounded source={{ uri: someUri }} size={125}>
<Avatar.Accessory type="feather" name="camera" />
</Avatar>
</View>
)
}Theme:
export const ourTheme = createTheme({
components:
Avatar: {
containerStyle: {
backgroundColor: colors.lightGrey,
},
},
// Problem: `AvatarAccessory` doesn't have a visible effect, whereas `Accessory` actually works
AvatarAccessory: {
size: 28,
color: colors.lightGrey,
backgroundColor: colors.white,
underlayColor: colors.transparent,
style: {
backgroundColor: colors.white,
// NB: slightly awkward that we need to set `size` above and another `width` and `height` here
// to get a proper padding around the image inside of the `Avatar.Accessory`. Using `padding`
// won't have the desired effect
width: 40,
height: 40,
borderRadius: 20,
...shadow(5),
},
iconStyle: {
color: colors.lightGrey,
},
pressableProps: {
style: {
backgroundColor: 'purple',
},
},
},
},
});NB: I realize there is #2965, but I'm still seeing the problem with the latest rc. Either this means that the fix hasn't been published yet, or (and I'm afraid this is the case) that fix doesn't solve the problem. Inspecting the source of the installed node module suggests that that fix is indeed installed, but I'm still having issues.
Expected behavior
Using AvatarAccessory works in createTheme
Describe the bug
Using AvatarAccessory doesn't work, need to use Accessory instead
Steps To Reproduce
* Use @rneui/themed and @rneui/base at version 4.0.0-rc.6
* Use the provided example to configure a global theme (using ThemeProvider etc)
* Notice that the style is not applied
* Change `AvatarAccessory` to `Accessory` in the style
* Notice that the style is now applied correctlyScreenshots
No response
Your Environment
`npx @rneui/envinfo`
I'm afraid this never logs anything, and neither completes
`npm ls --depth=0`
@org/app@0.0.1 D:\src\org\app
├── @babel/core@7.18.13
├── @org/lib@0.1.0-20220906T152756
├── @expo/config@7.0.1
├── @react-native-async-storage/async-storage@1.17.10
├── @react-navigation/bottom-tabs@6.3.3
├── @react-navigation/native@6.0.12
├── @react-navigation/stack@6.2.3
├── @rneui/base@4.0.0-rc.6
├── @rneui/layout@0.0.0-alpha.4
├── @rneui/themed@4.0.0-rc.6
├── @types/color@3.0.3
├── @types/lodash@4.14.184
├── @types/react-native-calendars@1.1264.3
├── @types/react-native@0.69.6
├── @types/react@18.0.18
├── axios@0.27.2
├── babel-plugin-transform-inline-environment-variables@0.4.4
├── color@4.2.3
├── date-fns@2.29.2
├── dotenv@16.0.2
├── expo-auth-session@3.7.1
├── expo-constants@13.2.4
├── expo-dev-client@1.2.1
├── expo-device@4.3.0
├── expo-document-picker@10.3.0
├── expo-file-system@14.1.0
├── expo-font@10.2.0
├── expo-image-picker@13.3.1
├── expo-localization@13.1.0
├── expo-location@14.3.0
├── expo-notifications@0.16.1
├── expo-random@12.3.0
├── expo-status-bar@1.4.0
├── expo-updates@0.14.5
├── expo@46.0.9
├── extract-zip@2.0.1
├── fdir@5.2.0
├── formik@2.2.9
├── lodash@4.17.21
├── react-dom@18.0.0
├── react-i18next@11.18.5
├── react-native-calendars@1.1288.2
├── react-native-gesture-handler@2.5.0
├── react-native-maps@0.31.1
├── react-native-safe-area-context@4.3.1
├── react-native-svg@12.3.0
├── react-native-web@0.18.9
├── react-native@0.69.5
├── react@18.0.0
├── tempy@3.0.0
└── typescript@4.8.2