gluestack / gluestack-ui Goto Github PK

Description

Menu error: MenuContext must be used within MenuContext

CodeSandbox/Snack link

No response

Steps to reproduce

1. Go to https://ui.gluestack.io/docs/components/overlay/menu
2. Click the hamburger
3. See error in console: MenuContext must be used within MenuContext

gluestack-ui Version

website

Platform

• Android
• Expo
• iOS
• Next

Other Platform

No response

Additional Information

No response

Description

Errors are reported when running in the ios simulator, but the web side is fine

CodeSandbox/Snack link

No response

Steps to reproduce

1. Run yarn expo:ios
2. waiting for ios simulator ( iPhone 14 Pro simulator and iPad Pro 12.9 third generation simulator) launch, then open expo go.
3. the Error show as below:

{
"name": "myapp",
"version": "0.0.1",
"private": true,
"main": "node_modules/expo/AppEntry.js",
"scripts": {
"expo:start": "expo start",
"expo:android": "expo start --android",
"expo:ios": "expo start --ios",
"expo:web": "expo start --web"
},
"overrides": {
"react-error-overlay": "6.0.9"
},
"dependencies": {
"@dank-style/animation-plugin": "latest",
"@dank-style/react": "latest",
"@expo-google-fonts/space-grotesk": "^0.2.2",
"@expo/html-elements": "latest",
"@expo/match-media": "^0.4.0",
"@expo/webpack-config": "^18.0.1",
"@gluestack-ui/actionsheet": "latest",
"@gluestack-ui/avatar": "latest",
"@gluestack-ui/button": "latest",
"@gluestack-ui/form-control": "latest",
"@gluestack-ui/hstack": "latest",
"@gluestack-ui/input": "latest",
"@gluestack-ui/link": "latest",
"@gluestack-ui/pressable": "latest",
"@gluestack-ui/provider": "latest",
"@gluestack-ui/select": "latest",
"@gluestack-ui/spinner": "latest",
"@gluestack-ui/toast": "latest",
"@gluestack-ui/vstack": "latest",
"@legendapp/motion": "latest",
"@react-native-aria/interactions": "^0.2.8",
"@react-native-async-storage/async-storage": "1.17.11",
"@react-navigation/bottom-tabs": "^6.3.1",
"@react-navigation/native": "~6.0.1",
"@react-navigation/drawer": "^6.4.1",
"@react-navigation/native-stack": "^6.0.2",
"@react-navigation/stack": "~6.0.1",
"apisauce": "2.1.5",
"date-fns": "^2.29.2",
"expo": "^48.0.15",
"expo-application": "~5.1.1",
"expo-constants": "~14.2.1",
"expo-device": "~5.2.1",
"expo-file-system": "~15.2.1",
"expo-font": "~11.1.1",
"expo-linking": "~4.0.1",
"expo-localization": "~14.1.1",
"expo-modules-core": "~1.2.3",
"expo-splash-screen": "~0.18.1",
"expo-status-bar": "~1.4.4",
"formik": "^2.2.9",
"i18n-js": "3.9.2",
"jsencrypt": "^3.2.1",
"mobx": "6.6.0",
"mobx-react-lite": "3.4.0",
"mobx-state-tree": "5.1.5",
"react": "18.2.0",
"react-native": "0.71.7",
"react-native-bootsplash": "4.5.0",
"react-native-gesture-handler": "~2.9.0",
"react-native-pager-view": "^6.2.0",
"react-native-reanimated": "~2.14.4",
"react-native-render-html": "^6.3.4",
"react-native-safe-area-context": "4.5.0",
"react-native-screens": "~3.20.0",
"react-native-tab-view": "^3.5.1",
"react-native-vector-icons": "^9.2.0",
"reactotron-mst": "3.1.4",
"reactotron-react-js": "^3.3.7",
"reactotron-react-native": "5.0.3",
"yup": "^1.1.1"
},
"devDependencies": {
"@babel/core": "^7.20.0",
"@babel/plugin-proposal-export-namespace-from": "^7.18.9",
"@babel/preset-env": "^7.20.0",
"@babel/runtime": "^7.20.0",
"@react-native-community/cli-platform-ios": "^8.0.2",
"@rnx-kit/metro-config": "^1.3.5",
"@rnx-kit/metro-resolver-symlinks": "^0.1.26",
"@types/i18n-js": "3.8.2",
"@types/jest": "^29.2.1",
"@types/react": "~18.0.27",
"@types/react-native": "^0.71.6",
"@types/react-test-renderer": "^18.0.0",
"@typescript-eslint/eslint-plugin": "5.28.0",
"@typescript-eslint/parser": "5.28.0",
"babel-jest": "^29.2.1",
"babel-loader": "8.2.5",
"babel-plugin-root-import": "^6.6.0",
"eslint": "8.17.0",
"eslint-config-prettier": "8.5.0",
"eslint-config-standard": "17.0.0",
"eslint-plugin-import": "2.26.0",
"eslint-plugin-n": "^15.0.0",
"eslint-plugin-node": "11.1.0",
"eslint-plugin-promise": "6.0.0",
"eslint-plugin-react": "7.30.0",
"eslint-plugin-react-native": "4.0.0",
"expo-modules-autolinking": "~1.1.0 || ~1.2.0",
"fbjs-scripts": "3.0.1",
"jest": "^29.2.1",
"jest-circus": "29",
"jest-environment-node": "29",
"jest-expo": "^48.0.0",
"metro-config": "0.75.1",
"metro-react-native-babel-preset": "0.75.1",
"metro-source-map": "0.75.1",
"mocha": "6",
"patch-package": "6.4.7",
"postinstall-prepare": "1.0.1",
"prettier": "2.6.2",
"query-string": "^7.0.1",
"react-devtools-core": "4.24.7",
"react-dom": "18.2.0",
"react-native": "^0.70.7",
"react-native-web": "^0.18.12",
"react-test-renderer": "18.2.0",
"reactotron-core-client": "^2.8.10",
"regenerator-runtime": "^0.13.4",
"ts-jest": "29",
"typescript": "^4.8.4"
},
"resolutions": {
"@types/react": "^18",
"@types/react-dom": "^18"
},
"prettier": {
"printWidth": 100,
"semi": false,
"singleQuote": false,
"trailingComma": "all"
},
"eslintConfig": {
"root": true,
"parser": "@typescript-eslint/parser",
"extends": [
"plugin:@typescript-eslint/recommended",
"plugin:react/recommended",
"plugin:react-native/all",
"standard",
"prettier"
],
"plugins": [
"@typescript-eslint",
"react",
"react-native"
],
"parserOptions": {
"ecmaFeatures": {
"jsx": true
},
"project": "./tsconfig.json"
},
"settings": {
"react": {
"pragma": "React",
"version": "detect"
}
},
"globals": {
"DEV": false,
"jasmine": false,
"beforeAll": false,
"afterAll": false,
"beforeEach": false,
"afterEach": false,
"test": false,
"expect": false,
"describe": false,
"jest": false,
"it": false
},
"rules": {
"@typescript-eslint/ban-ts-ignore": 0,
"@typescript-eslint/ban-ts-comment": 0,
"@typescript-eslint/explicit-function-return-type": 0,
"@typescript-eslint/explicit-member-accessibility": 0,
"@typescript-eslint/explicit-module-boundary-types": 0,
"@typescript-eslint/indent": 0,
"@typescript-eslint/member-delimiter-style": 0,
"@typescript-eslint/no-empty-interface": 0,
"@typescript-eslint/no-explicit-any": 0,
"@typescript-eslint/no-object-literal-type-assertion": 0,
"@typescript-eslint/no-var-requires": 0,
"@typescript-eslint/no-unused-vars": [
"error",
{
"argsIgnorePattern": "^",
"varsIgnorePattern": "^"
}
],
"comma-dangle": 0,
"multiline-ternary": 0,
"no-undef": 0,
"no-unused-vars": 0,
"no-use-before-define": 0,
"no-global-assign": 0,
"quotes": 0,
"react-native/no-raw-text": 0,
"react/no-unescaped-entities": 0,
"react/prop-types": 0,
"space-before-function-paren": 0
}
}
}

