react-native-extended-stylesheet icon indicating copy to clipboard operation
react-native-extended-stylesheet copied to clipboard

Library not working with RN 0.73.9 / Android API 34. Suggest alternate library similar to this.

Open ManjinderRayatTelus opened this issue 1 year ago • 4 comments

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

  1. Update app to use RN V 0.73.9
  2. Create an android build to target API level 34
  3. 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

ManjinderRayatTelus avatar Aug 07 '24 19:08 ManjinderRayatTelus

guzeradimaz avatar Oct 25 '24 18:10 guzeradimaz

On version 76 the same problem, no styles

guzeradimaz avatar Oct 25 '24 18:10 guzeradimaz

is this library still supported ?

abdelrahman-muntaser avatar Feb 04 '25 10:02 abdelrahman-muntaser

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

ManjinderRayatTelus avatar Feb 04 '25 13:02 ManjinderRayatTelus