Reloading throws an error
juanch0x opened this issue · comments
Description
I'm experiencing an intermittent issue with reloading in a React Native project using react-native-unistyles. When I reload the app (by pressing "R" on the simulator or terminal), I occasionally encounter the following error:
Error:
TypeError: Cannot read property 'useBreakpoints' of undefined, js engine: hermes
at ContextNavigator
at ExpoRoot
at App
at ErrorToastContainer
at ErrorOverlay
at withDevTools(ErrorOverlay)
at RCTView
at View
at RCTView
at View
at AppContainer
at main(RootComponent)
Details:
The issue occurs on iOS, tested only on this platform.
It happens roughly 1 out of every 5 or 6 reloads.
The error occurs in both fabric and paper architectures.
Environment:
React Native: 0.74.1
Expo: ~51.0.8
react-native-unistyles: ^2.7.2
Configuration:
Common Theme:
export default {
radius: {
sm: 4,
md: 8,
lg: 16,
xl: 20
},
spacing: {
xxs: 4,
xs: 8,
sm: 16,
md: 24,
lg: 32,
xl: 42,
'2xl': 48,
'3xl': 56
},
opacity: {
'100': 1,
'80': 0.8,
'70': 0.75,
'50': 0.5,
'30': 0.3,
'20': 0.25,
'10': 0.15
}
};
Dark Theme:
import commonTheme from './commonTheme';
export const darkTheme = {
colors: {
white: '#FFFFFF',
black: '#000',
solidBlack: '#232323',
primary: {
main: '#3D5BF6',
dark: '#18235A',
light: '#304AD6',
},
background: {
default: '#121212',
grey: '#252525',
},
text: {
default: '#FFFFFF',
secondary: '#9CA3AF',
},
neutrals: {
'50': '#F9FAFB',
'200': '#E5E7EB',
'300': '#D1D5DB',
'400': '#9CA3AF',
'500': '#6B7280',
'600': '#4B5563',
'700': '#374151',
'800': '#1F2937',
'900': '#111827',
},
success: {
'50': '#ECFDF3',
'200': '#ABEFC6',
'500': '#17B26A',
'700': '#067647',
'900': '#074D31',
},
error: {
'50': '#FEF3F2',
'200': '#FECDCA',
'500': '#F04438',
'700': '#B42318',
'900': '#7A271A',
},
warning: {
'50': '#FFFAEB',
'200': '#FEDF89',
'500': '#F79009',
'700': '#B54708',
'900': '#7A2E0E',
},
purple: {
'50': '#F3F2FF',
'100': '#E2DFFF',
'200': '#C1BAFF',
'300': '#987DFF',
'400': '#7364FA',
'500': '#503EF1',
'600': '#4411D4',
'700': '#050C9F',
'800': '#090077',
'900': '#030865',
},
blue: {
'50': '#F9FCFF',
'100': '#F4FAFF',
'200': '#F1F6FF',
'300': '#DBE7FC',
'400': '#AAC9FF',
'500': '#83B0FF',
'600': '#619AFF',
'700': '#2D6CDB',
'800': '#134BAD',
'900': '#012F7F',
},
orange: {
'50': '#FFF9F1',
'100': '#FFEED5',
'200': '#FFD4AC',
'300': '#FFB68D',
'400': '#FFA37A',
'500': '#FF824B',
'600': '#E26E1A',
'700': '#C3580B',
'800': '#983F00',
'900': '#712F00',
},
},
...commonTheme,
} as const;
Unistyles Configuration:
import { darkTheme } from './darkTheme';
import { breakpoints } from './breakPoints';
import { UnistylesRegistry } from 'react-native-unistyles';
type AppBreakpoints = typeof breakpoints;
type AppThemes = {
dark: typeof darkTheme;
};
declare module 'react-native-unistyles' {
export interface UnistylesBreakpoints extends AppBreakpoints {}
export interface UnistylesThemes extends AppThemes {}
}
UnistylesRegistry.addBreakpoints(breakpoints)
.addThemes({
dark: darkTheme,
})
.addConfig({
adaptiveThemes: true,
});
Additional Information:
This problem only ocuurs if you press R on simulator/terminal, if you force close the app and open it again, everything keep working fine
I have another project with similar setup but different versions (react-native 72.6, expo 49.0, and unistyles 2.5.5) and encounter the same issue.
I've followed the documentation closely but couldn't find a solution.
Question:
Is anyone else experiencing this issue or does anyone have insights on how to resolve it? Any help or pointers would be greatly appreciated!
Steps to reproduce
- Create an application using expo
- Install unistyles
- Play around and restart the application with normal usage
Snack or a link to a repository (optional)
No response
Unistyles version
2.7.2
React Native version
0.74.1
Platforms
iOS
Engine
Hermes
Architecture
Fabric (new)
Hey 👋
Thanks for the report. Do you see in the console "Installed Unistyles 🦄" when you reload the app with "R" key and error occurs?
Both stack traces are pointing to missing native Unistyles module.
Do you have any small repro to dig into the root cause? I'm not encountering such issues on iOS. Few versions before it happened on Android, but was already addressed.
Hey 👋 Thanks for the report. Do you see in the console "Installed Unistyles 🦄" when you reload the app with "R" key and error occurs?
Both stack traces are pointing to missing native Unistyles module.
Do you have any small repro to dig into the root cause? I'm not encountering such issues on iOS. Few versions before it happened on Android, but was already addressed.
Thank you for the fast answer 💪
I'm not being able to make the app crash right now, but I'm almost sure that when it happens doesn't show the Installed Unistyles message (actually it never shows for me, even if it works or not)
I don't have a small repro right now but I'll start playing around to get it and share it here!
Thanks, I will also try to repro based on your stack and expo/rn versions
Thanks, I will also try to repro based on your stack and expo/rn versions
Just happened to me and I can confirm that is not showing the "Installed Unistyles 🦄" log
Does it happen after some time like 5 minutes, or randomly after n-th reload?
It happened to me randomly, but when it happens once, it start happening all the time until I clear the cache of the bundle running the app with yarn start -c
I was able to repoduce it with Expo Router, do you use it?
EDIT:
Also do you use monorepo?
Yes! I'm using Expo Router, but for some reason I didn't experienced the error for a week now
Nop, I'm using a almost vanilla expo project
I’ve just released version 2.8.0-rc.1 with a complete implementation for iOS and Android. I believe this issue have been addressed.
If not, please reopen the task 🙏