Build issues with bare react native

[ealmiladi]

Description

expo-linear-gradient is included in the latest release (0.1.15) which is causing issues on vanilla RN projects

CodeSandbox/Snack link

https://github.com/gluestack/gluestack-ui/commit/29219a8bdae11582f5969d03a0ddf14c943138b0

Steps to reproduce

https://github.com/gluestack/gluestack-ui/commit/29219a8bdae11582f5969d03a0ddf14c943138b0

gluestack-ui Version

0.1.15

Platform

• [ ] Android
• [ ] Expo
• [ ] iOS
• [ ] Next

Other Platform

No response

Additional Information

No response

[AshwiniKumar007]

Hey @ealmiladi ,

Thanks for reporting. We will check this.

[josemariachavez]

Help us please

[dppo]

Same issues

[Kyewn]

Similar issues, says expo-modules-core is not in the modules

[Viraj-10]

Hey @Kyewn, @dppo, @josemariachavez, can you share your project details?

[Kyewn]

Only recently created a project using RN CLI, here are my dependencies. Not using expo. Let me know if you need other details because I'm not sure what you want to know:

"dependencies": {
    "@gluestack-ui/themed": "^0.1.16",
    "axios": "^1.5.0",
    "firebase": "^10.3.1",
    "react": "18.2.0",
    "react-native": "0.72.4",
    "react-native-webview": "^13.5.1"
  },
"devDependencies": {
    "@babel/core": "^7.20.0",
    "@babel/preset-env": "^7.20.0",
    "@babel/runtime": "^7.20.0",
    "@react-native/eslint-config": "^0.72.2",
    "@react-native/metro-config": "^0.72.11",
    "@tsconfig/react-native": "^3.0.0",
    "@types/react": "^18.0.24",
    "@types/react-test-renderer": "^18.0.0",
    "babel-jest": "^29.2.1",
    "babel-plugin-module-resolver": "^5.0.0",
    "eslint": "^8.19.0",
    "jest": "^29.2.1",
    "metro-react-native-babel-preset": "0.76.8",
    "prettier": "^2.4.1",
    "react-native-dotenv": "^3.4.9",
    "react-test-renderer": "18.2.0",
    "typescript": "4.8.4"
  },

[endrits079]

Same issue, I started new project using npm create gluestack, I choose react native, as dependencies it has expo, so I created a new project using react-native cli and added gluestack manually, it complains of missing expo linear gradient

[sungho-cho]

Same issue here, except I installed gluestack on an existing react native project.

[GSFZamai]

Same problem here. Tryied to install these dependencies manually but, without success...

[vidhi499]

Hey @ealmiladi @endrits079 @Kyewn @sungho-cho , Try installing expo-modules-core using npx install-expo-modules@latest command, instead of manual setup and let me know if this works.

[Kyewn]

pod is not recognized, I am on Windows and Android project, and do not have CocoaPods

[vidhi499]

We will validate this once and let you know.

[ivpusic]

@vidhi499 are you moving gluestack into direction that it requires expo in order to work?

[emragins]

Found this issue because I'm running expo and the version is conflicting. My limited experience so far is that expo versioning is fickle. It doesn't seem like a good idea to me that a UI library should have it as a dependency. ¢¢

[GollyJer]

I can't build my Expo app. Getting this warning when running the app (but it runs ok).

The native view manager required by name (ExpoLinearGradient) from NativeViewManagerAdapter isn't exported by expo-modules-core. Views of this type may not render correctly. Exported view managers: [].

