feat: bumped react-native and react-native-web version

_template/package-template/example/native/package.json

@@ -17,7 +17,7 @@
     "@babel/core": "^7.12.9",
     "@expo/webpack-config": "^0.17.2",
     "@types/react": "~18.0.14",
-    "@types/react-native": "~0.70.6",
+    "@types/react-native": "~0.72.3",
     "babel-loader": "8.2.5",
     "ts-loader": "~8.2.0",
     "typescript": "^4.6.3"

_template/package-template/package.json

@@ -14,20 +14,20 @@
   },
   "devDependencies": {
     "@types/react": "^18.0.22",
-    "@types/react-native": "^0.69.15",
+    "@types/react-native": "^0.72.3",
     "babel-plugin-transform-remove-console": "^6.9.4",
     "react": "^18.1.0",
     "react-dom": "18.1.0",
-    "react-native": "^0.70.3",
+    "react-native": "^0.72.4",
     "react-native-builder-bob": "^0.20.1",
-    "react-native-web": "^0.18.1",
+    "react-native-web": "^0.19.9",
     "tsconfig": "*",
     "typescript": "^4.7.4"
   },
   "dependencies": {
     "@expo/html-elements": "^0.2.2",
     "@gluestack/styled": "*",
-    "@react-native-aria/focus": "^0.2.7",
+    "@react-native-aria/focus": "^0.2.9",
     "lodash.merge": "^4.6.2"
   },
   "peerDependencies": {

example/apps/expo-app/babel.config.js

@@ -30,3 +30,13 @@ module.exports = function (api) {
     ],
   };
 };
+function getAliases() {
+  return {
+    // For development, we want to alias the library to the source
+    '@gluestack-ui/themed': path.join(__dirname, '../../packages/themed/src'),
+    '@gluestack-ui/config': path.join(
+      __dirname,
+      '../../packages/config/src/gliesstack-ui.config'
+    ),
+  };
+}

example/apps/expo-app/package.json

@@ -12,7 +12,7 @@
     "expo": "~49.0.13",
     "expo-status-bar": "~1.6.0",
     "react": "18.2.0",
-    "react-native": "0.72.5"
+    "react-native": "^0.72.4"
   },
   "devDependencies": {
     "@babel/core": "^7.20.0"

example/expo-project/tsconfig.json

@@ -0,0 +1,33 @@
+{
+  "extends": "expo/tsconfig.base",
+  "compilerOptions": {
+    "baseUrl": ".",
+    "paths": {
+      "@gluestack-ui/themed": ["../../packages/themed/src"],
+      "@gluestack-ui/config": ["../../packages/config/src/gluestack-ui.config"]
+    },
+    "emitDeclarationOnly": true,
+    "noEmit": false,
+    "declaration": true,
+    "allowUnreachableCode": false,
+    "allowUnusedLabels": true,
+    "esModuleInterop": true,
+    "forceConsistentCasingInFileNames": true,
+    "jsx": "react",
+    "lib": ["esnext", "dom"],
+    "module": "esnext",
+    "moduleResolution": "node",
+    "noFallthroughCasesInSwitch": true,
+    "noImplicitReturns": true,
+    "noImplicitUseStrict": false,
+    "noStrictGenericChecks": false,
+    "noUnusedLocals": false,
+    "noUnusedParameters": true,
+    "resolveJsonModule": true,
+    "skipLibCheck": true,
+    "strict": true,
+    "target": "esnext"
+  },
+  "exclude": ["lib", "node_modules", "storybookDocsComponents"],
+  "include": ["src"]
+}

example/next-project/package.json

@@ -0,0 +1,64 @@
+{
+  "name": "next-cli-test",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start",
+    "lint": "next lint"
+  },
+  "dependencies": {
+    "@types/node": "18.15.11",
+    "@types/react": "18.0.37",
+    "@types/react-dom": "18.0.11",
+    "autoprefixer": "10.4.14",
+    "eslint": "8.38.0",
+    "eslint-config-next": "13.3.0",
+    "next": "13.3.0",
+    "postcss": "8.4.22",
+    "react": "18.2.0",
+    "react-dom": "18.2.0",
+    "tailwindcss": "3.3.1",
+    "typescript": "5.0.4",
+    "@gluestack-ui/provider": "latest",
+    "@gluestack-style/animation-plugin": "latest",
+    "@gluestack/ui-next-adapter": "latest",
+    "@gluestack-ui/actionsheet": "latest",
+    "@legendapp/motion": "latest",
+    "@gluestack-ui/icon": "latest",
+    "react-native-svg": "latest",
+    "@gluestack-ui/alert": "latest",
+    "@gluestack-ui/alert-dialog": "latest",
+    "@gluestack-ui/avatar": "latest",
+    "@gluestack-ui/checkbox": "latest",
+    "@gluestack-ui/divider": "latest",
+    "@gluestack-ui/fab": "latest",
+    "@gluestack-ui/image": "latest",
+    "@gluestack-ui/form-control": "latest",
+    "@gluestack-ui/hstack": "latest",
+    "@expo/html-elements": "latest",
+    "@gluestack-ui/input": "latest",
+    "@gluestack-ui/linear-gradient": "latest",
+    "@gluestack-ui/link": "latest",
+    "@gluestack-ui/menu": "latest",
+    "@gluestack-ui/modal": "latest",
+    "@gluestack-ui/popover": "latest",
+    "@gluestack-ui/pressable": "latest",
+    "@gluestack-ui/progress": "latest",
+    "@gluestack-ui/radio": "latest",
+    "@gluestack-ui/select": "latest",
+    "@gluestack-ui/slider": "latest",
+    "@gluestack-ui/spinner": "latest",
+    "@gluestack-ui/switch": "latest",
+    "@gluestack-ui/tabs": "latest",
+    "@gluestack-ui/textarea": "latest",
+    "@gluestack-ui/toast": "latest",
+    "@gluestack-ui/tooltip": "latest",
+    "@gluestack-ui/vstack": "latest"
+  },
+  "devDependencies": {
+    "react-native-web": "^0.19.9",
+    "react-native": "^0.72.4"
+  }
+}

