Staging

build-init.js

@@ -20,10 +20,6 @@ const cloneRepos = () => {
 
     let a = shellJS.exec('git checkout ' + 'v' + v);
 
-    //TODO: 3.2.0-hack
-    if (v === '3.2.0') {
-      a = shellJS.exec('git checkout ' + 'master');
-    }
     if (a.code !== 0) {
       shellJS.exec('git checkout ' + FALLBACK_BRANCH);
       shellJS.exec('git pull');

docs/changelog.md

@@ -3,20 +3,30 @@ id: changelog
 title: Changelog
 ---
 
+## Features
+
+TypeScript enhancement for custom theme tokens and variants - https://github.com/GeekyAnts/NativeBase/pull/4173
+
 ## Fixes
 
-- Added a feature to suppress accessible color warning [#3849](https://github.com/GeekyAnts/NativeBase/pull/3849)
-- Fixed support for numberOfLines props on Text [#3852](https://github.com/GeekyAnts/NativeBase/pull/3852)
-- Fixed \_text not working in Link component's baseStyle/variants [#3854](https://github.com/GeekyAnts/NativeBase/pull/3854)
-- Fixed custom id not being passed in a custom toast [#3870](https://github.com/GeekyAnts/NativeBase/pull/3870)
-- Exported IPressableProps [#3872](https://github.com/GeekyAnts/NativeBase/pull/3871)
-- Fixed Overlay/Backdrop cursor pointer issue. [#3880](https://github.com/GeekyAnts/NativeBase/pull/3880)
-- Fixed Avatar.Badge conditional rendering [#3885](https://github.com/GeekyAnts/NativeBase/pull/3885)
-- Added \_backdrop prop in actionsheet and modal to apply styles to backrop(overlay) [#3886](https://github.com/GeekyAnts/NativeBase/pull/3886)
-- Added typings for left and right for placement prop in Slide. [#3889](https://github.com/GeekyAnts/NativeBase/pull/3889)
-- Added xxs typing for fontSize in Text. [#3890](https://github.com/GeekyAnts/NativeBase/pull/3890)
-- Added support for React.Fragment as Children in Box. [#3891](https://github.com/GeekyAnts/NativeBase/pull/3891)
-- Fixed Stack space extend issue. [#3897](https://github.com/GeekyAnts/NativeBase/pull/3897)
-- Fixed Radio Size issue on happening on iOS and Android. [#3913](https://github.com/GeekyAnts/NativeBase/pull/3913)
-
-For more details. Visit [releases](https://github.com/GeekyAnts/NativeBase/releases/tag/v3.0.7).
+Overlay press not closing ActionSheet - https://github.com/GeekyAnts/NativeBase/pull/4112
+
+Background prop - https://github.com/GeekyAnts/NativeBase/pull/4115
+
+Radio error message when not in Group - https://github.com/GeekyAnts/NativeBase/pull/4117
+
+`theme[\_base.themePropertyMap[property]]` is not a function error - https://github.com/GeekyAnts/NativeBase/pull/4118
+
+Button loading style not working - https://github.com/GeekyAnts/NativeBase/pull/4128
+
+Select component height prop not working - https://github.com/GeekyAnts/NativeBase/pull/4129
+
+Spinner size prop typings - https://github.com/GeekyAnts/NativeBase/pull/4141
+
+Replace Clipboard with @react-native-clipboard/clipboard - https://github.com/GeekyAnts/NativeBase/pull/4148
+
+Typing fixes on Stack and Modal - https://github.com/GeekyAnts/NativeBase/pull/4161
+
+Select items appear behind keyboard - https://github.com/GeekyAnts/NativeBase/pull/4163
+
+For more details. Visit [releases](https://github.com/GeekyAnts/NativeBase/releases/tag/v3.2.1).

docs/getting-started.mdx

@@ -7,55 +7,57 @@ slug: /
 import { KitchenSinkIframe, TileLink, NBHistory } from '../src/components';
 import TOCInline from '@theme/TOCInline';
 
-<div className="tailwind">
-  <div className="row m-0">
+<div className='tailwind'>
+  <div className='row m-0'>
     <div className="col col--9 mb-12 p-0">
-      <p className="text-md">
-       NativeBase is a component library that enables devs to build universal design systems. It is built on top of React Native, allowing you to develop apps for Android, iOS and the Web.
+      <p className='text-md'>
+        NativeBase is a component library that enables devs to build universal
+        design systems. It is built on top of React Native, allowing you to
+        develop apps for Android, iOS and the Web.
       </p>
-      <div className="mt-8 pl-2 -ml-1">
-        <div className="row mb-2 m-0 -ml-3">
+      <div className='mt-8 pl-2 -ml-1'>
+        <div className='row mb-2 m-0 -ml-3'>
           <TileLink
-            title="Installation Guide"
-            url="installation"
-            description="Setup NativeBase in your project"
-            className="bg-cyan-600"
+            title='Installation Guide'
+            url='installation'
+            description='Setup NativeBase in your project'
+            className='bg-cyan-600'
           />
           <TileLink
-            title="Playground"
-            url="https://snack.expo.io/@nishanbende/example"
-            description="Try NativeBase on Snack by Expo"
-            className="bg-teal-600"
+            title='Playground'
+            url='https://snack.expo.io/@nishanbende/example'
+            description='Try NativeBase on Snack by Expo'
+            className='bg-teal-600'
           />
         </div>
-        <div className="row m-0 -ml-3">
+        <div className='row m-0 -ml-3'>
           <TileLink
-            title="Theming"
-            url="default-theme"
-            description="Create your own Design System"
-            className="bg-pink-600"
+            title='Theming'
+            url='default-theme'
+            description='Create your own Design System'
+            className='bg-pink-600'
           />
           <TileLink
-            title="Recipes"
-            url="login-signup-forms"
-            description="Popular Recipes for Apps"
-            className="bg-indigo-600"
+            title='Recipes'
+            url='login-signup-forms'
+            description='Popular Recipes for Apps'
+            className='bg-indigo-600'
           />
         </div>
-
       </div>
     </div>
-    <div className="col col--3 mb-12">
+    <div className='col col--3 mb-12'>
       <KitchenSinkIframe />
     </div>
   </div>
-  <h2 className="text-3xl mb-12">A Brief History of NativeBase</h2>
-  <div className="mt-4 ml-4">
-    <NBHistory />
-  </div>
-<h2 className="text-3xl mt-12">What's New with NativeBase v3?</h2>
 
-We had clear goals in mind while building version 3. Take a look at some of the new features we added:
+<h2 className="text-3xl mb-12">A Brief History of NativeBase</h2>
+<div className="mt-4 ml-4">
+  <NBHistory />
+</div>
+<h2 className="text-3xl mt-12">What's New with NativeBase v3?</h2>
+We had clear goals in mind while building version 3. Take a look at some of the new
+features we added:
 
 <div className="mt-8">
   <h4 className="text-xl">Multiplatform</h4>
@@ -64,7 +66,6 @@ We had clear goals in mind while building version 3. Take a look at some of the
     customise properties using platform-specific props.
   </div>
 </div>
-
 <div className="mt-8">
   <h4 className="text-xl">Inherently Beautiful</h4>
   <div>
@@ -80,14 +81,11 @@ We had clear goals in mind while building version 3. Take a look at some of the
     keyboard navigation and more.
   </div>
 </div>
-
 <div className="mt-8">
-  <h4 className="text-xl">Customisable
-
-</h4>
+  <h4 className="text-xl">Customisable</h4>
   <div>
-The default theme can be extended as you desire. You can also customise specific components for your app needs.
+    The default theme can be extended as you desire. You can also customise
+    specific components for your app needs.
   </div>
 </div>
-
 </div>

docs/typescript.md

@@ -0,0 +1,40 @@
+---
+id: typescript
+title: Typescript
+---
+
+To enable typescript for custom theme tokens or variants, we'll follow two simple steps.
+
+Below, in the [extendTheme](http://localhost:3002/customizing-theme) function, we're adding a space token and a custom variant for the Button.
+
+```jsx
+import { extendTheme } from 'native-base';
+
+const customTheme = extendTheme({
+  space: {
+    'space-2': '29px',
+  },
+  components: {
+    Button: {
+      variants: {
+        brand: {
+          p: '10',
+          bg: 'brand.500',
+        },
+      },
+    },
+  },
+});
+
+// 2. Get the type of the CustomTheme
+type CustomThemeType = typeof customTheme;
+
+// 3. Extend the internal NativeBase Theme
+declare module 'native-base' {
+  interface ICustomTheme extends CustomThemeType {}
+}
+```
+
+## Result
+
+<img src="/img/ts-gif.gif" alt="Typescript intellisense with custom theme tokens"/>

nb-plugins/component-prop-table/index.js

@@ -55,7 +55,7 @@ const templateGenerator = (componentDetails) => {
         })
         .join(' | ');
 
-      if (parent.name === `I${displayName}Props`) {
+      if (parent && parent.name === `I${displayName}Props`) {
         propExists = true;
         temp =
           temp +
@@ -124,13 +124,17 @@ const implementSection = (componentDetails, showStylingProps) => {
   let implementsArray = new Set();
   for (let prop in props) {
     const { name, description, type, parent, defaultValue } = props[prop];
+    let propName = name;
+    if (parent) {
+      propName = parent.name;
+    }
     const MapValue = showStylingProps
-      ? internalPropsMap[parent.name] ||
-        rnPropsMap[parent.name] ||
-        StylingPropsMap[parent.name]
-      : internalPropsMap[parent.name];
+      ? internalPropsMap[propName] ||
+        rnPropsMap[propName] ||
+        StylingPropsMap[propName]
+      : internalPropsMap[propName];
 
-    if (MapValue && parent.name !== `I${displayName}Props`) {
+    if (MapValue && propName !== `I${displayName}Props`) {
       implementsArray.add(
         MapValue.link.startsWith('http')
           ? `<a href="${MapValue.link}"><code>${MapValue.name}</code></a>`

nb-plugins/component-prop-table/propsMap.js

@@ -220,7 +220,11 @@ const rnProps = {
 // Styling props
 const borderProps = {
   ITextProps: { doc: 'text.md', name: 'Text', link: 'text#props' },
-
+  borderRadius: {
+    doc: 'utilityProps.md',
+    name: 'BorderProps',
+    link: 'utility-props#borders',
+  },
   //Border Props
   BorderProps: {
     doc: 'utilityProps.md',
@@ -269,6 +273,16 @@ const borderProps = {
   },
 };
 const colorProps = {
+  color: {
+    doc: 'utilityProps.md',
+    name: 'ColorProps',
+    link: 'utility-props#color-and-background-color',
+  },
+  backgroundColor: {
+    doc: 'utilityProps.md',
+    name: 'ColorProps',
+    link: 'utility-props#color-and-background-color',
+  },
   ColorProps: {
     doc: 'utilityProps.md',
     name: 'ColorProps',
@@ -291,6 +305,11 @@ const colorProps = {
   },
 };
 const flexProps = {
+  flex: {
+    doc: 'utilityProps.md',
+    name: 'FlexProps',
+    link: 'utility-props#flexbox',
+  },
   FlexboxProps: {
     doc: 'utilityProps.md',
     name: 'FlexProps',
@@ -303,6 +322,11 @@ const flexProps = {
   },
 };
 const layoutProps = {
+  width: {
+    doc: 'utilityProps.md',
+    name: 'LayoutProps',
+    link: 'utility-props#layout-width-and-height',
+  },
   LayoutProps: {
     doc: 'utilityProps.md',
     name: 'LayoutProps',
@@ -360,6 +384,11 @@ const layoutProps = {
   },
 };
 const positionProps = {
+  position: {
+    doc: 'utilityProps.md',
+    name: 'PositionProps',
+    link: 'utility-props#position',
+  },
   PositionProps: {
     doc: 'utilityProps.md',
     name: 'PositionProps',
@@ -424,6 +453,11 @@ const spaceProps = {
   },
 };
 const typographyProps = {
+  fontSize: {
+    doc: 'utilityProps.md',
+    name: 'TypographyProps',
+    link: 'utility-props#typography',
+  },
   TypographyProps: {
     doc: 'utilityProps.md',
     name: 'TypographyProps',
@@ -466,6 +500,11 @@ const typographyProps = {
   },
 };
 const backgroundProps = {
+  bg: {
+    doc: '',
+    name: 'BackgroundProps',
+    link: 'utility-props#background',
+  },
   BackgroundProps: {
     doc: '',
     name: 'BackgroundProps',
@@ -499,6 +538,11 @@ const safeAreaProps = {
   },
 };
 const shadowProps = {
+  shadow: {
+    doc: '',
+    name: 'ShadowProps',
+    link: 'utility-props#shadow',
+  },
   ShadowProps: {
     doc: '',
     name: 'ShadowProps',
@@ -524,6 +568,11 @@ module.exports = {
   internalPropsMap: internalProps,
   rnPropsMap: rnProps,
   StylingPropsMap: {
+    StyledProps: {
+      doc: 'utilityProps.md',
+      name: 'LayoutProps',
+      link: 'utility-props#layout-width-and-height',
+    },
     ...borderProps,
     ...colorProps,
     ...typographyProps,

nb-plugins/utils/index.js

@@ -2,6 +2,7 @@ const fs = require('fs');
 const path = require('path');
 const docgen = require('react-docgen-typescript');
 const shell = require('shelljs');
+const packageJSON = require('../../package.json');
 
 const {
   transformStorybookToDocExample,
@@ -102,7 +103,7 @@ const getNativeBaseVersion = () => {
   //   return directory.split('versioned_docs/version-')[1];
   // }
 
-  return '3.2.1-rc.0';
+  return packageJSON.dependencies['native-base'];
   // return 'next';
 };
 

package.json

@@ -35,7 +35,7 @@
     "clsx": "^1.1.1",
     "dedent": "^0.7.0",
     "docusaurus-tailwindcss-loader": "file:plugins/docusaurus-tailwindcss-loader",
-    "native-base": "3.2.0",
+    "native-base": "3.2.1",
     "object.fromentries": "^2.0.3",
     "patch-package": "^6.4.7",
     "postcss": "^7.0.34",

sidebars.js

@@ -44,6 +44,7 @@ module.exports = {
         'dark-mode',
         'breakpoints',
         'theme',
+        'typescript',
       ],
     },
     {