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

[ManjinderRayatTelus]

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

[guzeradimaz]

[guzeradimaz]

On version 76 the same problem, no styles

[abdelrahman-muntaser]

is this library still supported ?

[ManjinderRayatTelus]

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