example/storybook/.storybook/main.js

@@ -46,6 +46,10 @@ module.exports = {
         __dirname,
         '../../../packages/themed/src'
       ),
+      '@gluestack-ui/config': path.join(
+        __dirname,
+        '../../../packages/config/src/gluestack-ui.config'
+      ),
     };
 
     config.resolve.alias = {

example/storybook/package.json

@@ -33,9 +33,9 @@
     "@react-aria/overlays": "^3.13.0",
     "@react-aria/separator": "^3.3.0",
     "@react-aria/utils": "^3.15.0",
-    "@react-native-aria/button": "^0.2.4",
-    "@react-native-aria/overlays": "0.3.7",
-    "@react-native-aria/separator": "^0.2.5",
+    "@react-native-aria/button": "^0.2.5",
+    "@react-native-aria/overlays": "0.3.10",
+    "@react-native-aria/separator": "^0.2.6",
     "@react-native-async-storage/async-storage": "~1.17.3",
     "@react-native-community/datetimepicker": "6.5.2",
     "@react-native-community/slider": "4.2.4",
@@ -51,12 +51,12 @@
     "re-resizable": "^6.9.11",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "react-native": "0.72.5",
+    "react-native": "0.72.4",
     "react-native-gesture-handler": "^2.12.1",
     "react-native-safe-area-context": "^4.4.1",
     "react-native-svg": "13.4.0",
     "react-native-vector-icons": "^10.0.0",
-    "react-native-web": "^0.19.8",
+    "react-native-web": "^0.19.9",
     "react-stately": "^3.21.0",
     "shortid": "^2.2.16",
     "ts-jest": "^29.1.0",
@@ -84,7 +84,7 @@
     "@storybook/react": "^6.5.14",
     "@storybook/react-native": "next",
     "@types/react": "^18.0.27",
-    "@types/react-native": "~0.70.6",
+    "@types/react-native": "~0.72.3",
     "babel-loader": "^8.2.3",
     "babel-plugin-react-docgen-typescript": "^1.5.1",
     "babel-plugin-react-native-web": "^0.18.10",

example/storybook/src/components/Forms/Checkbox/Checkbox.tsx

@@ -22,7 +22,7 @@ const CheckboxGroupBasic = ({ ...props }: any) => {
 
   return (
     <CheckboxGroup
-      accessibilityLabel="Checkbox Group"
+      aria-label="Checkbox Group"
       value={values}
       onChange={setValues}
       nativeID="checkbox-group"
@@ -34,7 +34,6 @@ const CheckboxGroupBasic = ({ ...props }: any) => {
         isIndeterminate
         value="Label 1"
         aria-label="Label 1"
-        accessibilityLabel="Checkbox"
         onChange={(isSelected: boolean) =>
           // eslint-disable-next-line no-console
           console.log(isSelected, '###')
@@ -52,7 +51,6 @@ const CheckboxGroupBasic = ({ ...props }: any) => {
         size={props.size}
         aria-label="Label 2"
         value="Label 2"
-        accessibilityLabel="Checkbox"
         onChange={(isSelected: boolean) =>
           // eslint-disable-next-line no-console
           console.log(isSelected, '###')

example/storybook/src/components/Forms/Checkbox/index.stories.mdx

@@ -508,10 +508,9 @@ We have outlined the various features that ensure the Checkbox component is acce
 
 #### States
 
-- Setting the `accessibilityState`.
-- In error state, `accessibilityInvalid` will be passed to indicate that the radio input has an error, and providing support for an `accessibilityErrorMessage` to describe the error in more detail.
-- In disabled state, `accessibilityElementsHidden` will be passed to make radio input not focusable.
-- In required state, `accessibilityRequired` will be passed to indicate that the radio input is required.
+- In error state, `aria-invalid` will be passed to indicate that the radio input has an error, and providing support for an `aria-errormessage` to describe the error in more detail.
+- In disabled state, `aria-hidden` will be passed to make radio input not focusable.
+- In required state, `aria-required` will be passed to indicate that the radio input is required.
 
 ## Themed
 

example/storybook/src/components/Forms/Input/index.stories.mdx

@@ -385,24 +385,23 @@ We have outlined the various features that ensure the Input component is accessi
 
 #### Keyboard
 
-- Setting the `accessibilityLabel` and `accessibilityHint` to help users understand the purpose and function of the Input
+- Setting the `aria-label` and `aria-hint` to help users understand the purpose and function of the Input
 
 #### Screen Reader
 
 - Compatible with screen readers such as VoiceOver and Talk-back.
-- The `accessible` and `accessibilityLabel` props to provide descriptive information about the Input
-- Setting `accessibilityTraits` and `accessibilityHint` to provide contextual information about the various states of the Input, such as "double tap to edit".
+- The `accessible` and `aria-label` props to provide descriptive information about the Input
+- Setting `aria-traits` and `aria-hint` to provide contextual information about the various states of the Input, such as "double tap to edit".
 
 #### Focus Management
 
 - The `onFocus` and `onBlur` props to manage focus states and provide visual cues to users. This is especially important for users who rely on keyboard navigation.
 
 #### States
 
-- Setting the `accessibilityState`.
-- In error state, `accessibilityInvalid` will be passed to indicate that the Input has an error, and providing support for an `accessibilityErrorMessage` to describe the error in more detail.
-- In disabled state, `accessibilityElementsHidden` will be passed to make input not focusable.
-- In required state, `accessibilityRequired` will be passed to indicate that the Input is required.
+- In error state, `aria-invalid` will be passed to indicate that the Input has an error, and providing support for an `aria-errormessage` to describe the error in more detail.
+- In disabled state, `aria-hidden` will be passed to make input not focusable.
+- In required state, `aria-required` will be passed to indicate that the Input is required.
 
 ## Themed
 

example/storybook/src/components/Forms/Radio/RadioGroup.tsx

@@ -30,7 +30,7 @@ const RadioGroupBasic = ({
         isInvalid={isInvalid}
         size={size}
         value="Label 1"
-        accessibilityLabel="Radio"
+        aria-label="Label 1"
         onChange={(nextValue: boolean) => console.log(nextValue, 'nextValue')}
         {...props}
       >
@@ -46,7 +46,7 @@ const RadioGroupBasic = ({
         isInvalid={isInvalid}
         size={size}
         value="Label 2"
-        accessibilityLabel="Radio"
+        aria-label="Label 2"
         onChange={(nextValue: boolean) => console.log(nextValue, 'nextValue')}
       >
         <RadioIndicator>
@@ -61,7 +61,7 @@ const RadioGroupBasic = ({
         isInvalid={isInvalid}
         size={size}
         value="Label 3"
-        accessibilityLabel="Radio"
+        aria-label="Label 3"
         onChange={(isSelected: boolean) =>
           console.log(isSelected, 'isSelected')
         }

example/storybook/src/components/Forms/Radio/index.stories.mdx

@@ -459,10 +459,9 @@ We have outlined the various features that ensure the Radio component is accessi
 
 #### States
 
-- Setting the `accessibilityState`.
-- In error state, `accessibilityInvalid` will be passed to indicate that the radio input has an error, and providing support for an `accessibilityErrorMessage` to describe the error in more detail.
-- In disabled state, `accessibilityElementsHidden` will be passed to make radio input not focusable.
-- In required state, `accessibilityRequired` will be passed to indicate that the radio input is required.
+- In error state, `aria-invalid` will be passed to indicate that the radio input has an error, and providing support for an `aria-errormessage` to describe the error in more detail.
+- In disabled state, `aria-hidden` will be passed to make radio input not focusable.
+- In required state, `aria-required` will be passed to indicate that the radio input is required.
 
 ## Themed
 

example/storybook/src/components/Forms/Textarea/index.stories.mdx

@@ -295,12 +295,12 @@ We have outlined the various features that ensure the Textarea component is acce
 
 #### Keyboard
 
-- setting the accessibilityLabel and accessibilityHint
+- setting the aria-label and aria-hint
 
 #### Screen Reader
 
-- VoiceOver: accessible and accessibilityLabel props to describe the input's purpose
-- `accessibilityTraits` and `accessibilityHint` for the various states of the input, such as "double tap to edit"
+- VoiceOver: accessible and aria-label props to describe the input's purpose
+- `aria-traits` and `aria-hint` for the various states of the input, such as "double tap to edit"
 
 ## Themed
 

packages/config/src/theme/ActionsheetContent.ts

@@ -16,9 +16,7 @@ export const ActionsheetContent = createStyle({
       bg: '$backgroundDark900',
     },
   },
-  _web: {
-    userSelect: 'none',
-  },
+  userSelect: 'none',
   defaultProps: {
     hardShadow: '5',
   },

packages/config/src/theme/ButtonText.ts

@@ -2,7 +2,5 @@ import { createStyle } from '@gluestack-style/react';
 
 export const ButtonText = createStyle({
   color: '$textLight0',
-  _web: {
-    userSelect: 'none',
-  },
+  userSelect: 'none',
 });

packages/config/src/theme/CheckboxLabel.ts

@@ -34,7 +34,7 @@ export const CheckboxLabel = createStyle({
     WebkitUserSelect: 'none',
     msUserSelect: 'none',
   },
-
+  'userSelect': 'none',
   '_dark': {
     'color': '$textDark400',
     ':checked': {

packages/config/src/theme/RadioLabel.ts

@@ -33,7 +33,7 @@ export const RadioLabel = createStyle({
     WebkitUserSelect: 'none',
     msUserSelect: 'none',
   },
-
+  'userSelect': 'none',
   '_dark': {
     'color': '$textDark400',
     ':checked': {

packages/config/src/theme/SelectActionsheetContent.ts

@@ -17,10 +17,7 @@ export const SelectActionsheetContent = createStyle({
       bg: '$backgroundDark900',
     },
   },
-  // @ts-ignore
-  _web: {
-    userSelect: 'none',
-  },
+  userSelect: 'none',
   defaultProps: {
     hardShadow: '5',
   },

packages/config/src/theme/SelectInput.ts

@@ -4,6 +4,7 @@ export const SelectInput = createStyle({
   _web: {
     w: '$full',
   },
+  pointerEvents: 'none',
   flex: 1,
   h: '$full',
   color: '$textLight900',

packages/config/src/theme/Toast.ts

@@ -96,9 +96,7 @@ export const Toast = createStyle({
   m: '$3',
 
   _web: {
-    props: {
-      pointerEvents: 'auto',
-    },
+    pointerEvents: 'auto',
   },
   defaultProps: {
     hardShadow: '5',