And this when doing a build (it won't build). I don't use expo-linear-gradient anywhere in my app.

[makkarMeenu]

We have removed LinearGradient from @gluestack-ui/themed as a component. Please update @gluestack-ui/themed to latest 0.1.36 to resolve this.

[GollyJer]

Hi @makkarMeenu Thanks for fixing quickly!

But, now I'm seeing... Android Bundling failed 1416ms Unable to resolve "@gluestack-style/react" from "node_modules/@gluestack-ui/themed/build/index.js"

[makkarMeenu]

Hi @makkarMeenu Thanks for fixing quickly!

But, now I'm seeing... Android Bundling failed 1416ms Unable to resolve "@gluestack-style/react" from "node_modules/@gluestack-ui/themed/build/index.js"

We have also removed @gluestack-style/react as a dependency of @gluestack-ui/themed . It is a peer dependency now. You will have to install it separately. To do so, write yarn add @gluestack-style/react@latest

[GollyJer]

OK, that eliminated the bundling error but now the app loads straight to a black screen without any errors. It's funny, if I stay on 0.1.16 everything works except for the linear gradient error, but trying higher versions is causing errors. Not sure what to do.

[jacargentina]

I'm also updating to latest 0.1.36 and now my app crashes

09-11 22:49:06.141 12162 12208 E unknown:ViewManager: Error while updating prop height
09-11 22:49:06.141 12162 12208 E unknown:ViewManager: java.lang.reflect.InvocationTargetException
09-11 22:49:06.141 12162 12208 E unknown:ViewManager:   at java.lang.reflect.Method.invoke(Native Method)
09-11 22:49:06.141 12162 12208 E unknown:ViewManager:   at com.facebook.react.uimanager.ViewManagersPropertyCache$PropSetter.updateShadowNodeProp(ViewManagersPropertyCache.java:117)
09-11 22:49:06.141 12162 12208 E unknown:ViewManager:   at com.facebook.react.uimanager.ViewManagerPropertyUpdater$FallbackShadowNodeSetter.setProperty(ViewManagerPropertyUpdater.java:161)
09-11 22:49:06.141 12162 12208 E unknown:ViewManager:   at com.facebook.react.uimanager.ViewManagerPropertyUpdater.updateProps(ViewManagerPropertyUpdater.java:65)
09-11 22:49:06.141 12162 12208 E unknown:ViewManager:   at com.facebook.react.uimanager.ReactShadowNodeImpl.updateProperties(ReactShadowNodeImpl.java:321)
09-11 22:49:06.141 12162 12208 E unknown:ViewManager:   at com.facebook.react.uimanager.UIImplementation.createView(UIImplementation.java:237)
09-11 22:49:06.141 12162 12208 E unknown:ViewManager:   at com.facebook.react.uimanager.UIManagerModule.createView(UIManagerModule.java:468)
09-11 22:49:06.141 12162 12208 E unknown:ViewManager:   at com.facebook.react.uimanager.ReanimatedUIManager.createView(ReanimatedUIManager.java:51)
09-11 22:49:06.141 12162 12208 E unknown:ViewManager:   at java.lang.reflect.Method.invoke(Native Method)
09-11 22:49:06.141 12162 12208 E unknown:ViewManager:   at com.facebook.react.bridge.JavaMethodWrapper.invoke(JavaMethodWrapper.java:372)
09-11 22:49:06.141 12162 12208 E unknown:ViewManager:   at com.facebook.react.bridge.JavaModuleWrapper.invoke(JavaModuleWrapper.java:188)
09-11 22:49:06.141 12162 12208 E unknown:ViewManager:   at com.facebook.jni.NativeRunnable.run(Native Method)
09-11 22:49:06.141 12162 12208 E unknown:ViewManager:   at android.os.Handler.handleCallback(Handler.java:942)
09-11 22:49:06.141 12162 12208 E unknown:ViewManager:   at android.os.Handler.dispatchMessage(Handler.java:99)
09-11 22:49:06.141 12162 12208 E unknown:ViewManager:   at com.facebook.react.bridge.queue.MessageQueueThreadHandler.dispatchMessage(MessageQueueThreadHandler.java:27)
09-11 22:49:06.141 12162 12208 E unknown:ViewManager:   at android.os.Looper.loopOnce(Looper.java:201)
09-11 22:49:06.141 12162 12208 E unknown:ViewManager:   at android.os.Looper.loop(Looper.java:288)
09-11 22:49:06.141 12162 12208 E unknown:ViewManager:   at com.facebook.react.bridge.queue.MessageQueueThreadImpl$4.run(MessageQueueThreadImpl.java:228)
09-11 22:49:06.141 12162 12208 E unknown:ViewManager:   at java.lang.Thread.run(Thread.java:1012)
09-11 22:49:06.141 12162 12208 E unknown:ViewManager: Caused by: java.lang.IllegalArgumentException: Unknown value: md
09-11 22:49:06.141 12162 12208 E unknown:ViewManager:   at com.facebook.react.uimanager.LayoutShadowNode$MutableYogaValue.setFromDynamic(LayoutShadowNode.java:63)
09-11 22:49:06.141 12162 12208 E unknown:ViewManager:   at com.facebook.react.uimanager.LayoutShadowNode.setHeight(LayoutShadowNode.java:154)
09-11 22:49:06.141 12162 12208 E unknown:ViewManager:   ... 19 more
09-11 22:49:06.143 12162 12208 E unknown:ReactNative: Exception in native call
09-11 22:49:06.143 12162 12208 E unknown:ReactNative: com.facebook.react.bridge.JSApplicationIllegalArgumentException: Error while updating property 'height' in shadow node of type: RNSVGSvgView

Something about react-native-svg ?

[makkarMeenu]

OK, that eliminated the bundling error but now the app loads straight to a black screen without any errors. It's funny, if I stay on 0.1.16 everything works except for the linear gradient error, but trying higher versions is causing errors. Not sure what to do.

We will be able to give proper solution if you can identify the issue.

[makkarMeenu]

I'm also updating to latest 0.1.36 and now my app crashes

09-11 22:49:06.141 12162 12208 E unknown:ViewManager: Error while updating prop height
09-11 22:49:06.141 12162 12208 E unknown:ViewManager: java.lang.reflect.InvocationTargetException
09-11 22:49:06.141 12162 12208 E unknown:ViewManager:     at java.lang.reflect.Method.invoke(Native Method)
09-11 22:49:06.141 12162 12208 E unknown:ViewManager:     at com.facebook.react.uimanager.ViewManagersPropertyCache$PropSetter.updateShadowNodeProp(ViewManagersPropertyCache.java:117)
09-11 22:49:06.141 12162 12208 E unknown:ViewManager:     at com.facebook.react.uimanager.ViewManagerPropertyUpdater$FallbackShadowNodeSetter.setProperty(ViewManagerPropertyUpdater.java:161)
09-11 22:49:06.141 12162 12208 E unknown:ViewManager:     at com.facebook.react.uimanager.ViewManagerPropertyUpdater.updateProps(ViewManagerPropertyUpdater.java:65)
09-11 22:49:06.141 12162 12208 E unknown:ViewManager:     at com.facebook.react.uimanager.ReactShadowNodeImpl.updateProperties(ReactShadowNodeImpl.java:321)
09-11 22:49:06.141 12162 12208 E unknown:ViewManager:     at com.facebook.react.uimanager.UIImplementation.createView(UIImplementation.java:237)
09-11 22:49:06.141 12162 12208 E unknown:ViewManager:     at com.facebook.react.uimanager.UIManagerModule.createView(UIManagerModule.java:468)
09-11 22:49:06.141 12162 12208 E unknown:ViewManager:     at com.facebook.react.uimanager.ReanimatedUIManager.createView(ReanimatedUIManager.java:51)
09-11 22:49:06.141 12162 12208 E unknown:ViewManager:     at java.lang.reflect.Method.invoke(Native Method)
09-11 22:49:06.141 12162 12208 E unknown:ViewManager:     at com.facebook.react.bridge.JavaMethodWrapper.invoke(JavaMethodWrapper.java:372)
09-11 22:49:06.141 12162 12208 E unknown:ViewManager:     at com.facebook.react.bridge.JavaModuleWrapper.invoke(JavaModuleWrapper.java:188)
09-11 22:49:06.141 12162 12208 E unknown:ViewManager:     at com.facebook.jni.NativeRunnable.run(Native Method)
09-11 22:49:06.141 12162 12208 E unknown:ViewManager:     at android.os.Handler.handleCallback(Handler.java:942)
09-11 22:49:06.141 12162 12208 E unknown:ViewManager:     at android.os.Handler.dispatchMessage(Handler.java:99)
09-11 22:49:06.141 12162 12208 E unknown:ViewManager:     at com.facebook.react.bridge.queue.MessageQueueThreadHandler.dispatchMessage(MessageQueueThreadHandler.java:27)
09-11 22:49:06.141 12162 12208 E unknown:ViewManager:     at android.os.Looper.loopOnce(Looper.java:201)
09-11 22:49:06.141 12162 12208 E unknown:ViewManager:     at android.os.Looper.loop(Looper.java:288)
09-11 22:49:06.141 12162 12208 E unknown:ViewManager:     at com.facebook.react.bridge.queue.MessageQueueThreadImpl$4.run(MessageQueueThreadImpl.java:228)
09-11 22:49:06.141 12162 12208 E unknown:ViewManager:     at java.lang.Thread.run(Thread.java:1012)
09-11 22:49:06.141 12162 12208 E unknown:ViewManager: Caused by: java.lang.IllegalArgumentException: Unknown value: md
09-11 22:49:06.141 12162 12208 E unknown:ViewManager:     at com.facebook.react.uimanager.LayoutShadowNode$MutableYogaValue.setFromDynamic(LayoutShadowNode.java:63)
09-11 22:49:06.141 12162 12208 E unknown:ViewManager:     at com.facebook.react.uimanager.LayoutShadowNode.setHeight(LayoutShadowNode.java:154)
09-11 22:49:06.141 12162 12208 E unknown:ViewManager:     ... 19 more
09-11 22:49:06.143 12162 12208 E unknown:ReactNative: Exception in native call
09-11 22:49:06.143 12162 12208 E unknown:ReactNative: com.facebook.react.bridge.JSApplicationIllegalArgumentException: Error while updating property 'height' in shadow node of type: RNSVGSvgView

Something about react-native-svg ?

Can you check which icon is causing this issue?

[jacargentina]

I've LOTS of icons, and this Java stack trace is not giving me any clue on where to look for. Any advice please?

[GSFZamai]

I've LOTS of icons, and this Java stack trace is not giving me any clue on where to look for. Any advice please?

Seens like this error is on an icon with RNSVGSvgView type where you are trying to set the height property

Error while updating property 'height' in shadow node of type: RNSVGSvgView

To md

Caused by: java.lang.IllegalArgumentException: Unknown value: md

[jacargentina]

I'm not using "md" at all on ALL my app.

I 've found that editing file node_modules/@gluestack-ui/themed/build/components/Icons/styled-components/Root.js near the end like this

My error disappears.

[GollyJer]

Hey @jacargentina. I just spent an hour tracking down the same error. Do you use lucid-react-native icons?

I was using them for a ButtonIcon.

import { AddIcon, Button, ButtonIcon, Icon } from '@gluestack-ui/themed';
import { Info, Layers, Plus, Search } from 'lucide-react-native';

const renderAddStackButton = () => (
  <Button variant="solid" action="primary" onPress={}>
    <ButtonIcon size="lg" as={AddIcon} />
    {/* <ButtonIcon size="lg" as={Plus} /> */}
  </Button>
);

const renderTabIcon = (icon, color, size = 'md') => (
  <Icon as={icon} color={color} size={size} mt="$2" />
);

If you uncomment Plus the "md" error will occur. You? It appears to only effect ButtonIcon and not Icon. renderTabIcon does not error when using the lucide icons.

PS - I am using the button for header actions in my screens.

<Tabs.Screen
  name="stacks"
  options={{
    title: 'Stacks',
    tabBarIcon: ({ color }) => renderTabIcon(Layers, color),
    headerRight: () => renderAddStackButton(),
  }}
/>

[GollyJer]

@makkarMeenu, could it be the commented out line 63 in this file? https://github.com/gluestack/gluestack-ui/blob/main/packages/themed/src/components/Icons/styled-components/Root.tsx#L4

[jacargentina]

@GollyJer in my case I also use lucide

import * as React from "react";
import { Box, GluestackUIProvider, Icon } from "@gluestack-ui/themed";
import { AlertCircleIcon } from "lucide-react-native";

export default function App() {
  return (
    <GluestackUIProvider>
      <Box h="100%" flex={1} flexDirection="row" alignItems="center">
        <Icon as={AlertCircleIcon} />
      </Box>
    </GluestackUIProvider>
  );
}

Somehow, using expo the app is not crashing, but yes on react-native cli

[makkarMeenu]

This icon issue has been fixed in the latest version of @gluestack-ui/themed. API of Input has been changed a bit from

<Input>    //View
 <InputField />   //TextInput
 <InputIcon>  //Pressable
    <Icon as={} />  //icon
</InputIcon>
</Input>

to

<Input>  //View
 <InputField />  //TextInput
 <InputSlot> //Pressable
     <InputIcon as={}/> //Icon
 </InputSlot>
</Input>

Let us know if you face any issue.