gluestack-ui Version

latest

Platform

• Android
• Expo
• iOS
• Next

Other Platform

No response

Additional Information

TypeError: Cannot convert undefined value to object

This error is located at:
in NewComp (created by DankStyledComponent)
in DankStyledComponent (created by ErrorDetails)
in RCTView (created by View)
in View (created by ErrorDetails)
in RCTView (created by View)
in View (created by ScreenWithoutScrolling)
in RCTView (created by View)
in View (created by ScreenWithoutScrolling)
in ScreenWithoutScrolling (created by Screen)
in RCTView (created by View)
in View (created by KeyboardAvoidingView)
in KeyboardAvoidingView (created by Screen)
in RCTView (created by View)
in View (created by Screen)
in Screen (created by ErrorDetails)
in ErrorDetails (created by ErrorBoundary)
in ErrorBoundary (created by App)
in RNCSafeAreaProvider (created by SafeAreaProvider)
in SafeAreaProvider (created by App)
in App (created by IgniteApp)
in IgniteApp (created by withDevTools(IgniteApp))
in withDevTools(IgniteApp)
in RCTView (created by View)
in View (created by AppContainer)
in RCTView (created by View)
in View (created by AppContainer)
in AppContainer
in main(RootComponent), js engine: hermes

Description

Applying backgroundColor="red" has no effect

CodeSandbox/Snack link

No response

Steps to reproduce

1. Go to '...'
2. Click on '...'
3. Scroll down to '...'
4. See error

gluestack-ui Version

latest

Platform

• Android
• Expo
• iOS
• Next

Other Platform

No response

Additional Information

migrating from nativebase; the Stack accepted backgroundColor (typings on HStack from gluestack seems to accept it) but it is not working

https://ui.gluestack.io/docs/overview/introduction is not scrollable on Firefox.

When install the a component, not only Button, the reference of styled is broken...

// Change from
import { styled } from '../../styled'; // Broken reference

// To
import { styled } from '@dank-style/react'; // Fixed reference

Just retried https://github.com/gluestack/ui/issues/240.

On step 3 of https://ui.gluestack.io/docs/getting-started/install-expo.

npx gluestack-ui@latest add button

Which throws

➜ npx gluestack-ui@latest add button                                               
 
gluestack-ui is already initialised in your project! 
/ Pulling changes...  
Changes pulled successful. 
pull4ed changes
Error: ENOENT: no such file or directory, open '/home/kannar/.gluestack/cache/gluestack-ui/example/storybook/src/ui-components/button/config.json'
    at Object.openSync (node:fs:601:3)
    at Object.readFileSync (node:fs:469:35)
    at /home/kannar/.npm/_npx/4d3bda48cf361d69/node_modules/gluestack-ui/component-adder/index.js:119:14
    at Array.map (<anonymous>)
    at /home/kannar/.npm/_npx/4d3bda48cf361d69/node_modules/gluestack-ui/component-adder/index.js:115:37
    at Array.map (<anonymous>)
    at copyFolders (/home/kannar/.npm/_npx/4d3bda48cf361d69/node_modules/gluestack-ui/component-adder/index.js:105:37)
    at componentAdder (/home/kannar/.npm/_npx/4d3bda48cf361d69/node_modules/gluestack-ui/component-adder/index.js:184:11)
    at async main (/home/kannar/.npm/_npx/4d3bda48cf361d69/node_modules/gluestack-ui/index.js:20:7) {
  errno: -2,
  syscall: 'open',
  code: 'ENOENT',
  path: '/home/kannar/.gluestack/cache/gluestack-ui/example/storybook/src/ui-components/button/config.json'
}

