gluestack / gluestack-ui Goto Github PK
View Code? Open in Web Editor NEWReact & React Native Components & Patterns (import from library & copy-paste styles all the way to victory)
Home Page: https://gluestack.io/
License: MIT License
React & React Native Components & Patterns (import from library & copy-paste styles all the way to victory)
Home Page: https://gluestack.io/
License: MIT License
It was working, not anymore
No response
latest
No response
I was using this command to keep using latest fixes; now it is giving me error
Component "--all" not found.
Unable to resolve "@legendapp/motion" from "gluestack/components/core/Actionsheet/styled-components/Content.tsx"
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>
Toast messages are hidden behind tabs
No response
website
No response
Also, clicking the toast quickly 3 times in a row only triggers 1 toast message.
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'],
});
can not add HStack or VStack missing in storybook
No response
export default function App() {
return (
Hello World!
)
}
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
No response
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
Applying backgroundColor="red" has no effect
No response
latest
No response
migrating from nativebase; the Stack accepted backgroundColor (typings on HStack from gluestack seems to accept it) but it is not working
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 💪🏼
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.
Selected value should show the item "label"
Somehow make it work!
No response
No response
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'
}
service next fails due to withGluestack looking for node_modules
in the wrong location
No response
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
2.1.5
nx
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.
https://ui.gluestack.io/docs/overview/introduction is not scrollable on Firefox.
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.
No response
npx create-expo-app my-app --template expo-template-blank-typescript
npm start
latest
No response
No response
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?
Errors are reported when running in the ios simulator, but the web side is fine
No response
{
"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
}
}
}
latest
No response
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
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)
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
Using GluestackUI in a clean new projekt with Expo SDK 49 causes a rendering issue when implementing the provider
https://github.com/AllBitsEqual/Prototyping/tree/gluestack/gluestack
either follow the link above for my demo repo with a clean new project or complete the following steps:
npx create-expo-app@latest --template expo-template-blank-typescript@sdk-49
yarn expo install expo-router react-native-safe-area-context react-native-screens expo-linking expo-constants expo-status-bar react-native-gesture-handler
yarn expo install react-native-web@~0.19.6 [email protected]
npx gluestack-ui@latest
<GluestackUIProvider config={config.theme}>
latest
No response
No response
Setting the defaultValue prop = true doesn't turn the switch on.
No response
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.
latest 0.1.3
web
No response
Toast not always on top, also zIndex is not correct
No response
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.
0.1.5
No response
No response
npx gluestack-ui@latest init
✔ Enter folder name where you want to add your components … components
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...
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. 💪🏼
using npx to install partial component cause infinite import error.
No response
export * from './';
auto inserted.0.1.2
No response
No response
Would love to help with development
No response
yarn ios
main branch
No response
Tried asking this on Discord but no luck.
I would LOVE to help on development.
My ActionSheets where working just fine, broke after updating to latest
No response
latest
No response
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
Using <TextArea> as explained on documentation
No response
latest / textarea-0.1.5
No response
<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"
]
As the title says, syntax highlighting is broken in the "Usage" section of the Heading page.
No response
0.2.3
Chrome/Firefox/Safari browser
Unrelated, but please consider adding a docs
issue type. I think that would make it easy to categorize issues. Thanks.
Menu error: MenuContext
must be used within MenuContext
No response
MenuContext
must be used within MenuContext
website
No response
No response
latest versions of packages throw errors in tsc
No response
npx create-expo-app -t expo-template-blank-typescript
npm install @gluestack-ui/[email protected] @gluestack-ui/[email protected]
npx tsc
- See there are no Typescript errorsnpm install @gluestack-ui/provider@latest @gluestack-ui/toast@latest
npx tsc
- See that Typescript cannot find declaration fileslatest
No response
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
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)).
styled.ts
is missing on npx gluestack-ui
installation.export { styled } from '@dank-style/react';
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
No response
Works with Pressable from react-native
Pressable: 0.1.5, gluestack-ui/react: 0.1.23
No response
No response
When I run 'yarn web', it throws a 'Failed to parse source map' error.
No response
git clone https://github.com/heijinggh/expo-gluestack-template.git
yarn
yarn web
@dank-style/[email protected]
No response
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'
When a menu item is selected in Chrome (but not in Safari) elements behind the menu are pressed.
No response
latest 0.1.3
Expo Web
This only occurs in Chrome, but not in Safari.
Change the default width to 100%
and height to auto
And when you add many components, the size of Actionsheet breaks the layout, like this:
Add a scrollView to the Actionsheet's container:
Here, maxHeight
could be calculated by a component prop... I put it fixed just to test.
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...
Can't resolve some packages but the "paths" config
No response
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
latest
No response
"paths" should be located inside "compilerOptions", not outside.
npx gluestack-ui@latest
gluestack/ui is not initialised in your project!
✔ Do you wish to initialise it? (y/n) … y
✔ 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 75373a73ef952a0df599c0fa83185864171dfa9d
From github.com:gluestack/gluestack-ui
! 75373a73..6adc1a1d patch -> origin/patch (unable to update local ref)
at Object.action (/Users/fernando/.npm/_npx/4d3bda48cf361d69/node_modules/simple-git/dist/cjs/index.js:1274:25)
at PluginStore.exec (/Users/fernando/.npm/_npx/4d3bda48cf361d69/node_modules/simple-git/dist/cjs/index.js:1309:29)
at /Users/fernando/.npm/_npx/4d3bda48cf361d69/node_modules/simple-git/dist/cjs/index.js:1676:43
at new Promise (<anonymous>)
at GitExecutorChain.handleTaskData (/Users/fernando/.npm/_npx/4d3bda48cf361d69/node_modules/simple-git/dist/cjs/index.js:1674:16)
at GitExecutorChain.<anonymous> (/Users/fernando/.npm/_npx/4d3bda48cf361d69/node_modules/simple-git/dist/cjs/index.js:1658:44)
at Generator.next (<anonymous>)
at fulfilled (/Users/fernando/.npm/_npx/4d3bda48cf361d69/node_modules/simple-git/dist/cjs/index.js:55:24)
at processTicksAndRejections (internal/process/task_queues.js:95:5) {
task: {
commands: [ 'pull' ],
format: 'utf-8',
parser: [Function: parser],
onError: [Function: onError]
}
}
\ Installing dependencies... Dependencies installed successfully.
Error: ENOENT: no such file or directory, open '/Volumes/Dados/Fernando/Development/study-gluestackui-3/gluestack-ui.config.ts'
at Object.openSync (fs.js:498:3)
at Object.readFileSync (fs.js:394:35)
at componentAdder (/Users/fernando/.npm/_npx/4d3bda48cf361d69/node_modules/gluestack-ui/component-adder/index.js:156:27)
at main (/Users/fernando/.npm/_npx/4d3bda48cf361d69/node_modules/gluestack-ui/index.js:14:11)
at processTicksAndRejections (internal/process/task_queues.js:95:5) {
errno: -2,
syscall: 'open',
code: 'ENOENT',
path: '/Volumes/Dados/Fernando/Development/study-gluestackui-3/gluestack-ui.config.ts'
}
Enable the framework to work with pure React Native projects.
Looks like currently the framework is working only with Expo projects.
Enable the framework to work with pure React Native projects.
No response
No response
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.
No response
<Button>
<InfoIcon mr="$2" color="$white" />
<Button.Text>Some Text</Button.Text>
</Button>
0.1.13
No response
No response
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>
latest
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.
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!
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.