Library not working with RN 0.73.9 / Android API 34. Suggest alternate library similar to this.
If this is an issue with the library and it is not maintained, can somebody suggest an alternative library that can be used with minimum code changes.
Steps to Reproduce
- Update app to use RN V 0.73.9
- Create an android build to target API level 34
- Run the app and you get below error Error: TypeError: Cannot read property 'backgroundColor' of undefined
Try in Expo
Expected Behavior
App component is able to access styles objects defined in the styles file. styles object returned by EStyleSheet is emptt json object. This was working on RN 0.71 for Android 33.
Actual Behavior
App components are not able to access objects defined in the styles file.
Show the code
Below styles import { Platform } from "react-native"; import EStyleSheet from "react-native-extended-stylesheet"; import { theme, gutter } from "../../Utils/Helpers/theme";
export const styles = EStyleSheet.create({ header: { backgroundColor: theme.colors.mainPurple, display: "flex", flexDirection: "row", borderBottomWidth: 0, alignItems: "center", width: "100%", ...Platform.select({ android: { paddingTop: 0, height: gutter(14) } }) }, statusBarContainer: { backgroundColor: theme.colors.mainPurple, width: "100%" }, leftContainerStyle: { justifyContent: "flex-start" }, centerContainerStyle: { justifyContent: "center" }, rightContainerStyle: { justifyContent: "flex-end" } });
Environment
On version 76 the same problem, no styles
is this library still supported ?
Looks like the library is not maintained.
The issue i mentioned above was fixed on RN V0.73 by running EStyleSheet.build() at app startup (in App.js).
Below is code snippet. import EStyleSheet from "react-native-extended-stylesheet"; import { Dimensions } from "react-native"; //Method to build/initialise extended stylesheet export const initEStyleSheet = () => { const entireScreenWidth = Dimensions.get("window").width; EStyleSheet.build({ "@media (max-width: 359)": { $rem: entireScreenWidth / 360 }, "@media (min-width: 360) and (max-width: 450)": { $rem: entireScreenWidth / 380 }, "@media (min-width: 451)": { $rem: entireScreenWidth / 400 } }); }
I was not getting the issue on RN Versions < 0.73 without this step. Please see no. 2 under usage: https://github.com/vitalets/react-native-extended-stylesheet?tab=readme-ov-file#usage