Because the folders in /home/kannar/.gluestack/cache/gluestack-ui/example/storybook/src/ui-components are all named with first character in upper case.

So when I use npx gluestack-ui@latest add Button it works.

@vidhi499 I do not need any repository to produce it, just following the documentation and (not sure it's relevant here my OS is Exherbo (.org)).

The _spinner property is not propagating the color attribute to the 'spinner descendant'. The backgroundColor works well, but color not.

const Root = styled(Pressable, {
  // ...
  _spinner: {
    color: '#F00', // Not propagated...
    backgroundColor: '#000' // Propagated
  },
  // ...
}, {
  descendantStyle: ['_text', '_spinner', '_icon'],
  ancestorStyle: ['_button'],
});

I ran npx gluestack-ui@latest init and got stuck cloning.
No errors. Just spinning.

 ❯ npx gluestack-ui@latest init

Need to install the following packages:
  gluestack-ui@latest
Ok to proceed? (y) 
✔ Enter folder name where you want to add your components … shared-components/gluestack
The authenticity of host 'github.com (140.82.121.3)' can't be established.
ED25519 key fingerprint is SHA256:+DiY3wvvV6TuJJhbpZisF/zLDA0zPMSvHdkr4UvCOqU.
This key is not known by any other names
\ Cloning repository... 

Description

using npx to install partial component cause infinite import error.

CodeSandbox/Snack link

No response

Steps to reproduce

1. npx gluestack-ui@latest add ...
2. in components/ foler index.ts, export * from './'; auto inserted.
3. run yarn expo:web to start server.
4. open chrome inspector console.
5. See error
   Uncaught RangeError: Maximum call stack size exceeded
   at Module.GluestackUIProvider (index.tsx:9:1)
   at Module.GluestackUIProvider (index.tsx:9:1)
   at Module.GluestackUIProvider (index.tsx:9:1)
   at Module.GluestackUIProvider (index.tsx:9:1)
   at Module.GluestackUIProvider (index.tsx:9:1)
   at Module.GluestackUIProvider (index.tsx:9:1)
   at Module.GluestackUIProvider (index.tsx:9:1)
   at Module.GluestackUIProvider (index.tsx:9:1)
   at Module.GluestackUIProvider (index.tsx:9:1)
   at Module.GluestackUIProvider (index.tsx:9:1)

gluestack-ui Version

0.1.2

Platform

• Android
• Expo
• iOS
• Next

Other Platform

No response

Additional Information

No response

The styled.ts is missing on npx gluestack-ui installation.

export { styled } from '@dank-style/react';

Hello guys, I'm here just to propose a "small" change into <Actionsheet.Backdrop /> component.
When we use animationPreset="slide", it only works if I define useRNModal too.
Until there, everything ok, but the question is when the actionsheet opens. The backdrop layer animates in slide too... It's too ugly. I think It would be better if even the Actionsheet.Content animates in slide mode, the backdrop could stay in fadein mode... I made a video to exemplify it:

<Actionsheet isOpen={isOpen} onClose={() => setIsOpen(false)} animationPreset="slide" useRNModal>
  <Actionsheet.Backdrop />
  <Actionsheet.Content>
    <Actionsheet.DragIndicatorWrapper>
      <Actionsheet.DragIndicator />
    </Actionsheet.DragIndicatorWrapper>
    <Actionsheet.Item onPress={() => setIsOpen(false)}>
      <Actionsheet.ItemText>Community</Actionsheet.ItemText>
    </Actionsheet.Item>
  </Actionsheet.Content>
</Actionsheet>

Hello guys,

First of all, I'd like to congrats you for the project. It really seems very promissor.

Just to know, I'm wrapping the main component (installed by the library) into another one (my custom component). So, after that, I realize that I have no more typesafe on my component...

Having it said, I'd like to know if the're typesafe support as NativeBase does. There are some interfaces to make it easier, or I need to implement it by myself?

Thanks in advance 💪🏼

Description

After installing the Button component following https://ui.gluestack.io/docs/getting-started/install-expo, I get the error above when starting the app and no other information.

CodeSandbox/Snack link

No response

Steps to reproduce

1. Create app with npx create-expo-app my-app --template expo-template-blank-typescript
2. Follow instructions in Getting Started
3. Run npm start
4. See error

gluestack-ui Version

latest

Platform

• Android
• Expo
• iOS
• Next

Other Platform

No response

Additional Information

No response

Description

service next fails due to withGluestack looking for node_modules in the wrong location

CodeSandbox/Snack link

No response

Steps to reproduce

• generate a new nx repo with next.js:
  npx create-nx-workspace@latest &&
  nx g @nx/next:app frontend

• follow instructons to add gluestack manually

• follow the code in template repo to make sure everything is correct https://github.com/gluestack/gluestack-ui-nextjs-app-router-template

• start serving the app nx serve frontend

nx serve frontend

> nx run frontend:serve:development

- ready started server on 0.0.0.0:4200, url: http://localhost:4200
Error: ENOENT: no such file or directory, scandir '/Users/evanion/Projects/Personal/courses/courses/apps/frontend/node_modules'
    at Object.readdirSync (node:fs:1446:3)
    at traverseFolder (/Users/evanion/Projects/Personal/courses/courses/node_modules/@gluestack/ui-next-adapter/dist/ui-next-adapter.cjs.development.js:63:18)
    at getExactDependenciesFromNodeModules (/Users/evanion/Projects/Personal/courses/courses/node_modules/@gluestack/ui-next-adapter/dist/ui-next-adapter.cjs.development.js:82:25)
    at withGluestackUI (/Users/evanion/Projects/Personal/courses/courses/node_modules/@gluestack/ui-next-adapter/dist/ui-next-adapter.cjs.development.js:159:33)
    at /Users/evanion/Projects/Personal/courses/courses/node_modules/@nx/next/src/utils/compose-plugins.js:12:40
    at Generator.next (<anonymous>)
    at fulfilled (/Users/evanion/Projects/Personal/courses/courses/node_modules/tslib/tslib.js:164:62) {
  type: 'Error',
  errno: -2,
  syscall: 'scandir',
  code: 'ENOENT',
  path: '/Users/evanion/Projects/Personal/courses/courses/apps/frontend/node_modules'
}
 >  NX   Next.js app exited with code 1
   Pass --verbose to see the stacktrace.

 ——————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————

 >  NX   Running target serve for project frontend failed

   Failed tasks:
   
   - frontend:serve:development
   
   Hint: run the command with --verbose for more details.

   View structured, searchable error logs at https://cloud.nx.app/runs/7PgIjSlgnd

gluestack-ui Version

2.1.5

Platform

• Android
• Expo
• iOS
• Next

Other Platform

nx

Additional Information

It seems like withGluestack is looking in the project root, but it's located two directories up, but I can't find any config that I can pass to tell gluestack where to look, and it seems like the yarn workspace package doesn't support nx.

Description

Toast messages are hidden behind tabs

CodeSandbox/Snack link

No response

Steps to reproduce

1. Go to https://ui.gluestack.io/docs/components/feedback/toast
2. Click on Press me several times
3. See this:

gluestack-ui Version

website

Platform

• Android
• Expo
• iOS
• Next

Other Platform

No response

Additional Information

Also, clicking the toast quickly 3 times in a row only triggers 1 toast message.

Description

can not add HStack or VStack missing in storybook

CodeSandbox/Snack link

No response

Steps to reproduce

1. yarn create expo-app
   2.npx gluestack-ui@latest init
   3.Installs the required dependencies: @gluestack-style/react, @gluestack-style/animation-plugin, and @gluestack-ui/provider.
2. import { Text } from "react-native"
   import { GluestackUIProvider } from "./components"
   import { config } from "./gluestack-ui.config"

export default function App() {
return (

Hello World!

)
}

gluestack-ui Version

5- npx expo start
6- npx gluestack-ui@latest add hstack also npx gluestack-ui@latest add HStack also npx gluestack-ui@latest add Hstack

Platform

• Android
• Expo
• iOS
• Next

Other Platform

No response

Additional Information

hello anyone can help? i create expo app by yarn then i used npx gluestack-ui@latest init then i use official code
<import { Text } from 'react-native';
import { GluestackUIProvider } from './components';
import { config } from './gluestack-ui.config';

export default function App() {
return (

Hello World!

);
}>
then I add many components but HStack and VStack give me errors as in the pictures till I try to choose it from the core component. also need an example to add gluestack in existing javaScript expo app



anyone

Description

When I run 'yarn web', it throws a 'Failed to parse source map' error.

CodeSandbox/Snack link

No response

Steps to reproduce

1. git clone https://github.com/heijinggh/expo-gluestack-template.git
2. yarn
3. yarn web
4. Open http://localhost:19006
5. See errors in the terminal console

gluestack-ui Version

@dank-style/[email protected]

Platform

• Android
• Expo
• iOS
• Next

Other Platform

No response

Additional Information

WARNING in ./node_modules/@dank-style/react/lib/module/core/colorMode.js
Module Warning (from ./node_modules/source-map-loader/dist/cjs.js):
Failed to parse source map from '/node_modules/@dank-style/react/lib/src/colorMode.ts' file: Error: ENOENT: no such file or directory, open '/node_modules/@dank-style/react/lib/src/colorMode.ts'

This error starts to be thrown after I had install these two packages...

 ERROR  Warning: forwardRef render functions accept exactly two parameters: props and ref. Did you forget to use the ref parameter?

GitError: Cloning into 'C:\Users\frans/.gluestack/cache/gluestack-ui'...
[email protected]: Permission denied (publickey).
fatal: Could not read from remote repository.

Please make sure you have the correct access rights
and the repository exists.

at Object.action (C:\Users\frans\AppData\Local\npm-cache\_npx\17e7bc1abc5c95a0\node_modules\simple-git\dist\cjs\index.js:1274:25)
at PluginStore.exec (C:\Users\frans\AppData\Local\npm-cache\_npx\17e7bc1abc5c95a0\node_modules\simple-git\dist\cjs\index.js:1309:29)
at C:\Users\frans\AppData\Local\npm-cache\_npx\17e7bc1abc5c95a0\node_modules\simple-git\dist\cjs\index.js:1676:43
at new Promise (<anonymous>)
at GitExecutorChain.handleTaskData (C:\Users\frans\AppData\Local\npm-cache\_npx\17e7bc1abc5c95a0\node_modules\simple-git\dist\cjs\index.js:1674:16)
at GitExecutorChain.<anonymous> (C:\Users\frans\AppData\Local\npm-cache\_npx\17e7bc1abc5c95a0\node_modules\simple-git\dist\cjs\index.js:1658:44)
at Generator.next (<anonymous>)
at fulfilled (C:\Users\frans\AppData\Local\npm-cache\_npx\17e7bc1abc5c95a0\node_modules\simple-git\dist\cjs\index.js:55:24) {

task: {
commands: [
'clone',
'[email protected]:gluestack/gluestack-ui.git',
'C:\Users\frans/.gluestack/cache/gluestack-ui'
],
format: 'utf-8',
parser: [Function: parser]
}
}
WARNING: gluestack/ui react installer is currently not available. Please configure it manually in your project.
Error: ENOENT: no such file or directory, open 'C:\Users\frans\source\organization-86\project-3-front/gluestack-ui.config.ts'
at Object.openSync (node:fs:600:3)
at Object.readFileSync (node:fs:468:35)
at componentAdder (C:\Users\frans\AppData\Local\npm-cache_npx\17e7bc1abc5c95a0\node_modules\gluestack-ui\component-adder\index.js:172:27)
at main (C:\Users\frans\AppData\Local\npm-cache_npx\17e7bc1abc5c95a0\node_modules\gluestack-ui\index.js:14:11) {
errno: -4058,
syscall: 'open',
code: 'ENOENT',
path: 'C:\Users\frans\source\organization-86\project-3-front/gluestack-ui.config.ts'
}

When I updated my components this error started to be shown, even after I had delete the main component folder:

Unable to resolve "@legendapp/motion" from "gluestack/components/core/Actionsheet/styled-components/Content.tsx"

Description

Can't resolve some packages but the "paths" config

CodeSandbox/Snack link

No response

Steps to reproduce

No se encuentra el módulo "@gluestack-ui/form-control" ni sus declaraciones de tipos correspondientes.ts(2307)

The error is here:

Also, this:

Option 'importsNotUsedAsValues' is deprecated and will stop functioning in TypeScript 5.5. Specify compilerOption '"ignoreDeprecations": "5.0"' to silence this error.
Use 'verbatimModuleSyntax' instead.ts

gluestack-ui Version

latest

Platform

• Android
• Expo
• iOS
• Next

Other Platform

No response

Additional Information

"paths" should be located inside "compilerOptions", not outside.

https://www.typescriptlang.org/tsconfig#paths

Forgive my naiveness but, are there plans to support SSR with Remix.run much like there is for Next.js. As I'm beginning a new project with Remix however, it doesn't seem to me that Gluestack-UI works out of the box with Remix as I assume it would need an adapter much like you've created for Next.js.

Description

Ts error 2322: children property not exists

CodeSandbox/Snack link

No response

Steps to reproduce

Install and try to use the My text as documented.

gluestack-ui Version

latest

Platform

• Android
• Expo
• iOS
• Next

Other Platform

react-native

Additional Information

The select component does not display the label when a value is already selected when initializing the screen. But the choice is well selected in the modal. The value is displayed in the input instead of the associated label.

Thank you for your work.

<Select placeholder="Sélectionnez un type"
                                    bg="$white"
                                    onValueChange={value => setInterventionByChamp('fkTypeInterventions', value)}
                                    selectedValue={interventionEnCours.fkTypeInterventions?.toString()}>
                                <Select.Trigger>
                                    <Select.Input/>
                                    <Select.Icon mr="$3">
                                        <Icon as={ChevronDownIcon}/>
                                    </Select.Icon>
                                </Select.Trigger>

                                <Select.Portal>
                                    <Select.Backdrop/>
                                    <Select.Content>
                                        <Select.DragIndicatorWrapper>
                                            <Select.DragIndicator/>
                                        </Select.DragIndicatorWrapper>
                                        {typeInterventions && typeInterventions?.map((typeIntervention: TypeInterventionsDto) => (
                                            <Select.Item key={typeIntervention.id} label={typeIntervention.libelle!}
                                                         value={typeIntervention.id?.toString()}/>
                                        ))}
                                    </Select.Content>
                                </Select.Portal>
                            </Select>

gluestack-ui Version

latest

Platform

• Android
• Expo
• iOS
• Next

Description

Select to choose from available app languages like this

  var localesItems = getLocalesForPicker(getDefaultLocale()).map((l) => {
    return <Select.Item p="$2" key={l.value} label={l.label} value={l.value} />;
  });

        <Select
          selectedValue={locale}
          onValueChange={(val) => {
            useSettingsStore.setState({ locale: val });
          }}>
          <Select.Trigger w="100%">
            <Select.Input />
            <Select.Icon mr="$2">
              <Icon as={ChevronDownIcon} />
            </Select.Icon>
          </Select.Trigger>
          <Select.Portal>
            <Select.Backdrop />
            <Select.Content pb="$8">
              <Select.DragIndicatorWrapper>
                <Select.DragIndicator />
              </Select.DragIndicatorWrapper>
              {localesItems}
            </Select.Content>
          </Select.Portal>
        </Select>

localesItems is:

[<Select.Item label="Default - English (United States of America)" p="$2" value="default" />, <Select.Item label="Deutsch" p="$2" value="de" />, <Select.Item label="Deutsch (Austria)" p="$2" value="de-AT" />, <Select.Item label="English" p="$2" value="en" />, <Select.Item label="English (Philippines)" p="$2" value="en-PH" />, <Select.Item label="Español" p="$2" value="es" />, <Select.Item label="Français" p="$2" value="fr" />, <Select.Item label="Italiano" p="$2" value="it" />, <Select.Item label="Kiswahili (Tanzania, United Republic of)" p="$2" value="sw-TZ" />, <Select.Item label="Lietuvių (Lithuania)" p="$2" value="lt-LT" />, <Select.Item label="Polski" p="$2" value="pl" />, <Select.Item label="Português (Brazil)" p="$2" value="pt-BR" />, <Select.Item label="Português (Portugal)" p="$2" value="pt-PT" />]

When "de" is selected, user sees "de" on the Input, but I need for it to show "Deutsch" (the label)
It is shown ok on the Select Content items, but not on the selected one.

Problem Statement

Selected value should show the item "label"

Proposed Solution or API

Somehow make it work!

Alternatives

No response

Additional Information

No response

Is there a way to setup a project without the cli? So far it hasn't been a smooth sailing

npx gluestack-ui@latest init
✔ Enter folder name where you want to add your components … components
| Pulling changes...
Failed to pull the changes.
GitError: error: cannot lock ref 'refs/remotes/origin/patch': is at cc7e1a152a7ec4fb6f510aacdec0cac10cb15a24 but expected 1d0a93885c4909914414d208a6443f9860e6f196
From github.com:gluestack/gluestack-ui
 ! 1d0a9388..e2c47244  patch      -> origin/patch  (unable to update local ref)

    at Object.action (/Users/atanas/.npm/_npx/4d3bda48cf361d69/node_modules/simple-git/dist/cjs/index.js:1274:25)
    at PluginStore.exec (/Users/atanas/.npm/_npx/4d3bda48cf361d69/node_modules/simple-git/dist/cjs/index.js:1309:29)
    at /Users/atanas/.npm/_npx/4d3bda48cf361d69/node_modules/simple-git/dist/cjs/index.js:1676:43
    at new Promise (<anonymous>)
    at GitExecutorChain.handleTaskData (/Users/atanas/.npm/_npx/4d3bda48cf361d69/node_modules/simple-git/dist/cjs/index.js:1674:16)
    at GitExecutorChain.<anonymous> (/Users/atanas/.npm/_npx/4d3bda48cf361d69/node_modules/simple-git/dist/cjs/index.js:1658:44)
    at Generator.next (<anonymous>)
    at fulfilled (/Users/atanas/.npm/_npx/4d3bda48cf361d69/node_modules/simple-git/dist/cjs/index.js:55:24)
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5) {
  task: {
    commands: [ 'pull' ],
    format: 'utf-8',
    parser: [Function: parser],
    onError: [Function: onError]
  }
}
| Installing dependencies... node:events:491
      throw er; // Unhandled 'error' event
      ^

Error: spawn yarn ENOENT
    at ChildProcess._handle.onexit (node:internal/child_process:283:19)
    at onErrorNT (node:internal/child_process:476:16)
    at process.processTicksAndRejections (node:internal/process/task_queues:82:21)
Emitted 'error' event on ChildProcess instance at:
    at ChildProcess._handle.onexit (node:internal/child_process:289:12)
    at onErrorNT (node:internal/child_process:476:16)
    at process.processTicksAndRejections (node:internal/process/task_queues:82:21) {
  errno: -2,
  code: 'ENOENT',
  syscall: 'spawn yarn',
  path: 'yarn',
  spawnargs: []
}

Node.js v18.15.0

Description

Pressable from react-native is properly triggering press events for style prop but gluestack isn't. Because of this you can't apply styling when pressing the element

CodeSandbox/Snack link

No response

Steps to reproduce

1. Create a custom component with Pressable with some styling like a background color
2. Add the a style prop: `style={({pressed}) => pressed ? {opacity: 0.5} : {}}
3. Notice that the style never changes

Works with Pressable from react-native

gluestack-ui Version

Pressable: 0.1.5, gluestack-ui/react: 0.1.23

Platform

• Android
• Expo
• iOS
• Next

Other Platform

No response

Additional Information

No response

Description

When a menu item is selected in Chrome (but not in Safari) elements behind the menu are pressed.

CodeSandbox/Snack link

No response

Steps to reproduce

1. Use a Menu component
2. Click the Menu button
3. Click a Menu.Item with an onPress event
4. (bug) the onPress event then presses items behind it.

gluestack-ui Version

latest 0.1.3

Platform

• Android
• Expo
• iOS
• Next

Other Platform

Expo Web

Additional Information

This only occurs in Chrome, but not in Safari.

Description

Enable the framework to work with pure React Native projects.

Problem Statement

Looks like currently the framework is working only with Expo projects.

Proposed Solution or API

Enable the framework to work with pure React Native projects.

Alternatives

No response

Additional Information

No response

Description

As the title says, syntax highlighting is broken in the "Usage" section of the Heading page.

CodeSandbox/Snack link

No response

Steps to reproduce

1. Go to https://ui.gluestack.io/docs/components/typography/heading
2. Scroll down to 'Usage' section.
3. See the syntax highlighting

gluestack-ui Version

0.2.3

Platform

• Android
• Expo
• iOS
• Next

Other Platform

Chrome/Firefox/Safari browser

Additional Information

Unrelated, but please consider adding a docs issue type. I think that would make it easy to categorize issues. Thanks.

When you use the default Select component, imported from gluestack, it seems like this:

Fix:

Change the default width to 100% and height to auto

Part 2

And when you add many components, the size of Actionsheet breaks the layout, like this:

Fix:

Add a scrollView to the Actionsheet's container:

Here, maxHeight could be calculated by a component prop... I put it fixed just to test.

After that, the layout will look more concise:

Ignore all the colors, it's just to test

This error happened to me when I was using the default component and style provided by the lib.

ERROR  Warning: Failed prop type: Invalid props.style key `textDecoration` supplied to `Text`.
Bad object: {
  "color": "#3f3f46",
  "fontWeight": "400",
  "fontSize": 16,
  "lineHeight": 22,
  "textDecoration": "underline"
}
Valid keys: [
  "alignContent",
  "alignItems",
  "alignSelf",
  "aspectRatio",
  "borderBottomWidth",
  "borderEndWidth",
  "borderLeftWidth",
  "borderRightWidth",
  "borderStartWidth",
  "borderTopWidth",
  "borderWidth",
  "bottom",
  "columnGap",
  "direction",
  "display",
  "end",
  "flex",
  "flexBasis",
  "flexDirection",
  "flexGrow",
  "flexShrink",
  "flexWrap",
  "gap",
  "height",
  "justifyContent",
  "left",
  "margin",
  "marginBlock",
  "marginBlockEnd",
  "marginBlockStart",
  "marginBottom",
  "marginEnd",
  "marginHorizontal",
  "marginInline",
  "marginInlineEnd",
  "marginInlineStart",
  "marginLeft",
  "marginRight",
  "marginStart",
  "marginTop",
  "marginVertical",
  "maxHeight",
  "maxWidth",
  "minHeight",
  "minWidth",
  "overflow",
  "padding",
  "paddingBlock",
  "paddingBlockEnd",
  "paddingBlockStart",
  "paddingBottom",
  "paddingEnd",
  "paddingHorizontal",
  "paddingInline",
  "paddingInlineEnd",
  "paddingInlineStart",
  "paddingLeft",
  "paddingRight",
  "paddingStart",
  "paddingTop",
  "paddingVertical",
  "position",
  "right",
  "rowGap",
  "start",
  "top",
  "width",
  "zIndex",
  "shadowColor",
  "shadowOffset",
  "shadowOpacity",
  "shadowRadius",
  "transform",
  "backfaceVisibility",
  "backgroundColor",
  "borderBottomColor",
  "borderBottomEndRadius",
  "borderBottomLeftRadius",
  "borderBottomRightRadius",
  "borderBottomStartRadius",
  "borderColor",
  "borderCurve",
  "borderEndColor",
  "borderLeftColor",
  "borderRadius",
  "borderRightColor",
  "borderStartColor",
  "borderStyle",
  "borderTopColor",
  "borderTopEndRadius",
  "borderTopLeftRadius",
  "borderTopRightRadius",
  "borderTopStartRadius",
  "elevation",
  "opacity",
  "pointerEvents",
  "color",
  "fontFamily",
  "fontSize",
  "fontStyle",
  "fontVariant",
  "fontWeight",
  "includeFontPadding",
  "letterSpacing",
  "lineHeight",
  "textAlign",
  "textAlignVertical",
  "textDecorationColor",
  "textDecorationLine",
  "textDecorationStyle",
  "textShadowColor",
  "textShadowOffset",
  "textShadowRadius",
  "textTransform",
  "userSelect",
  "verticalAlign",
  "writingDirection"
]
    at Text (http://192.168.0.64:19000/node_modules/expo/AppEntry.bundle?platform=ios&dev=true&hot=false:61696:27)
    in NewComp (created by Button.Text)
    in Button.Text (created by Button)
    in RCTView (created by View)
    in View (created by Pressable)
    in Pressable (created by Pressable)
    in NewComp (created by Button)
    in Button (created by Button)
    in Button (created by Buttons)
    in RCTView (created by View)
    in View (created by Buttons)
    in RCTView (created by View)
    in View (created by Buttons)
    in Buttons (created by App)
    in RCTView (created by View)
    in View (created by App)
    in ToastProvider (created by Provider)
    in PortalProvider (created by Provider)
    in StyledProvider (created by Provider)
    in Provider (created by App)
    in App (created by withDevTools(App))
    in withDevTools(App)
    in RCTView (created by View)
    in View (created by AppContainer)
    in RCTView (created by View)
    in View (created by AppContainer)
    in AppContainer
    in main(RootComponent)

Description

My ActionSheets where working just fine, broke after updating to latest

CodeSandbox/Snack link

No response

Steps to reproduce

1. Go to '...'
2. Click on '...'
3. Scroll down to '...'
4. See error

gluestack-ui Version

latest

Platform

• Android
• Expo
• iOS
• Next

Other Platform

No response

Additional Information

I've changed:
@dank-style/animation-plugin => @gluestack-style/animation-plugin
@dank-style/react => @gluestack-style/react

Also did:
npx gluestack-ui@latest update --all

Guys, I'm trying to do a showcase using this library... My intention with it, is to create a kind of documentation showing how every dev can personalize these components as they like. But in this process, I'm facing a lot of issues and questions about it...

The main concept, is customize every component "rebuilding itself", but adding my custom styles using "styled" from dank.style. After that, I want to share my custom components to the other, like Select that depends on ActionSheet...

Said that, I'd like to know if there are somebody that I can share my private project, for now, and show exactly what I'm trying to do and what's making me stucked?

I'm big fan of NativeBase and I'm enjoying GluestackUI, even these issues. 💪🏼

Description

When using icons inside of a button component, the icon renders at a fraction of it's expected size. The size does not appear to change even when using size, w, and h props or when wrapping in large Center component.

CodeSandbox/Snack link

No response

Steps to reproduce

1. Use the following inside a view:

<Button>
    <InfoIcon mr="$2" color="$white" />
    <Button.Text>Some Text</Button.Text>
</Button>

2. Run on iOS simulator.
3. Button icon renders super small

gluestack-ui Version

0.1.13

Platform

• Android
• Expo
• iOS
• Next

Other Platform

No response

Additional Information

No response

Description

Setting the defaultValue prop = true doesn't turn the switch on.

CodeSandbox/Snack link

No response

Steps to reproduce

I am currently using the defaultValue prop in order to "set" what the switch's initial state is based off of an API call. But it doesn't work, when I set it to a static defaultValue={true} it also doesn't work. This is a problem on Chrome and Safari.

gluestack-ui Version

latest 0.1.3

Platform

• Android
• Expo
• iOS
• Next

Other Platform

web

Additional Information

No response

I can't get the app to load after installing icons. I'm in a nextjs 13 application.

I used npx gluestack-ui@latest add icons with an s. I think the docs are incorrect.
After additionally installing all the dependencies, I get this with the nextjs app loads.

I've been able to troubleshoot most of the bugs to this point, but not sure what to do with this one. Thanks!

Description

Would love to help with development

CodeSandbox/Snack link

No response

Steps to reproduce

• Follow CONTRIBUTING.md and trying to run iOS simulator (for developing and testing changes for react-native)
• After yarn ios
• Below clic on "SIDEBAR"
• Choose stories/FORMS/Select
• Choose Select
• Clic on "Select Option"

gluestack-ui Version

main branch

Platform

• Android
• Expo
• iOS
• Next

Other Platform

No response

Additional Information

Tried asking this on Discord but no luck.

I would LOVE to help on development.

The command npx gluestack-ui is bringing an undefined option:

Using firefox. Issue doesn't exist on chrome.

Description

Using <TextArea> as explained on documentation

CodeSandbox/Snack link

No response

Steps to reproduce

1. Go to '...'
2. Click on '...'
3. Scroll down to '...'
4. See error

gluestack-ui Version

latest / textarea-0.1.5

Platform

• Android
• Expo
• iOS
• Next

Other Platform

No response

Additional Information

    <TextArea>
      <TextArea.Input
        onChangeText={(text) => {
          useListsStore.getState().setList(listName, listKey, text);
        }}
        value={listText}
        autoCorrect={false}
        {...inputProps}
      />
    </TextArea>

Warning: Failed prop type: Invalid props.style key multiline supplied to ForwardRef(TextInput).
Bad object: {
"padding": 8,
"multiline": true,
"color": "#262626",
"textAlignVertical": "top",
"flex": 1,
"paddingHorizontal": 12,
"paddingVertical": 10,
"fontSize": 16,
"outlineWidth": "0",
"outline": "none"
}
Valid keys: [
"alignContent",
"alignItems",
"alignSelf",
"aspectRatio",
"borderBottomWidth",
"borderEndWidth",
"borderLeftWidth",
"borderRightWidth",
"borderStartWidth",
"borderTopWidth",
"borderWidth",
"bottom",
"columnGap",
"direction",
"display",
"end",
"flex",
"flexBasis",
"flexDirection",
"flexGrow",
"flexShrink",
"flexWrap",
"gap",
"height",
"justifyContent",
"left",
"margin",
"marginBlock",
"marginBlockEnd",
"marginBlockStart",
"marginBottom",
"marginEnd",
"marginHorizontal",
"marginInline",
"marginInlineEnd",
"marginInlineStart",
"marginLeft",
"marginRight",
"marginStart",
"marginTop",
"marginVertical",
"maxHeight",
"maxWidth",
"minHeight",
"minWidth",
"overflow",
"padding",
"paddingBlock",
"paddingBlockEnd",
"paddingBlockStart",
"paddingBottom",
"paddingEnd",
"paddingHorizontal",
"paddingInline",
"paddingInlineEnd",
"paddingInlineStart",
"paddingLeft",
"paddingRight",
"paddingStart",
"paddingTop",
"paddingVertical",
"position",
"right",
"rowGap",
"start",
"top",
"width",
"zIndex",
"shadowColor",
"shadowOffset",
"shadowOpacity",
"shadowRadius",
"transform",
"backfaceVisibility",
"backgroundColor",
"borderBottomColor",
"borderBottomEndRadius",
"borderBottomLeftRadius",
"borderBottomRightRadius",
"borderBottomStartRadius",
"borderColor",
"borderCurve",
"borderEndColor",
"borderLeftColor",
"borderRadius",
"borderRightColor",
"borderStartColor",
"borderStyle",
"borderTopColor",
"borderTopEndRadius",
"borderTopLeftRadius",
"borderTopRightRadius",
"borderTopStartRadius",
"elevation",
"opacity",
"pointerEvents",
"color",
"fontFamily",
"fontSize",
"fontStyle",
"fontVariant",
"fontWeight",
"includeFontPadding",
"letterSpacing",
"lineHeight",
"textAlign",
"textAlignVertical",
"textDecorationColor",
"textDecorationLine",
"textDecorationStyle",
"textShadowColor",
"textShadowOffset",
"textShadowRadius",
"textTransform",
"userSelect",
"verticalAlign",
"writingDirection"
]

Description

Using GluestackUI in a clean new projekt with Expo SDK 49 causes a rendering issue when implementing the provider

CodeSandbox/Snack link

https://github.com/AllBitsEqual/Prototyping/tree/gluestack/gluestack

Steps to reproduce

either follow the link above for my demo repo with a clean new project or complete the following steps:

1. create new expo project: npx create-expo-app@latest --template expo-template-blank-typescript@sdk-49
2. install missing packages, pick name, cd into project
3. install expo router requirements yarn expo install expo-router react-native-safe-area-context react-native-screens expo-linking expo-constants expo-status-bar react-native-gesture-handler
4. (optional) install requirements for web yarn expo install react-native-web@~0.19.6 [email protected]
5. follow other changes from https://docs.expo.dev/routing/installation/ (change package.json, app.json and babel.config.js as described)
6. install gluestack UI npx gluestack-ui@latest
7. start project and run it in your emulator (web doesn't seem to be affected)
8. make a page (optional with a base _layout.tsx) and implement the provider <GluestackUIProvider config={config.theme}>
9. update the app in your emulator and the error should occur

gluestack-ui Version

latest

Platform

• Android
• Expo
• iOS
• Next

Other Platform

No response

Additional Information

No response

Description

Toast not always on top, also zIndex is not correct

CodeSandbox/Snack link

No response

Steps to reproduce

As Images show:

Toast's zIndex should greater than my modelview's. Or is there any way to modify Toast's zIndex.

When i set placement to "top", toast not always on top.

gluestack-ui Version

0.1.5

Platform

• Android
• Expo
• iOS
• Next

Other Platform

No response

Additional Information

No response

On Terminal

On Simulator

Description

latest versions of packages throw errors in tsc

CodeSandbox/Snack link

No response

Steps to reproduce

1. npx create-expo-app -t expo-template-blank-typescript
2. Follow Steps 1 & 2 in the gluestack-ui Expo Installation instructions
3. npm install @gluestack-ui/[email protected] @gluestack-ui/[email protected]
4. npx tsc - See there are no Typescript errors
5. npm install @gluestack-ui/provider@latest @gluestack-ui/toast@latest
6. npx tsc - See that Typescript cannot find declaration files

gluestack-ui Version

latest

Platform

• Android
• Expo
• iOS
• Next

Other Platform

No response

Additional Information

I created a repository at the link below with repro steps 1-3 for quicker testing. Just npm install @gluestack-ui/provider@latest @gluestack-ui/toast@latest && npx tsc to repro.
https://github.com/daviddripps/gluestack-test

Description

It was working, not anymore

CodeSandbox/Snack link

No response

Steps to reproduce

gluestack-ui Version

latest

Platform

• Android
• Expo
• iOS
• Next

Other Platform

No response

Additional Information

I was using this command to keep using latest fixes; now it is giving me error

Component "--all" not found.