From 20ddf50682b1066162834910257b58db9ed33c01 Mon Sep 17 00:00:00 2001 From: Nishan Bende Date: Tue, 12 Oct 2021 19:08:13 +0530 Subject: [PATCH 1/7] fix: types for 3.2.1 --- build-init.js | 4 -- docs/changelog.md | 40 +++++++++------ docs/typescript.md | 40 +++++++++++++++ nb-plugins/component-prop-table/index.js | 16 +++--- nb-plugins/component-prop-table/propsMap.js | 51 +++++++++++++++++++- nb-plugins/utils/index.js | 3 +- package.json | 2 +- sidebars.js | 1 + static/img/ts-gif.gif | Bin 0 -> 156958 bytes yarn.lock | 8 +-- 10 files changed, 133 insertions(+), 32 deletions(-) create mode 100644 docs/typescript.md create mode 100644 static/img/ts-gif.gif diff --git a/build-init.js b/build-init.js index 4fb2c0cc2..cee05f86d 100644 --- a/build-init.js +++ b/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'); diff --git a/docs/changelog.md b/docs/changelog.md index 0e0694315..417a3a41e 100644 --- a/docs/changelog.md +++ b/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). diff --git a/docs/typescript.md b/docs/typescript.md new file mode 100644 index 000000000..33601937b --- /dev/null +++ b/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 + +Typescript intellisense with custom theme tokens diff --git a/nb-plugins/component-prop-table/index.js b/nb-plugins/component-prop-table/index.js index 313433466..5bfa18152 100644 --- a/nb-plugins/component-prop-table/index.js +++ b/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') ? `${MapValue.name}` diff --git a/nb-plugins/component-prop-table/propsMap.js b/nb-plugins/component-prop-table/propsMap.js index 8dcfd3412..99a9a71ae 100644 --- a/nb-plugins/component-prop-table/propsMap.js +++ b/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, diff --git a/nb-plugins/utils/index.js b/nb-plugins/utils/index.js index ef50826c6..5a849ae55 100644 --- a/nb-plugins/utils/index.js +++ b/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'; }; diff --git a/package.json b/package.json index 2b426e0b2..9de195205 100644 --- a/package.json +++ b/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", diff --git a/sidebars.js b/sidebars.js index a1ffc37af..343c159b0 100644 --- a/sidebars.js +++ b/sidebars.js @@ -44,6 +44,7 @@ module.exports = { 'dark-mode', 'breakpoints', 'theme', + 'typescript', ], }, { diff --git a/static/img/ts-gif.gif b/static/img/ts-gif.gif new file mode 100644 index 0000000000000000000000000000000000000000..91d0b0819ca14e8234353b31a0704220e2cbda20 GIT binary patch literal 156958 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

)LOMMwDoEi zLEiu&R_>^7WIN*(S=@R`BG__DbI%3(u~P2yq8rJZ7+QqC9M=f4W}luO;KZzWP5aH zMmV|Z%jVzu3&%hO=`kN`ldpOgG&_ZX|Hkw@C7c4}^G+Sm0nSMp(@)mtF)q_RB)IA< zQ1ZWSD)8_vE`r7}mt3C*Yxq^u5pQvueQv~aR9t%@DQ-=_+AutJz(kP)kBA>a3^+#n z2#uLYR@OY`x9eW2K$p|HyX?v;O4YF)H}kLXeg804MxTU~WnO5Ga=F<@jrKTsSV%Mn z&dvtz3uVyX?SVcn^2gk`i;kc0<2{m8Daw6C;Uwh2qmSsAIxo*~B z#t>HJ+p8W_fxul5-zF?}JJPt|jD$;0arGa-o9@%<2!?vhHh&WA<;@VO4dc9UYX>p~ zzu|}D2)HJLf@^*q*L)l?9F~|uU=-9hawzLgl?5ka#y9gB#cw9u<%(%|Cd!HZ=3^uk za%|cw%LbH388gH&f3b?W2b+LKmIuQ_KY8crf%;2#Weln91^Us0Z0w2L2(O?pE=PyA zM7FPF?`T;9HQxzIq@KI!JyT0|fsd`arFz#-tgFL6VT9NNsR36BP1&J{F!Ty2v$>$r6dR+4 zeu2oQdS3B3;yl!g(PU}CB|>sLJ@qCEzf$~K_esd?@3&`8|Ga_3pWkgL1U8ToXG}C= zJ6uiJwDjE@x%xBp@WFV3)o=-5~<$AQ-x&5)vQ6oEEf zKUmNN1fr`OkHs_58SdZ*?^Sgl15qkNUDW$H>$e3-*QrlGujuz(8g=MN!K<)CUc{Li zP399hb|_=0m^M|3n0s1Wh5{t%F6D678kk+VyseXYRA*B-9ec<}bkq{7g$wUkr_wBq zGQE!P|G4ZP9s--nd7$k6$b6zh!7QJjvT{FanU7%n_B=-$kUK?QUkh z;pWLY6F0o$ZxK`} zw5YvaK6o>lDDPerAVNHqhrksHPEm^8YDpgEH|K1_iI~Ku@#8?L87?KI*JArkjTB)l zdYqQJKnL#Dd#LyjTN$A@N^@>#pNwq`@&vBM>^6$?iYQk~wa)Ok6M3z|f0@Xw`f?AjrQE^j{T)#3QHKOFD6JwBYxyAsIU$-*+prK2@ z;5U@d&rvGLEXSUN_&iUQrSfx>4?M+g-v8kA(Zv|kEh)Pvn_%@J>8PS=b2Vd_KbXnm z{^6WmR?^q(()5+?t&=m-*>tXNqR%~6G`uRuTT*#vD$VO*%2iQK`eL{Dg+{v2(0i+5 zckr4FlBwMVMt7^)f~#w8{$^TQpLs=jt62i|WldB{?dtobu5Kn~6BU}yp!CXMC@eKquma|GaTs$T7`Vbw? z#HivWQq76hRv_e7BHbnEk$K>O-BUh1@AwI%NX7)5Fr8tY0t-ht7M>L*(6tt>8atz@ zC)_yc7pXPq#kq;s;YojL#4q=UK=gZ<{q&!i&p&m1P9J532E=Vmu9qi|vx@1oOL>*W zJN!Mb#U9iv&nxu1g&yeSj&8{m{-X%!+IT1=3H?U|^i-MM@b?I)V;RC@o*bH`_;)Aq znnpM-Rroxb6nVT9Pt7YJh_RZ=HED!*6$xlj)ewYa$%qyood)U$Ip5j~H)dOvX~?W! z)CcMrVW>xQo4c?#`GXTqkM5J!-}J#gcE9t-P=T{5a9;D)>X^j>z84`CB!v^x_CpmT zb8TMf@%J*#KAY3GA`D3mFb`5eN6Yz0os)xj6ZU4;cxTTyytgNo7PIa7NRJFV5BwL# zivJg#+#e+cX7MBQc^l~Da6s1hAs#@@HbTT6;ymZI+E;&SW3dfEs?6iqXkEN6qYXBj>p z&9CM|vrH8U-vv=!u@K(N!e4aBUeV8E#f3SJ?G(&`ZEMDvIV0QU$X?C~tIk0q2$5cD z6)JR8;>Gu|S;?rG_3$gKk77CS0&=l)%$9?b8X5W0mL}X+5-7-tjR$g~B@c&%5uzBo zLslSD`Sn16Bcw$%n$~$`dIftAk9E6=jiK3y$L&)^)0Wdt#) z=^1Ya4y;q_+{Rh^Qssd5)KWpk>UCG+39d{ZRrO$iD;X`hJ0zI-J6BS&b!&GN^RRje zO*6vH$9iw}EAQhi-qOY^8DGEhqFIK~MdMd2Cx>7e0^gm)QXePHtXoYR>Fe)IaORD-0s4Bwa2x>^8weo8Y zBVq2X;wr@-hR=Vr&W&rok)59aN=n@6jT@?Y*%yzSeSV$E@_Q`%XF$>R=j-Z!7Eq-9 zF9Ag=_G)u7^LJ(qEsre%{Ipmp`MW3l8JsmwFaNG7^;Ef4qZg|fj6b}Fz<9wI(IRP@ z4}FkhKicxnm>vw|covRWufjFryK${jv)x4b-|RW8y#dSP1RFfBNHVrLfsJ+XY*SGh z6O8@M_3DES{%C25*@E$z8Y=p@o(pI@1)U5=`V)izzrv>Tl?8V4GoQ zo9EI{s>Hdm|Jgy(p#pWNO36BU4V5KQJH z6fWH2=iJt2$<+i{ujaV*M1+>)a7ieQ=)-5J7U}@&wZv!9knOfldm-2}R0;SD_Hwx9 zU804;LAF#MUtUrj*ngWFFjg5`;6|$k++LacBdjP+#kW7CMMY$FIS6;*}? zN#u73R?#(ti&w25J5z+NtS7KFMoHQ%JI1G-S(afy26sBep9FBL4=ri{V1&S_${BW$ z0G7jm&6mDkD-DM#3B!&XHHS+%wsE1@ufa-2*>%VZaZ=u$DFciqEBttc7Q!(DHV0T5 z#M^>~KA+O0SzKLe+6fZIR%wuZkwxi(XN&~}Q*BvMYU*~x3^@V|HNITQ& zQ^=He-yG!Y_meB%Un!tU)g4myo5ox*XgbSr+)1z+uW?;#_L*<F3ZA+VP|H1bP;kK zJw&r-od=1z8)w$RgeD`&Y17GQamAiN^&y>w9T_Vx`nP-wa`e_i_hJQ~=3sA=D375F z(<`=I>|=0{G*8Fqwy%9smn$h>Y=bYpxUWkWkJ7gplhuLi2-{_>bGcZi2-C^A9ZL=t zbhAB?&FQ3T*ehzdEV`UahonjdZ)%{iU(O7p$0DH@k1$Nmq$)$CC&_S z{~~sH=gMHCKscG_%#yP)kycJ%fy?8{Mle!CRPOX|O+##A4G|Hi15VMG!g$1bBSfdS zi%^L@)!2^0gp|D!QNw@ty85zLj%B!ukJg(k;`|8A6UBoqOD4;{f?)2R;$}b)z`YD= zY??nJ1f(?>Tr32+D61Hi&5`KpPzE;LKC2nvB+R8u3t^IJJLE-D`|VPVqnPt)3612D zO5doU%VQ{(r71GbqS%*`!8c2>K!k0$PM=?2hfUoECl-@OdR*;xa&%@aF z{_I4~r=|+S8ZWES+2-wSLVoqHeh`Tjh^#c@H2*V$0$&&VjSs6qkF zUeMncRbl@b3@z}lFtn8+2%Ycj&#|2`qjh$Aug%kBclKe?c+npEnT1O(dR{(6!$K*x?vRV^(I!?$&DMT z?1V2_cs7=JIO8K1#}f~ej4ZK)jp;_8VjYlR7TV9!GU#GS~aKax0x;(>q2m@f|=qhxWoKPuJ54OYMw8fNyH^y zYmmFR!t(s;og17;GUSY~FN;Z(ctHjDsnEt+F$u>h#-N2zA0UakYzW_x2-v9P(t(9= z=Q2op0TA)B94{o^PCU2r+WW(uP}uRwxITLECf~P-C5cz&JVZILt9AYFZ7Qomn25~f zO$wXfdmyrBaS^zZh6S#}?;fgaKV-etdWlzm+00A!r4NG~)?27H{~*Ge-ehf7v~5pV z-xK+&T2_PZVzvLMSBU7P_po(=LWyFNsf^q*sA{2}(aYbO)bFc$lFaI6yK~&TI3IY4 zcqss*JlQI_r&@4xdb_&L&i7h7#ur_xQs5kC-5c-54+nqfsuM--(&(inXuwS>=%p&< zzUAOCE)p6?*Z3S;*8#h; z?1sCN@KlXW7MQpN+QSaL@eI68bx~@XnlH5!TuA)%9Bzn0Kpt7`H1tF;mmVhSIUhDy z{e-hqy4BC>X#R*+Y`s6tuqcJR1igflad-I;O({TkEJ5;o9h1JIQ~3m~gl1Aq& zBtoAEj4FDey1VE1?x@2!KXLJH@){{piejiCPs9v_3w(Q5+y+RBlMEoKXOF$Oo56#_ zimf1r+RspaC&BTYdIrZ**IQrRE}m z`jv|ZT&6gw^3a+e;rNJxi>;3jb{5~WSK7;(Ku1OMwET>VYMh5$P!I1{QWQ%0me-B5 zaYs76_Xkv#=TR{Q&{nmXrg>^UA2r?~Vn4Yi^oIE4q@R;K4AoBxX&Z7dC!!Hj%TgM~ zushI?D56I*mV0Uc_7HFlrjmU;NhwQ%%K#7Ja|w^jn4QVpCq+@X!5NCP)CBljT65;X zEO3rVc;Gg_BKLCC>o596ZjKQu2F@(532Fj!A_*#!3-kcLTgrADs@K8KTAigKX^o7* z->aj!2GaVNM|m=LvVhcTdvyB~C9#9naKXe}hB{H5@G;1|kfQ~sWul*gC86Wb9)lNn z9NzzY9doNrodZr)cJFo!fw8{Yk$$ou>UhEewX(}N`xu@|`5M3Nlt3?|!Sj(5(j%1T zQU@pp20>pd3mF=Q`X(JLqUDFeSO+{RxvX6WZZS#Gt?Fe~cnQ>n!=YD~AQ|}J5)rEN ziBO*HjJoGD?7DMXmAut&%(5&S!Su8Rv0jdi9X6?m7;GX_dzr}x7X9^kNgH9IH}ZU1 zV&2l1&8!1*t*kz^XDeyhl*txHjp;RC)swezFJ(b{eJRUbX)2KIapku!dNJs`RWslv z;mA-h)f#+3SR{3dno~dTAvnW2%`07$1|cE&$P17ezs_xWIJ1ZaJ}lp=&2-}}+76?< zsBq+WH2wr^E~>Ek-i~Bf-8@Wti=vjmVtL^XIz}Wy+&l>U$g~P#*O*gjAU6uiB#qkF znOj|Z!BCqXA?NTe$Li`EN__B((bwXYsq#}{7wKElUjMPEy3aDb4J@iI)LerY%!A!^ zsH`!VTuvGAjOcz3BB?Gy#9)E;?0zq5tS;*0qXqcY{XR6jK1SPMktuh-9}r;1Sv^{0 zyTAXJMHRnehs;gxf~5ljPEz#-V_cYBD&J=zmJLCFCji{%4_6v?bRF`0Q|hvVgwh`m zharyG4M7ry7V!7#6$(fh*fQr%^K?${|HIsSe>J`DX}k~;NJ0y}L+GLRB8Z02LhpzO zNN-9ARR;j5fB?y5zyS=cJF=8%szK!&ALC_KY_(spS-_M zc|FzKNeJ@bL1i8P@%d`bZ>8DeLE}vY-^MmCoP2)~M%7$MroV+^JD$KAG#4{H-_le* zp2Q_JmxwiPXkQ@=Y5wdhmV7!y?7!F$__MiOOMlxW_jtP8pr!JXm;g`1@l1VEOSP;1 z2dkyy+1Bxv+MCZm*q$8Ebx}R4kNITdK=PONBJ#)2@y*|I?xp`p&K`-4qN0MRu6L2$59k_1eZ89mTRht%MZ4woQ$%Oi*Dph&iy zK*FYn=mLl$H#>27g`mCo2>PKrP{>zlToz`IUEgZoJOg~9?b{QTw8Kr4a@n3{M6T5* z=u&MXf>xXob?CKTUzh5)piP={Ai82a68D5ou__cY+4XY5g&JOcZBjE8Tyg0GXP)Z5 z8L-)1N$gD5?d(VuQK%&7x|ne7@-xW#)h-$ zVRtlZCDBBDRNu`bu4KqQB$lm44iRK(Z8KuG0&oW4J|%tErRzVly7DMtvit_JMn=SG z`fUT|Sw?8cC8_Y>nDFc}NWiF?92SP6>|_9uQcGGXFx^y=m1Vsg&Ai@ij-!%|2%tuQ z2K;O^+n2FE=4~hlhz0LD0rtuWCXfJc-z>{P7WtZ0`q4OH17K}F;r5~$+7sk=6{o|A zX5moUs<9foK4>>MH3eQG+|moRM~@oYYTVk5a#T+P_Nr=9*j2U0A6mGTUbunVfcnt4 z8&h>kM_w@@h{>cGJAMJ1d54Thm^|LSiD9N(|CBCcRnLt1 z-j^FRVnFkyTh&_9L~Dw4>8+MGN3wK=E_=|HT$J7SeTFn|)z4Fd8}BnGt^~AwSuHcP z`OvPL*TumcFq%n7)W+J3M3xc~{y zq_$OnW?poV<-U2>uaMA<&r1PectP_SY zN^1}pK8n8g9_6Igxv^oIZ&PZ#;!;`)dOYY1yB@*CGOUO_ivF{6|FL>QyipqWf5dP7 z>hT5rMQ}KC(f(kQ(jq3#IbFu$!1QrO$&Q5FgAdR7m&itah1E5FR}&VAs1E|HOY3^_ z6S-7*?{87=nu9fj9`~-k_$5$h2q35%OwPro4KV}vv|q3fYCcZTp*9lgJ1+W^X*Fsi z6>+&>xx#>ZETL5P48LWypEFOuZ#^DIH*1Dm$RR@rB|lpJ=}GpeLsIE zlJ2~=e9A2^O}?+c2oA8nTr^)`DyH+VM^fPrf!hAJK<)ki&M0i)RVCy6OQ1F__?uC< zAob6T!l*MwVa4z-Mq%79Mq&MS2_b4QD57BEw4-CeO+w*3C9e_UQ@xnaR^OSgtH6zE zSGoF1@hdSg$&;`*oDhmB%PR??Oep@b)^~3jZKwv2M0DwBN_Jg#ud&Ng>rhWszvZZp z+rMCi;H5UX)j{_^VTHB+AH>@N923}rFMB@@}M#2^ig-B*F! zvk&C@j}D2E=y&ODnk;>+|l8VHitl z&9#xs7BqmC`gHXPnoGYlZDiu(@6AGK9u0mY>aA{RUC9RFfCvkketWW7SjwbZD1ka9 zqUIinN@Z8*yY=8cNn7|v)%(jGUTTtg6RM43#N0SWM+dh^AD>q{)ySH19?{_K3r}#p zXl4;wf}KxKD4lvrKY#$BYors+ zWEB)YLU63RNxQwBq_e7np_f1>I2sNtJ!(QAT0YlOMFi0}gnn`9nwne!+^Ao+=Rgi( z^QE0FTY-p23e{el5vZfMFi^9&oc+}ZEQiAtPX4*EHB_C&ZuY0~xW)5LR7lX$4_r9o zqj_&0z{!x!xGb`^FN(L^FO`@LoEht57fzXM@N>Mc?Np@e`EU{a1+>ml(v6Rk&Va$%V8~*GucYDN*skPRdXrfFzF+mM=PXc&Qlj=vY9G2T`a^{oppIFes_5X#r{uS-Y**jSMDdl zAxFQV1n3*jc>n~k^d6S%yM(`ksvmyV<+YAvwhfrqJiDe`S)whMv`@PQ)?&#Rm|kA9 zfQ7NdNoJ%G+c-2Z{KM@S4f`%oTe=*Ug!*GE zE{$?Iyq|){OM3=s+w7B(qRl<@S~%J$7U|-i0VF&CTUb=46Dwa7x3KK5La&2!;rz_- zG$F>??G`O=u=rXi{;M28b{^XRcoJl1(&7xOGEExGGj&-&=}cW-!Jo;?X@k&GxV#2A z)|d(boZ-e|*di)y53H9@ICUd)?JOm3Duox?5d_2@I z9{j)Hvs~`s)&C2>LilVu;|2Kteq(-rwlVx&ujMkpq8p0)e4NmLAPQy%Y?xjOe(D2PiC? zfD&O+;#xPDsyn!4i*lVZLBX>Y9C@R9>9K_Bb&N=34$=oDvc)_cM)+(~4}oVvcJoG> zfL9~ayCgTet*JFIz1Jk&x~WARWM5SUY7`}y6327?pa-tj8OFTM>ZWCVSBJ2ZsW}cL z_N*-N-(-A}T^NQ@lU27nHC_y>4>c|o4Y;l$*HIP{H=}POOEzUz!`{98@sYtA7hM`& zJ<1a9;3NX3+<)D~{ooCIh#XVUb+4fsfeqw6d)fWwCIz090LH^ zZ|V`-otEyI#6N(f2I{+SF$2VjXu7AUY9Wg0(#&Su7|BRA99N*vDPpbS z(p3r>Fs|oH3!O=v-DY&Es(Xsk0&1r@GIKF4iSp@?$je&o6ao|UmlI>HlV$9~=)GdX z=+cpqWAC%E-ht)GOjNTK75e0ECg!B~Lj|*vpbf*0SD>;;X2XlNu|(zZ+W74Sas|Ci zv#WEH^6Ryd;;c3fm_Wq`E-jz8CJ|7bhux)P0zk)NBe6i$>)c{Di0@v~31EoXa*nU5 zsvHTds;FADTr?X9k0#C-dz5R^9Gg_d?zeCC@Imtm1O0j8vZC@V-pTBo>>i-a(aQR3Nkv43%!} zi;JQMrEBlE9j^fHx=zA(C_f#93jPdcspYzLTp3{K%JHr}Ch2-qyh)5$@~o3?MPh~s zxY+Uu+2wO?H$|))mSq5*F%}C!3jF0u3>x?w{Y~1`(_<3)jyFACW3TC8kmEs1kNqeO z8c_7%ChvUKvb>}68A>TH8Ncl|_SsO~klihpc>QD5)op{5FLFM6kkfX#US?fSHYKod z9V#9-o+@sUf;ic+T~Lx=x_c5TwnXYnql8j}NvJf1r@gKVe8wyWUYWZ2WqK`!@~HUS z?O^ZDD+Bv8_X%-_(4Qv(-EnUBmjH6or$==8_@AeLGN82S>WR-LCHh{GUVyV_@$XL_M3TMkC?P`q-s2#aJS zdM-qCWLY^7CCyr2&(CtYg2tCmAa_)R4QF?=plXan`p%Ma=XOlN>XHDa2^a=3#G_hJ z7zeVZjI8;9l`dxv9|Hp+-{P}CKl|Gy+l}qbRz`f=UCQgu@4_pIX6c>5nG#!6e4{58 zes-2xyr0M@NrvsUoPad^X|eD+IEr<%49Hf!LOCo6YNSF%u#|@>*4 zC!^Fnh_Vzd;*-|4Q~7M{qfyXxVEk$XB(WZ#u@TJ}oV^UCRfQ=B*@cS_PaGd^M;9BVtMVQRD=~qbPDo_}^LSj*}iN;=rT~Xwt5V;%!zj3U2#Y(-H zUKXutYCM_`);d3bo9WweI)cbZ)`ee>f&A_c8n4*LP-{snVt`>Q;YlUsv5Yp>lf}s% z6_t^!c6)|(anohR^7JDRmqvDB5?jsg8I4%+v1AtiaDs)rTpJb%`P@`gZPr)Xg+uXkvAS>cosjlMf17_xIzCdQaF zztE@e1yw0XCOT;Z7&0E{h<35iNDuV@(vXfP++(v47M|=?Fgud_d(Dq&>wKH&WndPe{9> zMYoY^Ba9E=)`#PE-3q;iBN>Up8)Df+w_rEw-*Tw@kkE1vuEGd^in*DqeH(&`1}#tG z+eN^Ge7SwS1i_;h9MQx&1XEU9qWeXRqq~5yhRb)KRHeOpu)l#@!^^qdy zk~EgvBJZ;*vmRUtSwd3j7Q;niHG`YS3927q-p_8iC0O@P0g~5qdU^X!Y{{PkDk4IP z+5xt#d?tdRdE@{Br}A6)v-NqBpu z7^EUWIO=rc71ufPcBXZ6z!2j8@#z*Ro6iUK?4e7U0TT~Dxeo|K`@rMTW%Ml+wL`2~ zFRM4QAECppE$C%W@1@v1dd{wDC2=E}=FQOFL_C*?at5+R{890w6|Ez=v|$?F>-!#r-8AzMt#;nUZK)Vbd8UauB+o_Gl?kBk|YZW zbGMKGycX?v!lPlg80*R={;t#$E+ZMv?|X%A!o1r|Zfnzq+xZVrOYYfTeDY4g zFuCt$hfww8`OVSjl;Ped1^k>UySE>@XO6+?{4f1DIDg;Gez-Fv75`c_W%BvxGNhjf|A_hhSI3xRlEs zIaT%SyBxRuqJhmuC?41~tY|eq%+Dx-#F*@+5v;18(1(R8w$PN@nK0wAF)fo8lJ$U5 zm=BOx@2WlPd6<*byr!KbWf3inqvTxxH~Ay7*zfiil^+AH1?f=GkOg&-s9GYBVPyAY z1V^=C4mcZ)A&JDOxZ?&HuyHhG0M@*7$-RYSi9dqANdGc7sg9pnm!+W7h9b2VPfxGN zrhw-|O|6G}To-#W>9wh3w*zYlo)%_Ii) z#I}Sqg?NBmKK7tT_)*OjLVNZp!!14dLJo&;!V{^-b#DsUkz?#TxXU^~5I&4Dgm6W7 zP)q&-pGpYN@@#*bhkb_M3esbt9+L3l%y{g0j1f43=HQ?0fa*n|Zu6QYAf`Cm)c%i=WNrUiVAs@GDEw z0$L^Ss<4GGJ*Qc)!aNP!mCt?p3_rqdCO838vD?*?;Tjsi`O-teXGmF|YhG2Ifu|;g z^09~Mai3e3Ot9H8HtPaUSgJ4U-QMNziUSOMdlMfdWv1heRziNW-4Bu`huNT8bUjKZ@YMu$1OGL)#tOS%y5Y0-KjPTwALd)s7^{9ZWCqFoVZ zVlFW=Uph4Bo#n0Tv+rndGGPUA5OBw|Hq@sypT&ErZn8k?szX>{ss1Dsp?& zgCvb&IVAg5wdm`e)XMHgd(Z;g^&Vm>)*tS?O_9=XwNlr!#dk4Ru4670s$Zuy14}K< zxKx!Of5g2*h9HF2yi}d!-&J$8g)wT8O$b%qzc}N@m#3hqTEX*Fv6=|yp30Htw-t86U~Po#GWLrv3i?Ti$~X~7VaK=a#(=qedz{Y8MOX2Xl_sa zPgit|sGn6?(jURo#{O5eANQIsf<8>OsO2B*JqJtlRX&XXeOPzj=8WH;xQo&-hekwa z)M%KkXdg`d&|WHQH1!_vPwO^c=bg5GHcwRBCVsm--X`rD1gJF#A}lhzpYLk?>W06nF)@_R9qln_aMb@YS z!*v{suLi$=+exxZEby*8x9sM;e)y-Fh#F`~?3PKHm$GSr+PVVzQW$co?J?OGK^fo$ z#XQ&BZv;;FuGqLH^Z1YI0?FfOWFw2lT)!|hId^lw^UI_kXw58UzBx}rZ1=kM;YA&t z&hI;>Z1~fIIdA-rqs=Qjn7aLMX!c{C;I6`?B6T{6!a#ef zI1iC-;he7CH?Qm|IEGL>(wP}){CMt;Oy zFo5t;z4L<*xANYLXf0GyF@liy^&zOik<iC^Ygj_)P2;T zv1_t!EY-ZoiG0e~s5Hk7X~bq0N^$j3FY2ohb+y{n(#}ownL8CZ%mcr0oW)!?d{h1K4i_Y7moP02C8D#7xNdaNnSHPHjMRbTfc$4lyKZhPr1- zTlCxQY z;_%HW@Otyg8_NMPjo4(~uUMQiXTX@(Hlg8zQA-`0fYJpeDoW978$OIpw1la4+>!&c z-iaXNLCkvWyux-|*M;3`Rpa39chb@{HW9Ufh0}2Na>Uw2r$FDzG6^J)Z#P{ZB>yG=~v%dY> z+E>5-$^}&(Y~K2ZpJLA=TqUxa)`6Kj-^L@p`GGEJyQwi143XV|sXEj)XkUCaV`b72 zohH3KDiUmLB@Zie1$}tjaZWeG=#ayPn-rPRRh)Ns0E|tz{oo(zWT^DIAN^1pOHg|idFQlBe=wZk zq31H3A-`=$150B?00^jQclKmRRF=FpI=(B1_O!WGcH5XsQ$ef(zp9-VmmP@#F95Y$ zr(U>t2IEhD7PXFRS4Y+5J>z3Af5^bCZfe@b`O}jIT0{gD`F7#P1ly8e5G%3noX=gF zy}Lw13?3HZz;bAppjoBQDtE|$OKH_(o9+fGkIGzy9 z?v3kwkshtlV~_2*ZVFp6b2qQ~{@jc?{Az=3#U{*SlhTi{IOfgqtgP6a z*4VsxuDXnn{2&EqrZ_pRI4ntU>Aak3W^l!kwB&4@^}a`Dm*X99JiD6j{hb?+EaN)n z<4X`EhMVz*yo%L`1YQ!?ez$~?)`YS7gz=+<3FgF?iiy*fiL*h8^I3_Dt%IZDl2GwuOy_@>n*BrXJzLr| z6H*2AWdB`}a^|#@l>HskAvnCaIzuJq%`zan(FT?<16{e?gt&Q(S^+53J z8x*7ZU97alU3%@!@3Z+}!Qw-JouUqE6AuAJv?C;3-tfcg{B+{YL2z;N1s$HlS2^NR z<)y8aKuT!aE#3QGXLfCeCs_IQPOdeW`MxyIMLyl|AnMq?ti;R1rsC$>p(%0oMqg$Kv=A>Wa(zD^I^|Crt|MYjI-pc# z*q?7nGOVnid&s0YrQW=42S?d0K=)A$Jd9 zx|jfFaR9>Jmw`>4Npq;~%8IJChMmHgo7v0XvXeZNUQv($uDA?Io{dnc%s%!8Rb)+$ zG(wG9SSxJDGn+%@NM!)n-ctS+tEQr$;(DFIqOHOs~+RHnt zWK+d!9TRUDa$kKTAJKdA7%2!}J**`ewywG<;~?0&(V-&lUzh&jRoiBm_vgo85*BV_ z<43vc5+6w!o5?=$!Z`{)Ik-mpTzY!-pj|82@%8x+9{Vak(0wSw-b0&p$=h9XO-#xk zGv5;Bg0{-)ejax{e)036LW(Gw%4+_0a=V*8U4)f97z90} zMq!Uo6UV_B#Q)t>!vFS^v~ELYHKP?6#N7atux^3U@>t=(@VJVj2*wtihFH*UoEZf# zbN`Eerz8^-G3gFB~@{1)dUyR{r~56ulECrA+ok z;LEtov64T_?p}F({NCUZ^xwE`R9s3*2C#%MA^dN9QMSA3OmWU4G1_AetovC*X?&8Z zykkzsd)X6bF&&oY&eBb3^8sfu9eqtJQ>oh@1%z{j2r-?ebT6S73T>!ye;z+j_!c|U zS~ln=q3nLoy3E>)32$J|V-K-DS`+rPgQ%9Q(G5$Mvq=sc-By||a!l^_IJlJ=m?O;) zj4s!Zsff{JHlvod#30#pUS7X&P*O{;%d2U`9>-aIzjJJhLet7b#7i~<4lhUL-ZFK* zUR;Kt+!nS8&HyG8m6r9Da|c?z2;N(zO>9-C9XNuNyP&Ae)=}ncyAT!29VLkj5 z$+P=41F-G~5S(C#H4NG%i_gcHv=Jp3TB4|})B*NFqm~k#UujFkY66V27XvoZ zlXddlnQv_On<1DWU1*RHFgYS=V74lJOWY3B{c3cikj8HYz?4Lu@NM7{`TZ~n{j$-k z-WE4SjZfFPtk^W)YF>gx*JBuoMi(9p$UpmbC~PUBYYm?B?;Mir=PzCvJoU1FCh$o@ z0Z(pMVw=`wx9&y%q+|Mfr~{}34x)1+N?@lqds1OpM~29Qp4ig#!XFOrygnl{(|Rh8C8i(*+-xrw7MYvI5%de)ffk(Jbl1W$C`Z6Ak%p zx4?Pjd(SWo#rV_%BDDF9?Cy}d^mU>H21|$LbDGyv_SvUZBKn6XPs=Er?BcwvXX1k= z>g}E>lCW6!(1)X|nY4{9DtJ^$iGK)|t3o$h!ZUk!^y**-gduUlhtj>p= zEUi#IZXMMB?3a7;YAf*Y()kHjQ-B)zm!G{I!)}x2_X1wa=6}2FZ#O)bQ=G5hd>AnE zlp!$YXeB1Cfm@u|{NCb~m0JR>78I{P`G?atP7;nZQy2-SHa1XO{4_>_^l`qALEZLv|;L@rzF%9m^1+U}V}8)!Yh&(@k8Xw?i*w^&A9eir}(~5Iq?QHagRuCa&1JEcK!pVtXH&Lzf#a;{^c_7(i`{EN=7k6--w{0pb}%BFNK&Sx1e5EPDRr6EcQxBlw{6aDi9`(y0< z^8cKa{=;(T(*~34|9yhxX*ZSXM?<`SZ`~0lJ6kFW%Oi?@6_?J&&Iw8B{NE=SZNgcs zr_Rn@9;{4f#f|BMGVo}I{W`%s2s`LuuVR>_VU~p{#L*oDqP6YuH@l{85YuuYTQad# zAC6b|(c;(w88NQtlhqi*S`2FDRJ!2o1j|vXX0JG@ULcE%P*yH^B*zN?DiThx=Sy(c zh&V7^0_Mbl6yqvH1+5@Ve=a_Kp!>MpPR&^~^sc$_c2Upl1BR+M_`)`F7H%icb2>u4 zw|Wk~?c5LdIkmBpeS>^|ldmsaeQZ7OhLai{O)JwI44Cv?m@Tsp(Q9DH49M29Sbqz5 zovpvChaA9QF{i4p*|ADZl zdDe)vaDSKn#|akr{#~YBG@%jelySCoS4!XwU4QiccX26T)_pTSXrp4Y;P%(|oA<*= zg|`a5AvjJnJFL$szf9u)9=emGJX}8Dz_`E zA8l_})eqo>KU6o*dVHvnVMtG_ZT$+J0duSn+-ilxv7{ualK7t4|cgF>A1N^-)(*N zCDB1je;0EHe^;(F@tg9nv%M!65iypgwBuCZcFEHVL698-9?OpnMuyFjwU(by*BSa= zh3c7}73#yXSOav^T1?tdO(X0qQD?Dg3?n0Lzy09A<&*|*oPYTwaf0I9*^)`x@Ml83 zzFsz#S)P&(25|TF&(KU51F&CxB5EX3d0jal0s?xKsEtB7zSE&Yjw+9}_MAwMT5EMNKJs z-kBqS=yD8=^Co`>sL<7bW>fC=gjRGy!};7(0LBP^&ku zmL-bj=D~)aC8aNB?Iv8F=n)wD*P-ISlhVvlVkWim(%;v@e}+MAjn;6fXg(f}BDA*R zUUFi>KW*LJPaEbW5@L)BYrx^k)rHN6M=aX^ak6vdWjq6)Gh79URy(Fm8PY42&Kw?d zQQFTgjQpLH_Ro=`0r*D7vhEb_WzGGal%6}VrwuPu@>*Qaom3Z8RQ`@di%J*lpCzR$ z@H$+KMWoyQuKI!YW9B2N_X%ZWK}IN8larpn8$yV_=}%U*(=24il&L6;OeT4m6@&T( zWmN2AQ!)-{wU4&c2wQg%F8;YpMSvs8xMYXQ6sGLfNCU#wT>pNjoZq31>z`RU-Sfb&4vjAW*JMTMlztT67NoF0*dQ|K$S9FG+50ihm}@|)lR-F zsdr7T^JElOc+#TKG4ebxH03Abd)r`LddBQbbhL;05>{;l*`j0VDQ!{-FvbsAv=jtI zs#SQzYBH}iWOY?&i#5zy%V$8I8hvykG-53}oAc?2)ip9;7CE&0xq4_(UUHA2b%DJm zj7^Qu?WIMnthGngcOs!#I12u)fRgT_&f zX1DYpw)6}2jT%BcS92-6M0sc{5*uK4qE{}QX0{^l0JTAlrh^7Oc)FxS|2!4n7pGt6 zhJpr~QZhfLd|*w5Xeja-`$}1rWH8p^EWdc(xNbWWT3lei5y3g}VN2#N&vU+~k%Adr z?oUS2rwVO*_&(uhNeRUzQ$lW6F1t4w+-FZHE^*~rG~8QJ6BwcZ%e~E@y=NKa zk?KP}FF;(@TU*bqx2z*~rFafdz;B-Yblc-fZdXlU{Cz`}Rcqx(&-Gf>c?&78T{5`E zBm-^|G}>KtT0iWw?gR>(!Il;(S6Z>8_2v&aM%~GC-rS;6L^X-kUm~}!C^HCh++Vge zZSI(}?)2n!*@5h)u+*pFx^I7no0oH%yehzX&`d0vIgNBR+{YK*z$K6EW$31^&B36&{AM(3|FdqJk$;|>q3j)Ma}iAtP8S>zweEfg+$zG=LP0k2=9lCpzNgLi^P2} zrawe1?(U<=43B#5s;p`s-jKe4ftpRd+U37_Ud)~Sd*>C~`*-I?m~tr~lfj*PFD*Wa z1&n?h&F%b>{SCT#N&J@W+Ubgk_tTGth9S14oFa}hZcfx!PhOuCG(Mh-`%G+by7q!| zcj#j1Ui!1!Z-1X)#GJQla0Q3|euCluIKl3|o2i3F0;RDmg=`Fj6YO-;5P!Uc|MB_R z-Jjp;@IO!P;}6Ng0L)={tuRnf7^z|yxIAn(Gt{ghRJ2g@>;%Jt8GZ6iJ{73xHcUweiSar93fo}k+qDFSB%K>i8xmtp*R$w(i(x>ia;qws#`{? z9z|#ph}PH$kt31f6iu=DNRxRO0>fb%6!pP0N(cwAoR6|Sin3#lc2JCVLU3`KM0eA| z&-+HZ&5O(&N_4I&dTvGk+?80Dj*0U#zVns#LPShtBQftD9V5Vk5sStC-f*L^jRhh1SJe*{Vf*u1jJ1IAr@j0 zsRX?cfL%mOASVAwENoR#e3?}H*QF{$Bq~e@hc^DMtGI&M5ikHS984!{Jyc)R8w2Cj z$@?$1HkpzS?C(w=VU-!k+jVxSKF=kHg(X?VD;N^xGh6%5P9H%moGL?8qX?JkwkC&+ z&^m;3Xa*)Frc&9bk%3|7Tpai`C6r|%-l4|#=-nX)-5Cb zYcE^xl`<|UK7Ov|CKAkDsQT#3+jH@b14J#KKV_RJkY?}Nb6=0AkY?5zf2#a~)LIaS zKZPg-9>i@vt-AW6^XbXAowuX^w95Qn>MAfz#4157bXz5Cul$o(h;<+aM5blONqPkK zIZMqV(t?BzUEU@sr8CjWu*=F5-&1dwd+DzsP_h1-1^us=>cbESU;V=rTZi(lqzlJ^ z-5}Y}3IQEg;jmKlE+L+teQj2&%jL$#Fbx#?6rJW5oS}FbYY7UT%`)tS6oO||r_Zp; zYpF%v?l`V|rn6b8A#)_^su8Ij(ZdqkcR8Vs`UH^;@}rj@qpj@ktiU!lhmQPIY^l`N0D#hpb$y;oHP_zmbDerD;_o&mP zP@5@BXamD>UuUoOMXF`hQ+?Iy^%;K}oLG2qg7@e}Sp4Z;*%ul(HO59W?eUZEx5#e8 zRM`&=93U*s_qda>LnOCcyACCZ14=vkj_Dmbk$U$82K+fspxCx%^ZJljUOV8WLGq6^ zlKfe^L(}qFa@`B#cL7DKkh%TV6FDc3@(A@W`0}1sj=({>52JnjX+wSdN>aW;EDpyR znUTyU>VX?e`80AQ5L==NFJo&vyrn_}le{7J$`~b!f6TK}8Vy=x0FYfux=%J^!`J=_ z8`UsRpVA_Y!swN^ta$Vg>fZ-KaerT`&gWx-x3>Ip*9Ljez?3;aug0{;Z#? zxte{jY$sHzN>nTw*W8xpDIP5&Dvbt?1n3{;ZSbz#PEuTreBgK1=}Ra(zxl6ZOrgIz zePlWl;j9ORV12i@mK76ctIX-b0_qWRlWxZ~#h?G0S2p`26x8)Q6jbp?C`kD4P|$yW zJ^wEI{rb+=jerU0F(dXL{(3zLfD+e!5CDQ;-fsGBwLnwdC&>+dedi0$P%%_{ERUEA zMibkFgj4E1s=kb49)zxu%302dE}Fw1r$D&m@L=EtE&XBL@rB_Q&Efc?rFkhiN{^$mS1o5-PZP_};!jE2F1T z*z=B?!@Yr?gI|Xh9}_lyxe)km`3+P&2Tu1smCezI?CJj-pyaF(4fnof+)Y@nI(t1m z#5DWq0qiauQS8!)2^!oDL~)EfCTtmth`ww@D*3(^!;`c>i2!pFA;W-Y+09=1I z9^&DC<$U$38U}Ei)%>CC#w04gl=H?z0*W3VHb5qRd%}o43xI=Dkv4lw7XZ)Eq@7KL zGKTppZhyG!*Ss>&IAIHnL|XZLXxsSyG_+}BsBeRXvL z#T49ZLPfTPp#<9m?oSm};KXj~(UtTN7I5Nk*vPEtMZvFlKQ2WY!lfE%G~u#=j_Q#t zocCNS&p)>1a>cKH3$pmEpT!r+WDpbtAb&04DI_wUwHh6gsSbOpMCA!(qn83yW?Zz; z=C}2dy!9^saSlq0EUlK259d~PZnN@czmi0@k!&n7&8Oz2dqZj@^fTbr8U)^R*W`4! zKoS$OK9%@7S2!Iso>QHqMW+d4!7qUlO3l(0+OV5U*r{SkpV*UUYFU0A-wxn+g4_`O#O9!v_ zyduQ#NImK5sWnwic`{HqMWJKpH81HNn6=X><+BLSzIe)zZhLfcN*)K_4ZqfVD-&s* z3s;3NXX;pTLLweTnh5x3Kh!E*%aobdkThP^wS(?w_R9)LlNIYZ?@1%`C&J&9{N0GI zIvhJa9fIe~M=JIX$NJ_p=At&D!WfRY&@odm{#O^l@R`PAnr` zu_$PfRAJh~brySija|^{XA2M&}2VzBb?p-}!>N3nSu(Wf?d0kwm|NRKGd$ ze_HG2|KC~bg(&-p2Y>3iaWn-3dhp-Y`tliBzLsFEb95XG$utT*D<-`6HA^@qiZeu2 z&2k5UBY%iKC~SKAYpF0Z;*E<2gpE+{Zg4CEz~ud--?^-o-;=raIxiL2GXlB{e5Bp9 z0#D=zr)-S1->@JRM))IP8nPy|1#J#TdcNsUR(gvLPJ{DqucE1-*QW$BT|d{5c|q@O zIU{#J%-<9+Tb|kZTny!$!2hUKX>fc)*;sY;Za_~2IbvRmuO1e0Cr*BBlt4Oswj6oz zUGQ(9@k;nFAl3hLE&m5=-Gm#C<2ipuz))u#raj}*I{~v;-j^h25iiW7nlUao>4HTq z-enN}jl`LDq}r-C`OJ%Sv)ri8specCcgqi9Z6*Mz{zcbydCU=XhqT?EBogX@h#L0X z!H`;UZf}JH?TpoF%+x))9|#B_(+yXX-*Z73nUQKVk!EphrR9J?cI%>0U^bbDVXpRxwD9&WB-M$@X3iBXLwk&rdUo!f=MJ{G_J@EWDWT z7|heqZU>oZTSzK0L02h?d+6xFq0U*?$=DFb{pKfdz>d^1XAplH4!#aK8*8V*804;TDy#RoUt@r1-TxJ zX*9LKw5D>h>j2 zoi(nZ!Ll{ThWg^8rJ}oL5lEhZ4xbjyc_QDEP59~kb``cd@QF!c`s5HM)O&&yEUbIBLHzpoRiPR; z%eC+a5j*H@f3Yj+s(zZ!u#tA5!jj?YfcdU;K0C8<-4(!>OWntA>ZSwRD`YHD>{p2a zmV3FcKdaB@Z9#BRe8z>fjW?8|6Of<~#L{=A`6%{vn2RJZt`0Aa?hNnx2%4>0`4H~L zuAc~Hd<{mPGWr3$r6%FDPaItP_Bln7#Y`gv-2%Bnj3KPQHH2`J_cLa{b>HO&p!)?r zY7r(wlj(BGF^r8q7cX>58F*7b`3O5EdPV>`Kr&F3y$GObQH=YSYdPz0YrXK56P&Aw z+*VdP`GMX$Q+CWyw4MWP>}`Hgb8X%1op4;sn6ruH<=D61+aj1PmypvP@V-~ z7;ZHUmq7rYmbSrexlF;Eo@_m4=bnsBQU?p~0Qu`Ho?|Bbb8G3{KkLQP-sJ>lAmoHJ zZfw8AjmVm(fFn`bDW)uwzFIlVEhbZY z$(DXyFab#Qwf)=Eoy5A^|7kg81;BRHmDMO7&NQ|{I`@sP)gvu}!@O(9Aj@#LayaV0 z1F24ZssB5W>K~RzTKH&n1BI>9(w3bX^a^q+>FGm1xC7fgMci#wAsIS6@`jd{`C`!8mJ*E)408dW7-5fXT`5pH%9q{hzr*~gA z(P|WkmR?O__@2S~ECixFV6Ii(11NB3%92XFdAQ@Y9DC+vNCZ&rv!MBT^00DMJ5;ti zj~`kiS*#DiwC7jgT=yY2z(msNgXx$whUMF}&VKz#fZKMgsIQcGq z2oQl!FZ)||EO=|PiV!EV^~d4zNd?A4qhf2zl==R#NS(T!L&6Inc2K#l4!*C#^BaUFTjZoC=*jE>7(YJc}3W&LQ^`Myd5#)6LW z5{Vt;boGL7k>wdSr$O;SzhM+Wzb0~6uHmTJTufO{VubPU=St{+ZhG(gl+@nS8SG+4 z7hLX{7( ze@tD{!j$VGO7USV498F9o~tDyqn2cm$t|p&;nG7iLHm;tV`{TltrVm0bh1mVRQA!! zu*ZTIfI^fBRg2FaXv5wjd`OMd>U)iuZyD|?65f5DPEC8>ekaCjyVJ1k3f6Z2Yz8@} zWuuyU3DD~sLUUf~?yd~23~ZB1`lc#1itOhrj3LYkOlP}`IHR8mF4ccP{U$Qz=xU5% zcX^ql@&i|3d8rNqjZSj5K>J1Cz3+x;F#tgz9CXqZ)+d0NM~D#R-AH6I0W5gp7MF^W zSs(*Mn28A1V_bgbKSnb2ll0qZ>&x77;$ zjO+-VGLN>ag(q`b;RxRa6Y#kqzr?Hve*TF~yieGS>2jtv=dpV_?WSLLOQ0a!3hbQ=8Tv|g&ga+R-)6FgvOijcy(ZYYJFaA-lpi-ff0-@uJ^8Kp~L$pe~# zCK_qMZN}ArF#uG#Kch=G)h(Hl2DoLSI@nsN7(1dBFg6oc-CBhSf{Dcaf%4@Tk#LQ8 znh9YHvcY*WDRY~vn|-decr0=<(A1qZcc*k15g5{)C2^MP-Fu2{=Ef4*eOBtu7l_yv zCq};+|L1|`y1j#*2Kqi?)+{kuXSO`RY9O6p|JM-}-_W_fmg%fj+z^V>^+`+e>Uq!9C1?1+QJB$d$4*2_mB>roH*6w1lehs#SbLnpk0~fJVB0jR;j2BlR0OEP87v$8 zv5rAIt0Qi2IYXlZ_R`{6&sT56MnIM(TD_QW=PJd$KTlq8oLLie3CYjJ#CmT8O?I%e zyUOJ=N!W_X(74Dei)+6B{h!q_|FcQ!^gkzP78ubO?Go-y=VUF0{k2SrS2^hcX09HD z8{E?Uy*V=;!mhZ(SfzhX(6D5H|2Ao{uB{i}91|Auxz6OdQ4&X8D`bj02{9*WdOj!r z>mjO0MV3Yd@mcw9QYdA5*49{qcO%MKNQTMC#@`7V5eKh^j_JkCs*=RSzB@qQG&KfM zA=CQie$Z|NsD9{kZTz@@$h$url_WwPKPYtaU7IaBG8QI@zu-eH7ud9wXkR8C@ocs4QJEwk4RQoj7*4(0?H30iKlT(=MyUDay#IFR zp*5k-rveAOSvg ze#RMm$!paWUlOi(*-9((zIc-i^p*L=9fdi7*bJ26Ji$1$_H>`m6p3NvXH8zRr%2__ zVmmX&K3`~z5M6KwVAx&{lxj)`bw>r|c5wdUyGQZy7C~2fz z2L;=z&=AF?EDCW~UKAdoDW6P8^tPI2%t2_1ZXt;ZxmZ+Uxg#p0UF`NpWR!m)d%pWr zlw={yQCHCs%DVY*JrF1h0^Fw9F&DNR=mY1g6-(&|*U1m?FmZ?h9^g7PWr=7i+L&Ir z16uuK0vrL-A%CyQkmUK(G3nJ}DmQeu*L%EAIbU>%Mu2JjY9}^HB-4t&JxkJ4e3j|! zb`i{W^7zz6MmRIUSNmQtk&GclAMNTMyOtQozWLa(P%oNH^Z`Ec)CkCJ1*Ijrh?zR& ztVWr{=gMINjCUwpMg%IVp#ea6ySW!jQ$(-K0fy}6=Zq3HIw1A=COk)dz!}~7UQswm zzi`$yL>DFa*mha=RB}I~W8oluzH8iCZ=_;@ij8>O7uh#yz4Rmxv|ddRh^>Q=((tY- z&0XX+kH|8kXZ0YnHxS|IT1};nCl~Fq;EMddga|%OEeckR_cW>XZ^4su5IgDtOLC}0 zamcBcZ#yzPnlnanZ|s?I53u#!xPh-eg za3|sliLg_|CfZ~o6fYm#O9S!4X`FVVE9e*y zI@_GcQn>Vhz2iZ*FIZ&AQ`iOF3)AlKOI4^h#aure#89{3S`E%oM<-5NgKX#2f z*}bkSKmYo~Tl19T${*<8CmBUw>3*Ys3FTw}a} zw`fKcPYMcq6m=%eN#)x@ic@ee!C=Splg{Fm=Jxi6l${puZ_g**A6OC%-a95;TYPg~ zp?*SKCaC+{(`|w0-RnD>p=6}WQe|6DL;8msYGJP}Ki(s{QSH_szAwc}bX-S1*|igW zu|#$2FqeyyG2w#kI79r{pn}hKvRC0M+Olmpi*7HS_v#we#Hr4)J1Kkh_21uwdUlSx zo&S{o{QFzQ;VB*e8y#E#p!Dfu7Fs&)id=804b(pIO6Dt%Q`{UnTFfal+7@Z*_xr*b z;N;JWsmq15eh6Jcf1ah68Rqvp^XM}jtHzBRw#cP7+nTOHngbDfyF@#a%!HAgefuvx zS0G~{Gz*s}v)d)VjjC8s++SgyI2=;>`4NBX{+giS*Rj9V?XLYKIpP1P+x^_HHtgB5 zoH$}t>iOJst7qHobp~WY^aHH+Q9Dk>TpDmR1JtY;jd`NoIcT!HXpzN!CtA{>7dZej^NJYfaU*pG0fup-Y7bg)$zK=Bd!C4}& z#;Pevk}#>^SYMnGzJHJ|0tG8 z1#r>+8~>-N@&AV|D-%mgMltX&J>JN)qq#mez>h-Hea_pQ-8ef2)uq90IO(#%?adX3 zn)MZG-i^lzN#xS`3%7?dy4W(VuO!RPy8k=;&nXiFIxB2M%3hePU5LZFXp#Pft#)4m zt>SX|{VeEW$xO|IJ)V=xsKz*BWs}iS+3IJkG#DB4DzHXQM9NH>jUSkP>e660|%urdgW=-dyIKZ2d?u2SGE2`UQJf*lp(1|}Zt^8(W z;~Y`jH264X#F%tfB#ZJn$fY>nypCn7F<;;J$G7)i+`%P?F6(8fgr71Bp- zoX1Ly=X1!EfZn77Be3>nfObA7g@&UsIqM?~|8Rl9(LIDj35J|>YOJSNqW8sipfp?L zo*Vh~d}m<5tDN1cF|78^^nA*7?wG30%{J{vP8TvNK?x$X@Z{z#?3`JVrORyc)bUFZ zZ7I=5(|6~GP8%1U8}yn5^kp&dKM%5SJWM37(Wzd!_Cwz!w=gWTMwfFw0`E*Vnxb^| zTK`xER-_Og{h&%K#QD+9vcb!Y-&rGLDx8OJC_l12c;CH(5kCF>V;1k7@3B`U?u64} zb9chGLm8!2@5~gx$1qOn6`%RY!LfTib@tM^2M2`WI}TsAitW$p>MhOwjNC3J5e020 zt`LyYPaBW%pT8CVTT1wE!}e|zYMcO380n=B+l@veN?=+iDPd%ct&(HZSh?zV^}5*L z=w)2#iHo_H2bjSf9J(9brlXEXxQ0@zZgV-yL9t;RI?AR&+|7f!5Y#loCr~h#`$EAG z+4xJ2YVE@cj?V_K7&@mh-pOU-g3wsOS;|=F{&PxrWccjS$G>>W^22zXemPGX51F7u zi??BTc~IpVyN=CX`ro(7hzcPsoiUSt6t(^(B`mwlBQfz;aO~Wl6^Gv~)0=;u!st{L ze+S3@q6%`jj{Kb}IGXW`heB6Q1{Ig2m`DB*9D6Z3QyNoD7J0B;4d83zf_8~9pd3Nt z#RgOl0*{t@jVjIgZGR1DcN}yoiTSeIj}eS85h()FqaQ?ycxGBC(a8UFCL zA+7Am$7?UPm&Ssf+u_PN*;5>`4`ZK}=u~S95-=m*F(Xnlw{sVne9Q-t+{th=Dl&Ju z_7$~Zqftx@dv9rCh|)>LK@^T;fU(K0BA6cH2Clv>0gtVG)nMvG0R29_vSlU!| zKu(tvd+V%~9bq!1bBdemw5JiEv&2)-!1LwOV-Q$1Guc*y!Yst~b>XMECSjoJyDqFBP-Yz=yj4sBJBN<$?LC z{G!c^Ws-!obBjD*+Dzv`zXaq|3OzdI%F#2*cIiQOBp_D^FZ_rn|wo_U<0a&c8m^lI){?-j~PDbSe&5Y*P z{?HNor#OC_J7Nd(JL1ni71*(c11X&R#x5?VE)?$27#tmAh$KjT9A@n=z zT>;-T2WgI7nJ;VT5Ooh$@z23ux{U@8Eaustu`8HC%tN?}AAasp90PO8Bugvrt8{9~ z7i4a3qzy}a8&m!IoKErTlMbS9>ck1>xPbhc4g=i<-k2YdJKy)l|2uBai8Di3L^T0}Ru2pw+6nhAMl%5#=_inx`%r75 z5t55l)#sH#X+q)SQ}HH73YbrP4d~&(J#7`-QXhoOI1W>*XcjY;ReJcD}CU-5?C_NZ?U@`+-%hK6GXE!NWAu`jqkd!>S)vui^ z6_IA&m#o1$8ZOUV=cC(H5kL$WWuc4Y3^d{YK$4M39Hr?T%MVoBJciqAOves4uGLtK zf-bJgbJ!+laW~=6K6k<%bIkJ~$Vvu1IHw^dwq(vZ->^Ka&(r095;<;O)_-7RLav>! zhqfnz44bPn*tgc0>U&05s8y+D%=j1u{R_6vW(Z9b5y-JD!r{gJMh|z=WhBxnw7FXr z%k!NLK?`c4S7c%X%&gFQ+w^f8)_B4F_ci9aVpj||Y0Wn#(?H9-hGdfE6KeUl4l!An z73e!YO8DuGHH(kamq9wwTmz?(oZ2C1jQc6IM4(etatY&nho->^?lJspTv|N|_ZVqn zLMkE}c*9t>mFvwq`Vi>VNn7DCwSeTVr#6%1wQ^&IY4ZwfR`KIn-;yXg59sFMTCR}!>*FTL^kYd`4iA#eP})6HnDNytM*@3eEdC5!?B zBSpQX7-k|Ky`=mYqb372Y*s~Qo%QtT$s$BPcc77&6>6hOPlQZBAD+sV#g-CRRRRTC zppo(CFNq-+-ZIKC35@v2AkxmR@~a|`nRz4kP)YSB1C(|?aAo!I<;VhSf%*ut@gxmo zw~1-Rb&4iz%(6e`!cYYmK4`>yU-z5X_hOKrVu>%ir=-17FE7iW!+i5X2IW5YK|`{r zZDjPV5gr6UfK2|uZfq|8)8p13SkXQSyo|Onx=~S0Wbyn?31tlRr|YBqXH0TQD zYheC_gwiU&aLaencSp_uzW0@D z9NR`wyzvZmV;0$QCwD@#T4#0PT-4JNCSO4c+X-d+v&~FRT0YuS648hJ#BJxh=T1O+w{-qkraTO}jbwHQUP0 zo@1A?ORI=15L6GK^(vS-8#ToAO(1Z)J@Ou{6OEOcD2|?9h`%}8pufr&p&ebD6KV3v z;IXQig1gC+x3PoHaWj@~hC<<{xek)3^H;NZ+1?oVxznldQnge`P~)^rKF8ne5NSDx zsu5%^!oYEH5)uw^?eSODkLUHe6hJ_;*fKL-yTiCzS#R&qn+-8+_NYKh-s?c~P`<&y z$`BnpqLBd;6G2<|$SmF|O{pKMFAEDgnnT`f=L}x67p_pgg*)5SVIEzsr3o!Yjqp z4HT1R1o*>YYJPPxfIis-#s8riv{!xV0H-6#qk}8cS*LyHWw4nNmM)7K$^>KasYsSHANtSMFzHr!X7JU3W+GLC-=rU8~69?1^w zq;tumPYB2fU&y|qbH#ljhs2w-lgo{}DsJl#8Q+=vZ6Dt{oQr4C{}My1q@I&@HSg6L zCKs1ixFC<5&m*wpmn!9#Tjy6^&9An$p~%j!U&wF#n%~4y&|WXKN=LeK|!X-95&=u7DMfE__d%iz<&bZM0y z-0FgT7W~M-;`U4kVbZ&2rii>ZB(m-Hj5YE(BjoH-94t&v%*tI&1O0eNE`k?21G&kh zg`6I`EO102okLp`d+A|bNmIE}FNEw|69OWHyp=6>jz}i2QJh#~_A=q}D}H2)RGyTw zesNjYW6cZDUl7Y_xHJi3IizKY;D#i9CZkJ~r4B3aQU{WEoq}R1KP=d&L{JG|rRCZ! zRt_jpi;=b$F^HX2V9v!y_w$35jfI@#FuK0lbxpB>=@oiY+MtS5<(_U*VQKn7(cCH9#Bi+{ zRnW}Z-OT>Hne$sS`W^EKQ_JvQzGwd5qhHA%dn>&^M!$cg-v2^jvMK-T=m!3*mKhceN+o!O>4a$UrJJX9pU z)%+Ixg%=&TpPEq@!)En(*)@TW#o1lIEASG6j8mpg@o2{}>L&QZY1lscP248x<#}%@ zNYovOSI&rw^u3LNzRO#(kMDQR-M>$}2aco=;MRnSTA|$ap|Rvn)~3hFP%0LaRC4r} z^Go-8zU4EQ*Ri|5|F(gDt_`bH-VRUDSZ^?6(x{;dM9AJY576hHqRpMXMoK}NT8s;s z^ikc)T1pPne#xAELttm`c{o1+VnEC8YU!lheR%J+c2Aq4QzDb!OiVo8+iKo0GO8&u zrU}_kk%`b}T4`vcW2mJS)I1uIq|I##Gg8>M>_elrkn41#J*BtZOcJzc9`;{l4dr6is{souTFW&8pk$xXJG-kS)E|&Hdu7- z=nX^s#M9WMNqo&=s>Qi0YM7JfgY=K&%t` zskDS5`K25$!v|KZ()d%*;qQmfEI*GRwj7P})d;{Vum4R z&N=6@yry~apAL54Vev070_QG&c^SIi@a0wbm*br;uOpxmhf6WcJ{{K#lq%ZB4dt#M zu7*lxw$5;}==*2@11Z104J^aR-X7cWre*B(_fdYXcrb}<;=EAqQzPGe?P&W78OOmo zs3A`H{k@s@Dlbn}Q-)!SsWZh+Jz;n~{bBshORQ5Z4MT*Q`39&jcc9w3Pw8>UaR@!= zYm1x(=@MDu@~Z0M0Rsq^eV|sOyv9oo^2iWu11+=os)ak${XDKz0(}VWKSQPe_$Ga> zJsj^$Y!4q31SAs{DF{753ki`2B_oVWZ#=i|KCO;;fB1M~Y0=AuoCY_-J0$n6V*Nm>0g!~;W zxdVVIbLCCphz7?;F@Dx}rGNK;{b(DK&))HH2q9YYO)8w3JsgpY=$ykqlfeF&=Z~p*bdpm@ z1pF~}w2DG2+vW8P3!T{D!UNsxC1Sd7Gjk6~drh0`Z`I>@UOawIi_Cq`F)+r3!Ph$7 z*ZGn`Fq?qdd16weQLjz)zEda62}Bb*lRLI0&?R#UDcMH2Fqrs=A{a{VKRcS?PalVM zFpj!_8X&i19T5haA4iE*%b0RXJ>rF~#GMZFkq}x zM|g@E536{0P9_hy2930hk?7AR*@XelhhjCOx|5(NLSGSiNhIcoh-U@2%AU50rhz!c z-;{S|9Rv)0f-pd1v|DdG)8S5wg-K>NIhYMmy2B5Bc`pX>7np6n7Q@PHt6ULKpv;8h@L?l*ToOA3684ml5?&z;QM) zeRJ_?S&@eLXm~o7R$iSb;xwo@3!n$oILJSzP1H25d09>ugqHH{yGBkI-$ETz#X@3Q z_W5F@`Ba&_32-G&lhn^$ryej$$9Fli>qd{4l%xfbNTI;9JE%PoD~vPz2KLgs%|7-@ zsx`D$)V#ytY%o`^pL9B#!-)GcVj{3XP4=P-pf ziS@LL@(xyu7r|x@3VqPF#e2|^q%u$UoFE6L zR+mu|)!(I+Gzt>IJ+)WmWu^9|QD;)L@)BL#jjc8rc^J}rYg{h}ll zNd1|&4EO1M*A7y>^&Z$2*Lu2Q@w})^fWQzFt{)rLD6uh<$(Xu*;UVU2k%SJ~^!Vq; z8`^}a`u0YGqZjnTh7`@&poKMtuYD|In0QG5QTSerIo#e4#iJhia7Sz_CZ@-`P(XPCqZ@WkjYU^6bebaCxTZY!Mo8h@Pat@r->hV>rVfJ{yg zluB`sf9=ur;5VP?ESy(eKJ1T0e)yQy8Yv^c3&K3H|0?+X`<{H&91B97TyO+?{7Jg; z>UP0H?%!C^8~w${KbU>m08jTn8}}Xmw9`>V`rkVK*r%8V+Q8{fwqBt#?4NW=}y&h8YDqXaaq82IQrtcegnv4_cenWMMEhkV)r$b9^ zUMK%kjM==md1x$OB)^q*?1X&yg=%eMumfY7fhnoxj`Le}i~FGvWmOXAa~S7~iuYHH z544KEoEZ|F8z0sYA3h&{19ns7OFT_=@JB%$|DkL)RIbMb=e2P)`FKRh+R>V^BT##W zJo^9_Ged?1how3qSKmbBZphnM(6$*-Ufg9MWlx1si6Lc<9hr$5erDiikJ~vW=SLDR zn>yU(pK$+@8$t?UlOWDw8^FBs_LaFd^C<1~M(`jYrNm>c*PMzlDT-2r{e9;HR) zNVN<~ng}_QuATOzEO>iG%Rj=HWt6O~DMcKc+O+C&bli7K+#OB<- z^a$~M5*vAWaUe{SivB=dlFXTs=5%&F=6TpPkx-2MXP@^F~8Arg&e6wvf#NDvcfUx^>SE3|r1bV!yAMm=85 zd;W|!CY@32yXvb{bx80FGj5VLK21L?2z4sNMGBi?=Hqg~cizK@#3TI|7*^s&`Yn(4 zt4uj?A-SjiTC^pcCTHV zP@P$1Z?s=#30e|sSlt2u<@vvh^cP>lC$ovqkJULLu<=|}QiW*oZtFG?QBwzmTSWVF z8#s|>v|7-Eg4q~LphPq)U%p$^T;kdbX1vtL;zgVkW*#N_Y7R1$U@t;x9A{YpRD=01 zb!tucs^uKpG3unc9Q*4ATH&dDOp}REpXd@ys zs3vG@9T+qL@}URXA!8_CQb%GR1@k4<7=H@?`4qHQ(S)PUmf#Sq?1ux zDjdrbAa!3liTWn{gDZvNustu{i-D6-81HX@55+th-(}m`^OqrI(nFiQb93!f@tEm3 zoj5T8qjR(pg!wnC-Mp@!c2}jUqXYrVtWWo9*fiPt3=w+ss*Uoeqih>A`iP4^QZ*qc zzR5^%o*IXc08a$)jsVYmw4FXb-jYaQx=8XRl&4Elk|P3N9ob+vmb&*HAKUIG*nRK~ zPIo^;86a&u)Cw+b`fBcjE>fmL97_iB-+L(u0!FX^0^hV_f7Ao{!*9_yL(?@`oSh#f z>cG5VWbHeNQ4dv|9{zNxccz*;lgE>%ZBH(4^>x>P<>RXb8+Eo1+>Td8J6;5DZR7yl z0oFz(Sb&CRLvHnX8{DSJy_NEqi*L}3m50v+$F$4te7_Q)G#}0QxNU^OHJ z+x+ZKflDM9)-N9EKT5LqbhuyplC;6$m54y*C+_l2U^lTU<+;%(!T$*{@b%vj1J$a` zW4{ms$dqdJ)r7)?{CHS`m5Ge_*ljL=V}R2~0j<`%ox&;mqOp3@YwmQ3<+q=namaeP&ZSGv6bqWE6c9S| zcq-leZzb8`KQiS8b)-!BY@Sas%%88pZ#1II zU(2IEa|8d5OgN`%h59Gpj0|1hU%;8u)r6|(+rM6ezX4}VvuTS+XvAlZ(X|>SjC9(F z6Exx_YB6NH07Vi)D%0)}Q^jKR-IxL;`lJ&&wPDbRqRfGHD-8@7P@hB# z1jSi0>OHs?-4BUQ%ns&8tu`;DvMP&kYx}os5-24sd(#gr87nwN@IN;LnPpVN6?D@g zL;E&gW3W;fcZ`i}G#!q5xJ&MfCP~PC2s!_wG8!TLbh-#bLhV0##>R9kJ%q;L-q2s# z{aG~clwdqx6<=IzdITiXy0gB`XezIf_v31LpVdC2JKA}4^JzcX=S>Gp6jW2Fsu?LuMp+19fzmiaYr%|5~- zfH7V}f2+{C`TD-!6x636*R~D58CAh$*j7_LS?bG~?^<$_k36AMyBX>@E*gR0`@=O= zg>ki;-epBXTQwysS0gRY-dz-_9;rC?^sFLu)dKu&d(cscuqMH$u7;Jt#LBu^o6Yhj zYEP`jpv{O7MJ9!=D!{fuPz?rhp#?;1CmvOkEY7}6In6ghwmTntKCSPdtrVSX&jyJK zx$z>*)Sxd|83*q}QZHO=Ut>-3X_KZCBNLSoTJ@loL4@Kd=g$t3p`K8Gj_drHsu4xx z8;HB8`IDP9FVc4e6E`FdGo!{zj1Xgcy6vy+wCj8{y50SN;%=Y%OF7?*`4#3d5N8Q0 zDMk)~JCmxE_fRHCDw%peBc@a9buUnK)A_>KE90u*=`X?fM1;1N7?Sple7SGDCNoBy zP0Jf4y&T0s# zw{pT-grr!2ujuNt4<{HYAeHOUIBD4t&Y!!HVLJn1E7QbhKphGL&N9`qq|_ zyi;r~`9&cZtxaWfiX2VqoVyEsjVUCuEi#PJ7{bm!jI4e}K!?677i<7kE;t}^Rs1sw z`~|YV%_q7}yl{%B{#?oI^RZx=h4|4IM(a_U=u^xvCNtI2EO2=|e{S1Kep%7!dA8#@WkibQl2zv33JbDkF z!m%=FTxFX#b9Df-8Tp*A*4>Qe={rl`yIUb;=W&B#4~&(qkM-&+dL|N9hI^aBtqn_U zc4sbk`wSPZ8v_{YJTs^aZmppYuQkhSiLapW;L|@-W9&;XuM2y|tGY36IoyS^CtoHw z8@#*eY!q{?=5vGB%Mo-Ne6AwS+?T#YHDqhcyzMPxf!Le6!o|cnoRw;mg+ZUSI0%<0 zhONQb&DiC+kVrfw0Iihm3)OMgQ^|JX)OXI=I`E(%|i;_k3}5@u0oqaf46D zqvx-V4(<`D8hzvSUaYWw>1e!8?~h&MD3O>`!{1Jz`SR74dbE{4w?V>wBk^U-^(&bB_6a8aYYDQJONG_61Z; z{GN6GdfjB-^j4C{p8z;4;`cfVR#eEl+9Ovh~xT;qgcqrCpRp%X%DR-*f*eVS1wO;==-^|2J@IPI}}psc8h75VVqX$-1{s zvZmL)%=86|g*sywEO_;nVC)xKrWK$Ep9wb=Va-%aese9u=ntG)h0dzoiF+Z6AM2y; zDP^1EtQvyNtIu+ILnctWPy(t|nk$4!GNkqA);EXr=E;>>Gf?q9C1zpdV&s>LD0UMB zuiK%T*25C0pMuGoKzsL-Q86;a{| z&A1~i+Qta)H}}`lPY?}oG&_xCm?sJ9kPFz!e;dXp(MYjlG$2+=#TQh-$@|>7qt^2W zt$%B*Ex3l{5vP>embmW7rasb_NXbP*BDhgWqLML#9k%I|4$Q~2QMxzR_iHi0wOpre zwp#bd6|$PVl_-$<`AwY&&#il}6h5vwb~i}3iAEL3-A?a|^4X&A-)4Hj-Sec@p0HsY zYoxXr+wIe>YX7?N+xx~k;=lO3PiL8hcAd_NhW!Z7d2EQ73Y>Z9u6Yz*ahVNfHjA!6>kI$Xo9; zS3TurWuZ&}cobUJtj%LzB9Rzcr_EQc6Q-Y=DXl$Wj#waj%Tl=2@w4Ip=5<&AiZ5yIx8W|$LS3RW9-=Exb5)bVc z_ng#dAo0*n8Vx5rw39}|@yV{|9_jBs^iyTam-yIM4@rQW2SK|N48XHcQKtF530mtU z-gjR5?2@2!9FBu z>khBw-p!GMTU>;;BgkoShNRT($e|N%I zRLrSmX+TC_J{+?+v7JL&)T(U(q-gx6kIU9pG0GW=Ho`%M@AoEK$RbqxlWI%wJpRL- zlYOD_&e9PPBQK;ikD=DSmUFn_&%i-0ccKDk^zd#|98CoG5Ia}=T13h9O7a}7um_BX zq<=(qlh^jq7@%4>iC?D8uFIr|qK3fSif-R{+Q-d(o&eWj4-Sl;W0!|88;8Fd`54c( z1e6!N{se&K*V zqy-b*Gj8{BX(Ug2Jhzstl7Aj}^M|}3bnT4oi-2!-U#6q9fSakZqiP5XFg(RqQY(Os_~QiiuPy823WnV(uY2of86cY9#P=Y?5&rN(kv&= zpEBQlb;<$+>A^j-_<7+{?#AbDlH}?-chkfacn6OCO$(y;>xzY#u*C0}N=4v*;0OGt zO2gCfJHNo^cetYu8t@{P*GkOnS2UV8BO<-71hbwo6>F z{YaQ(IbJPUEIZ2#NMRd~zkLK;a-$M{3OHE+H@V@GfA4?sW&v;cb&Z*U2nN-1o?K;O zg&Jeo3tw{Y*LUZ{PX&Tm5joP8ceK1DG*bFEp9_rtO(r$I)|hOGu}l<$hF#Jiia0yI>WF{Vr$}c zFB3ecsD(*{MVm>#Il+id>Oe}PwOKC{zW}<#*TEIpwNaGSF!DtDYM<^CIF@nk0R5Ep z$LkO)z&hr6qW7-_ZPMT$3tHf*tSWI2MseYAtWzQRwUeJGSc;6^)AnFDoa;u`n4bXp z$G&z)gj3F~`>DB9U5y1T_KcD-=|?Oh4MR*Q4kO7cz<|IJ_HRj zfZhnBxTnrv;PO_|&M4ItUU&15b$f8v@|nbKvngWmy)ZT%qkcsw7cM<&QpISKl|NXz|^Mf5yn?OB1G97@c(o9ANg8!S} zjeiv;v{Cpwq1br%R)SBB(o!jr2(aV&Vn3d9J3M-Ck|zwO6%nLQfFdk1j5gllW`X^( z`=u4mk5exw#yABcHSpDPAGk50gL31aYpKA-NpBJgJo$Jak+!^=tav(BmQO4;)^*`g zX>`mJio<}4Dkbyn|LCmx2Zr{KD%5+H<_rR<3Z=7`V3RU^CV6#LxNcQAr~aRX31)o3 z{-clVkM?qih)StHomKx3CQQa~2bGRyMF9So3;+ME=l>a7Pm&PEGt@5lI%I2F`{=IV zMhU;QLvP_3{%1m^cJ_c8BP-v}Q81Z}Ud{@$%3zFfdOiwZ`EC>$g|P+`(dqCu)`d!i zisL<^we76JY$-HO*_gS`U%rp@U7YkXHU^`(8`{T~G#k|HrMxsH3Xd3Q9IRlKMpweM zKrPYo&I@(qebQ-^GQL2u%1V(sPm|MTRbKh34S0H1e2^&f?>*!ewF(2-CGA{d%vh)u z7E0GS8AS?(bx)TS{`h5uDdD@PIQ4EFM4uvW#DyTI^fBH!@?8U9N(xpu$v;YO>KhW3 zO=%X#5T!R|0O)>tu0o7C$rMxaX|Q9Z9P^mF-4hR!gta9boLxp6k(Pz#9;9Vqw8zm>fsX-_EsjwI3KY?p%gz)p6A=PawXn}ex`Ee-Q_8n>XL2Lxu?xb z>ngKY=q(r6Q^*$g@&z?4)oTXOW)*$aWnjnphQLaAw<583D4(HWgW-KD6a4xG6=vfq zUCF8Fm*%g_4pf!i|8OpLl8YKsV6??|uHGx2I)O0V`?fFmpcO5HP7D8WcIzSi*zh}Q z;Gq_#X!}mY=SwUg=J}%c(z}tQEg2chVFn4C6imB1h&y?qC@fEZaqyo#AGaSb*zo_eNzLzi0{eGWZawezu>LoMRKz0r6 z!i^tu&?LTTy0x6udN>%S!5rc|!~>1jD67?XlE)YMA4;|olR7&BC8rucRQWn*;@&-L zae6?wBJwZax1XJSzwN+mx%pU~e77QP%$?uAYaCQpa^TOcuh_8r(+*6scQWy|(%;5Z z%Rf`HGyj{E%$M^2NXg{>4N4~W2PG52`gos;`M_YbQ=~!-YHCG+d#%PE@y)&o}XIiv>*Ix?=Pe%tut`wj-{RX~uGLyE^cP13Mp3O?5uMoICO1 z)Blgs0X1O+!%CY-6v@)aJA7xq`Y55!|Dl+x`EQi0qhCjghLr_90z4M}Q|UmsnEYUo z`$6-k#S$Kw3MKeFp+WZGBCbb8H$qTerQuougXL@n7%F!k9qsRQ z1Sh1NV>V@QCsT%M!3)o+N`;W+!D=p(XDp=FN4t48>C%b8Cdzu5UnG#jQ>nR+4|@}$ z8>QgLSL3uxRSDdVn?as?N#XWHH?E>mTW?&?QpR{75`FV}vX-7U@r)+|_qVZ%mH39! z5koAx)+6E6UxVbu;$U7o!e9VF%QeB(`x4+5}nN#Qa)~&^>p9`ygui>JtH-MN}s_hK1g|zP5G+t+4)w zm&o+CN_Z1iES5r|R?Vdxlt=sEHp>5z4a(d$7(P{yD!fgW4|E z(d+zZR z&#(&;PCwZUbi$@LGpKmkJD)JX5xJysJI_|X^6pr3_0Ye+hIwRerk4LXu#B>97I*H=Oi0{= zZ8@`P%|n=KDsN|$C8C4M(w4AIefg`>fxkF>PZU(?*3vWu055xI!e!-2E}C2bHMb|J zGavIcdKUwoSh+0zZM=?%_3%C~3mBcxy0k;S$a!?yB0@7@&lS@8B&k3(lNp1sK2W4L zBRG~z9rSu2p>%Xu7RFycXJ0rz>!4+z7{{-ujXwftxoUvcTd$NUKNMrcf5NGaiO+aee3LbC_ zxD+f^^&1E5{8t>X_)i?LtcAq^anG$P|KNbFf58D`UWV`U`;`Nd+V+X-3b>(}cU88toZbNSVX<2KHlyGJRWVIqNzuc*fgPS1xl zk!C%=O+I*5|ZHko-!<@2>S)I zeWMvO-+5zNVOHO2F7Vq2^JOw8t~bV|ZO;ICbA3u)L(T*>MKHm3Z5{CfXvC{aOUmDz zh9M2Nzi-7vO?I4Ej5{8~czp9=rT)rE%iM&3Q~M(?tu(84wLftf%jFhy0@&@~F~fkT z>t_1=|1SOewmB?%?Atr0Qs9yIS$xcIUc`e{CF`@1u4>Ru2H#et*Jje_LQw{+<;r`HcfAK>rP^h?1lM>bVmG{M-Iiu#Q~L9(`A}1t70O zJ}TmgGpyN2tK2KSf&Dcr3Uz_#L{+QIw{d9Wmfi6xL(Kvm>465-$h)j3WP*n&af!8BoG8bn^0rCD#7HEnM;Q%eheCV8@-VwP^-MT8xHM?&}U5awJT1d>ZB5qKYlx|4I#?RQc?po~z@_k3 z!LyC|nf>r_NWd5_Z6WeWSMMVd??hpxaQTQ5)OWyM_pudM1(`dff{Q#QK<0Jv_GU_S zQxXz$W2Z9n6GvdGt+<8d9Gy!=f}FNcz1nQBHQY(rskaot#wmH6S0_3Gk1}STbtR*Y zXdoURwOP^Md+h4r4^qIvOeKGGdIf5*5OSBWUKS`a%zMUmyIJCdOcx`_%(bs@I)oiG z6XbMIWSM znLO$5t^y5no5OFSpc9yr$cT-l()+m*x_;w%k1fJyE4@P-UY3i-X3MaRz7r$3 zb33_CXEZDF3Y=EPAtJEP2Pp5%`qV+u=GIfn?{2-iQ|>kSI#N~3Lu68QI{a?>N94Ke z@per&g(t5*&gn^Zc-d>BSanqHUyHX`byTmn?%^}kJ}t0L%RVgXBpd{J=P9phwyv{sWxw{E2CeCbp8W8OJ5AE?*R@yl9d#5=(C(bFZ8r=G zFB53_@#EUdLvKDX`+dd`LzHcexA0K(1$J+!tR?q{K$>eZkKBC;M2Z4 z${6txqetl2dDQDtIkLE&?*;XRN*?p`DF#VGM>yV}_1qAc9u)7Q zpZHhq34cpxW9kKp6RHYyn*Ggab4 z)IvaYM=tLmg%4bt;~$Zi+H6|PHeO^5 z=R=b=HwbD-((0~}blSiuDblpV$7Bd_2mlo$Nky{dI=z!bJ9d#RVDiG^k{fYr%B8MU z82}ZKwih&%#$>EXzK9BtJ5bA$Q9W1V^=^>m45HzhovPp@f?ai@P~00$6r1{U&%uq&VMsyM7jLL@XFwx1v1IKfe9qtQZYQk(~+Cb02bf6!=O z0&qy10&?+j)w@J?aR3ncaw57AL#hp|P9)EGG_?p@g`E}bAtJ;TUZJ(Mc+PA^HR|YE zVam*CChk@#bJ^oUx4S%3y?y~2_3hE%e9vLFtIl?Iw~lH6ndMIPx{K@i=5K-1q}}D0 zCnfTsczDYzf4Od5$2&f%^;}f=T|@Il4yROLy$Z2N9Su@PDC3rUI2;X9xznz;n!V@V zn^mD}XbQEG4H!%(k=Ybq()i^+gdKV2Dc}F8P*TUm7aSW%y_O zXTX{OK=ob*tt0>BQpVyZIFI;o4U8S4i^DW2&`4CMIZ4{MY=B#yFU6peHp`WMfu94i zK(^A1vZZPE0LAY$TN_HPQoe!D#6f2$h6MjS(}Yim0ESYy^9r{%R=AxL77b^@vM==b za&>E<1QJo0Yy;&zFciENB}bJ(*bFVA4vu2@IBMK7cCo~g?;jVFtQ@eSo1y1i$9 ziC*RJ^s>mEP=Jv2#vC&@1Mh#J&p@CvuxCDtUAvovY$v8&rr1vXV4lwd!$x~;!y~<( z;JI}9)D-N4!~5%tRUQ!-cz$5Q|J0Q(jlo@Ys?ox`ydPQEYw8Z`PO?1r&9j~&E?D4wPSi)ILUcuX ztrjD*jc}k@ zZenjGWQgO6%d*c+zUB>KhXo9Bi}v7soz6s{=cDW>qf|{V*1a)k=UF_(|CZe~ zHBpr>YJ-_qrLGS=di<1eos#n0M4PaGvPS^G-f%^^%0DD!?~bM7sitQ^ix(|U$1l2= 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 literal 0 HcmV?d00001 diff --git a/yarn.lock b/yarn.lock index 1101cf790..59003401c 100644 --- a/yarn.lock +++ b/yarn.lock @@ -8412,10 +8412,10 @@ nanomatch@^1.2.9: snapdragon "^0.8.1" to-regex "^3.0.1" -native-base@3.2.0: - version "3.2.0" - resolved "https://registry.yarnpkg.com/native-base/-/native-base-3.2.0.tgz#03cc51bf3624141833103330eae8f9b9fd7bbf35" - integrity sha512-s7lM0/xupz3AMVMMl59z8yl15T2cbnR662gwgXXGOpiFk10dR61jP3q8kGap+GRF8lRssKAZkN/a0OqV/JFAHA== +native-base@3.2.1: + version "3.2.1" + resolved "https://registry.yarnpkg.com/native-base/-/native-base-3.2.1.tgz#315a1620d5ce5d31f6ae10f7ffa3e0ca28404a0c" + integrity sha512-u39DLFOEh9akDEpCrNZ/uPDZWROffXXxmw6eaqGJ/VmjVv3wjbK6OYf7+4yXWYEU8u1KJ/edZ2iRHQL0KuL8Fg== dependencies: "@react-aria/focus" "^3.2.3" "@react-aria/utils" "^3.6.0" From a539ac668ada228782ae92177493532f579fb5e7 Mon Sep 17 00:00:00 2001 From: Nishan Bende Date: Tue, 12 Oct 2021 19:14:17 +0530 Subject: [PATCH 2/7] chore: release 3.2.1 --- versioned_docs/version-3.2.1/FAB.md | 44 ++ versioned_docs/version-3.2.1/VStack.md | 24 + versioned_docs/version-3.2.1/ZStack.md | 28 + versioned_docs/version-3.2.1/accessibility.md | 24 + versioned_docs/version-3.2.1/actionSheet.md | 78 ++ versioned_docs/version-3.2.1/alert.md | 87 +++ versioned_docs/version-3.2.1/alertDialog.md | 58 ++ versioned_docs/version-3.2.1/appDrawer.md | 70 ++ versioned_docs/version-3.2.1/avatar.md | 76 ++ versioned_docs/version-3.2.1/badge.md | 50 ++ versioned_docs/version-3.2.1/box.md | 139 ++++ versioned_docs/version-3.2.1/breakpoints.md | 131 ++++ .../version-3.2.1/buildingAppBar.md | 48 ++ .../version-3.2.1/buildingDrawerNavigation.md | 174 +++++ .../version-3.2.1/buildingFooterTabs.md | 131 ++++ .../version-3.2.1/buildingSearchBar.md | 117 +++ .../version-3.2.1/buildingSwipeList.md | 195 +++++ .../version-3.2.1/buildingTabView.md | 106 +++ versioned_docs/version-3.2.1/builldingCard.md | 104 +++ versioned_docs/version-3.2.1/button.mdx | 84 +++ versioned_docs/version-3.2.1/center.md | 48 ++ versioned_docs/version-3.2.1/changelog.md | 32 + versioned_docs/version-3.2.1/checkBox.md | 104 +++ versioned_docs/version-3.2.1/colorMode.md | 163 +++++ versioned_docs/version-3.2.1/container.md | 56 ++ .../version-3.2.1/customizingComponents.md | 160 +++++ .../version-3.2.1/customizingFonts.md | 87 +++ .../version-3.2.1/customizingTheme.md | 108 +++ versioned_docs/version-3.2.1/darkMode.md | 89 +++ versioned_docs/version-3.2.1/default-theme.md | 229 ++++++ versioned_docs/version-3.2.1/design-tokens.md | 69 ++ versioned_docs/version-3.2.1/divider.md | 56 ++ versioned_docs/version-3.2.1/faq.md | 6 + versioned_docs/version-3.2.1/flatList.md | 152 ++++ versioned_docs/version-3.2.1/flex.md | 44 ++ versioned_docs/version-3.2.1/form.md | 199 +++++ versioned_docs/version-3.2.1/formControl.md | 52 ++ .../version-3.2.1/getting-started.mdx | 93 +++ versioned_docs/version-3.2.1/hStack.md | 24 + versioned_docs/version-3.2.1/heading.md | 56 ++ versioned_docs/version-3.2.1/hidden.md | 125 ++++ versioned_docs/version-3.2.1/icon.md | 54 ++ versioned_docs/version-3.2.1/iconButton.md | 43 ++ versioned_docs/version-3.2.1/image.md | 49 ++ versioned_docs/version-3.2.1/input.md | 76 ++ versioned_docs/version-3.2.1/install-cra.mdx | 131 ++++ versioned_docs/version-3.2.1/install-expo.mdx | 147 ++++ versioned_docs/version-3.2.1/install-next.mdx | 264 +++++++ versioned_docs/version-3.2.1/install-rn.mdx | 145 ++++ versioned_docs/version-3.2.1/installation.mdx | 30 + .../version-3.2.1/interaction-styles.mdx | 229 ++++++ .../version-3.2.1/keyboardAvoidingView.md | 18 + versioned_docs/version-3.2.1/kitchen-sink.mdx | 66 ++ versioned_docs/version-3.2.1/link.md | 60 ++ .../version-3.2.1/loginsignupforms.md | 157 ++++ versioned_docs/version-3.2.1/menu.md | 95 +++ .../version-3.2.1/migration/Accordion.md | 89 +++ .../version-3.2.1/migration/Actionsheet.md | 107 +++ .../version-3.2.1/migration/Badge.md | 44 ++ .../version-3.2.1/migration/Button.md | 196 +++++ .../Screenshot_2021-01-22_at_1.15.34_PM.png | Bin 0 -> 9022 bytes .../Screenshot_2021-01-22_at_1.16.25_PM.png | Bin 0 -> 8669 bytes .../Screenshot_2021-01-22_at_1.17.11_PM.png | Bin 0 -> 10048 bytes .../Screenshot_2021-01-22_at_1.20.36_PM.png | Bin 0 -> 9795 bytes .../Screenshot_2021-01-22_at_1.22.36_PM.png | Bin 0 -> 8306 bytes .../Screenshot_2021-01-22_at_1.23.42_PM.png | Bin 0 -> 7841 bytes .../Screenshot_2021-01-22_at_1.32.47_PM.png | Bin 0 -> 9384 bytes .../Screenshot_2021-01-22_at_1.38.15_PM.png | Bin 0 -> 10101 bytes .../Screenshot_2021-01-22_at_12.29.32_PM.png | Bin 0 -> 8297 bytes .../Screenshot_2021-01-22_at_12.53.09_PM.png | Bin 0 -> 8494 bytes .../Screenshot_2021-01-22_at_2.37.09_PM.png | Bin 0 -> 8816 bytes .../Screenshot_2021-01-22_at_2.38.52_PM.png | Bin 0 -> 8409 bytes .../version-3.2.1/migration/Card.md | 91 +++ .../version-3.2.1/migration/Checkbox.md | 54 ++ .../Screenshot_2021-01-22_at_3.09.29_PM.png | Bin 0 -> 10808 bytes .../Screenshot_2021-01-22_at_4.34.08_PM.png | Bin 0 -> 9954 bytes .../version-3.2.1/migration/DatePicker.md | 6 + .../version-3.2.1/migration/DeckSwiper.md | 8 + .../version-3.2.1/migration/Drawer.md | 6 + .../version-3.2.1/migration/FABs.md | 63 ++ .../version-3.2.1/migration/FooterTab.md | 6 + .../version-3.2.1/migration/Form.md | 72 ++ .../version-3.2.1/migration/Header.md | 6 + .../version-3.2.1/migration/Icon.md | 80 +++ .../version-3.2.1/migration/Layout.md | 77 ++ .../version-3.2.1/migration/List.md | 0 .../version-3.2.1/migration/Picker.md | 91 +++ .../version-3.2.1/migration/Radio Button.md | 95 +++ .../version-3.2.1/migration/Searchbar.md | 6 + .../version-3.2.1/migration/Segment.md | 7 + .../version-3.2.1/migration/Spinner.md | 47 ++ .../version-3.2.1/migration/SwipeList.md | 6 + .../version-3.2.1/migration/Tabs.md | 67 ++ .../version-3.2.1/migration/Thumbnail.md | 73 ++ .../version-3.2.1/migration/Toast.md | 84 +++ .../version-3.2.1/migration/Typography.md | 39 + versioned_docs/version-3.2.1/migration/v3.md | 19 + .../version-3.2.1/migration/v3xtov32.md | 71 ++ versioned_docs/version-3.2.1/modal.md | 104 +++ versioned_docs/version-3.2.1/more-props.md | 13 + .../version-3.2.1/nativebase-factory.md | 155 ++++ versioned_docs/version-3.2.1/popOver.md | 94 +++ .../version-3.2.1/presence-transition.md | 63 ++ versioned_docs/version-3.2.1/pressable.md | 32 + versioned_docs/version-3.2.1/progress.md | 62 ++ versioned_docs/version-3.2.1/pseudoProps.md | 86 +++ versioned_docs/version-3.2.1/radio.md | 97 +++ versioned_docs/version-3.2.1/responsive.md | 173 +++++ .../version-3.2.1/safe-area-view-props.md | 99 +++ versioned_docs/version-3.2.1/scrollview.md | 18 + versioned_docs/version-3.2.1/sectionList.md | 18 + versioned_docs/version-3.2.1/select.md | 87 +++ .../version-3.2.1/setup-provider.md | 129 ++++ versioned_docs/version-3.2.1/slide.md | 38 + versioned_docs/version-3.2.1/slider.md | 91 +++ versioned_docs/version-3.2.1/spinner.md | 32 + versioned_docs/version-3.2.1/stack.md | 18 + versioned_docs/version-3.2.1/stagger.md | 54 ++ versioned_docs/version-3.2.1/statusBar.md | 18 + versioned_docs/version-3.2.1/strict-mode.md | 39 + versioned_docs/version-3.2.1/switch.md | 50 ++ versioned_docs/version-3.2.1/testing.md | 25 + versioned_docs/version-3.2.1/text.md | 44 ++ versioned_docs/version-3.2.1/textArea.md | 38 + versioned_docs/version-3.2.1/theme.md | 205 ++++++ versioned_docs/version-3.2.1/toast.md | 88 +++ versioned_docs/version-3.2.1/todo-list.md | 135 ++++ versioned_docs/version-3.2.1/tooltip.md | 65 ++ versioned_docs/version-3.2.1/typescript.md | 40 ++ .../version-3.2.1/useAccessibleColors.md | 64 ++ .../version-3.2.1/useBreakPointValue.md | 133 ++++ versioned_docs/version-3.2.1/useClipboard.md | 73 ++ versioned_docs/version-3.2.1/useColorMode.md | 56 ++ .../version-3.2.1/useColorModeValue.md | 52 ++ .../version-3.2.1/useContrastText.md | 103 +++ versioned_docs/version-3.2.1/useDisclosure.md | 74 ++ versioned_docs/version-3.2.1/useMediaQuery.md | 440 ++++++++++++ versioned_docs/version-3.2.1/useTheme.md | 22 + versioned_docs/version-3.2.1/useToken.md | 51 ++ .../version-3.2.1/utility-first.mdx | 218 ++++++ versioned_docs/version-3.2.1/utilityProps.md | 679 +++++++++++++++++ .../version-3.2.1/utilityPropsSpecificity.md | 55 ++ versioned_docs/version-3.2.1/view.md | 18 + .../version-3.2.1-sidebars.json | 680 ++++++++++++++++++ versions.json | 2 +- 145 files changed, 11723 insertions(+), 1 deletion(-) create mode 100644 versioned_docs/version-3.2.1/FAB.md create mode 100644 versioned_docs/version-3.2.1/VStack.md create mode 100644 versioned_docs/version-3.2.1/ZStack.md create mode 100644 versioned_docs/version-3.2.1/accessibility.md create mode 100644 versioned_docs/version-3.2.1/actionSheet.md create mode 100644 versioned_docs/version-3.2.1/alert.md create mode 100644 versioned_docs/version-3.2.1/alertDialog.md create mode 100644 versioned_docs/version-3.2.1/appDrawer.md create mode 100644 versioned_docs/version-3.2.1/avatar.md create mode 100644 versioned_docs/version-3.2.1/badge.md create mode 100644 versioned_docs/version-3.2.1/box.md create mode 100644 versioned_docs/version-3.2.1/breakpoints.md create mode 100644 versioned_docs/version-3.2.1/buildingAppBar.md create mode 100644 versioned_docs/version-3.2.1/buildingDrawerNavigation.md create mode 100644 versioned_docs/version-3.2.1/buildingFooterTabs.md create mode 100644 versioned_docs/version-3.2.1/buildingSearchBar.md create mode 100644 versioned_docs/version-3.2.1/buildingSwipeList.md create mode 100644 versioned_docs/version-3.2.1/buildingTabView.md create mode 100644 versioned_docs/version-3.2.1/builldingCard.md create mode 100644 versioned_docs/version-3.2.1/button.mdx create mode 100644 versioned_docs/version-3.2.1/center.md create mode 100644 versioned_docs/version-3.2.1/changelog.md create mode 100644 versioned_docs/version-3.2.1/checkBox.md create mode 100644 versioned_docs/version-3.2.1/colorMode.md create mode 100644 versioned_docs/version-3.2.1/container.md create mode 100644 versioned_docs/version-3.2.1/customizingComponents.md create mode 100644 versioned_docs/version-3.2.1/customizingFonts.md create mode 100644 versioned_docs/version-3.2.1/customizingTheme.md create mode 100644 versioned_docs/version-3.2.1/darkMode.md create mode 100644 versioned_docs/version-3.2.1/default-theme.md create mode 100644 versioned_docs/version-3.2.1/design-tokens.md create mode 100644 versioned_docs/version-3.2.1/divider.md create mode 100644 versioned_docs/version-3.2.1/faq.md create mode 100644 versioned_docs/version-3.2.1/flatList.md create mode 100644 versioned_docs/version-3.2.1/flex.md create mode 100644 versioned_docs/version-3.2.1/form.md create mode 100644 versioned_docs/version-3.2.1/formControl.md create mode 100644 versioned_docs/version-3.2.1/getting-started.mdx create mode 100644 versioned_docs/version-3.2.1/hStack.md create mode 100644 versioned_docs/version-3.2.1/heading.md create mode 100644 versioned_docs/version-3.2.1/hidden.md create mode 100644 versioned_docs/version-3.2.1/icon.md create mode 100644 versioned_docs/version-3.2.1/iconButton.md create mode 100644 versioned_docs/version-3.2.1/image.md create mode 100644 versioned_docs/version-3.2.1/input.md create mode 100644 versioned_docs/version-3.2.1/install-cra.mdx create mode 100644 versioned_docs/version-3.2.1/install-expo.mdx create mode 100644 versioned_docs/version-3.2.1/install-next.mdx create mode 100644 versioned_docs/version-3.2.1/install-rn.mdx create mode 100644 versioned_docs/version-3.2.1/installation.mdx create mode 100644 versioned_docs/version-3.2.1/interaction-styles.mdx create mode 100644 versioned_docs/version-3.2.1/keyboardAvoidingView.md create mode 100644 versioned_docs/version-3.2.1/kitchen-sink.mdx create mode 100644 versioned_docs/version-3.2.1/link.md create mode 100644 versioned_docs/version-3.2.1/loginsignupforms.md create mode 100644 versioned_docs/version-3.2.1/menu.md create mode 100644 versioned_docs/version-3.2.1/migration/Accordion.md create mode 100644 versioned_docs/version-3.2.1/migration/Actionsheet.md create mode 100644 versioned_docs/version-3.2.1/migration/Badge.md create mode 100644 versioned_docs/version-3.2.1/migration/Button.md create mode 100644 versioned_docs/version-3.2.1/migration/Button/Screenshot_2021-01-22_at_1.15.34_PM.png create mode 100644 versioned_docs/version-3.2.1/migration/Button/Screenshot_2021-01-22_at_1.16.25_PM.png create mode 100644 versioned_docs/version-3.2.1/migration/Button/Screenshot_2021-01-22_at_1.17.11_PM.png create mode 100644 versioned_docs/version-3.2.1/migration/Button/Screenshot_2021-01-22_at_1.20.36_PM.png create mode 100644 versioned_docs/version-3.2.1/migration/Button/Screenshot_2021-01-22_at_1.22.36_PM.png create mode 100644 versioned_docs/version-3.2.1/migration/Button/Screenshot_2021-01-22_at_1.23.42_PM.png create mode 100644 versioned_docs/version-3.2.1/migration/Button/Screenshot_2021-01-22_at_1.32.47_PM.png create mode 100644 versioned_docs/version-3.2.1/migration/Button/Screenshot_2021-01-22_at_1.38.15_PM.png create mode 100644 versioned_docs/version-3.2.1/migration/Button/Screenshot_2021-01-22_at_12.29.32_PM.png create mode 100644 versioned_docs/version-3.2.1/migration/Button/Screenshot_2021-01-22_at_12.53.09_PM.png create mode 100644 versioned_docs/version-3.2.1/migration/Button/Screenshot_2021-01-22_at_2.37.09_PM.png create mode 100644 versioned_docs/version-3.2.1/migration/Button/Screenshot_2021-01-22_at_2.38.52_PM.png create mode 100644 versioned_docs/version-3.2.1/migration/Card.md create mode 100644 versioned_docs/version-3.2.1/migration/Checkbox.md create mode 100644 versioned_docs/version-3.2.1/migration/Checkbox/Screenshot_2021-01-22_at_3.09.29_PM.png create mode 100644 versioned_docs/version-3.2.1/migration/Checkbox/Screenshot_2021-01-22_at_4.34.08_PM.png create mode 100644 versioned_docs/version-3.2.1/migration/DatePicker.md create mode 100644 versioned_docs/version-3.2.1/migration/DeckSwiper.md create mode 100644 versioned_docs/version-3.2.1/migration/Drawer.md create mode 100644 versioned_docs/version-3.2.1/migration/FABs.md create mode 100644 versioned_docs/version-3.2.1/migration/FooterTab.md create mode 100644 versioned_docs/version-3.2.1/migration/Form.md create mode 100644 versioned_docs/version-3.2.1/migration/Header.md create mode 100644 versioned_docs/version-3.2.1/migration/Icon.md create mode 100644 versioned_docs/version-3.2.1/migration/Layout.md create mode 100644 versioned_docs/version-3.2.1/migration/List.md create mode 100644 versioned_docs/version-3.2.1/migration/Picker.md create mode 100644 versioned_docs/version-3.2.1/migration/Radio Button.md create mode 100644 versioned_docs/version-3.2.1/migration/Searchbar.md create mode 100644 versioned_docs/version-3.2.1/migration/Segment.md create mode 100644 versioned_docs/version-3.2.1/migration/Spinner.md create mode 100644 versioned_docs/version-3.2.1/migration/SwipeList.md create mode 100644 versioned_docs/version-3.2.1/migration/Tabs.md create mode 100644 versioned_docs/version-3.2.1/migration/Thumbnail.md create mode 100644 versioned_docs/version-3.2.1/migration/Toast.md create mode 100644 versioned_docs/version-3.2.1/migration/Typography.md create mode 100644 versioned_docs/version-3.2.1/migration/v3.md create mode 100644 versioned_docs/version-3.2.1/migration/v3xtov32.md create mode 100644 versioned_docs/version-3.2.1/modal.md create mode 100644 versioned_docs/version-3.2.1/more-props.md create mode 100644 versioned_docs/version-3.2.1/nativebase-factory.md create mode 100644 versioned_docs/version-3.2.1/popOver.md create mode 100644 versioned_docs/version-3.2.1/presence-transition.md create mode 100644 versioned_docs/version-3.2.1/pressable.md create mode 100644 versioned_docs/version-3.2.1/progress.md create mode 100644 versioned_docs/version-3.2.1/pseudoProps.md create mode 100644 versioned_docs/version-3.2.1/radio.md create mode 100644 versioned_docs/version-3.2.1/responsive.md create mode 100644 versioned_docs/version-3.2.1/safe-area-view-props.md create mode 100644 versioned_docs/version-3.2.1/scrollview.md create mode 100644 versioned_docs/version-3.2.1/sectionList.md create mode 100644 versioned_docs/version-3.2.1/select.md create mode 100644 versioned_docs/version-3.2.1/setup-provider.md create mode 100644 versioned_docs/version-3.2.1/slide.md create mode 100644 versioned_docs/version-3.2.1/slider.md create mode 100644 versioned_docs/version-3.2.1/spinner.md create mode 100644 versioned_docs/version-3.2.1/stack.md create mode 100644 versioned_docs/version-3.2.1/stagger.md create mode 100644 versioned_docs/version-3.2.1/statusBar.md create mode 100644 versioned_docs/version-3.2.1/strict-mode.md create mode 100644 versioned_docs/version-3.2.1/switch.md create mode 100644 versioned_docs/version-3.2.1/testing.md create mode 100644 versioned_docs/version-3.2.1/text.md create mode 100644 versioned_docs/version-3.2.1/textArea.md create mode 100644 versioned_docs/version-3.2.1/theme.md create mode 100644 versioned_docs/version-3.2.1/toast.md create mode 100644 versioned_docs/version-3.2.1/todo-list.md create mode 100644 versioned_docs/version-3.2.1/tooltip.md create mode 100644 versioned_docs/version-3.2.1/typescript.md create mode 100644 versioned_docs/version-3.2.1/useAccessibleColors.md create mode 100644 versioned_docs/version-3.2.1/useBreakPointValue.md create mode 100644 versioned_docs/version-3.2.1/useClipboard.md create mode 100644 versioned_docs/version-3.2.1/useColorMode.md create mode 100644 versioned_docs/version-3.2.1/useColorModeValue.md create mode 100644 versioned_docs/version-3.2.1/useContrastText.md create mode 100644 versioned_docs/version-3.2.1/useDisclosure.md create mode 100644 versioned_docs/version-3.2.1/useMediaQuery.md create mode 100644 versioned_docs/version-3.2.1/useTheme.md create mode 100644 versioned_docs/version-3.2.1/useToken.md create mode 100644 versioned_docs/version-3.2.1/utility-first.mdx create mode 100644 versioned_docs/version-3.2.1/utilityProps.md create mode 100644 versioned_docs/version-3.2.1/utilityPropsSpecificity.md create mode 100644 versioned_docs/version-3.2.1/view.md create mode 100644 versioned_sidebars/version-3.2.1-sidebars.json diff --git a/versioned_docs/version-3.2.1/FAB.md b/versioned_docs/version-3.2.1/FAB.md new file mode 100644 index 000000000..1dddda32b --- /dev/null +++ b/versioned_docs/version-3.2.1/FAB.md @@ -0,0 +1,44 @@ +--- +id: FAB +title: FAB +--- + +import { ComponentTheme } from '../src/components'; + +A floating action button is a circular icon button that hovers over content to promote a primary action in the application. + +## Import + +```jsx +import { Fab } from 'native-base'; +``` + +## Example + +### Basic + +```ComponentSnackPlayer path=composites,Fab,Basic.tsx + +``` + +### Placement + +```ComponentSnackPlayer path=composites,Fab,Placement.tsx + +``` + +### Custom Position + +```ComponentSnackPlayer path=composites,Fab,CustomPosition.tsx + +``` + +## Styling + + + +## Props + +```ComponentPropTable path=composites,Fab,Fab.tsx + +``` diff --git a/versioned_docs/version-3.2.1/VStack.md b/versioned_docs/version-3.2.1/VStack.md new file mode 100644 index 000000000..94bc25cf0 --- /dev/null +++ b/versioned_docs/version-3.2.1/VStack.md @@ -0,0 +1,24 @@ +--- +id: v-stack +title: VStack / Column +--- + +`VStack` aligns items vertically.`Column` is also an alias for `VStack`. + +## Import + +```jsx +import { VStack } from 'native-base'; +``` + +## Usage + +```ComponentSnackPlayer path=primitives,VStack,basic.tsx + +``` + +## Props + +```ComponentPropTable path=primitives,Stack,VStack.tsx + +``` diff --git a/versioned_docs/version-3.2.1/ZStack.md b/versioned_docs/version-3.2.1/ZStack.md new file mode 100644 index 000000000..1daab38f9 --- /dev/null +++ b/versioned_docs/version-3.2.1/ZStack.md @@ -0,0 +1,28 @@ +--- +id: z-stack +title: ZStack +--- + +`ZStack` aligns items absolutely in the z-axis. + +## Examples + +### Basic + +```ComponentSnackPlayer path=primitives,ZStack,example.tsx + +``` + +### Items Centered + +You can pass `alignItems="center"` `justifyContent="center"` to vertically and horizontally center the children. + +```ComponentSnackPlayer path=primitives,ZStack,CenterStack.tsx + +``` + +## Props + +```ComponentPropTable path=primitives,ZStack,index.tsx + +``` diff --git a/versioned_docs/version-3.2.1/accessibility.md b/versioned_docs/version-3.2.1/accessibility.md new file mode 100644 index 000000000..3ccb492bb --- /dev/null +++ b/versioned_docs/version-3.2.1/accessibility.md @@ -0,0 +1,24 @@ +--- +id: accessibility +title: Accessibility +--- + +NativeBase comes with the latest accessibility standards out of the box including aria and role attributes, focus management, and keyboard navigation. + +## Accessible Roles + +NativeBase uses [React Native ARIA](https://react-native-aria.geekyants.com/) to implements [WAI-ARIA](https://www.w3.org/TR/wai-aria-1.2/) standards to its components. This is designed to provide meaning for controls that aren't built using components provided by the platform. + +## Accessible Labels + +When a view is marked as accessible, it is a good practice to set an `accessibilityLabel` on the view, so that people who use voice-over know what element they have selected. Voice-over will read this string when a user selects the associated element. NativeBase with the use of [React Native ARIA](https://react-native-aria.geekyants.com/) does this for you out of the box. + +## Keyboard Navigation + +Many complex components, like Tabs and Dialog, come with expectations from users on how to interact with their content using a keyboard or other non-mouse input modalities. NativeBase Primitives provide basic keyboard support in accordance with the [WAI-ARIA authoring practices](https://www.w3.org/TR/wai-aria-practices-1.2/). + +## Focus Management + +Proper keyboard navigation and good labelling often go hand-in-hand with managing focus. When a user interacts with a component and something changes as a result, it's often helpful to move focus with the interaction. And for screen reader users, moving focus often results in an announcement to convey the new context, which relies on proper labelling. + +In many NativeBase Components, we move focus based on the interactions a user normally takes in a given component. For example, in `Modal`, when the modal is opened, the focus is programmatically moved to the `first focusable element` and trapped inside the modal to anticipate a response to the prompt. diff --git a/versioned_docs/version-3.2.1/actionSheet.md b/versioned_docs/version-3.2.1/actionSheet.md new file mode 100644 index 000000000..940d5c246 --- /dev/null +++ b/versioned_docs/version-3.2.1/actionSheet.md @@ -0,0 +1,78 @@ +--- +id: action-sheet +title: ActionSheet +--- + +import { ComponentTheme } from '../src/components'; + +An Action Sheet is a dialog that displays a set of options. It appears on top of the app's content. + +## Import + +NativeBase exports 3 modal-related components: + +- **Actionsheet**: Provides the context and state for all components. +- **Actionsheet.Content**: Component to wrap the list of **Actionsheet.Item** components. +- **Actionsheet.Item**: A button to wrap the options of the Actionsheet. + +```jsx +import { Actionsheet } from 'native-base'; +``` + +## Examples + +### Usage + +```ComponentSnackPlayer path=composites,Actionsheet,Usage.tsx + +``` + +### Composition + +```ComponentSnackPlayer path=composites,Actionsheet,Composition.tsx + +``` + +### DisableOverlay + +```ComponentSnackPlayer path=composites,Actionsheet,DisableOverlay.tsx + +``` + +### Icons + +```ComponentSnackPlayer path=composites,Actionsheet,Icon.tsx + +``` + +## Props + +### Actionsheet + +```ComponentPropTable path=composites,Actionsheet,Actionsheet.tsx + +``` + +### Actionsheet.Content + +```ComponentPropTable path=composites,Actionsheet,ActionsheetContent.tsx + +``` + +### Actionsheet.Item + +ActionsheetItem implements [Button](button.md#props) + +## Styling + + + +## Accessibility + +- ActionSheet has `aria-modal` set to true. +- ActionSheet has `role` set to `dialog`. +- When the ActionSheet opens, focus is trapped within it. +- Pressing Esc closes the ActionSheet. +- When the ActionSheet opens, focus is automatically set to the first enabled element. +- Clicking on the overlay closes the ActionSheet. +- Scrolling is blocked on the elements behind the ActionSheet. diff --git a/versioned_docs/version-3.2.1/alert.md b/versioned_docs/version-3.2.1/alert.md new file mode 100644 index 000000000..8c3d0b47a --- /dev/null +++ b/versioned_docs/version-3.2.1/alert.md @@ -0,0 +1,87 @@ +--- +id: alert +title: Alert +--- + +import { ComponentTheme } from '../src/components'; + +`Alerts` are used to communicate a state that affects a system, feature or page. + +## Import + +NativeBase exports 5 Alert related components: + +- `Alert`: The wrapper for alert components. +- `Alert.Icon`: The visual icon for the alert that changes based on the `status` prop. + + + +```jsx +import { Alert } from 'native-base'; +``` + +## Examples + +### Basic + +```ComponentSnackPlayer path=composites,Alert,usage.tsx + +``` + +### Status + +```ComponentSnackPlayer path=composites,Alert,status.tsx + +``` + +### Variant + +```ComponentSnackPlayer path=composites,Alert,variant.tsx + +``` + +### Composition + +```ComponentSnackPlayer path=composites,Alert,composition.tsx + +``` + +### Action + +```ComponentSnackPlayer path=composites,Alert,action.tsx + +``` + +## Props + +### Alert + +```ComponentPropTable path=composites,Alert,Alert.tsx + +``` + +### Alert.Icon + +```ComponentPropTable path=composites,Alert,AlertIcon.tsx + +``` + +### Alert.Title + +```ComponentPropTable path=composites,Alert,AlertTitle.tsx + +``` + +### Alert.Description + +```ComponentPropTable path=composites,Alert,AlertDescription.tsx + +``` + +## Styling + + + +## Accessibility + +Alert has `role` set to `alert`. diff --git a/versioned_docs/version-3.2.1/alertDialog.md b/versioned_docs/version-3.2.1/alertDialog.md new file mode 100644 index 000000000..138554305 --- /dev/null +++ b/versioned_docs/version-3.2.1/alertDialog.md @@ -0,0 +1,58 @@ +--- +id: alert-dialog +title: AlertDialog +--- + +import { ComponentTheme } from '../src/components'; + +`AlertDialog` component is used to interrupt the user with a mandatory confirmation or action. AlertDialog composes [`Modal`](modal.md) so you can use all its props. + +## Import + +- `AlertDialog`: provides context and state for the dialog. +- `AlertDialog.Header`: contains the title announced by screen readers. +- `AlertDialog.Body`: contains the description announced by screen readers. +- `AlertDialog.Footer`: contains the actions of the dialog. +- `AlertDialog.Content`: The wrapper for the alert dialog's content. +- `AlertDialog.CloseButton`: The button that closes the dialog. + +```jsx +import { AlertDialog } from 'native-base'; +``` + +## Examples + +### Basic + +```ComponentSnackPlayer path=composites,AlertDialog,Basic.tsx + +``` + +## Styling + + + +## Props + +AlertDialog and its components compose the **[Modal](modal.md)** component, so all the [`Modal props`](modal.md#props) can be passed to it. The only exception is that it requires `leastDestructiveRef` which is similar to `initialFocusRef` of `Modal`. + +| Name | Type | Description | Default | +| ------------------- | --------- | -------------------------------------------------------------- | ------- | +| leastDestructiveRef | React.Ref | The least destructive action to get focus when dialog is open. | - | + + +## Accessibility + +Adheres to the [Alert and Message Dialogs WAI-ARIA design pattern.](https://www.w3.org/TR/wai-aria-practices-1.2/#alertdialog) + +### Keyboard Interactions + +| Name | Description | +| ----------- | --------------------------------------------------------- | +| Space | Opens/closes the dialog. | +| Enter | Opens/closes the dialog. | +| Tab | Moves focus to the next focusable element. | +| Shift + Tab | Moves focus to the previous focusable element. | +| Esc | Closes the dialog and moves focus to AlertDialog.Trigger. | + + diff --git a/versioned_docs/version-3.2.1/appDrawer.md b/versioned_docs/version-3.2.1/appDrawer.md new file mode 100644 index 000000000..3fa173b72 --- /dev/null +++ b/versioned_docs/version-3.2.1/appDrawer.md @@ -0,0 +1,70 @@ +--- +id: app-drawer +title: App drawer +--- + +Creating an app drawer like layout is very common and with NativeBase's SimpleGrid make this extremely simple while still keeping it extremely customisable. Here is an example to illustrate it. + +```SnackPlayer name=AppDrawer +import React from 'react'; +import { + IconButton, + SimpleGrid, + Icon, + NativeBaseProvider, + Box, +} from 'native-base'; +import { MaterialIcons } from '@expo/vector-icons'; + +function AppDrawer() { + const icons = [ + { name: 'bolt', bg: 'amber.600' }, + { name: 'build', bg: 'emerald.600' }, + { name: 'cloud', bg: 'blue.600' }, + { name: 'delivery-dining', bg: 'orange.600' }, + { name: 'favorite', bg: 'rose.600' }, + { name: 'music-note', bg: 'violet.600' }, + { name: 'invert-colors-on', bg: 'lime.600' }, + { name: 'navigation', bg: 'indigo.600' }, + { name: 'settings', bg: 'pink.600' }, + { name: 'sports-esports', bg: 'coolGray.600' }, + { name: 'shield', bg: 'darkBlue.600' }, + { name: 'photo-camera', bg: 'fuchsia.600' }, + { name: 'network-wifi', bg: 'amber.500' }, + { name: 'nightlight-round', bg: 'violet.800' }, + { name: 'flight', bg: 'blue.800' }, + { name: 'extension', bg: 'indigo.600' }, + { name: 'duo', bg: 'orange.600' }, + { name: 'album', bg: 'rose.600' }, + { name: 'access-alarm', bg: 'emerald.600' }, + { name: 'forum', bg: 'indigo.600' }, + ]; + + return ( + + {icons.map((icon) => ( + + } + /> + ))} + + ); +} + +export default function () { + return ( + + + + + + ); +} + +``` diff --git a/versioned_docs/version-3.2.1/avatar.md b/versioned_docs/version-3.2.1/avatar.md new file mode 100644 index 000000000..a0b5f1913 --- /dev/null +++ b/versioned_docs/version-3.2.1/avatar.md @@ -0,0 +1,76 @@ +--- +id: avatar +title: Avatar +--- + +import { ComponentTheme } from '../src/components'; + +`Avatar` component is used to represent a user and it can display a profile picture, initials or a fallback icon. + +## Import + +NativeBase exports 3 avatar-related components: + +- `Avatar`: An image that represents the user. +- `Avatar.Badge`: A wrapper that displays its content on the bottom right corner of the avatar. +- `Avatar.Group`: A wrapper to stack multiple avatars together. + +```jsx +import { Avatar } from 'native-base'; +``` + +## Examples + +### Basic + +```ComponentSnackPlayer path=composites,Avatar,usage.tsx + +``` + +### Sizes + +```ComponentSnackPlayer path=composites,Avatar,size.tsx + +``` + +### Fallbacks + +```ComponentSnackPlayer path=composites,Avatar,Fallback.tsx + +``` + +### Avatar Badge + +```ComponentSnackPlayer path=composites,Avatar,AvatarBadge.tsx + +``` + +### Avatar Group + +```ComponentSnackPlayer path=composites,Avatar,AvatarGroup.tsx + +``` + +## Props + +### Avatar + +```ComponentPropTable path=composites,Avatar,Avatar.tsx + +``` + +### Avatar.Group + +```ComponentPropTable path=composites,Avatar,Group.tsx + +``` + +### Avatar.Badge + +```ComponentPropTable path=composites,Avatar,Badge.tsx + +``` + +## Styling + + diff --git a/versioned_docs/version-3.2.1/badge.md b/versioned_docs/version-3.2.1/badge.md new file mode 100644 index 000000000..23636b2ae --- /dev/null +++ b/versioned_docs/version-3.2.1/badge.md @@ -0,0 +1,50 @@ +--- +id: badge +title: Badge +--- + +import { ComponentTheme } from '../src/components'; + +`Badges` are used to highlight an item's status for quick recognition. + +## Import + +```jsx +import { Badge } from 'native-base'; +``` + +## Examples + +### Basic + +```ComponentSnackPlayer path=composites,Badge,usage.tsx + +``` + +### Color Scheme + +```ComponentSnackPlayer path=composites,Badge,color.tsx + +``` + +### Variants + +```ComponentSnackPlayer path=composites,Badge,variants.tsx + +``` + +### Composition + +```ComponentSnackPlayer path=composites,Badge,composition.tsx + +``` + +## Props + +```ComponentPropTable path=composites,Badge,index.tsx + +``` + +## Styling + + diff --git a/versioned_docs/version-3.2.1/box.md b/versioned_docs/version-3.2.1/box.md new file mode 100644 index 000000000..fd38a7ed2 --- /dev/null +++ b/versioned_docs/version-3.2.1/box.md @@ -0,0 +1,139 @@ +--- +id: box +title: Box +--- + +This is a generic component for low level layout needs. It is similar to a [`div`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/div) in HTML. + +## Example + +### Basic + +```ComponentSnackPlayer path=primitives,Box,basic.tsx + +``` + +
+ +### Composition + +```ComponentSnackPlayer path=primitives,Box,composition.tsx + +``` + +
+ +### With Linear gradient + +If you're using [Expo](https://docs.expo.io/) managed or bare workflow, you can install [expo-linear-gradient](https://docs.expo.io/versions/latest/sdk/linear-gradient/) and configure it in the [NativeBaseProvider](setup-provider#add-external-dependencies-optional) as shown below. + +```SnackPlayer name=LinearGradient +import React from "react" +import { Box, Center, NativeBaseProvider } from "native-base" + +export const Example = () => { + return ( + + This is a Box with Linear Gradient + + ) +} + +const config = { + dependencies: { + 'linear-gradient': require('expo-linear-gradient').LinearGradient + } +} + +export default () => { + return ( + +

+ +
+ + ) +} +``` + +
+ +If you're not using Expo, you can install [react-native-linear-gradient](https://www.npmjs.com/package/react-native-linear-gradient) and configure in the [NativeBaseProvider](setup-provider#add-external-dependencies-optional) as shown below. + +```jsx +import React from 'react'; +import { Box, NativeBaseProvider } from 'native-base'; + +const Example = () => { + return ( + + This is a Box with Linear Gradient + + ); +}; + +const config = { + dependencies: { + 'linear-gradient': require('react-native-linear-gradient').default, + }, +}; + +export default () => { + return ( + + + + ); +}; +``` + +
+ +### Basic (With Ref) + +```ComponentSnackPlayer path=primitives,Box,WithRef.tsx + +``` + +
+
+ +:::tip Common use cases for Box component are: + +- Create responsive layouts with ease. +- Provide a shorthand to pass styles via props (`bg` instead of `backgroundColor`). + +::: + +## Props + +```ComponentPropTable path=primitives,Box,index.tsx showStylingProps=true + +``` diff --git a/versioned_docs/version-3.2.1/breakpoints.md b/versioned_docs/version-3.2.1/breakpoints.md new file mode 100644 index 000000000..563075139 --- /dev/null +++ b/versioned_docs/version-3.2.1/breakpoints.md @@ -0,0 +1,131 @@ +--- +id: breakpoints +title: Breakpoints +--- + +Breakpoints are the building blocks of responsive design. Use them to control when your layout can be adapted at a particular viewport or device size. + +NativeBase provides these default breakpoints and you can update with using extendTheme. + +```tsx +breakpoints = { + base: 0, + sm: 480, + md: 768, + lg: 992, + xl: 1280, +}; +``` + +`useBreakpointValue` is a custom hook which returns the value for the current breakpoint from the provided responsive values object. This hook also responds to the window resizing and returning the appropriate value for the new window size. + +```SnackPlayer name=useBreakpointValue +import React from 'react'; +import { + Factory, + Button, + Stack, + NativeBaseProvider, + Center, +} from 'native-base'; +import { TextInput } from 'react-native'; + +import { Icon, useBreakpointValue, Text, VStack, Heading } from 'native-base'; +import { FontAwesome, Foundation, Feather } from '@expo/vector-icons'; +import { View } from 'react-native'; + +export const UseBreakpointValueExample = () => { + const flexDir = useBreakpointValue({ + base: 'column', + lg: 'row', + }); + return ( + + Why us? + + + + + Secure Checkout + + + + + + Secure Checkout + + + + + + Fast Turn Around + + + + + ); +}; + +// Example template which wraps component with NativeBaseProvider +export default function () { + return ( + +
+ +
+ + ); +} + +``` diff --git a/versioned_docs/version-3.2.1/buildingAppBar.md b/versioned_docs/version-3.2.1/buildingAppBar.md new file mode 100644 index 000000000..463c93df3 --- /dev/null +++ b/versioned_docs/version-3.2.1/buildingAppBar.md @@ -0,0 +1,48 @@ +--- +id: building-app-bar +title: AppBar +--- + +The top app bar provides content and actions related to the current screen. It’s used for branding, screen titles, navigation, and actions. + +## Example + +We can easily create it using basic layout components from NativeBase. + +```SnackPlayer name=App%20Bar +import React from "react"; +import { VStack, HStack, Button, IconButton, Icon, Text, NativeBaseProvider, Center, Box, StatusBar } from "native-base"; +import { MaterialIcons } from '@expo/vector-icons'; + +function AppBar(){ + return ( + <> + + + + + + + } color="white" />} /> + Home + + + } size='sm' color="white" />} /> + } + color="white" size='sm' />} /> + } size='sm' color="white" />} /> + + + + + ) +} + +export default function () { + return ( + + + + ); +} +``` diff --git a/versioned_docs/version-3.2.1/buildingDrawerNavigation.md b/versioned_docs/version-3.2.1/buildingDrawerNavigation.md new file mode 100644 index 000000000..aa78a13c7 --- /dev/null +++ b/versioned_docs/version-3.2.1/buildingDrawerNavigation.md @@ -0,0 +1,174 @@ +--- +id: building-drawer-navigation +title: Drawer Navigation +--- + +Common pattern in navigation is to use drawer from left (sometimes right) side for navigating between screens. + +## Example + +Here is an example to show how easily and quickly we can use React Native's [DrawerNavigation](https://reactnavigation.org/docs/drawer-based-navigation/) in NB. + +```SnackPlayer name=Drawer-Navigation dependencies=@react-navigation/stack@5.1.0,@react-navigation/drawer,@react-navigation/native@5.0.8,react-native-vector-icons,react-native-gesture-handler@1.10.2,react-native-linear-gradient,@react-native-community/masked-view@0.1.10,react-native-screens@3.0.0,react-native-reanimated@2.1.0 +import * as React from 'react'; +import { NavigationContainer } from '@react-navigation/native'; +import { + createDrawerNavigator, + DrawerContentScrollView, +} from '@react-navigation/drawer'; +import { + MaterialCommunityIcons +} from '@expo/vector-icons'; +import { + NativeBaseProvider, + Button, + Box, + HamburgerIcon, + Pressable, + Heading, + VStack, + Text, + Center, + HStack, + Divider, + Icon +} from 'native-base'; +const Drawer = createDrawerNavigator(); +function Component(props) { + return ( + + props.navigation.toggleDrawer()} position="absolute" ml="2" zIndex="1"> + + +
+ {props.route.name} +
+ + ); +} + +const getIcon = (screenName) => { + switch (screenName) { + case 'Inbox': + return "email" + case 'Outbox': + return 'send' + case 'Favorites': + return 'heart' + case 'Archive': + return 'archive' + case 'Trash': + return 'trash-can' + case 'Spam': + return 'alert-circle' + default: + return undefined + } +} + +function CustomDrawerContent(props) { + return ( + + + + Mail + john_doe@gmail.com + + } space="4"> + + {props.state.routeNames.map((name, index) => ( + { + props.navigation.navigate(name); + }} + > + + } /> + + {name} + + + + ))} + + + Labels + + + + } /> + + Family + + + + + + } /> + + Friends + + + + + + } /> + + Work + + + + + + + + + ); +} +function MyDrawer() { + return ( + + } + > + + + + + + + + + ); +} +export default function App() { + return ( + + + + + + ); +} +``` diff --git a/versioned_docs/version-3.2.1/buildingFooterTabs.md b/versioned_docs/version-3.2.1/buildingFooterTabs.md new file mode 100644 index 000000000..4a4e7f597 --- /dev/null +++ b/versioned_docs/version-3.2.1/buildingFooterTabs.md @@ -0,0 +1,131 @@ +--- +id: building-footer-tabs +title: Footer +--- + +With NativeBase v3 we have removed FooterTab components because as it's very simple to create it using HStack component. Here is an example of how we can make Footer in our Apps. + +## Example + +```SnackPlayer name=Footer dependencies=react-native-linear-gradient + +import React from 'react'; +import { + NativeBaseProvider, + Box, + Text, + Heading, + VStack, + FormControl, + Input, + Link, + Button, + Icon, + HStack, + Center, + Pressable, +} from 'native-base'; +import { MaterialCommunityIcons, MaterialIcons } from '@expo/vector-icons'; + +export default function App() { + const [selected, setSelected] = React.useState(1); + return ( + + +
+ + setSelected(0)}> +
+ + } + color="white" + size="sm" + /> + + Home + +
+ + setSelected(1)} + > +
+ } + color="white" + size="sm" + /> + + Search + +
+ + setSelected(2)} + > +
+ + } + color="white" + size="sm" + /> + + Cart + +
+ + setSelected(3)} + > +
+ + } + color="white" + size="sm" + /> + + Account + +
+ + + + + ); +} + + +``` diff --git a/versioned_docs/version-3.2.1/buildingSearchBar.md b/versioned_docs/version-3.2.1/buildingSearchBar.md new file mode 100644 index 000000000..ee8651d84 --- /dev/null +++ b/versioned_docs/version-3.2.1/buildingSearchBar.md @@ -0,0 +1,117 @@ +--- +id: building-search-bar +title: SearchBar +--- + +Search-bar are one of the most commonly seen variation of input. Here are design to make life easier. + +## Example + +Here are some examples to show how easily and quickly we can create so many types of search-bars. + + + +```SnackPlayer name=Search%20Bar +import React from 'react'; +import { + VStack, + Input, + Button, + IconButton, + Icon, + Text, + NativeBaseProvider, + Center, + Box, + Divider, + Heading, +} from 'native-base'; +import { Ionicons, MaterialIcons } from '@expo/vector-icons'; +import { FontAwesome5 } from '@expo/vector-icons'; + +function SearchBar() { + return ( + + + + }> + + Cupertino + } + /> + } + /> + + + + Material + } + /> + } + InputRightElement={ + } + /> + } + /> + + + ); +} + +export default function () { + return ( + +
+ +
+ + ); +} + +``` diff --git a/versioned_docs/version-3.2.1/buildingSwipeList.md b/versioned_docs/version-3.2.1/buildingSwipeList.md new file mode 100644 index 000000000..4e44901a3 --- /dev/null +++ b/versioned_docs/version-3.2.1/buildingSwipeList.md @@ -0,0 +1,195 @@ +--- +id: building-swipe-list +title: Swipe List +--- + +SwipeListView is a vertical ListView with rows that swipe open and closed. Handles default native behavior such as closing rows when ListView is scrolled or when other rows are opened. + +## Example + +Here is an example to show how easily and quickly we can use [react-native-swipe-list](https://www.npmjs.com/package/react-native-swipe-list-view) in NativeBase. + +```SnackPlayer name=SwipeList dependencies=react-native-swipe-list-view + +import React, { useState } from 'react'; +import { Dimensions, TouchableOpacity, View } from 'react-native'; + +import { + NativeBaseProvider, + Box, + Text, + Pressable, + Heading, + IconButton, + Icon, + HStack, + Avatar, + VStack, + Spacer, +} from 'native-base'; +import { SwipeListView } from 'react-native-swipe-list-view'; +import { MaterialIcons, Ionicons, Entypo } from '@expo/vector-icons'; + +export default function App() { + const [mode, setMode] = useState('Basic'); + + return ( + + + + Inbox + + + + + ); +} + +function Basic() { + const data = [ + { + id: 'bd7acbea-c1b1-46c2-aed5-3ad53abb28ba', + fullName: 'Afreen Khan', + timeStamp: '12:47 PM', + recentText: 'Good Day!', + avatarUrl: + 'https://images.pexels.com/photos/220453/pexels-photo-220453.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500', + }, + { + id: '3ac68afc-c605-48d3-a4f8-fbd91aa97f63', + fullName: 'Sujita Mathur', + timeStamp: '11:11 PM', + recentText: 'Cheer up, there!', + avatarUrl: + 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTyEaZqT3fHeNrPGcnjLLX1v_W4mvBlgpwxnA&usqp=CAU', + }, + { + id: '58694a0f-3da1-471f-bd96-145571e29d72', + fullName: 'Anci Barroco', + timeStamp: '6:22 PM', + recentText: 'Good Day!', + avatarUrl: 'https://miro.medium.com/max/1400/0*0fClPmIScV5pTLoE.jpg', + }, + { + id: '68694a0f-3da1-431f-bd56-142371e29d72', + fullName: 'Aniket Kumar', + timeStamp: '8:56 PM', + recentText: 'All the best', + avatarUrl: + 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSr01zI37DYuR8bMV5exWQBSw28C1v_71CAh8d7GP1mplcmTgQA6Q66Oo--QedAN1B4E1k&usqp=CAU', + }, + { + id: '28694a0f-3da1-471f-bd96-142456e29d72', + fullName: 'Kiara', + timeStamp: '12:47 PM', + recentText: 'I will call today.', + avatarUrl: + 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRBwgu1A5zgPSvfE83nurkuzNEoXs9DMNr8Ww&usqp=CAU', + }, + ]; + + const [listData, setListData] = useState(data); + + const closeRow = (rowMap, rowKey) => { + if (rowMap[rowKey]) { + rowMap[rowKey].closeRow(); + } + }; + + const deleteRow = (rowMap, rowKey) => { + closeRow(rowMap, rowKey); + const newData = [...listData]; + const prevIndex = listData.findIndex((item) => item.key === rowKey); + newData.splice(prevIndex, 1); + setListData(newData); + }; + + const onRowDidOpen = (rowKey) => { + console.log('This row opened', rowKey); + }; + + const renderItem = ({ item, index }) => ( + + console.log('You touched me')} bg="white"> + + + + + + {item.fullName} + + {item.recentText} + + + + {item.timeStamp} + + + + + + ); + + const renderHiddenItem = (data, rowMap) => ( + + closeRow(rowMap, data.item.key)} + _pressed={{ + opacity: 0.5, + }}> + + } + size="xs" + color="coolGray.800" + /> + + More + + + + deleteRow(rowMap, data.item.key)} + _pressed={{ + opacity: 0.5, + }}> + + } color="white" size="xs" /> + + Delete + + + + + ); + + return ( + + + + ); +} + +``` diff --git a/versioned_docs/version-3.2.1/buildingTabView.md b/versioned_docs/version-3.2.1/buildingTabView.md new file mode 100644 index 000000000..e6ce91847 --- /dev/null +++ b/versioned_docs/version-3.2.1/buildingTabView.md @@ -0,0 +1,106 @@ +--- +id: building-tab-view +title: Tab View +--- + +A cross-platform Tab View component for React Native + +## Example + +Here is an example to show how easily and quickly we can use [react-native-tab-view](https://www.npmjs.com/package/react-native-tab-view) in NB. + +```SnackPlayer name=TabView dependencies=react-native-linear-gradient,react-native-tab-view,react-native-pager-view@5.0.12 + +import * as React from 'react'; +import { + View, + StyleSheet, + Dimensions, + StatusBar, + TouchableOpacity, + Animated, + Pressable, +} from 'react-native'; +import { TabView, SceneMap } from 'react-native-tab-view'; +import { NativeBaseProvider, Box, Text, Center } from 'native-base'; +import Constants from 'expo-constants'; + +const FirstRoute = () =>
This is Tab 1
; + +const SecondRoute = () =>
This is Tab 2
; + +const ThirdRoute = () =>
This is Tab 3
; + +const FourthRoute = () =>
This is Tab 4
; + +const initialLayout = { width: Dimensions.get('window').width }; + +const renderScene = SceneMap({ + first: FirstRoute, + second: SecondRoute, + third: ThirdRoute, + fourth: FourthRoute, +}); + +export default function TabViewExample() { + const [index, setIndex] = React.useState(0); + const [routes] = React.useState([ + { key: 'first', title: 'Tab 1' }, + { key: 'second', title: 'Tab 2' }, + { key: 'third', title: 'Tab 3' }, + { key: 'fourth', title: 'Tab 4' }, + ]); + + const renderTabBar = (props) => { + const inputRange = props.navigationState.routes.map((x, i) => i); + return ( + + {props.navigationState.routes.map((route, i) => { + const opacity = props.position.interpolate({ + inputRange, + outputRange: inputRange.map((inputIndex) => + inputIndex === i ? 1 : 0.5 + ), + }); + const color = index === i ? '#1f2937' : '#a1a1aa'; + const borderColor = index === i ? 'cyan.500' : 'coolGray.200'; + + return ( + + { + console.log(i); + setIndex(i); + }}> + {route.title} + + + ); + })} + + ); + }; + + return ( + + + + ); +} + + + +``` diff --git a/versioned_docs/version-3.2.1/builldingCard.md b/versioned_docs/version-3.2.1/builldingCard.md new file mode 100644 index 000000000..aab840b4b --- /dev/null +++ b/versioned_docs/version-3.2.1/builldingCard.md @@ -0,0 +1,104 @@ +--- +id: building-card +title: Card +--- + +A card is a flexible and extensible content container. It comes in caries shapes and sizes and here we'll make few of them. + +## Most Commonly used design + +This card design widely used where the Header consist of Avatar, accompanied by the Title and Sub-title. + +Followed by the image which flows till the very edge. + +And lastly a description. + +```SnackPlayer name=Card +import React from "react"; +import { + Box, + Heading, + Icon, + AspectRatio, + Image, + Text, + Center, + HStack, + Stack, + NativeBaseProvider +} from 'native-base'; +import { MaterialIcons, Ionicons } from '@expo/vector-icons'; + +function CardComponent(){ + return( + + + + image + +
+ PHOTOS +
+ + + + + The Garden City + + + The Silicon Valley of India. + + + + Bengaluru (also called Bangalore) is the center of India's high-tech + industry. The city is also known for its parks and nightlife. + + + + + 6 mins ago + + + + + + ); +} + +export default function () { + return ( + +
+ +
+ + ); +} +``` diff --git a/versioned_docs/version-3.2.1/button.mdx b/versioned_docs/version-3.2.1/button.mdx new file mode 100644 index 000000000..9e25eaec8 --- /dev/null +++ b/versioned_docs/version-3.2.1/button.mdx @@ -0,0 +1,84 @@ +--- +id: button +title: Button +--- + +import { ComponentTheme } from '../src/components'; + +The `Button` component is used to trigger an action or event. + +## Import + +```jsx +import { Button, ButtonGroup } from 'native-base'; +``` + +- **Button** : The button component with support for custom icons, spinners, etc. +- **ButtonGroup** : Used to group buttons whose actions are related, with an option to flush them together. + +## Examples + +### Basic + +```ComponentSnackPlayer path=primitives,Button,basic.tsx + +``` + +### Sizes + +```ComponentSnackPlayer path=primitives,Button,sizes.tsx + +``` + +### Variants + +```ComponentSnackPlayer path=primitives,Button,variants.tsx + +``` + +### Loading + +```ComponentSnackPlayer path=primitives,Button,loading.tsx + +``` + +### Icons + +```ComponentSnackPlayer path=primitives,Button,icons.tsx + +``` + +### ButtonGroup + +```ComponentSnackPlayer path=primitives,ButtonGroup,basic.tsx + +``` + +### Basic (With Ref) + +```ComponentSnackPlayer path=primitives,Button,WithRef.tsx + +``` + +## Props + +### Button + +```ComponentPropTable path=primitives,Button,Button.tsx + +``` + +### ButtonGroup + +```ComponentPropTable path=primitives,Button,ButtonGroup.tsx + +``` + +## Styling + + + +## Accessibility + +- Button has `role` set to [button](https://www.w3.org/TR/wai-aria-practices-1.2/#button). +- When Button has focus, Space or Enter activates it. diff --git a/versioned_docs/version-3.2.1/center.md b/versioned_docs/version-3.2.1/center.md new file mode 100644 index 000000000..af1b45de7 --- /dev/null +++ b/versioned_docs/version-3.2.1/center.md @@ -0,0 +1,48 @@ +--- +id: center +title: Center +--- + +`Center` is a layout component that centers its child within itself. + +## **Import** + +```jsx +import { Center, Square, Circle } from 'native-base'; +``` + +- **Center:** Centers its child, pass `width` and `height` +- **Square:** `Center` but we need to pass `size` (width and height) +- **Circle:** `Center` with round `borderRadius`, pass `size` (width and height) + +## Examples + +### Basic + +Put any child element inside it, give it any width or/and height. It'll ensure the child is centered. + +```ComponentSnackPlayer path=composites,Center,Basic.tsx + +``` + +### Icon frames + +Center can be used to nicely position icons in the center and add frames around them. + +```ComponentSnackPlayer path=composites,Center,WithIcons.tsx + +``` + +### Square and Circle + +Square and Circle automatically centers their children. + +```ComponentSnackPlayer path=composites,Center,SquareCircle.tsx + +``` + +## Props + +```ComponentPropTable path=composites,Center,Center.tsx + +``` diff --git a/versioned_docs/version-3.2.1/changelog.md b/versioned_docs/version-3.2.1/changelog.md new file mode 100644 index 000000000..417a3a41e --- /dev/null +++ b/versioned_docs/version-3.2.1/changelog.md @@ -0,0 +1,32 @@ +--- +id: changelog +title: Changelog +--- + +## Features + +TypeScript enhancement for custom theme tokens and variants - https://github.com/GeekyAnts/NativeBase/pull/4173 + +## Fixes + +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). diff --git a/versioned_docs/version-3.2.1/checkBox.md b/versioned_docs/version-3.2.1/checkBox.md new file mode 100644 index 000000000..933b5cc30 --- /dev/null +++ b/versioned_docs/version-3.2.1/checkBox.md @@ -0,0 +1,104 @@ +--- +id: checkbox +title: CheckBox +--- + +import { ComponentTheme } from '../src/components'; + +The `Checkbox` component is used in forms when a user needs to select multiple values from several options. + +## Examples + +### Basic + +```ComponentSnackPlayer path=primitives,Checkbox,basic.tsx + +``` + +### Controlled + +```ComponentSnackPlayer path=primitives,Checkbox,controlledCheckbox.tsx + +``` + +### Uncontrolled + +```ComponentSnackPlayer path=primitives,Checkbox,uncontrolledCheckbox.tsx + +``` + +### Disabled + +```ComponentSnackPlayer path=primitives,Checkbox,disabled.tsx + +``` + +### Invalid + +```ComponentSnackPlayer path=primitives,Checkbox,invalid.tsx + +``` + +### Custom Color + +```ComponentSnackPlayer path=primitives,Checkbox,customColor.tsx + +``` + +### Custom Icon + +```ComponentSnackPlayer path=primitives,Checkbox,customIcon.tsx + +``` + +### Size + +```ComponentSnackPlayer path=primitives,Checkbox,size.tsx + +``` + +### Checkbox Group + +```ComponentSnackPlayer path=primitives,Checkbox,checkboxGroup.tsx + +``` + +### Form Controlled + +```ComponentSnackPlayer path=primitives,Checkbox,FormControlled.tsx + +``` + +### Basic (With Ref) + +```ComponentSnackPlayer path=primitives,Checkbox,withRef.tsx + +``` + +## Props + +### Checkbox + +```ComponentPropTable path=primitives,Checkbox,Checkbox.tsx + +``` + +### Checkbox.Group + +```ComponentPropTable path=primitives,Checkbox,CheckboxGroup.tsx + +``` + +## Styling + + + +## Accessibility + +Uses React Native ARIA [@react-native-aria/checkbox](https://react-native-aria.geekyants.com/docs/useCheckbox) which follows the [Checkbox WAI-ARIA design pattern](https://www.w3.org/TR/wai-aria-practices-1.2/#checkbox). + +### Keyboard Interactions + +| Key | Description | +| ------- | ----------------------------- | +| `Space` | Checks/unchecks the checkbox. | diff --git a/versioned_docs/version-3.2.1/colorMode.md b/versioned_docs/version-3.2.1/colorMode.md new file mode 100644 index 000000000..e24285266 --- /dev/null +++ b/versioned_docs/version-3.2.1/colorMode.md @@ -0,0 +1,163 @@ +--- +id: color-mode +title: Color mode (Dark Mode) +--- + +When you use the `NativebaseProvider` at the root of your app, you can automatically use color mode in your apps. + +By default, most components are dark mode compatible. To handle color mode manually in your application, use the `useColorMode` or `useColorModeValue` hooks. + +## useColorMode + +`useColorMode` is a React hook that gives you access to the current color mode, and a function to toggle the color mode. + +Calling toggleColorMode anywhere in your app tree toggles the color mode. + +## useColorModeValue + +`useColorModeValue` is a React hook used to change any value or style based on the color mode. It takes 2 arguments: the value in light mode, and the value in dark mode. + +```SnackPlayer name=ColorMode%20Usage +import React from 'react'; +import { + Heading, + useColorMode, + Button, + HStack, + Avatar, + Center, + useColorModeValue, + Text, + NativeBaseProvider, +} from 'native-base'; + +function ColorModeExample() { + const { colorMode, toggleColorMode } = useColorMode(); + return ( +
+ + The active color mode is{' '} + + {useColorModeValue('Light', 'Dark')} + + + +
+ ); +} + +export default function () { + return ( + + + + ); +} + +``` + +## \_light and \_dark Pseudo props + +All components accepts \_light and \_dark props which applies the passed props on dark and light mode. + +```SnackPlayer name=PseudoProps%20Usage +import React from 'react'; +import { + Heading, + useColorMode, + Button, + HStack, + Avatar, + Center, + useColorModeValue, + Text, + NativeBaseProvider, +} from 'native-base'; + +function PseudoPropsUsage() { + const { colorMode, toggleColorMode } = useColorMode(); + return ( +
+ + The active color mode is{' '} + + {colorMode} + + + +
+ ); +} + +export default function () { + return ( + + + + ); +} + +``` + +## Default color mode + +You can set default color mode. By default, the color mode will be `light`. To support this, extend the default theme with a `config` + +```jsx +import { NativeBaseProvider, extendTheme, Text } from 'native-base'; + +// Define the config +const config = { + useSystemColorMode: false, + initialColorMode: 'dark', +}; + +// extend the theme +const customTheme = extendTheme({ config }); +function App() { + return ( + // pass itto NativeBaseProvider + + // Your component + + ); +} +``` + +## Persisting the color mode + +You can persist the color mode in you app by defining you color mode manager of type `StorageManager` and passing it to the NativeBaseProvider. This will retain the color mode even when the app is refreshed. + +```jsx +import React from 'react'; +import { NativeBaseProvider, StorageManager, ColorMode } from 'native-base'; +import AsyncStorage from '@react-native-async-storage/async-storage'; + +// Define the colorModeManager, +// here we are using react-native-async-storage (https://react-native-async-storage.github.io/async-storage/) +const colorModeManager: StorageManager = { + get: async () => { + try { + let val = await AsyncStorage.getItem('@color-mode'); + return val === 'dark' ? 'dark' : 'light'; + } catch (e) { + return 'light'; + } + }, + set: async (value: ColorMode) => { + try { + await AsyncStorage.setItem('@color-mode', value); + } catch (e) { + console.log(e); + } + }, +}; +export default function () { + return ( + // pass it to NativeBaseProvider + + // Your components + + ); +} +``` diff --git a/versioned_docs/version-3.2.1/container.md b/versioned_docs/version-3.2.1/container.md new file mode 100644 index 000000000..9938207f4 --- /dev/null +++ b/versioned_docs/version-3.2.1/container.md @@ -0,0 +1,56 @@ +--- +id: container +title: Container +--- + +The `Container` is used to constrain a content's width to the current breakpoint, while keeping it fluid. + +## Implements + +- [`Box`](box.md) + +## Usage + +To include content, wrap it in the Container component. + +## Example + +```SnackPlayer name=Container%20Example +import React from 'react'; +import { Container, Text, Heading, NativeBaseProvider, Center } from 'native-base'; +function ContainerComponent() { + return ( + + + A component library for the + React Ecosystem + + + NativeBase is a simple, modular and accessible component library that + gives you building blocks to build you React applications. + + + ); +} + +// Example template which wraps component with NativeBaseProvider +export default function () { + return ( + +
+ +
+ + ); +} +``` + +## Props + +**Container** implements **[Box](box.md)**, so all the Box Props can be passed to it. + +### Container + +| Name | Type | Description | Default | +| ------------- | ------- | --------------------------------------------------------- | ------- | +| centerContent | boolean | It'll center child elements based on their content width. | true | diff --git a/versioned_docs/version-3.2.1/customizingComponents.md b/versioned_docs/version-3.2.1/customizingComponents.md new file mode 100644 index 000000000..da9c028c6 --- /dev/null +++ b/versioned_docs/version-3.2.1/customizingComponents.md @@ -0,0 +1,160 @@ +--- +id: customizing-components +title: Customizing Components +--- + +Theme customisation is at the heart of NativeBase. Using NativeBase's `extendTheme` function, we can customise components. + +Components can be customised by overriding baseStyle/defaultProps or adding a new variant. + +Let's customise a Button component to include rounded borders and red colorScheme. + +## Basic + +```tsx +import React from 'react'; +import { NativeBaseProvider, extendTheme } from 'native-base'; + +export default function () { + const theme = extendTheme({ + components: { + Button: { + // Can simply pass default props to change default behaviour of components. + baseStyle: { + rounded: 'md', + }, + defaultProps: { + colorScheme: 'red', + }, + }, + Heading: { + // Can pass also function, giving you access theming tools + baseStyle: ({ colorMode }) => { + return { + color: colorMode === 'dark' ? 'red.300' : 'blue.300', + fontWeight: 'normal', + }; + }, + }, + }, + }); + return ( + {/* components */} + ); +} +``` + +As shown above, we can customize components by passing the **components** object with the **key** being the **name** of the **component**. Whereas you set `defaultProps` or `baseStyle` to customize the components. + +### Difference between baseStyle and defaultProps? + +#### Base Style + +- As the name suggests, it's used to define the base style of a component. +- Base style can be a function or a plain object. Use function if you want to get access to defaultProps, current colorMode (light/dark) and theme object. + +Take a look at an [example here](https://github.com/GeekyAnts/NativeBase/blob/v3.1.0/src/theme/components/button.ts#L5). + +#### Default Props + +- Default props can be used to initialize props of a component. +- For e.g. You have a Button component and it has 2 variants. i.e. outline, solid. You can use it like. + +Take a look at an [example here](https://github.com/GeekyAnts/NativeBase/blob/v3.1.0/src/theme/components/button.ts#L201). + +```jsx + + + + + + ); +} + +``` + +
+ +NativeBase ships with default styles for each components. [You can find it here](https://github.com/GeekyAnts/NativeBase/tree/v3.1.0/src/theme/components). diff --git a/versioned_docs/version-3.2.1/customizingFonts.md b/versioned_docs/version-3.2.1/customizingFonts.md new file mode 100644 index 000000000..c8ade5f00 --- /dev/null +++ b/versioned_docs/version-3.2.1/customizingFonts.md @@ -0,0 +1,87 @@ +--- +id: customizing-fonts +title: Customizing Fonts +--- + +Follow 3 simple steps to add a custom font family. + +### Loading fonts in Expo or React Native init project. + +[Refer this guide if you're using Expo](https://docs.expo.io/guides/using-custom-fonts/) + +[Refer this guide if you're using React Native init](https://medium.com/@aravindmnair/add-custom-fonts-to-react-native-0-60-easily-in-3-steps-fcd71459f4c9) + +### Extend NativeBase theme object. + +We extend the theme object and override `fontConfig` and `fonts` properties which define the mappings. + +This mapping is needed to make sure fontWeight, fontStyle properties work in all platforms. + +```jsx +import { NativeBaseProvider, extendTheme } from 'native-base'; + +const theme = extendTheme({ + fontConfig: { + Roboto: { + 100: { + normal: 'Roboto-Light', + italic: 'Roboto-LightItalic', + }, + 200: { + normal: 'Roboto-Light', + italic: 'Roboto-LightItalic', + }, + 300: { + normal: 'Roboto-Light', + italic: 'Roboto-LightItalic', + }, + 400: { + normal: 'Roboto-Regular', + italic: 'Roboto-Italic', + }, + 500: { + normal: 'Roboto-Medium', + }, + 600: { + normal: 'Roboto-Medium', + italic: 'Roboto-MediumItalic', + }, + // Add more variants + // 700: { + // normal: 'Roboto-Bold', + // }, + // 800: { + // normal: 'Roboto-Bold', + // italic: 'Roboto-BoldItalic', + // }, + // 900: { + // normal: 'Roboto-Bold', + // italic: 'Roboto-BoldItalic', + // }, + }, + }, + + // Make sure values below matches any of the keys in `fontConfig` + fonts: { + heading: 'Roboto', + body: 'Roboto', + mono: 'Roboto', + }, +}); + +export default function App() { + return ( + + + + ); +} +``` + +### Using fonts + +Fonts can be used as shown below. The below `Text` will be rendered in `Roboto-MediumItalic` font family. + +```jsx + +``` diff --git a/versioned_docs/version-3.2.1/customizingTheme.md b/versioned_docs/version-3.2.1/customizingTheme.md new file mode 100644 index 000000000..34e5bd136 --- /dev/null +++ b/versioned_docs/version-3.2.1/customizingTheme.md @@ -0,0 +1,108 @@ +--- +id: customizing-theme +title: Customizing Theme +--- + +import { NativeBaseProvider, Box } from 'native-base'; + +Theme is one core elements of NativeBase. You can customize NativeBase's theme as per your liking. NativeBase theme is complex object which looks like + +```tsx +// theme +{ + colors: {...}, + fontSizes: {...}, + fonts: {...}, + . + . + . + config: {...}, +} +``` + +It has many [other properties](default-theme) but in this recipe, we'll only update few of them (namely colors, fonts, and config) using NativeBase's `extendTheme` function. + +```tsx +import React from 'react'; +import { NativeBaseProvider, extendTheme } from 'native-base'; +import { Content } from './Content'; + +export default function () { + const theme = extendTheme({ + colors: { + // Add new color + primary: { + 50: '#E3F2F9', + 100: '#C5E4F3', + 200: '#A2D4EC', + 300: '#7AC1E4', + 400: '#47A9DA', + 500: '#0088CC', + 600: '#007AB8', + 700: '#006BA1', + 800: '#005885', + 900: '#003F5E', + }, + // Redefinig only one shade, rest of the color will remain same. + amber: { + 400: '#d97706', + }, + }, + config: { + // Changing initialColorMode to 'dark' + initialColorMode: 'dark', + }, + }); + + return ( + + + + ); +} +``` + +In the above example, the following changes have been made: + +- Added a new color named **primary**. +- Updated one of the shade of **amber** color. +- Updated the initial color mode to **dark**. Default is **light**. +- Finally passed the new **theme** object to the **NativeBaseProvider**. + +### Using the new tokens in components + +```jsx live +function App() { + const theme = extendTheme({ + colors: { + // Add new color + primary: { + 50: '#E3F2F9', + 100: '#C5E4F3', + 200: '#A2D4EC', + 300: '#7AC1E4', + 400: '#47A9DA', + 500: '#0088CC', + 600: '#007AB8', + 700: '#006BA1', + 800: '#005885', + 900: '#003F5E', + }, + // Redefinig only one shade, rest of the color will remain same. + amber: { + 400: '#d97706', + }, + }, + config: { + // Changing initialColorMode to 'dark' + initialColorMode: 'dark', + }, + }); + + return ( + + + + ); +} +``` diff --git a/versioned_docs/version-3.2.1/darkMode.md b/versioned_docs/version-3.2.1/darkMode.md new file mode 100644 index 000000000..1c427554a --- /dev/null +++ b/versioned_docs/version-3.2.1/darkMode.md @@ -0,0 +1,89 @@ +--- +id: dark-mode +title: Making components dark mode compatible +--- + +By default, most of NativeBase's components are dark mode compatible. In some scenario, you might need to make your component respond to color mode. There are 2 way to achieve this: + +1. By updating component's theme +2. By using useColorModeValue + +## 1. By updating component's theme + +In this approach we use NativeBase's `extendTheme` function to customise the components and the use themeTools to make the component dark mode compatible. + +Note: Changes on the theme will be reflected on the entire application. + +```tsx +import React from 'react'; +import { NativeBaseProvider, themeTools } from 'native-base'; +import { extendTheme } from 'native-base'; +import { Content } from './Content'; + +export default function () { + const theme = extendTheme({ + components: { + Heading: { + baseStyle: (props: any) => { + return { + color: themeTools.mode('red.300', 'blue.300')(props), + }; + }, + }, + }, + }); + return ( + + + + ); +} +``` + +In the above example, the Heading component's color property will now respond to change in color, namely in light mode it will be red (red.300) colored and in dark mode it will blue (blue.300) colored. + +## 2. By using useColorModeValue + +In this approach we use NativeBase's `useColorModeValue` function and update specific props instead of updating the entire theme. + +Note: Changes on the theme will be reflected on the entire application. + +```tsx +import React from 'react'; +import { useColorModeValue, Button } from 'native-base'; + +export default function () { + const colorScheme = useColorModeValue('teal', 'amber'); + const variant = useColorModeValue('solid', 'outline'); + + return ( + + ); +} +``` + +In the above example, you'll get a **solid teal Button** in **light** mode whereas an **outline amber Button** in **dark** mode. You can get creative and make other properties respond to the color mode as well. + +## 3. By using \_light and \_dark props + +In this approach we pass the required props inside \_light and \_dark based on the requirement. + +```tsx +import React from 'react'; +import { Button } from 'native-base'; + +export default function () { + return ( + + ); +} +``` + +In the above example, you'll get a **teal Button** in **light** mode whereas an **amber Button** in **dark** mode. You can get creative and make other properties respond to the color mode as well. diff --git a/versioned_docs/version-3.2.1/default-theme.md b/versioned_docs/version-3.2.1/default-theme.md new file mode 100644 index 000000000..7a6ab70bf --- /dev/null +++ b/versioned_docs/version-3.2.1/default-theme.md @@ -0,0 +1,229 @@ +--- +id: default-theme +title: Default Theme +--- + +import { ColorsBlock, FontBlocks, SpaceBlocks } from "/src/components/index"; + +The theme object is where you define your application's color palette, type scale, font stacks, breakpoints, border radius values, and more. + +Theming in NativeBase is based on the **[Styled System Theme Specification](https://system-ui.com/theme/)** + +## Colors + +You can add a `theme.colors` object to provide colors for your project. By default these colors can be referenced by the `color`, `borderColor`, `backgroundColor`, etc.. props. + +We recommend adding a palette that ranges from `50` to `900`. Tools like **[Smart Swatch](https://smart-swatch.netlify.app/)**, **[Palx](https://palx.jxnblk.com/)** are available to generate these palettes. + + + +## Typography + +To manage Typography options, the theme object supports the following keys: + +- `fonts` (font families) +- `fontSizes` +- `fontWeights` +- `lineHeights` +- `letterSpacings` + +```jsx +const typography = { + letterSpacings: { + xs: '-0.05em', + sm: '-0.025em', + md: 0, + lg: '0.025em', + xl: '0.05em', + '2xl': '0.1em', + }, + lineHeights: { + '2xs': '1em', + xs: '1.125em', + sm: '1.25em', + md: '1.375em', + lg: '1.5em', + xl: '1.75em', + '2xl': '2em', + '3xl': '2.5em', + '4xl': '3em', + '5xl': '4em', + }, + fontWeights: { + hairline: 100, + thin: 200, + light: 300, + normal: 400, + medium: 500, + semibold: 600, + bold: 700, + extrabold: 800, + black: 900, + extrablack: 950, + }, + fonts: { + heading: undefined, + body: undefined, + mono: undefined, + }, + fontSizes: { + '2xs': 10, + xs: 12, + sm: 14, + md: 16, + lg: 18, + xl: 20, + '2xl': 24, + '3xl': 30, + '4xl': 36, + '5xl': 48, + '6xl': 60, + '7xl': 72, + '8xl': 96, + '9xl': 128, + }, +}; +``` + + + +## Size + +The `size` key allows you to customize the global spacing and sizing scale for your project. By default these spacing value can be referenced by the `padding`, `margin`, and `top`, `left`, `right`, `bottom` props. + + + +## Opacity + +The `opacity` key is used in opacity style object and to define colors opacity using the red-green-blue-alpha (RGBA) model, RGBA color values are an extension of RGB color values with an alpha channel - which specifies the opacity of the color. + +```jsx +const opacity = { + 0: 0, + 5: 0.05, + 10: 0.1, + 20: 0.2, + 25: 0.25, + 30: 0.3, + 40: 0.4, + 50: 0.5, + 60: 0.6, + 70: 0.7, + 75: 0.75, + 80: 0.8, + 90: 0.9, + 95: 0.95, + 100: 1, +}; +``` + +## Shadows + +The `shadow` key allows you to customize the global box shadow for your project. + +```jsx +export default { + 0: { + shadowColor: '#000', + shadowOffset: { + width: 0, + height: 1, + }, + shadowOpacity: 0.18, + shadowRadius: 1.0, + elevation: 1, + }, + 1: { + shadowColor: '#000', + shadowOffset: { + width: 0, + height: 1, + }, + shadowOpacity: 0.2, + shadowRadius: 1.41, + elevation: 2, + }, + 2: { + shadowColor: '#000', + shadowOffset: { + width: 0, + height: 1, + }, + shadowOpacity: 0.22, + shadowRadius: 2.22, + elevation: 3, + }, + 3: { + shadowColor: '#000', + shadowOffset: { + width: 0, + height: 2, + }, + shadowOpacity: 0.23, + shadowRadius: 2.62, + elevation: 4, + }, + 4: { + shadowColor: '#000', + shadowOffset: { + width: 0, + height: 2, + }, + shadowOpacity: 0.25, + shadowRadius: 3.84, + elevation: 5, + }, + 5: { + shadowColor: '#000', + shadowOffset: { + width: 0, + height: 3, + }, + shadowOpacity: 0.27, + shadowRadius: 4.65, + elevation: 6, + }, + 6: { + shadowColor: '#000', + shadowOffset: { + width: 0, + height: 3, + }, + shadowOpacity: 0.29, + shadowRadius: 4.65, + elevation: 7, + }, + 7: { + shadowColor: '#000', + shadowOffset: { + width: 0, + height: 4, + }, + shadowOpacity: 0.3, + shadowRadius: 4.65, + elevation: 8, + }, + 8: { + shadowColor: '#000', + shadowOffset: { + width: 0, + height: 4, + }, + shadowOpacity: 0.32, + shadowRadius: 5.46, + elevation: 9, + }, + 9: { + shadowColor: '#000', + shadowOffset: { + width: 0, + height: 5, + }, + shadowOpacity: 0.34, + shadowRadius: 6.27, + elevation: 10, + }, +}; +``` + +Still confused? You can always explore [here](https://github.com/GeekyAnts/NativeBase/tree/master/src/theme/base). diff --git a/versioned_docs/version-3.2.1/design-tokens.md b/versioned_docs/version-3.2.1/design-tokens.md new file mode 100644 index 000000000..8198af8e3 --- /dev/null +++ b/versioned_docs/version-3.2.1/design-tokens.md @@ -0,0 +1,69 @@ +--- +id: design-tokens +title: Design tokens +--- + +Design tokens are the values or constants needed to construct a design system. These values can represent spacing, color, typography etc. Design tokens help to achieve consistency in building user interfaces across all platforms. + +Let's take an example by defining a space and color design tokens. + +```jsx title="colors" +const colors = { + primary: { + 50: '#ecfeff', + 100: '#cffafe', + 200: '#a5f3fc', + 300: '#67e8f9', + 400: '#22d3ee', + 500: '#06b6d4', + 600: '#0891b2', + 700: '#0e7490', + 800: '#155e75', + 900: '#164e63', + }, +}; +``` + +```jsx title="spacing" +export const spacing = { + px: 1, + 1: 4, + 2: 8, + 3: 12, + 4: 16, + 5: 20, + 6: 24, + 7: 28, + 8: 32, + 9: 36, + 10: 40, + 12: 48, + 16: 64, + 20: 80, + 24: 96, + 32: 128, + 40: 160, + 48: 192, + 56: 224, + 64: 256, + 72: 288, + 80: 320, + 96: 384, +}; +``` + +We can use the above tokens in our code instead of using absolute values. + +```jsx title="using the above tokens in Box component" + +``` + +The above Box will be translated to + +```jsx title="actual applied styles" + +``` + +With NativeBase, you can create your own design system. NativeBase follows [styled-system's specification](https://styled-system.com/theme-specification/) to construct design system. + +Checkout the **[default NativeBase theme](default-theme)** and how to customize it **[here](customizingTheme)**. diff --git a/versioned_docs/version-3.2.1/divider.md b/versioned_docs/version-3.2.1/divider.md new file mode 100644 index 000000000..a6bd0c33c --- /dev/null +++ b/versioned_docs/version-3.2.1/divider.md @@ -0,0 +1,56 @@ +--- +id: divider +title: Divider +--- + +import { ComponentTheme } from '../src/components'; + +`Divider` is used to visually separate content in a list or group. + +## **Import** + +```jsx +import { Divider } from 'native-base'; +``` + +## Examples + +### Basic + +The Divider displays a thin horizontal or vertical line. + +```ComponentSnackPlayer path=composites,Divider,Basic.tsx + +``` + +### Divider Orientation + +Pass the `orientation` prop and set it to either `horizontal` or `vertical`. + +> **Note:** If the horizontal orientation is used, make sure that the parent element is assigned a width and If the vertical orientation is used, make sure that the parent element is assigned a height. + +```ComponentSnackPlayer path=composites,Divider,Orientation.tsx + +``` + +### Composition + +You can use `bg` or `backgroundColor` to change the divider's color and `width` and `height` to change its width and height respectively. + +```ComponentSnackPlayer path=composites,Divider,Composition.tsx + +``` + +## Props + +```ComponentPropTable path=composites,Divider,index.tsx + +``` + +## Styling + + + +## Accessibility + +- Divider has role set to `separator` and `aria-orientation` to either `horizontal` or `vertical`. diff --git a/versioned_docs/version-3.2.1/faq.md b/versioned_docs/version-3.2.1/faq.md new file mode 100644 index 000000000..d366df99c --- /dev/null +++ b/versioned_docs/version-3.2.1/faq.md @@ -0,0 +1,6 @@ +--- +id: faq +title: FAQ's +--- + +NativeBase FAQ's Coming Soon. diff --git a/versioned_docs/version-3.2.1/flatList.md b/versioned_docs/version-3.2.1/flatList.md new file mode 100644 index 000000000..ef73e46fe --- /dev/null +++ b/versioned_docs/version-3.2.1/flatList.md @@ -0,0 +1,152 @@ +--- +id: flat-list +title: FlatList +--- + +A component for rendering performant scrollable lists. + +## Example + +```SnackPlayer name=Basic +import React from "react" +import { + Box, + FlatList, + Heading, + Avatar, + HStack, + VStack, + Text, + Spacer, + Center, + NativeBaseProvider, +} from "native-base" +export const Example = () => { + const data = [ + { + id: "bd7acbea-c1b1-46c2-aed5-3ad53abb28ba", + fullName: "Aafreen Khan", + timeStamp: "12:47 PM", + recentText: "Good Day!", + avatarUrl: + "https://images.pexels.com/photos/220453/pexels-photo-220453.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500", + }, + { + id: "3ac68afc-c605-48d3-a4f8-fbd91aa97f63", + fullName: "Sujitha Mathur", + timeStamp: "11:11 PM", + recentText: "Cheer up, there!", + avatarUrl: + "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTyEaZqT3fHeNrPGcnjLLX1v_W4mvBlgpwxnA&usqp=CAU", + }, + { + id: "58694a0f-3da1-471f-bd96-145571e29d72", + fullName: "Anci Barroco", + timeStamp: "6:22 PM", + recentText: "Good Day!", + avatarUrl: "https://miro.medium.com/max/1400/0*0fClPmIScV5pTLoE.jpg", + }, + { + id: "68694a0f-3da1-431f-bd56-142371e29d72", + fullName: "Aniket Kumar", + timeStamp: "8:56 PM", + recentText: "All the best", + avatarUrl: + "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSr01zI37DYuR8bMV5exWQBSw28C1v_71CAh8d7GP1mplcmTgQA6Q66Oo--QedAN1B4E1k&usqp=CAU", + }, + { + id: "28694a0f-3da1-471f-bd96-142456e29d72", + fullName: "Kiara", + timeStamp: "12:47 PM", + recentText: "I will call today.", + avatarUrl: + "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRBwgu1A5zgPSvfE83nurkuzNEoXs9DMNr8Ww&usqp=CAU", + }, + ] + return ( + + + Inbox + + ( + + + + + + {item.fullName} + + + {item.recentText} + + + + + {item.timeStamp} + + + + )} + keyExtractor={(item) => item.id} + /> + + ) +} + +export default () => { + return ( + +
+ +
+ + ) +} + + +``` + +## Props + +```ComponentPropTable path=basic,FlatList,FlatList.tsx showStylingProps=true + +``` diff --git a/versioned_docs/version-3.2.1/flex.md b/versioned_docs/version-3.2.1/flex.md new file mode 100644 index 000000000..1667dabac --- /dev/null +++ b/versioned_docs/version-3.2.1/flex.md @@ -0,0 +1,44 @@ +--- +id: flex +title: Flex +--- + +`Flex` is a [`Box`](box.md) with `display: flex` and comes with helpful style shorthand. + +## Import + +```jsx +import { Flex, Spacer } from 'native-base'; +``` + +- `Flex`: a **[Box](box.md)** with `display: flex` +- `Spacer`: creates an adjustable, empty space that can be used to tune the spacing between child elements within `Flex` + +## Usage + +Flex components comes with some helpful shorthand props: + +- `flexDirection` is `direction` +- `flexWrap` is `wrap` +- `alignItems` is `align` +- `justifyContent` is `justify` + +While you can pass the verbose props, using the shorthand can save you some time. + +## Example + +```ComponentSnackPlayer path=primitives,Flex,basic.tsx + +``` + +### Using the Spacer + +You can pass Spacer to add Space between Flex items. + +```ComponentSnackPlayer path=primitives,Flex,spacer.tsx + +``` + +## Props + +**Flex** implements **[Box](box.md)**, so all the Box Props can be passed to it, i.e. [`color`](utility-props#color-and-background-color), [`space`](utility-props#margin-and-padding), [`layout`](utility-props#layout-width-and-height), [`flexbox`](utility-props#flexbox) & [`border`](utility-props#borders) props from [style-system](utility-props). diff --git a/versioned_docs/version-3.2.1/form.md b/versioned_docs/version-3.2.1/form.md new file mode 100644 index 000000000..6a078af67 --- /dev/null +++ b/versioned_docs/version-3.2.1/form.md @@ -0,0 +1,199 @@ +--- +id: form +title: Form with Validation +--- + +Apps often require users to enter information into a text field. For example, you might require users to log in with an email address and password combination. + +To make apps secure and easy to use, check whether the information the user has provided is valid. If the user has correctly filled out the form, process the information. If the user submits incorrect information, display a friendly error message letting them know what went wrong. + +## Example + +In this example, learn how to add validation to a form that has a single text field using the following steps: + +1. Create an Input wrapped in FormControl. +2. Add validation logic. +3. Create a button to validate and submit the form. + +### Step 1 + +Create an Input wrapped in FormControl. + +```SnackPlayer name=Form%20Example +import React from "react"; +import { + VStack, + FormControl, + Input, + NativeBaseProvider, + Center +} from "native-base"; + +function BuildingAFormExample() { + const [formData, setData] = React.useState({}); + + return ( + + + Name + setData({ ...formData, name: value })} + /> + + Name should contain atleast 3 character. + + Error Name + + + ); +} +export default function () { + return ( + +
+ +
+ + ); +} +``` + +### Step 2 + +Add validation logic. + +```SnackPlayer name=Form%20Example(Validation) +import React from 'react'; +import { + VStack, + FormControl, + Input, + NativeBaseProvider, + Center +} from 'native-base'; + + +function BuildingAFormExample() { + const [formData, setData] = React.useState({}); + const [errors, setErrors] = React.useState({}); + const validate = () => { + if (formData.name === undefined) { + setErrors({ + ...errors, + name: 'Name is required', + }); + return false; + } else if (formData.name.length < 3) { + setErrors({ + ...errors, + name: 'Name is too short', + }); + return false; + } + return true; + }; + + return ( + + + Name + setData({ ...formData, name: value })} + /> + + Name should contain atleast 3 character. + + Error Name + + + ); +} +export default function () { + return ( + +
+ +
+ + ); +} +``` + +### Step 3 + +Create a button to validate and submit the form. + +```SnackPlayer name=Form%20Example(Validate%20and%20Submit) +import React from 'react'; +import { + VStack, + Button, + FormControl, + Input, + NativeBaseProvider, + Center +} from 'native-base'; + +function BuildingAFormExample() { + const [formData, setData] = React.useState({}); + const [errors, setErrors] = React.useState({}); + const validate = () => { + if (formData.name === undefined) { + setErrors({ + ...errors, + name: 'Name is required', + }); + return false; + } else if (formData.name.length < 3) { + setErrors({ + ...errors, + name: 'Name is too short', + }); + return false; + } + return true; + }; + + const onSubmit = () => { + validate() ? console.log('Submitted') : console.log('Validation Failed'); + }; + + return ( + + + Name + setData({ ...formData, name: value })} + /> + {'name' in errors ? + Error +: + + + Name should contain atleast 3 character. + + } + + + + ); +} +export default function () { + return ( + +
+ +
+ + ); +} +``` + +## Community Integration + +NativeBase can be used with other popular Form libraries like [`Formik`](nativebase-formik-ui.md) and [`React Hook Forms`](reactHooksForms.md) as well. For more details checkout Community Integration section of the docs. diff --git a/versioned_docs/version-3.2.1/formControl.md b/versioned_docs/version-3.2.1/formControl.md new file mode 100644 index 000000000..931133b29 --- /dev/null +++ b/versioned_docs/version-3.2.1/formControl.md @@ -0,0 +1,52 @@ +--- +id: form-control +title: FormControl +--- + +import { ComponentTheme } from '../src/components'; + +`FormControl` provides context such as `isInvalid`, `isDisabled`, and `isRequired` to form elements. + +## Examples + +### Basic + +```ComponentSnackPlayer path=composites,FormControl,Usage.tsx + +``` + +### Custom Style + +```ComponentSnackPlayer path=composites,FormControl,CustomStyle.tsx + +``` + +## Props + +### FormControl + +```ComponentPropTable path=composites,FormControl,FormControl.tsx + +``` + +### FormControl.Label + +```ComponentPropTable path=composites,FormControl,FormControlLabel.tsx + +``` + +### FormControl.ErrorMessage + +```ComponentPropTable path=composites,FormControl,FormControlErrorMessage.tsx + +``` + +### FormControl.HelperText + +```ComponentPropTable path=composites,FormControl,FormControlHelperText.tsx + +``` + +## Styling + + diff --git a/versioned_docs/version-3.2.1/getting-started.mdx b/versioned_docs/version-3.2.1/getting-started.mdx new file mode 100644 index 000000000..670c72d99 --- /dev/null +++ b/versioned_docs/version-3.2.1/getting-started.mdx @@ -0,0 +1,93 @@ +--- +id: getting-started +title: Getting Started +slug: / +--- + +import { KitchenSinkIframe, TileLink, NBHistory } from '../src/components'; +import TOCInline from '@theme/TOCInline'; + +
+
+
+

+ 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. +

+
+
+ + +
+
+ + +
+ +
+
+
+ +
+
+

A Brief History of NativeBase

+
+ +
+

What's New with NativeBase v3?

+ +We had clear goals in mind while building version 3. Take a look at some of the new features we added: + +
+

Multiplatform

+
+ NativeBase supports multiple platforms; android, iOS and web. You can also + customise properties using platform-specific props. +
+
+ +
+

Inherently Beautiful

+
+ NativeBase ships with a default theme that provides beautiful components, + out of the box. +
+
+ +
+

Accessible

+
+ This version has out of the box accessibility including focus management, + keyboard navigation and more. +
+
+ +
+

Customisable + +

+
+The default theme can be extended as you desire. You can also customise specific components for your app needs. +
+
+ +
diff --git a/versioned_docs/version-3.2.1/hStack.md b/versioned_docs/version-3.2.1/hStack.md new file mode 100644 index 000000000..d8e8c178d --- /dev/null +++ b/versioned_docs/version-3.2.1/hStack.md @@ -0,0 +1,24 @@ +--- +id: h-stack +title: HStack / Row +--- + +`HStack` aligns items horizontally. `Row` is also an alias for `HStack`. + +## Import + +```jsx +import { HStack } from 'native-base'; +``` + +## Examples + +```ComponentSnackPlayer path=primitives,HStack,basic.tsx + +``` + +## Props + +```ComponentPropTable path=primitives,Stack,HStack.tsx + +``` diff --git a/versioned_docs/version-3.2.1/heading.md b/versioned_docs/version-3.2.1/heading.md new file mode 100644 index 000000000..40a96a759 --- /dev/null +++ b/versioned_docs/version-3.2.1/heading.md @@ -0,0 +1,56 @@ +--- +id: heading +title: Heading +--- + +import { ComponentTheme } from '../src/components'; + +Headings are used for rendering headlines. `Heading` composes [`Text`](text.md) so you can use all the style props. + +## Import + +```jsx +import { Heading } from 'native-base'; +``` + +## Example + +### Basic + +```ComponentSnackPlayer path=primitives,Heading,Basic.tsx + +``` + +### Sizes + +```ComponentSnackPlayer path=primitives,Heading,Sizes.tsx + +``` + +### Truncate + +```ComponentSnackPlayer path=primitives,Heading,Truncate.tsx + +``` + +### Override + +```ComponentSnackPlayer path=primitives,Heading,OverridenStyle.tsx + +``` + +### Composition + +```ComponentSnackPlayer path=primitives,Heading,Composition.tsx + +``` + +## Props + +```ComponentPropTable path=primitives,Heading,index.tsx + +``` + +## Styling + + diff --git a/versioned_docs/version-3.2.1/hidden.md b/versioned_docs/version-3.2.1/hidden.md new file mode 100644 index 000000000..2a8b0b906 --- /dev/null +++ b/versioned_docs/version-3.2.1/hidden.md @@ -0,0 +1,125 @@ +--- +id: hidden +title: Hidden +--- + +import { ComponentTheme } from '../src/components'; + +Hidden is used to toggle the visibility value of child components responsively, based on the colorMode or based on the platform. It doesn't mount the child components in the restricted values of props. + +## Import + +```jsx +import { Hidden } from 'native-base'; +``` + +## Example + +### Basic + +```jsx + + + This text will be always hidden. + + +``` + +### Hidden according to breakpoints + +```jsx +<> + + + This text will be hidden from sm to lg screens. + + + + + This text will be hidden on sm and lg screens only. + + + +``` + +### Hidden according to colorMode + +```SnackPlayer name=ColorMode%20Usage +import React from 'react'; +import { + useColorMode, + Button, + VStack, + Center, + Box,Text, + Hidden, + useColorModeValue, + NativeBaseProvider +} from 'native-base'; + +function ColorModeExample () { + const { colorMode, toggleColorMode } = useColorMode(); + return ( + <> + + + + + This text will be hidden on light mode + + + + + This text will be hidden on dark mode + + + + + ); +} + +const LocalWrapper = ({ children }) => { + const bg = useColorModeValue('gray.200', 'gray.800') + return ( +
+ {children} +
+ ); +}; + +export default function () { + return ( + + + + + + ); +} +``` + +## Hidden according to platform + +```jsx + + + This text will be hidden on android and web. + + +``` + +## Props + +```ComponentPropTable path=composites,Fab,Fab.tsx + +``` diff --git a/versioned_docs/version-3.2.1/icon.md b/versioned_docs/version-3.2.1/icon.md new file mode 100644 index 000000000..4b19156e5 --- /dev/null +++ b/versioned_docs/version-3.2.1/icon.md @@ -0,0 +1,54 @@ +--- +id: icon +title: Icon +--- + +You can use icons in multiple ways in NativeBase: + +- Create icon by creating an SVG Icon +- Create icon using createIcon function and use it as a component +- Use a third-party icon library ( such as [@expo/vector-icons](https://github.com/expo/vector-icons) ), with `as` prop. + +## Examples + +### Basic + +```ComponentSnackPlayer path=primitives,Icon,Basic.tsx + +``` + +Apart from the icons provided by [@expo/vector-icon](https://github.com/expo/vector-icons), you can also create custom icons using SVG. You can use all the components from [react-native-svg](https://github.com/react-native-svg/react-native-svg). + +### NativeBase Icons + +We provides a set of commonly used interface icons. So you can directly use them in your project. All our icons are create using [`createIcon`](icon#createicon) function from NativeBase. + +```ComponentSnackPlayer path=primitives,Icon,AllIcons.tsx + +``` + +### Custom Icon + +```ComponentSnackPlayer path=primitives,Icon,CustomIcon.tsx + +``` + +### Create Icon + +```ComponentSnackPlayer path=primitives,Icon,CreateIcon.tsx + +``` + +## Props + +### Icon + +```ComponentPropTable path=primitives,Icon,Icon.tsx showStylingProps=true + +``` + +### createIcon + +```ComponentPropTable path=primitives,Icon,createIcon.tsx + +``` diff --git a/versioned_docs/version-3.2.1/iconButton.md b/versioned_docs/version-3.2.1/iconButton.md new file mode 100644 index 000000000..0767912b5 --- /dev/null +++ b/versioned_docs/version-3.2.1/iconButton.md @@ -0,0 +1,43 @@ +--- +id: icon-button +title: IconButton +--- + +import { ComponentTheme } from '../src/components'; + +`IconButton` composes the `Button` component. It is generally used to make an Icon pressable. + +## Examples + +### Basic + +```ComponentSnackPlayer path=composites,IconButton,Basic.tsx + +``` + +### Sizes + +```ComponentSnackPlayer path=composites,IconButton,Sizes.tsx + +``` + +### Variants + +```ComponentSnackPlayer path=composites,IconButton,Variant.tsx + +``` + +## Props + +```ComponentPropTable path=composites,IconButton,index.tsx + +``` + +## Styling + + + +## Accessibility + +- Use accessibilityLabel for labelling icon buttons to make sure it's announced by screen reader devices. +- IconButton has a `role` set to [button](https://www.w3.org/TR/wai-aria-practices-1.2/#button). diff --git a/versioned_docs/version-3.2.1/image.md b/versioned_docs/version-3.2.1/image.md new file mode 100644 index 000000000..550e56ec4 --- /dev/null +++ b/versioned_docs/version-3.2.1/image.md @@ -0,0 +1,49 @@ +--- +id: image +title: Image +--- + +Generic Image components from [React Native](https://reactnative.dev). + +## Implements + +- [`Image`](https://reactnative.dev/docs/image) from [React Native](https://reactnative.dev). +- You can use all props of React native Image. + +## Examples + +### Basic + +```ComponentSnackPlayer path=primitives,Image,Basic.tsx + +``` + +### Sizes + +```ComponentSnackPlayer path=primitives,Image,Sizes.tsx + +``` + +### Border Radius + +```ComponentSnackPlayer path=primitives,Image,BorderRadius.tsx + +``` + +### Fallback + +```ComponentSnackPlayer path=primitives,Image,FallbackSupport.tsx + +``` + +### Basic (With Ref) + +```ComponentSnackPlayer path=primitives,Image,WithRef.tsx + +``` + +## Props + +```ComponentPropTable path=primitives,Image,index.tsx showStylingProps=true + +``` diff --git a/versioned_docs/version-3.2.1/input.md b/versioned_docs/version-3.2.1/input.md new file mode 100644 index 000000000..641f15c50 --- /dev/null +++ b/versioned_docs/version-3.2.1/input.md @@ -0,0 +1,76 @@ +--- +id: input +title: Input +--- + +import { ComponentTheme } from '../src/components'; + +The `Input` component is a component that is used to get user input in a text field. + +## Examples + +### Basic + +```ComponentSnackPlayer path=primitives,Input,Basic.tsx + +``` + +### Input Sizes + +```ComponentSnackPlayer path=primitives,Input,Size.tsx + +``` + +### Input Variants + +```ComponentSnackPlayer path=primitives,Input,Variant.tsx + +``` + + + +### Input Elements + +```ComponentSnackPlayer path=primitives,Input,Elements.tsx + +``` + +### Password Input + +```ComponentSnackPlayer path=primitives,Input,Masked.tsx + +``` + +### Controlled Input + +```ComponentSnackPlayer path=primitives,Input,Controlled.tsx + +``` + +### Form Controlled + +```ComponentSnackPlayer path=primitives,Input,FormControlled.tsx + +``` + +## Props + +### Input + +```ComponentPropTable path=primitives,Input,Input.tsx showStylingProps=true + +``` + +### Input.Group + +```ComponentPropTable path=primitives,Input,InputGroup.tsx + +``` + +## Styling + + diff --git a/versioned_docs/version-3.2.1/install-cra.mdx b/versioned_docs/version-3.2.1/install-cra.mdx new file mode 100644 index 000000000..5cb6b9652 --- /dev/null +++ b/versioned_docs/version-3.2.1/install-cra.mdx @@ -0,0 +1,131 @@ +--- +id: install-cra +title: Install in Create React App project +--- + +import Tabs from '@theme/Tabs'; +import TabItem from '@theme/TabItem'; +import { TileLink } from '../src/components'; + + + + + +The easiest way to get started with NativeBase in create react app is using NativeBase template. + +### JavaScript + +```bash +npx create-react-app my-app --template nativebase +cd my-app/ +yarn start +``` + +### TypeScript + +```bash +npx create-react-app my-app --template nativebase-typescript +cd my-app/ +yarn start +``` + + + + + +Create a new CRA project If not exist + +```bash +npx create-react-app my-app +cd my-app +``` + +[Refer this guide](https://necolas.github.io/react-native-web/docs/installation/) if you need additional configurations. + +### Install dependencies + + + + +
+ +```bash +yarn add react-native-web native-base react-native-svg styled-components styled-system react-native-safe-area-context +``` + +
+ + + +
+ +```bash +npm install react-native-web native-base react-native-svg styled-components styled-system react-native-safe-area-context +``` + +
+ + + + +### Run the Hello world example + +Put the below code in your App.js + +```jsx +import React from 'react'; +import { NativeBaseProvider, Box } from 'native-base'; + +export default function App() { + return ( + + Hello world + + ); +} +``` + + + + + +
+ +
+ +
+
+
+ + +
+
+ +
+
+
diff --git a/versioned_docs/version-3.2.1/install-expo.mdx b/versioned_docs/version-3.2.1/install-expo.mdx new file mode 100644 index 000000000..00a6c09a5 --- /dev/null +++ b/versioned_docs/version-3.2.1/install-expo.mdx @@ -0,0 +1,147 @@ +--- +id: install-expo +title: Install in Expo project +--- + +import Tabs from '@theme/Tabs'; +import TabItem from '@theme/TabItem'; +import { TileLink } from '../src/components'; + +Expo helps you to create universal (iOS, Android and Web) React Native apps with no build configuration. + + + + + +### Create a new project using Expo CLI with NativeBase template + +

Plain Javascript

+
+ +```bash +expo init my-app --template expo-template-native-base +``` + +
+ +

With Typescript

+
+ +```bash +expo init my-app --template expo-template-native-base-typescript +``` + +
+ +Yey! you are all set, start editing App.js/App.tsx now. + + + + + + + +### Create a new expo project if not exist + +```bash +npm install --global expo-cli +expo init my-project +cd my-project/ +``` + +[Refer this link](https://docs.expo.io/) for additional information on Expo and setting up an Expo starter app. + +### Install dependencies + + + + + +```bash +yarn add native-base styled-components styled-system +``` + + + + + +```bash +npm install native-base styled-components styled-system +``` + + + + + +```bash +expo install react-native-svg +``` + +```bash +expo install react-native-safe-area-context +``` + +### Run the Hello world example + +Put the below code in your App.js + +```jsx +import React from 'react'; +import { NativeBaseProvider, Box } from 'native-base'; + +export default function App() { + return ( + + Hello world + + ); +} +``` + + + + + + + + +
+ minions clapping +
+ +
+
+
+ + +
+
+ +
+
+
diff --git a/versioned_docs/version-3.2.1/install-next.mdx b/versioned_docs/version-3.2.1/install-next.mdx new file mode 100644 index 000000000..06d2dccab --- /dev/null +++ b/versioned_docs/version-3.2.1/install-next.mdx @@ -0,0 +1,264 @@ +--- +id: install-next +title: Install in Next.js project +--- + +import Tabs from '@theme/Tabs'; +import TabItem from '@theme/TabItem'; +import { TileLink } from '../src/components'; + + + + + +### Create a new project using Next.js CLI with NativeBase template + +
+ + + + +

Choose your preferred setting and start your development swiftly 🚀

+ +

Plain Javascript

+
+ +```bash + yarn create next-app -e https://github.com/GeekyAnts/nativebase-templates/tree/master/nextjs-with-native-base +``` + +
+Yey! you are all set, start editing src/pages/index.js now. + +

With Typescript

+
+ +```bash + yarn create next-app -e https://github.com/GeekyAnts/nativebase-templates/tree/master/nextjs-with-native-base-typescript +``` + +
+Yey! you are all set, start editing src/pages/index.tsx now. + + + + + + +

Choose your preferred setting and start your development swiftly 🚀

+ +

Plain Javascript

+
+ +```bash + npx create-next-app -example https://github.com/GeekyAnts/nativebase-templates/tree/master/nextjs-with-native-base +``` + +
+ +Yey! you are all set, start editing src/pages/index.js now. + +

With Typescript

+
+ +```bash + npx create-next-app -example https://github.com/GeekyAnts/nativebase-templates/tree/master/nextjs-with-native-base-typescript +``` + +
+ +Yey! you are all set, start editing src/pages/index.tsx now. + + + +
+ + + + +### Install dependencies + + + + + +
+ +```bash +yarn add react-native-web native-base react-native-svg styled-components styled-system react-native-safe-area-context +``` + +
+ + + + + +
+ +```bash +npm install react-native-web native-base react-native-svg styled-components styled-system react-native-safe-area-context +``` + +
+ + + + + +We'll need 2 more additional steps. + +1. Install dev dependencies. + + + + + +```bash + yarn add next-compose-plugins next-transpile-modules -D +``` + + + + + +```bash + npm i next-compose-plugins next-transpile-modules --save-dev +``` + + + + + +2. Update your next.config.js with the below content. + +```js +const withPlugins = require('next-compose-plugins'); +const withTM = require('next-transpile-modules')([ + 'native-base', + 'react-native-svg', + 'styled-components', + 'react-native-safe-area-context', + '@react-aria/visually-hidden', + '@react-native-aria/button', + '@react-native-aria/checkbox', + '@react-native-aria/combobox', + '@react-native-aria/focus', + '@react-native-aria/interactions', + '@react-native-aria/listbox', + '@react-native-aria/overlays', + '@react-native-aria/radio', + '@react-native-aria/slider', + '@react-native-aria/tabs', + '@react-native-aria/utils', + '@react-stately/combobox', + '@react-stately/radio', +]); + +module.exports = withPlugins( + [ + withTM, + // your plugins go here. + ], + { + webpack: (config) => { + config.resolve.alias = { + ...(config.resolve.alias || {}), + // Transform all direct `react-native` imports to `react-native-web` + 'react-native$': 'react-native-web', + }; + config.resolve.extensions = [ + '.web.js', + '.web.ts', + '.web.tsx', + ...config.resolve.extensions, + ]; + return config; + }, + } +); +``` + +### Run the Hello world example + +Replace the below code in your pages/\_app.js + +```jsx +import '../styles/globals.css'; +import { NativeBaseProvider } from 'native-base'; + +function MyApp({ Component, pageProps }) { + return ( + + + + ); +} + +export default MyApp; +``` + +and put this in your pages/index.js + +```jsx +import React from 'react'; +import { Box } from 'native-base'; + +export default function App() { + return Hello world; +} +``` + + + + +
+ +
+ +
+
+
+ + +
+
+ +
+
+
diff --git a/versioned_docs/version-3.2.1/install-rn.mdx b/versioned_docs/version-3.2.1/install-rn.mdx new file mode 100644 index 000000000..202de7126 --- /dev/null +++ b/versioned_docs/version-3.2.1/install-rn.mdx @@ -0,0 +1,145 @@ +--- +id: install-rn +title: Install in React Native project +--- + +import Tabs from '@theme/Tabs'; +import TabItem from '@theme/TabItem'; +import { TileLink } from '../src/components'; + + + + + + + + + +### Create a new project using ReactNative CLI with NativeBase template + +[Refer this link](https://github.com/react-native-community/cli#about) to get infomation about the React Native CLI. + +

Plain Javascript

+
+ +```bash +npx react-native init MyApp --template react-native-template-native-base +``` + +
+ +

With Typescript

+
+ +```bash +npx react-native init MyApp --template react-native-template-native-base-typescript +``` + +
+ +Yey! you are all set, start editing App.js/App.tsx now. + + + + + + + +### Create a new project if not exist + +```bash +npx react-native init AwesomeNativeBase +cd AwesomeNativeBase +``` + +### Install dependencies + + + + + +```bash +yarn add native-base react-native-svg styled-components styled-system react-native-safe-area-context +``` + + + + + +```bash +npm install native-base react-native-svg styled-components styled-system react-native-safe-area-context +``` + + + + + +### Run pod install + +```bash +cd ios/ +pod install +``` + +### Run the Hello world example + +Put the below code in your App.js + +```jsx +import React from 'react'; +import { NativeBaseProvider, Box } from 'native-base'; + +export default function App() { + return ( + + Hello world + + ); +} +``` + + + + + + +
+ +
+ +
+
+
+ + +
+
+ +
+
+
diff --git a/versioned_docs/version-3.2.1/installation.mdx b/versioned_docs/version-3.2.1/installation.mdx new file mode 100644 index 000000000..5b8e02daa --- /dev/null +++ b/versioned_docs/version-3.2.1/installation.mdx @@ -0,0 +1,30 @@ +--- +id: installation +title: Installation +--- + +import { InstallationTiles } from '../src/components'; + +**NativeBase** is supported in [Expo](https://docs.expo.io/get-started/installation/) or React Native CLI initiated apps. Web support is made possible by [react-native-web](https://necolas.github.io/react-native-web/). + +Refer the guides shown below to setup NativeBase in your React app. + +
+
+ +
+
+ +
+ +### NativeBase VS Code Extensions + +NativeBase VS Code Extensions are specifically designed to quicken your development process using **NativeBase 3.0**. +NativeBase snippets are shorthand for commonly used NativeBase components. + +All snippets start with the prefix `nb-` and are followed by the name of the desired component. + +aang transitioning to avatar state diff --git a/versioned_docs/version-3.2.1/interaction-styles.mdx b/versioned_docs/version-3.2.1/interaction-styles.mdx new file mode 100644 index 000000000..8c07bf6a5 --- /dev/null +++ b/versioned_docs/version-3.2.1/interaction-styles.mdx @@ -0,0 +1,229 @@ +--- +id: pseudo-props +title: Pseudo props in Detail +--- + +import { + Box, + NativeBaseProvider, + HStack, + VStack, + Text, + Pressable, + Image, +} from 'native-base'; + +NativeBase provides a declarative way to add interaction or platform specific props. + +## Hover + +Using `_hover` pseudo prop, we can customize the style of Pressable component on hover. + + + + + + Hover + + + + + +```jsx title="Hover example" + + + Hover me + + +``` + +## Pressed + +Using `_pressed` pseudo prop, we can customize the style of Pressable component on pressed. + + + + + + Pressed + + + + + +```jsx title="Pressed example" + + + Pressed + + +``` + +## Focus + +Using `_focus` pseudo prop, we can customize the style of Pressable component on focus. + + + + + + Focus + + + + + +```jsx title="Focus example" + + + Focus + + +``` + +## Platform specific styling + +Using `_web`, `_iOS`, `_android` pseudo props, we can customize the style or behaviour of NativeBase components across platforms. + + + + + + + Save + + + Web + + + + + Save + + + Android + + + + + Save + + + iOS + + + + +```jsx title="Platform specific example" + + + + + Save + + + Web + + + + + Save + + + Android + + + + + Save + + + iOS + + +``` diff --git a/versioned_docs/version-3.2.1/keyboardAvoidingView.md b/versioned_docs/version-3.2.1/keyboardAvoidingView.md new file mode 100644 index 000000000..a124d3063 --- /dev/null +++ b/versioned_docs/version-3.2.1/keyboardAvoidingView.md @@ -0,0 +1,18 @@ +--- +id: keyboard-avoiding-view +title: KeyboardAvoidingView +--- + +Provides a view that moves out of the way of virtual keyboard automatically. It is a component to solve the common problem of views that need to move out of the way of the virtual keyboard. It can automatically adjust either its height, position, or bottom padding based on the keyboard height. + +## Example + +```ComponentSnackPlayer path=basic,KeyboardAvoidingView,Basic.tsx + +``` + +## Props + +```ComponentPropTable path=basic,KeyboardAvoidingView,KeyboardAvoidingView.tsx showStylingProps=true + +``` diff --git a/versioned_docs/version-3.2.1/kitchen-sink.mdx b/versioned_docs/version-3.2.1/kitchen-sink.mdx new file mode 100644 index 000000000..000ac0ae3 --- /dev/null +++ b/versioned_docs/version-3.2.1/kitchen-sink.mdx @@ -0,0 +1,66 @@ +--- +id: kitchen-sink +title: Kitchen Sink +--- + +import { KitchenSinkIframe, TileLink, NBHistory } from '../src/components'; +import useBaseUrl from '@docusaurus/useBaseUrl'; +import ExpoIcon from '@site/static/img/expo-icon.svg'; +import useThemeContext from '@theme/hooks/useThemeContext'; + +
+
+
+

+ Kitchen Sink is a comprehensive demo app showcasing all the NativeBase + components in action. It includes buttons, forms, icons and much more! +

+
+
+
+ Scan with the + + + + Expo app on your Android device to see the special dish we cooked + for you! +
+ +
+
+
+ +
+
+
+
+
+ +
+
+
diff --git a/versioned_docs/version-3.2.1/link.md b/versioned_docs/version-3.2.1/link.md new file mode 100644 index 000000000..96c5d2b60 --- /dev/null +++ b/versioned_docs/version-3.2.1/link.md @@ -0,0 +1,60 @@ +--- +id: link +title: Link +--- + +import { ComponentTheme } from '../src/components'; + +`Links` are accessible elements used primarily for navigation. This component is styled to resemble a hyperlink. + +## **Import** + +```jsx +import { Link } from 'native-base'; +``` + +## Examples + +### Basic + +```ComponentSnackPlayer path=primitives,Link,Basic.tsx + +``` + +### External Link + +```ComponentSnackPlayer path=primitives,Link,ExternalLink.tsx + +``` + +### Link with Underline + +```ComponentSnackPlayer path=primitives,Link,UnderlineLink.tsx + +``` + +### Link custom onPress + +```ComponentSnackPlayer path=primitives,Link,CustomOnPress.tsx + +``` + +### Link around containers + +```ComponentSnackPlayer path=primitives,Link,CompositeLink.tsx + +``` + +## Props + +```ComponentPropTable path=primitives,Link,index.tsx + +``` + +## Styling + + + +## Accessibility + +Adheres to the [Link WAI-ARIA design pattern.](https://www.w3.org/TR/wai-aria-practices-1.2/#link) \ No newline at end of file diff --git a/versioned_docs/version-3.2.1/loginsignupforms.md b/versioned_docs/version-3.2.1/loginsignupforms.md new file mode 100644 index 000000000..9abc14ca3 --- /dev/null +++ b/versioned_docs/version-3.2.1/loginsignupforms.md @@ -0,0 +1,157 @@ +--- +id: login-signup-forms +title: Login/Signup Forms +--- + +## Example + +### Login Form + +```SnackPlayer name=login dependencies=react-native-linear-gradient +import * as React from 'react'; +import { MaterialCommunityIcons, Ionicons } from '@expo/vector-icons'; +import { + NativeBaseProvider, + Box, + Text, + Heading, + VStack, + FormControl, + Input, + Link, + Button, + Icon, + IconButton, + HStack, + Divider, +} from 'native-base'; + +export default function App() { + return ( + + + + Welcome + + + Sign in to continue! + + + + + + Email ID + + + + + + Password + + + + Forget Password? + + + + + + I'm a new user.{' '} + + + Sign Up + + + + + + ); +} + +``` + +### Signup Form + +```SnackPlayer name=Signup dependencies=react-native-linear-gradient +import * as React from 'react'; +import { MaterialCommunityIcons, Ionicons } from '@expo/vector-icons'; +import { + NativeBaseProvider, + Box, + Text, + Heading, + VStack, + FormControl, + Input, + Link, + Button, + Icon, + IconButton, + HStack, + Divider, +} from 'native-base'; + +export default function App() { + return ( + + + + Welcome + + + Sign up to continue! + + + + + + Email + + + + + + Password + + + + + + Confirm Password + + + + + + + + ); +} + +``` diff --git a/versioned_docs/version-3.2.1/menu.md b/versioned_docs/version-3.2.1/menu.md new file mode 100644 index 000000000..70d276936 --- /dev/null +++ b/versioned_docs/version-3.2.1/menu.md @@ -0,0 +1,95 @@ +--- +id: menu +title: Menu +--- + +import { ComponentTheme } from '../src/components'; + +A dropdown menu for the common dropdown menu button design pattern. + +## Import + +NativeBase uses 5 components for rendering menus: + +- `Menu`: The wrapper component provides context, state, and focus management. +- `Menu.Item`: The trigger that handles menu selection. +- `Menu.Group`: A wrapper to group related menu items. +- `Menu.OptionGroup`: A wrapper for checkable menu items (radio and checkbox). +- `Menu.ItemOption`: The checkable menu item, to be used with `MenuOptionGroup`. + +```jsx +import { Menu } from 'native-base'; +``` + +## Examples + +### Basic + +```ComponentSnackPlayer path=composites,Menu,Basic.tsx + +``` + +### Group + +```ComponentSnackPlayer path=composites,Menu,Group.tsx + +``` + +### MenuOptionGroups + +```ComponentSnackPlayer path=composites,Menu,MenuOptionsGroup.tsx + +``` + +### Menu Placement + +```ComponentSnackPlayer path=composites,Menu,MenuPositions.tsx + +``` + +## Props + +### Menu + +```ComponentPropTable path=composites,Menu,Menu.tsx + +``` + +### MenuItem + +```ComponentPropTable path=composites,Menu,MenuItem.tsx + +``` + +MenuItem implements [Pressable] + +### MenuItemOption + +Extends `MenuItem`. + +### MenuItemOption + +```ComponentPropTable path=composites,Menu,MenuItemOption.tsx + +``` + +### MenuGroup + +```ComponentPropTable path=composites,Menu,MenuGroup.tsx + +``` + +### MenuOptionGroup + +```ComponentPropTable path=composites,Menu,MenuOptionGroup.tsx + +``` + +## Styling + + + + +## Accessibility + +Adheres to the [Menu WAI-ARIA design pattern.](https://www.w3.org/TR/wai-aria-practices-1.2/#menu) \ No newline at end of file diff --git a/versioned_docs/version-3.2.1/migration/Accordion.md b/versioned_docs/version-3.2.1/migration/Accordion.md new file mode 100644 index 000000000..9f75bc7ea --- /dev/null +++ b/versioned_docs/version-3.2.1/migration/Accordion.md @@ -0,0 +1,89 @@ +import Tabs from '@theme/Tabs'; +import TabItem from '@theme/TabItem'; + +We have sliced Accordion into multiple smaller component which not only provides more control over the the code but also makes it more readable. + +## Overview + +Migrating Checkbox components can broadly described in these points: + +- **dataArray** is depreciated. +- **expanded** → `defaultIndex`, and now accepts array of index. +- Pros like **headerStyle**, **contentStyle**, **icon**, **expandedIcon**, **iconStyle**, **expandedIconStyle**, **renderHeader**, **renderContent** are _no longer required_ as components like `Accordion.Button`, `Accordion.Panel`, `Accordion.Icon` replaces them. +- **onAccordionOpen,** **onAccordionOpen** → `onChange`, one callback instead of 2. + +## Code Comparison + + + + +```tsx +import React, { Component } from 'react'; +import { Container, Header, Content, Accordion } from 'native-base'; +const dataArray = [ + { + title: 'First Element', + content: 'Lorem ipsum dolor sit amet', + }, + { title: 'Second Element', content: 'Lorem ipsum dolor sit amet' }, + { + title: 'Third Element', + content: 'Lorem ipsum dolor sit amet', + }, +]; +export default class AccordionExample extends Component { + render() { + return ( + +
+ + + + + ); + } +} +``` + + + + +```tsx +import React from 'react'; +import { Accordion } from 'native-base'; +export default function () { + return ( + + + + First Element + + + Lorem ipsum dolor sit amet + + + + Second Element + + + Lorem ipsum dolor sit amet + + + + Third Element + + + Lorem ipsum dolor sit amet + + + ); +} +``` + + + diff --git a/versioned_docs/version-3.2.1/migration/Actionsheet.md b/versioned_docs/version-3.2.1/migration/Actionsheet.md new file mode 100644 index 000000000..50e681848 --- /dev/null +++ b/versioned_docs/version-3.2.1/migration/Actionsheet.md @@ -0,0 +1,107 @@ +--- +id: action-sheet +title: ActionSheet +--- + +import Tabs from '@theme/Tabs'; +import TabItem from '@theme/TabItem'; + +We have sliced [`Actionsheet`](actionSheet.md) into multiple smaller component which not only provides more control over the the code but also makes it more readable. + +## Overview + +Migrating Checkbox components can broadly described in these points: + +- **options** (prop) → `Actionsheet.Item` (component). +- Props like **cancelButtonIndex**, **cancelButtonIndex** are _no longer required_ as components like `Actionsheet.Item` can be customised as per need. +- **title** (prop) → NativeBase components such as `Heading` and `Text` can be used inside `ActionSheet.Content` to show the title. +- Declarative approach to show and hide using `isOpen` prop, instead of `show()` and `hide()`. + +## Code Comparison + + + + +```tsx +import React, { Component } from 'react'; +import { + Container, + Header, + Button, + Content, + ActionSheet, + Text, +} from 'native-base'; +var BUTTONS = ['Option 1', 'Option 2', 'Option 3', 'Delete', 'Cancel']; +var DESTRUCTIVE_INDEX = 3; +var CANCEL_INDEX = 4; +export default class ActionSheetExample extends Component { + constructor(props) { + super(props); + this.state = {}; + } + render() { + return ( + + + + + + ); + } +} +``` + + + + +```tsx +import React from 'react'; +import { Button, Actionsheet, useDisclose } from 'native-base'; + +export default function () { + const { isOpen, onOpen, onClose } = useDisclose(); + return ( + <> + + + + + Header + Option 1 + Option 2 + Option 3 + Delete + + + Cancel + + + + ); +} +``` + + + diff --git a/versioned_docs/version-3.2.1/migration/Badge.md b/versioned_docs/version-3.2.1/migration/Badge.md new file mode 100644 index 000000000..50dad69ac --- /dev/null +++ b/versioned_docs/version-3.2.1/migration/Badge.md @@ -0,0 +1,44 @@ +--- +id: badge +title: Badge +--- + +import Tabs from '@theme/Tabs'; +import TabItem from '@theme/TabItem'; + +Migrating [`Badge`](badge.md) to v3 will provide a lot more **design**, **size, variant**, **color** and **customisation** options. + +## Overview + +Migrating Badge components can be broadly described in these points: + +- No need to wrap you text inside text component anymore. +- In v3 the color is controlled by `colorScheme` prop. And it accepts all the color available in the theme. + +## Code Comparison + + + + +```tsx + + Success + +``` + + + + +```tsx + + Success + +``` + + + diff --git a/versioned_docs/version-3.2.1/migration/Button.md b/versioned_docs/version-3.2.1/migration/Button.md new file mode 100644 index 000000000..a33b068df --- /dev/null +++ b/versioned_docs/version-3.2.1/migration/Button.md @@ -0,0 +1,196 @@ +--- +id: button +title: Button +--- + +import Tabs from '@theme/Tabs'; +import TabItem from '@theme/TabItem'; + +Migrating [`Button`](button.mdx) to v3 will provide a lot more **design**, **size**, **color** and **customisation** options. + +## Overview + +Migrating Button components can broadly described in these points: + +- No need to wrap your text inside `Text` component anymore. +- `isDisabled` prop can be used to disable the button. +- Icons in Button: + `leftIcon` and `rightIcon` are the new alternative to iconLeft and iconRight respectively and they accept **tsx.Element**. +- Colors of the Buttons: + In v3 the color is controlled by `colorScheme` prop. So all the color providing props [ **light**, **info**, **success**, **warning**, **danger** and **dark** ] can be passed as value (and more) to `colorScheme` props. +- Design of the Button: + With v3 we're providing some mostly frequently used designs as `variants` [ **solid**, **outline**, **ghost**, **link** and **unstyled** ] and lot more customisation. +- Sizes of the Button: + In v3 the size is controlled by `size` prop. And it accepts pre-defined sizes [ like xs, sm md, lg ] and also custom values. + +## Code Comparison + +## Colors to the Button + +Besides option like **light**, **info**, **success**, **warning**, **danger** and **dark**. Now you can also provide colors like **red**, **blue**, **cyan**, **teal** and a lot more. + + + + +![Button/Screenshot_2021-01-22_at_12.29.32_PM.png](Button/Screenshot_2021-01-22_at_12.29.32_PM.png) + +```tsx + +``` + + + + +![Button/Screenshot_2021-01-22_at_12.53.09_PM.png](Button/Screenshot_2021-01-22_at_12.53.09_PM.png) + +```tsx + +``` + + + + +### Sizes of the Button: + +Besides option like **light**, **info**, **success**, **warning**, **danger** and **dark**. Now you can also provide colors like **red**, **blue**, **cyan**, **teal** and a lot more. + + + + +![Button/Screenshot_2021-01-22_at_2.37.09_PM.png](Button/Screenshot_2021-01-22_at_2.37.09_PM.png) + +```tsx + +``` + + + + +![Button/Screenshot_2021-01-22_at_2.38.52_PM.png](Button/Screenshot_2021-01-22_at_2.38.52_PM.png) + +```tsx + +``` + + + + +### Designing the Button + +With v3 you can combine variants and style props to create various designs. + + + + +![Button/Screenshot_2021-01-22_at_1.16.25_PM.png](Button/Screenshot_2021-01-22_at_1.16.25_PM.png) + +```tsx + +``` + +![Button/Screenshot_2021-01-22_at_1.23.42_PM.png](Button/Screenshot_2021-01-22_at_1.23.42_PM.png) + +```tsx + +``` + +![Button/Screenshot_2021-01-22_at_1.17.11_PM.png](Button/Screenshot_2021-01-22_at_1.17.11_PM.png) + +```tsx + +``` + + + + +![Button/Screenshot_2021-01-22_at_1.15.34_PM.png](Button/Screenshot_2021-01-22_at_1.15.34_PM.png) + +```tsx + +``` + +![Button/Screenshot_2021-01-22_at_1.22.36_PM.png](Button/Screenshot_2021-01-22_at_1.22.36_PM.png) + +```tsx + +``` + +![Button/Screenshot_2021-01-22_at_1.20.36_PM.png](Button/Screenshot_2021-01-22_at_1.20.36_PM.png) + +```tsx + +``` + + + + +### Icon Button + +With v3 iconLeft and iconRight can now accepts tsx.Element as child and render the element at the appropriate place. + + + + +![Button/Screenshot_2021-01-22_at_1.32.47_PM.png](Button/Screenshot_2021-01-22_at_1.32.47_PM.png) + +```tsx + +``` + + + + +![Button/Screenshot_2021-01-22_at_1.38.15_PM.png](Button/Screenshot_2021-01-22_at_1.38.15_PM.png) + +```tsx + +``` + + + diff --git a/versioned_docs/version-3.2.1/migration/Button/Screenshot_2021-01-22_at_1.15.34_PM.png b/versioned_docs/version-3.2.1/migration/Button/Screenshot_2021-01-22_at_1.15.34_PM.png new file mode 100644 index 0000000000000000000000000000000000000000..1f0a85886576217db343150d2e295264fcfad8fa GIT binary patch literal 9022 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 Yc51Ey+58dy`~Q@ZoSJO4v_;7O0lVT4&j0`b literal 0 HcmV?d00001 diff --git a/versioned_docs/version-3.2.1/migration/Button/Screenshot_2021-01-22_at_1.17.11_PM.png b/versioned_docs/version-3.2.1/migration/Button/Screenshot_2021-01-22_at_1.17.11_PM.png new file mode 100644 index 0000000000000000000000000000000000000000..2c80f15496b1cb3c88a84b637f60b3a5dc1fc2d9 GIT binary patch literal 10048 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 literal 0 HcmV?d00001 diff --git a/versioned_docs/version-3.2.1/migration/Button/Screenshot_2021-01-22_at_1.22.36_PM.png b/versioned_docs/version-3.2.1/migration/Button/Screenshot_2021-01-22_at_1.22.36_PM.png new file mode 100644 index 0000000000000000000000000000000000000000..cd3d19be5125925682daa1702d1bb8a58aef387c GIT binary patch literal 8306 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 literal 0 HcmV?d00001 diff --git a/versioned_docs/version-3.2.1/migration/Button/Screenshot_2021-01-22_at_1.23.42_PM.png b/versioned_docs/version-3.2.1/migration/Button/Screenshot_2021-01-22_at_1.23.42_PM.png new file mode 100644 index 0000000000000000000000000000000000000000..5bef6f3942a96f65ff94287897fa2dc013fc6357 GIT binary patch literal 7841 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 E0C`eO$p8QV literal 0 HcmV?d00001 diff --git a/versioned_docs/version-3.2.1/migration/Button/Screenshot_2021-01-22_at_1.32.47_PM.png b/versioned_docs/version-3.2.1/migration/Button/Screenshot_2021-01-22_at_1.32.47_PM.png new file mode 100644 index 0000000000000000000000000000000000000000..7bb43656da0b713ded795a0025aafb6002a68f46 GIT binary patch literal 9384 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 ZR}i?Ov7)pI`=tONBdH)!DP|P-e*kRRuoM6Q literal 0 HcmV?d00001 diff --git a/versioned_docs/version-3.2.1/migration/Button/Screenshot_2021-01-22_at_12.29.32_PM.png b/versioned_docs/version-3.2.1/migration/Button/Screenshot_2021-01-22_at_12.29.32_PM.png new file mode 100644 index 0000000000000000000000000000000000000000..24f882b52744257850152b4232ac76d98fb4e8dc GIT binary patch literal 8297 zcmZX31ymee67DcSaF^f^Ai>=ScXx*bm*6(IySuv#8YB!(aDoI6POu;oNN{&~Gtxt)?Q2fl7i3001!L<)k!Tc-#vqA-{S#_Rt&0008K=Hjb8yAWjmlkE~BRu0$*ql{R*I5(2J59E$j0 z0xM&i2hLzjT@3vfLNP)DXr?sudN3rWft3(n`j@ht*rNY0-`)G2$-t?+Th(^1>vcG> z#!RMUSg`>B7K>JTit}b1T4kf8fg}dNr0+#lYZuB6BY6E9qX_*fF!P$Ph$pRD1+^|P z;aPWj6U{;hkOYq6y5%$y8JGZU?0e(dzyYMf*Uc1yrGj_GYM8>|Bsvv>8`HfifYyvI zvq8#cLZn+`fJ*iD_cpu$lIx-Z{cmFtLL`N6JaEpX%>dlwZ!lpf?S4@NP{EyDRgDeQ zD2L)M1T!M6laYr6u6w74Y{`fBj#t<^J3Lgj#njofiGqjE%oEQU4??#^SawU55;hi{ z)PZ_m4ck*o@Uu`|GWogQ>8RU9`AYj)uEB{hNO)VM%uw)bjV#p%1i?Yk3Q0*2p*RDZ zTb)@S(?z%x@h5|c>IlJ~DuYsyp&|olhz<1!=@V9eO1;wAnphP_t*S1p+h^c

r!* z?efe7&!ojckgZ|vn6PLDY)z^bX8gCqVl{BkMrOV@3YJ_Aa^Dh&o03Pj2~G_q$k?!D z!{~3J{meFAoul2{#=Kc&Dyz2`XUG=j5G1!v zG>NZi?dDU6TcrpDs-H`#XpID3SIC`hXSPt=#L~U)9jt;4H_{@y zM33^HmXIA)@>>esaAIRDQQ@-(leH+Zqrd>_cDnwrJ2ex+;8~MG?5O}Mj1wDiX~8%g zo$rFEPw1q8RHQktIoTNj;cCy8a@C!n;F{p+{$S$v4TgbRDpXjX?`<#hX;Q1j34*QE z^T}j*Jks_=s4~aX@nz_;6A9s*R5kaRc%ssTxS|;mM;ehlI^FVSgcsFOqU={Yc6-M* ztRum!VLsn}O$pLXoJ~-1zO!#hrQV%n8bn+WhNU}CeSUASv5+*2ht&s9C1^23-1f$~ zU$}^pkOD#2SAxZmptXc?oU-jXqt8=S(o)vr4FqNiGif+XrXFL%|L;*Ms-K5iIGItll5#-6Odm6vb9$ zh2cDYrPTeUsV<+b7_V3{X8lVq*u*y2Y#T}^UoJ2GqaXMVEr1+BDIsh3;2YS@#SKyH zv{t>ld!6%D_Z#Hx2fj6-wqf{z$HzzIpJ4Su0RP8Vt%3J^`4a>;IYGyN8ppg{ZHhG_ znOG5SGQNiiP5`n1XeMaqF7QUZln9~h?5G1FQc0-qdKu9+L75>8Ca<#46vT-2Ug?Co zo8T>>dV~m@h*lygZ}9VDum+87fZEV>Rgt_G3X>{n>Opw_)Y3UJ!;VIqwrinlLPr1s0jn9&J-fVh2d;Ni<^R{pa0NOP2{&>uKgbUZ~7V9GC|14(Nff*A0;m$d^ysyB=c0> zE3JyHD%!tm!J)+Sm7`688wti2i+SrJk64O3V=&`5!!bjkfmEfd{9!_CLYd_~i?VW! zPK{1oi{fGBGC{Mot-l3J1Hq3(GR2+Lisa0c)@0I=%x~l{kr>{=2wXAwQkdF~1|xlQ znr51BTI=54-p*e4p81^gp4%ML+;vr!I87l)D^g0b~mD%fAH~x~u#aDmMqC zfpRAyQxGReVTtE&Tz3bsz!!lpmS23qhVC7g;0vLPl*{rx?LG2oJ8KhkyH}CP!+N7j zQ*C`W+~ZzEc3CD%C8o_^>(K9uMBj_*85bFU>d}4v@L)OUP~CN@yYUKu@4%tw#3^>zkP*$v2cs0SDO!J8I0_)J@z? zJW6!T4E7(ELY>b~4o-4Tj*zFK{@_d`hkdL3_A8lBV2F&OB4<{3)OT)Noeol|j-tL_ zLLt2(s|X>Lg+OHEjRfwD;kccTS*cI76Aue zgQ>Q9m+E2nQs45-(w{_5TmgGGZg}W)FlByDbvJ6ytzdKs8HJ&`xT#e=M}k(m)YNv7 z#@ykZ+RZK)(z))bAR=4{L5Q_JoIX=Sfi;rF=kX)_S14oQAE;YC=KpqAv6w8+!)k}N z3%cH)Yn)x}RR6MuQ4;P)xee0MWh>=?s+6~=7?PV*uW~zmTwA#nzI=%IHZ(?p3f@$G zly0wmpu7Fr-`hXhzs@kCiK#SSz*ykplJnRkJzGE!{`!%Vyl^sio%5^x&?+&Ob%T{- zcKG;c-aO}u+10}jayROogFMCTT*2#Wv&=1m!Q-8>al1Sxp}@(9VNvM^EzJ^jYL@o) z-oU={@EeKg{srly*ag-*gHbkN;~fnhqbqL?r_5>hFRGgNkJqUt-^}t6={# zf3|>$o6Di6%10I?Kg>CbCQ#cG_M@5&xdvZtU5An0&-J9`?;c)rn;A0CLy|oL&n=LV znyRy?_2e>H2H9Q8Ls1=YO@;oGRwu*)GVE48+wL?vICJm7ACcp=-| z8h(;D|6I`XrgQ4{4$bKG9;=U$&_&1Yail?)!9J_Ev2ELdZ#&e%Vr801TsOfOqs!-x zWOq4ypJQ>wk#?=ko$Jx+p5>`_xAokyr(4sj;`k`fH_W%}y7?$ml-)<|GIEX5ccp7N zQ3&1N>r}lT(vj$$Xe^Q}e7nl=%y4LP%Qb5~KeblC=N{o{6u@yLJ*+q~)?Jq(+Wh?f zdGu<&uP5aB%aU+Q$9D6D`*ZG~6UO?H*Y0Uu8C~6O-~Ge2Kc#{%hL2~!#jV$l=4ger zzotm4h^`;>e&&W}Z@=s5;VA$`ca;2wpw~pQu>s)K2oEq|1c1F9A#s`oh)4+P1;$9& zH>!HxMr7D*09(_Fn|NzJ_vj2>|g$f_otmIMV;fGH~<&_r(2CFSK`xTd+QrKO|W zM<;O9&s($?1&Xtrz8e5Q`1UWs$!pM_yu_ck(b5C!DJy}@og7$AEu73OS-l*b|Hc6b zd4XO;2TQOim6wCPqZ`OenED?N(2M+6%|=c2j|1OU~;|#WOa-{kj*VN3(9V|>u{WsBn#=p+f(#z(*nH=5zy{wl7 zvi-HNaj>$p{U`PdROqi3q-Nt~X|FG3xI8uWB-hIFGuRb2ZQ~iWYkdhv@q)6AKH`8KS|N!R3M=vCgL_m#418p%sF|g)Qc9OI*>JJ zQCcr;5_U4oR~O4s>B5Wyw#K2}T`x*N|BV6nyO8d=kdhA<_eHCJDZ)FYWQ(P>#G_zE zy<&Pu&0yI?$>t!VdtU9llTOFN|CXKRsN)9Kid9c`73xMTFjofHW#x?}-%aR_e`T#Wv!w}i zyEmm2+3OH9Oir<2#+ri!sZ@X6Kir)*@D{R}W(dCZ-+BGM(>qwhSf4SqG$RI+|A+tf zl6RAKzMR2jU9X?lc^9pucaaF-A+x&OI>eahk?^_YxNp8-8lz|YPDeE>z z6s3s%DtChg;8*uD!_WY#%$^jdDrkjj111sc+-8hBnsybbyA04$89xUJBCb#PrJ}MX z&`Sr-oNMK@4f4wUt#W-XnhCFgRG$tzN$#6t*G35kmQhT2xpNQyl zgxuQThd&iYq?e#wgAmQ(eDX`;*MYSqn%`n%>47)5jellNxcPoXYXA~ebG)Xr6Pz}1 zCu@Cb3qC$F?z0tQj+qd+owvg%Dc%c@$Ta2pwLSY3>&!NVIsyiDMe(}4ZGrHAP^~Av zklAyMihi*6)xw=HxDdJi;atnO$oP4PMlH>26d`vEkH-MxhoMQ){w8hSp{D;)IUBJ@ zH}Qp*%V&Dh-HNNcHC(TRhP)n^BSJbs5mDJ?tx$(09o589gSfNKZ-Fxt$ppR5vLAHM z^=-%O2bz&|Pa*p&r7V&8g9)N~U}SF#!A*a$H8e%~vCm>|x9T?`6zG#{GFb**e320? z?Wn%#OIs0Z@I=>fj?q*8Jil(!D;WZSh&o8)2;%&NA#C+Q>QnVgXKfHSxBA)hst;+^ zzsTFmzVR%7E9P*)U_C~*dPpsy0eASj)M>)Z!WYb@XYtBE{=t~JeI3Ex!x^h5^aT+! z^h1k_aM@hHDQ6a9lt=^Rd4k!@E-rxMWc5hh^z+c>md}Yb`^oB6BX-ts)~-nTa^9YrIMD1n{)vSQlkHtqM~lh5x4XOq06t4rS1IR_S5#^vcBH>l-)+ijeF#7{|1 zig+y2@ia)wm7|a37jfY2yBjRz+E-GnTD$f#vWGTl$!=yaFUOg&H&OhVIfey&^S*0Y z<$lq}t^x7n;7{FXkz~za;fvb%l0u_Kiu?yt%7C1*dLuLN84*nAM$R7-a_ZguK5k)J6RDhno*oK5!OcefkLY&Qo; zHzbG!r$su$%;jh>3QL-_rJ#t^IEf`te53NtDNd{R;pO4r`B_pC(H#Il3;eqcAHKIy zOJ5`oIGXGZjiPUZW26Gk5b;2V+6D%Ah7jVbnscmj%DE1wo*b?3AY3lXHv3uHc5@$@ zbhf&s;z^O|kr}HGau4p``4>X2F|nKGT?Jux)-oPj!0b;Dg> zfMg@t*q&gO0%NA`C`D=Od4D!* z%5jtrL5QiZX{tHNa(lstBg~6gah{TF;EFPluk6eT+Dxzi#aWJ^)tt5+YZsUtu(Ejs ziyqu$!WIp{WF^e+`&Huh@z6H-$H%_TXf%$%Giv<#U)yRs6c=MXi)Dx3ppDLqe8h{2 zY>=*M0;^O!LX{5@Kel(b936Nut&gM?bsLolX>KhQ`(?ApIX%@P!=8Iu^c+lbG7FS}#UpBFm>dlt0>AC^dkBs! z6sS9eMA9EO6Wf_i8#;3yBQugHu(Pm}RF|x)`yX|lagYe^P0udEcc~y*r^af0th~lA zO$&$|Kiii>&Q6pD#`yvZV0ob*k3NbWhZ_C1NLWWzvcnlS1A>C zr!>@;+d-h`Tjsyu+3M9hJg9oNFXLd>9JGezG`SkaaU{N!+KuOZCbClgu!Jf8b8WGV zka(qDmY5(2suG8K;z=5M5+oPqrK(XquN-DIM>@T>62Af@snY{S6?q%aXwY#GgEw-XoDx_xB4j8rlBl6X}wQ#}|?LtJ1-D|}* zj~y9HX;%C^tx;>z1vBjGD+tQ@X^I{c&l77~V^g2V!cmb%Cnnq*M_>Do98*`!y#vqa zCyx;#WWwscYmd`GQm%Cguo|<56lOMoO{HD6Hep>yE1ocxkG*@Xf5OFXB{0t26{O!~ z#jzX=s~8o?m>cQ)?BZm4vb9NNc zTGJ}O{K6Rgjk{4_M_>^Oq705zM@$nKC5!v%?#!R2bje~K;xdN6{!na_XYPL}kKRAiJQ}X#V%VUy4y+|atxfMU zN!#s4O-uFvis;vU;&O#2K#adD$mmzA6(l)kk;usiFvqdO-5{(~ViHiOs7VP9AFW4* z8sasJNNW&cqWLLfV~&GqeJJUF@4sTF<&l?li{WDEP`YU5+&^^V00cRa zwL#HZt2rGmDFdb%ew_-UlpEdo)7W-lFX`oti6)@kRz%Dp$<+yTN0w2Nnze?!KhQeD zu@O~lZz*P*&Y$_^j*N1Qr#mF^T@7;*XzTj=3@7F4rPX1yx>3>(_}AgXNh`z%U_uDj z`*E!Ol-+?CL`)nCtpzVEOxe&k0!TRhUh4 zrN)gZ9M`~yu5hZvQ{LW-nCyZB%HVkDiW*bDD08u!w>h+P_Hz^y+)W*Q)aGq>+>}K# zAsPynRxiymcrYc&H*0UAxHHEDuH`|V@3t_lAxB@LtPt@>Opt6q{Lyr ztd11jW#{Qx+91(3A+7mc$5sb z9_1J{`=1GZx=nv?&8k{f2(ygZI|y;$my>&Oh6tSg7+WhXK!gSBoHgpgpuL7vt4>K+ z%_ui_3tvz&MmjbDQT2nX?GH=8RDU&w;Jh&J7)zY$>D75!Z(MKLej~;ox(`0FHAnm$ z^9w>s9oPzI#XM%|RtQ5;g45d(^x2NidGyvPQ(BfE5@I+tk3MMCCF3j~pq$s!`w0lq z%7Ux+B2W#5!`;Gem30YeWRD&-`Bid93;9iTPV5OLzOPxtu2kcXeSJ_03tF0ov3i%k zx5N?j6`Z?AzuZ;!L5$D8#6__xHmFJO@h#etFp_Zmj9)n1zG`mU`8lT9ymatkE`OPs zz!6Eor1v&y&X^t)AG-z0CT;k;dlw59wPU7!q-UhZ#6uL4RCJSt00(ME(R16&_D|BZ z1p{ZO!^S#j!)SdGCX`VGI()yRr3)B)X|%JyJJS1op8c>@nA?U7j1(%h5u*eXFUW=F znU&~KMszDZOe59@v|gms1evHr9!0H&WejVt4spMMafqXEim+8N9PYpUJU7o8-E4@9 zX)N2^ruu~!nB~623lV>ZDnELw63YyfQQ!;PaI*(bG--@qCY^wCKiIqHBG`M{E_vi^ zvFSK+Yb8AIUseL*+;L$DS|&j?tc(%*#&r^3qHNy;u;3~f`gb0ZM`PxNVW-l%63l*1 z_5D7Kr-nY^JwY)1KDs#xFBuElS&O|ET|i3Gx2wSj#siN=Fm^ZIp=LAg&Cak$ABeEk zdxwB0{*8kpb?god9VbhjWjE%k$3~{@gmJDW-sVf8mU*gYzy7_K%ypR!7WA&PiKHc%&_Y8wzM}|CYhi%U^16$j5-eewA7)*-`^H z^k&|+N8Tm~T4+z+V2QzwS*3HYtNgT&;3&M?wmA3jd<(|kbc z48UCU2gqWK#Dq+v_9{2+71903!W+W?#$G>HhYp9tC`kp$+&R3ry$(d8$~R^9^!IF- z4VGzT8?$MLzxPvV&?T>8grKhvi@(bC(v!~dPCcpdE>011SD31btS9H2by(nmA@)`c z1wv#O86KP8alP6if5=`5^{{oIK#(Tf^?IFW!5Rxj0=YDXl!xFQ%kT6}vFdN(jye)j z@G^yX$u>y%KiYoJ{(dhulxb^d_Ss&2ZuI;O+e%$1xw%z9%y5)qy0 zd&3F+K&xxze)mI2@Q~%Jml7P literal 0 HcmV?d00001 diff --git a/versioned_docs/version-3.2.1/migration/Button/Screenshot_2021-01-22_at_12.53.09_PM.png b/versioned_docs/version-3.2.1/migration/Button/Screenshot_2021-01-22_at_12.53.09_PM.png new file mode 100644 index 0000000000000000000000000000000000000000..17cf494df3626e48fb0851c0b0324b43a9f5bdf2 GIT binary patch literal 8494 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 literal 0 HcmV?d00001 diff --git a/versioned_docs/version-3.2.1/migration/Card.md b/versioned_docs/version-3.2.1/migration/Card.md new file mode 100644 index 000000000..c9acc1d07 --- /dev/null +++ b/versioned_docs/version-3.2.1/migration/Card.md @@ -0,0 +1,91 @@ +--- +id: card +title: Card +--- + +import Tabs from '@theme/Tabs'; +import TabItem from '@theme/TabItem'; + +With NativeBase v3 we have removed Card components because as it's very simple to create various card layout using primitive components. + +## Code Comparison + + + + +```tsx +import React, { Component } from 'react'; +import { + Container, + Header, + Content, + Card, + CardItem, + Text, + Body, +} from 'native-base'; +export default class CardItemBordered extends Component { + render() { + return ( + +

+ + + + NativeBase + + + + + NativeBase is a free and open source framework that enable + developers to build high-quality mobile apps using React + Native iOS and Android apps with a fusion of ES6. + + + + + GeekyAnts + + + + + ); + } +} +``` + + + + +```tsx +import React from 'react'; +import { VStack, Box, Divider } from 'native-base'; + +export default function () { + return ( + + }> + + NativeBase + + + NativeBase is a free and open source framework that enable developers + to build high-quality mobile apps using React Native iOS and Android + apps with a fusion of ES6. + + + GeekyAnts + + + + ); +} +``` + + + diff --git a/versioned_docs/version-3.2.1/migration/Checkbox.md b/versioned_docs/version-3.2.1/migration/Checkbox.md new file mode 100644 index 000000000..f63647256 --- /dev/null +++ b/versioned_docs/version-3.2.1/migration/Checkbox.md @@ -0,0 +1,54 @@ +--- +id: checkbox +title: Checkbox +--- + +import Tabs from '@theme/Tabs'; +import TabItem from '@theme/TabItem'; + +Migrating [`Checkbox`](checkBox.md) to v3 will provide a lot more **design**, **size**, **color** and **customisation** option. + +## Overview + +Migrating Checkbox components can broadly described in these points: + +- **checked** props is deprecated, instead now we provide you with `defaultIsChecked` and `isChecked` prop to better manage your checkbox. For most cases **checked** can be replaced with `isChecked`. +- Colors of the Checkbox: + In v3 the color is controlled by `colorScheme` prop. And it accepts all the color available in the theme. +- onPress props is deprecated, instead v3 provides onChange which provides a callback when state of the checkbox change. + +## Code Comparison + + + + +![Checkbox/Screenshot_2021-01-22_at_3.09.29_PM.png](Checkbox/Screenshot_2021-01-22_at_3.09.29_PM.png) + +```tsx + + + Finish list Screen + +``` + + + + +![Checkbox/Screenshot_2021-01-22_at_4.34.08_PM.png](Checkbox/Screenshot_2021-01-22_at_4.34.08_PM.png) + +```tsx + +Finish list Screen +// alternative: pressing the text will also trigger onChange + + Finish list Screen + +``` + + + diff --git a/versioned_docs/version-3.2.1/migration/Checkbox/Screenshot_2021-01-22_at_3.09.29_PM.png b/versioned_docs/version-3.2.1/migration/Checkbox/Screenshot_2021-01-22_at_3.09.29_PM.png new file mode 100644 index 0000000000000000000000000000000000000000..121ecaa72899fd19e5270f0ef05545eafc2add0d GIT binary patch literal 10808 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

<0X>;T!R$9~6$gERf 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 De@@vF literal 0 HcmV?d00001 diff --git a/versioned_docs/version-3.2.1/migration/Checkbox/Screenshot_2021-01-22_at_4.34.08_PM.png b/versioned_docs/version-3.2.1/migration/Checkbox/Screenshot_2021-01-22_at_4.34.08_PM.png new file mode 100644 index 0000000000000000000000000000000000000000..ef1c1a20da072291a0e4f16f34ec0f2f6b190f2e GIT binary patch literal 9954 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 literal 0 HcmV?d00001 diff --git a/versioned_docs/version-3.2.1/migration/DatePicker.md b/versioned_docs/version-3.2.1/migration/DatePicker.md new file mode 100644 index 000000000..9d2dcf583 --- /dev/null +++ b/versioned_docs/version-3.2.1/migration/DatePicker.md @@ -0,0 +1,6 @@ +--- +id: date-picker +title: DatePicker +--- + +DatePicker is currently in progress and will be coming soon. Till then you can use React Native's [DateTimePicker](https://github.com/react-native-datetimepicker/datetimepicker). diff --git a/versioned_docs/version-3.2.1/migration/DeckSwiper.md b/versioned_docs/version-3.2.1/migration/DeckSwiper.md new file mode 100644 index 000000000..9fd590f78 --- /dev/null +++ b/versioned_docs/version-3.2.1/migration/DeckSwiper.md @@ -0,0 +1,8 @@ +--- +id: deck-swiper +title: DeckSwiper +--- + +We're still thinking whether we should add a DeckSwiper component, let us know on [discord channel](https://discord.com/invite/TSgCw2UPmb). +Till then you can use [react-native-deck-swiper +](https://www.npmjs.com/package/react-native-deck-swiper). diff --git a/versioned_docs/version-3.2.1/migration/Drawer.md b/versioned_docs/version-3.2.1/migration/Drawer.md new file mode 100644 index 000000000..1c4f74752 --- /dev/null +++ b/versioned_docs/version-3.2.1/migration/Drawer.md @@ -0,0 +1,6 @@ +--- +id: drawer +title: Drawer +--- + +Drawer component is still in progress, until it's done you can check out the recipe of integrating React Navigation's [DrawerNavigation](https://reactnavigation.org/docs/drawer-based-navigation/) in NB. diff --git a/versioned_docs/version-3.2.1/migration/FABs.md b/versioned_docs/version-3.2.1/migration/FABs.md new file mode 100644 index 000000000..7c7e20906 --- /dev/null +++ b/versioned_docs/version-3.2.1/migration/FABs.md @@ -0,0 +1,63 @@ +import Tabs from '@theme/Tabs'; +import TabItem from '@theme/TabItem'; + +Migrating [`FAB`](FAB.md) to v3 will provide a lot more **design**, **size**, **color** and **customisation** option. + +## Overview + +Migrating Badge components can broadly described in these points: + +- Instead of Passing Icon as child, use `icon` prop. + +## Code Comparison + + + + +```tsx +import React, { Component } from 'react'; +import { Container, Header, View, Icon, Fab } from 'native-base'; +export default function () { + return ( + +

+ + + + + + + ); +} +``` + + + + +```tsx +import React from 'react'; +import { Fab, Icon } from 'native-base'; + +export default function () { + return ( + } + /> + ); +} +``` + + + diff --git a/versioned_docs/version-3.2.1/migration/FooterTab.md b/versioned_docs/version-3.2.1/migration/FooterTab.md new file mode 100644 index 000000000..6262a397a --- /dev/null +++ b/versioned_docs/version-3.2.1/migration/FooterTab.md @@ -0,0 +1,6 @@ +--- +id: footer-tab +title: FooterTab +--- + +With NativeBase v3 we have removed FooterTab components because as it's very simple to create using HStack components. You can checkout the [recipe](buildingFooterTabs.md). diff --git a/versioned_docs/version-3.2.1/migration/Form.md b/versioned_docs/version-3.2.1/migration/Form.md new file mode 100644 index 000000000..c7fe61675 --- /dev/null +++ b/versioned_docs/version-3.2.1/migration/Form.md @@ -0,0 +1,72 @@ +--- +id: form +title: Form +--- + +import Tabs from '@theme/Tabs'; +import TabItem from '@theme/TabItem'; + +With NativeBase v3 we have replaced Form with [`FormControl`](formControl.md) and sliced into [`FormControl.Label`](formControl.md#formcontrollabel), [`FormControl.HelperText`](formControl.md#formcontrolhelpertext) and [`FormControl.ErrorMessage`](formControl#formcontrolerrormessage). + +Here an example to show the code comparison. + +## Code Comparison + + + + +```tsx +import React, { Component } from 'react'; +import { Form, Item, Input } from 'native-base'; +export default class FormExample extends Component { + render() { + return ( +
+ + + + + + + + +
+ ); + } +} +// need to re-write +``` + + + + +```tsx +import React from 'react'; +import { Input, Stack, FormControl } from 'native-base'; +export const FormExample = () => { + return ( + + + + Username + + + + Password + + + + + ); +}; + +// v3 version +``` + + + diff --git a/versioned_docs/version-3.2.1/migration/Header.md b/versioned_docs/version-3.2.1/migration/Header.md new file mode 100644 index 000000000..9ec9f0288 --- /dev/null +++ b/versioned_docs/version-3.2.1/migration/Header.md @@ -0,0 +1,6 @@ +--- +id: header +title: Header +--- + +With v3 we have removed the **Header** as it can be easily built using `HStack`. You can checkout its recipe [here](/buildingAppBar). diff --git a/versioned_docs/version-3.2.1/migration/Icon.md b/versioned_docs/version-3.2.1/migration/Icon.md new file mode 100644 index 000000000..cdaba70a0 --- /dev/null +++ b/versioned_docs/version-3.2.1/migration/Icon.md @@ -0,0 +1,80 @@ +--- +id: icon +title: Icon +--- + +import Tabs from '@theme/Tabs'; +import TabItem from '@theme/TabItem'; + +Migrating [`Icon`](icon.md) to v3 will provide a lot more **customisation** option. You can also create custom icons using SVG. + +## Overview + +Migrating Icon components can broadly described in these points: + +- **ios**, **android** and **type** props have been deprecated. +- default Icon type i.e **Ionicons** has been removed, now v3 does not uses any. +- v3 uses a third-party icon library ( such as @expo/vector-icons ), with **as** prop. +- custom colors and size can be added using **color** and **size** props. + +## Code Comparison + + + + +```tsx +import React, { Component } from 'react'; +import { Icon } from 'native-base'; + +export default class IconExample extends Component { + render() { + return ( + <> + + + + + ); + } +} +// need to re-write +``` + + + + +```tsx +import React from 'react'; +import { Platform } from 'react-native'; +import { Icon } from 'native-base'; +import { Ionicons, FontAwesome } from '@expo/vector-icons'; + +export default function () { + return ( + <> + + + + + ); +} + +// v3 version +``` + + + diff --git a/versioned_docs/version-3.2.1/migration/Layout.md b/versioned_docs/version-3.2.1/migration/Layout.md new file mode 100644 index 000000000..40ecc91a0 --- /dev/null +++ b/versioned_docs/version-3.2.1/migration/Layout.md @@ -0,0 +1,77 @@ +--- +id: layout +title: Layout +--- + +import Tabs from '@theme/Tabs'; +import TabItem from '@theme/TabItem'; + +## Grid + +You can easily design layouts with [Row](hStack.md) or [Column](VStack.md) components. + +## List + +With NativeBase v3 we have removed List components because as it's very simple to create various list layout using primitive components. + +### Code Comparison + + + + +```tsx + + + + Simon Mignolet + + + + + + + + Nathaniel Clyne + + + + + + + + Dejan Lovren + + + + + + +``` + + + + +```tsx +} w="90%"> + + Simon Mignolet + + + + Nathaniel Clyne + + + + Dejan Lovren + + + +``` + + + diff --git a/versioned_docs/version-3.2.1/migration/List.md b/versioned_docs/version-3.2.1/migration/List.md new file mode 100644 index 000000000..e69de29bb diff --git a/versioned_docs/version-3.2.1/migration/Picker.md b/versioned_docs/version-3.2.1/migration/Picker.md new file mode 100644 index 000000000..87dbb6037 --- /dev/null +++ b/versioned_docs/version-3.2.1/migration/Picker.md @@ -0,0 +1,91 @@ +--- +id: picker +title: Picker +--- + +import Tabs from '@theme/Tabs'; +import TabItem from '@theme/TabItem'; + +With v3 we have replaced the **Picker** with [`Select`](select.md). + +## Code Comparison + + + + +```tsx +import React, { Component } from 'react'; +import { Container, Header, Content, Picker, Form } from 'native-base'; + +export default class PickerExample extends Component { + constructor(props) { + super(props); + this.state = { + selected: 'key1', + }; + } + onValueChange(value: string) { + this.setState({ + selected: value, + }); + } + render() { + return ( + +
+ +
+ + + + + + + +
+ + + ); + } +} +``` + + + + +```tsx +import React from 'react'; +import { Icon, Select } from 'native-base'; + +export default function () { + let [language, setLanguage] = React.useState('key0'); + return ( + + ); +} +``` + + + diff --git a/versioned_docs/version-3.2.1/migration/Radio Button.md b/versioned_docs/version-3.2.1/migration/Radio Button.md new file mode 100644 index 000000000..a2ccedd08 --- /dev/null +++ b/versioned_docs/version-3.2.1/migration/Radio Button.md @@ -0,0 +1,95 @@ +--- +id: radio-button +title: Radio Button +--- + +import Tabs from '@theme/Tabs'; +import TabItem from '@theme/TabItem'; + +Migrating [`Radio`](radio.md) to v3 will provide a lot more **design**, **size**, **color** and **customisation** option. + +## Overview + +Migrating Radio components can broadly described in these points: + +- In v3 `Radio` can only used along with `Radio.Group`. +- **selected** is deprecated, instead v3 provides with **value** prop in `Radio.Group`. +- Colors of the Radio: + **color** and **selectedColor** props are deprecated, instead now in v3 **color** is controlled by `colorScheme` prop, and it accepts all the color available in the theme. +- **onPress** prop is deprecated, instead v3 provides **onChange** which provides a callback when state of the checkbox change. + +## Code Comparison + + + + +```tsx +import React, { Component } from 'react'; +import { ListItem, Container, Content, Header, Text, Radio } from 'native-base'; +export default class RadioButtonExample extends Component { + constructor() { + super(); + this.state = { + itemSelected: '', + }; + } + render() { + return ( + +
+ + + this.setState({ itemSelected: 'one' })} + selected={this.state.itemSelected == 'one'} + /> + One + + + this.setState({ itemSelected: 'two' })} + selected={this.state.itemSelected == 'two'} + /> + Two + + + + ); + } +} +``` + + + + +```tsx +import React from 'react'; +import { Radio } from 'native-base'; +export default function () { + const [value, setValue] = React.useState('one'); + return ( + { + setValue(nextValue); + }} + > + + One + + + Two + + + ); +} +``` + + + diff --git a/versioned_docs/version-3.2.1/migration/Searchbar.md b/versioned_docs/version-3.2.1/migration/Searchbar.md new file mode 100644 index 000000000..3f02a608a --- /dev/null +++ b/versioned_docs/version-3.2.1/migration/Searchbar.md @@ -0,0 +1,6 @@ +--- +id: search-bar +title: Search Bar +--- + +With NativeBase v3 we have removed **Searchbar** components because as it's very simple to create using `Input` components. To view some examples for seachbars, checkout the [searchbar recipe](buildingSearchBar.md). diff --git a/versioned_docs/version-3.2.1/migration/Segment.md b/versioned_docs/version-3.2.1/migration/Segment.md new file mode 100644 index 000000000..1f80beece --- /dev/null +++ b/versioned_docs/version-3.2.1/migration/Segment.md @@ -0,0 +1,7 @@ +--- +id: segment +title: Segment +--- + +With NativeBase v3 we have removed the **Segment** component because it's more like a Tab component. You can check out the Tab recipe +[here](buildingTabView.md). diff --git a/versioned_docs/version-3.2.1/migration/Spinner.md b/versioned_docs/version-3.2.1/migration/Spinner.md new file mode 100644 index 000000000..a4f8f160d --- /dev/null +++ b/versioned_docs/version-3.2.1/migration/Spinner.md @@ -0,0 +1,47 @@ +--- +id: spinner +title: Spinner +--- + +import Tabs from '@theme/Tabs'; +import TabItem from '@theme/TabItem'; + +Migrating [`Spinner`](spinner.md) to v3 will provide a lot more **size**, **color** and **customisation** option. + +## Overview + +Migrating Spinner components can broadly described in these points: + +- Get 2 size options, namely **sm/small** and **lg/large** or pass a number as a **size** prop. +- In v3 the color are provided by theme, so the shade for the color should be passed along with the color name. + +## Code Comparison + + + + +```tsx + + + + +``` + + + + +```tsx + + + + + +``` + + + diff --git a/versioned_docs/version-3.2.1/migration/SwipeList.md b/versioned_docs/version-3.2.1/migration/SwipeList.md new file mode 100644 index 000000000..7f7b0f37b --- /dev/null +++ b/versioned_docs/version-3.2.1/migration/SwipeList.md @@ -0,0 +1,6 @@ +--- +id: swipe-list +title: SwipeList +--- + +With NativeBase v3 we have removed **SwipeList** component. To view example for SwipeList built using [react-native-swipe-list](https://www.npmjs.com/package/react-native-swipe-list-view) in NB, checkout this [recipe](buildingSwipeList.md). diff --git a/versioned_docs/version-3.2.1/migration/Tabs.md b/versioned_docs/version-3.2.1/migration/Tabs.md new file mode 100644 index 000000000..bcbe293cd --- /dev/null +++ b/versioned_docs/version-3.2.1/migration/Tabs.md @@ -0,0 +1,67 @@ +--- +id: tabs +title: Tabs +--- + +import Tabs from '@theme/Tabs'; +import TabItem from '@theme/TabItem'; + +API for Tabs is in progress, in the meantine you can check this [recipe](buildingTabView.md) for building Tabs. + + diff --git a/versioned_docs/version-3.2.1/migration/Thumbnail.md b/versioned_docs/version-3.2.1/migration/Thumbnail.md new file mode 100644 index 000000000..2f8e46907 --- /dev/null +++ b/versioned_docs/version-3.2.1/migration/Thumbnail.md @@ -0,0 +1,73 @@ +--- +id: thumbnail +title: Thumbnail +--- + +import Tabs from '@theme/Tabs'; +import TabItem from '@theme/TabItem'; + +With v3 we have replaced the **Thumbnail** with [`Image`](image.md). And we also provide [`Avatar`](avatar.md) as well. + +## Code Comparison + + + + +```tsx +import React, { Component } from 'react'; +import { Container, Header, Content, Thumbnail, Text } from 'native-base'; +export default class ThumbnailExample extends Component { + render() { + const uri = + 'https://facebook.github.io/react-native/docs/assets/favicon.png'; + return ( + +
+ + Square Thumbnail + + + + Circular Thumbnail + + + + + + ); + } +} +``` + + + + +```tsx +import React from 'react'; +import { Avatar, VStack, Text, Image } from 'native-base'; + +export default function () { + const uri = 'https://facebook.github.io/react-native/docs/assets/favicon.png'; + + return ( + + Square Thumbnail + react-native + react-native + react-native + Circular Thumbnail + + + + + ); +} +``` + + + diff --git a/versioned_docs/version-3.2.1/migration/Toast.md b/versioned_docs/version-3.2.1/migration/Toast.md new file mode 100644 index 000000000..3c1aec5ac --- /dev/null +++ b/versioned_docs/version-3.2.1/migration/Toast.md @@ -0,0 +1,84 @@ +--- +id: toast +title: Toast +--- + +import Tabs from '@theme/Tabs'; +import TabItem from '@theme/TabItem'; + +In v3, [`Toast`](toast.md) can be created using **useToast** hook + +## Overview + +Migrating Toast components can broadly described in these points: + +- **buttonText** is no longer supported. +- **type** (prop) → **status** prop. +- **position** (prop) → **placement** prop. + +## Code Comparison + + + + +```tsx +import React, { Component } from 'react'; +import { Container, Header, Content, Toast, Button, Text } from 'native-base'; + +export default class ToastExample extends Component { + render() { + return ( + +
+ + + + + ); + } +} +``` + + + + +```tsx +import React from 'react'; +import { Button, useToast } from 'native-base'; + +export default function () { + const toast = useToast(); + + return ( + + ); +} +``` + + + diff --git a/versioned_docs/version-3.2.1/migration/Typography.md b/versioned_docs/version-3.2.1/migration/Typography.md new file mode 100644 index 000000000..3f5f0e662 --- /dev/null +++ b/versioned_docs/version-3.2.1/migration/Typography.md @@ -0,0 +1,39 @@ +--- +id: typography +title: Typography +--- + +import Tabs from '@theme/Tabs'; +import TabItem from '@theme/TabItem'; + +**H1**, **H2** and **H3** all have been replaced with [`Heading`](heading.md) component. + +## Code Comparison + + + + +```tsx +

Header One

+

Header Two

+

Header Three

+Default +``` + + + + +```tsx +Header One +Header Two +Header Three +Default +``` + + + diff --git a/versioned_docs/version-3.2.1/migration/v3.md b/versioned_docs/version-3.2.1/migration/v3.md new file mode 100644 index 000000000..ced3b4587 --- /dev/null +++ b/versioned_docs/version-3.2.1/migration/v3.md @@ -0,0 +1,19 @@ +--- +id: migration-guide-three +title: Upgrading to v3 +--- + +`v3` comes with a lot of changes in philosophy as well as the API. We have re-imagined how we should code for React Native as well as web. Keeping this in mind, you might face a lot of changes from v2 to v3. This might be a bit of tedious work but we promise you, it will be worth it! + +If you are looking to upgrade NativeBase from `v2` to `v3` in your application, we recommend looking into the following sections first: + +- [Introduction](../) +- [Core Concepts](../utility-first.mdx) +- [Features](../utilityProps.md) +- [Themes](../default-theme.md) + +This will allow you to leverage `v3` to the fullest. We have further divided the migration guide into different components, so that it's easier to search for a specific one. + +We hope that `v3` is able to fulfill all the expectations set by it's predecessor and makes the overall UX and DX of your application better. + +Happy Coding! diff --git a/versioned_docs/version-3.2.1/migration/v3xtov32.md b/versioned_docs/version-3.2.1/migration/v3xtov32.md new file mode 100644 index 000000000..d15108d16 --- /dev/null +++ b/versioned_docs/version-3.2.1/migration/v3xtov32.md @@ -0,0 +1,71 @@ +--- +id: migration-guide-three-point-two +title: Upgrading to 3.2.0 from 3.x +--- + +As we continue to improve NativeBase v3 we got a lot of feature requests and we also revamped our theme to make it more consistent, easy to understand, optimized and promote good practices while writing code. + +To do that we had to make some changes to our theme in `v3.2.0`. These are breaking changes if you are using some of the tokens in your project. To make it easy for you to upgrade, we are providing three options: + +## Extend previous version's theme for backward compatibility + +You need to add `v3CompatibleTheme` to your `NativeBaseProvider` which preserves all the old token that were changed or removed in v3.2.0. + +```jsx +import { NativeBaseProvider, extendTheme, v3CompatibleTheme } from "native-base"; + +// ... +const yourCustomTheme = { + // ... +} + + + +``` + +## Handling breaking changes + +Below is a rough account of the breaking API changes as well as the minimal change to migrate + + +### Alert: + +* Removed `Alert.Title`. Use `Text` component instead. +* Removed `Alert.Description`. Use `Text` component instead. + +### Divider: + +* Removed `size`. Use `thickness` prop instead. + + +## Note: + +We have introduced [strict mode](../strict-mode.md) in `v3.2.0` which is `off` by default. If you don't want to have strict mode, step 1 is enough. If you want to comply with the strict mode, you also need to do these: + + 1. All utility props which take theme tokens as values, now take only string values as a valid type + + This means that if you pass a number value which is supposed to be a theme token, into a utility prop, then it will be treated as invalid and based on you strict mode config will show you an error or a warning. + + ```js + // Incorrect Way to pass theme tokens to utility props + ❌ + + ``` + + ```js + // Correct Way to pass theme tokens to utility props + ✅ + ``` + + 2. Remove all non token values given to utility props which accept theme tokens. For example, `p="11"` is not supported with the [default theme](../default-theme.md). Pick up another value from default theme tokens or [define a new one yourself](../customizingTheme.md). + 3. If you are using [Icon](../icon.md) with `as` prop, verify this + ```jsx + /* correct */ + + /* incorrect */ + } /> + /* incorrect */ + } name="md-checkmark-circle" /> + \ No newline at end of file diff --git a/versioned_docs/version-3.2.1/modal.md b/versioned_docs/version-3.2.1/modal.md new file mode 100644 index 000000000..f4a013563 --- /dev/null +++ b/versioned_docs/version-3.2.1/modal.md @@ -0,0 +1,104 @@ +--- +id: modal +title: Modal +--- + +import { ComponentTheme } from '../src/components'; + +A Modal is a window overlaid on either the primary window or another dialog window. Content behind a modal dialog is **inert**, meaning that users cannot interact with it. + +## Import + +NativeBase exports Modal Compound component: + +- `Modal`: The wrapper that provides context for its children. +- `Modal.Content`: The container for the modal dialog's content. +- `Modal.Header`: The header that labels the modal dialog. +- `Modal.Footer`: The footer that houses the modal actions. +- `Modal.Body`: The wrapper that houses the modal's main content. +- `Modal.CloseButton`: The button that closes the modal. + +```jsx +import { Modal } from 'native-base'; +``` + +## Examples + +### Basic + +```ComponentSnackPlayer path=composites,Modal,Basic.tsx + +``` + +### Multiple Modals + +```ComponentSnackPlayer path=composites,Modal,MultipleModal.tsx + +``` + +### Modal Sizes + +You can pass `size` prop to NativeBase Modal , it can take `sm`, `md`, `lg`, `full` that maps to **60%**, **75%**, **90%**, **100%**, or a string or a numerical width of the Modal. + +```ComponentSnackPlayer path=composites,Modal,Size.tsx + +``` + +### intialFocusRef and finalFocusRef Example + +```ComponentSnackPlayer path=composites,Modal,ModalRefEg.tsx + +``` + +### Modal with avoidKeyboard + +```ComponentSnackPlayer path=composites,Modal,ModalWithAvoidKeyboard.tsx + +``` + +### Modal Placement + +```ComponentSnackPlayer path=composites,Modal,ModalPlacement.tsx + +``` + +### Custom Backdrop Modal + +```ComponentSnackPlayer path=composites,Modal,CustomBackdrop.tsx + +``` + +
+ +:::tip Development Tip +If you want a specifically aligned Modal, pass `justifyContent` and `alignItems` to Modal. +::: + +## Accessibility + +Uses React Native ARIA [@react-native-aria/focus](https://react-native-aria.geekyants.com/docs/FocusScope) which follows the [Dialog Modal WAI-ARIA design pattern](https://www.w3.org/TR/wai-aria-practices-1.2/#dialog_modal). + +### Keyboard Interactions + +| Key | Description | +| --------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| `Tab` | Moves focus to the next tabbable element inside the dialog. If focus is on the last tabbable element inside the dialog, moves focus to the first tabbable element inside the dialog. | +| `Shift` + `Tab` | Moves focus to the previous tabbable element inside the dialog. If focus is on the first tabbable element inside the dialog, moves focus to the last tabbable element inside the dialog. | +| `Escape` | Closes the dialog | + +## Props + +### Modal + +```ComponentPropTable path=composites,Modal,Modal.tsx + +``` + +### Children components + +- `Modal.Header`, `Modal.Footer` and `Modal.Body` composes the [`Box`](box.md) component. +- `Modal.CloseButton` composes the [`Button`](button.md). + +## Styling + + diff --git a/versioned_docs/version-3.2.1/more-props.md b/versioned_docs/version-3.2.1/more-props.md new file mode 100644 index 000000000..935c792be --- /dev/null +++ b/versioned_docs/version-3.2.1/more-props.md @@ -0,0 +1,13 @@ +--- +id: more-props +title: More props +--- + +### ILinearGradientProps + +| Name | Type | Description | Default | +| -------- | ---------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------ | ------- | +| colors | `Array` | An array of colors that represent stops in the gradient. | - | +| start | `Array` | This means that the gradient will start from first value from the left and second value from the top. Array can contain numbers ranging from 0 to 1. | | +| end | `Array` | This means that the gradient will end at first value from the left and at second value from the bottom. Array can contain numbers ranging from 0 to 1. | | +| location | `Array ` | Each number indicates a color-stop location where each respective color should be located. Array can contain numbers ranging from 0 to 1. | | diff --git a/versioned_docs/version-3.2.1/nativebase-factory.md b/versioned_docs/version-3.2.1/nativebase-factory.md new file mode 100644 index 000000000..242f0bdae --- /dev/null +++ b/versioned_docs/version-3.2.1/nativebase-factory.md @@ -0,0 +1,155 @@ +--- +id: nativebase-factory +title: NativeBase Factory +--- + +NativeBase factory is a function that converts non-nativebase components to nativebase enabled components so you can pass style props to them. + +```jsx +import { Factory } from 'native-base'; +``` + +## Usage + +```SnackPlayer name=NativeBase%20Factory%20Usage +import React from 'react'; +import { Factory, NativeBaseProvider, Center } from 'native-base'; +import { View } from 'react-native'; + +function FactoryViewExample () { + const FactoryView = Factory(View); + return ( + + ); +} + +// Example template which wraps component with NativeBaseProvider +export default function () { + return ( + +
+ +
+ + ); +} +``` + +## Defining component theme + +```SnackPlayer name=NativeBase%20Factory%20Component%20Theme +import React from 'react'; +import { Factory, NativeBaseProvider, Center } from 'native-base'; +import { View } from 'react-native'; + +function FactoryViewExample () { + const FactoryView = Factory(View, { + baseStyle: { + bg: 'cyan.300', + borderRadius: 'md', + }, + }); + return ; +} + +// Example template which wraps component with NativeBaseProvider +export default function () { + return ( + +
+ +
+ + ); +} +``` + +## Using mode in component theme + +```SnackPlayer name=NativeBase%20Factory%20Component%20Theme +import React from 'react'; +import { Factory, themeTools, NativeBaseProvider, Center } from 'native-base'; +import { View } from 'react-native'; + +function FactoryViewModeExample () { + const FactoryView = Factory(View, { + baseStyle: (props) => { + return { + bg: themeTools.mode('rose.500', 'cyan.300')(props), + borderRadius: 'md', + }; + }, + }); + return ; +} + +// Example template which wraps component with NativeBaseProvider +export default function () { + return ( + +
+ +
+ + ); +} +``` + +## Using ref + +```SnackPlayer name=NativeBase%20Factory%20Using%20Ref +import React from 'react'; +import { + Factory, + Button, + Stack, + NativeBaseProvider, + Center, +} from 'native-base'; +import { TextInput } from 'react-native'; + +function FactoryViewRefExample() { + const NBInput = Factory(TextInput); + const inputRef = React.useRef(null); + return ( + + + + + ); +} + +// Example template which wraps component with NativeBaseProvider +export default function () { + return ( + +
+ +
+ + ); +} + +``` + +## Params + +| Name | Type | Description | Default | +| -------------- | --------------- | ----------------------------------------------------------------------------- | ------- | +| component | React component | Original component to be passed on which nativebase props have to be applied. | - | +| componentTheme | Object | This object can include `baseStyle`, `sizes`, `variants`, `defaultProps` | - | diff --git a/versioned_docs/version-3.2.1/popOver.md b/versioned_docs/version-3.2.1/popOver.md new file mode 100644 index 000000000..4ee92bdd4 --- /dev/null +++ b/versioned_docs/version-3.2.1/popOver.md @@ -0,0 +1,94 @@ +--- +id: popover +title: Popover +--- + +import { ComponentTheme } from '../src/components'; + +`Popover` is a non-modal dialog that floats around a trigger. It's used to display contextual information to the user, and should be paired with a pressable trigger element. + +## Import + +- `Popover`: The wrapper that provides props, state, and context to its children. +- `Popover.Arrow`: The popover arrow. +- `Popover.Body`: The body of the popover. +- `Popover.Content`: The popover itself. +- `Popover.CloseButton`: A button to close the popover. +- `Popover.Header`: The header of the popover. +- `Popover.Trigger`: Used to wrap the reference (or trigger) element. + +```jsx +import { Popover } from 'native-base'; +``` + +## Examples + +### Basic + +```ComponentSnackPlayer path=composites,Popover,Basic.tsx + +``` + +### initialFocusRef + +```ComponentSnackPlayer path=composites,Popover,RefEg.tsx + +``` + +### Positions + +```ComponentSnackPlayer path=composites,Popover,PopoverPositions.tsx + +``` + +:::tip Development Tip +You can pass custom backgroundColor using `bg` or `backgroundColor`, `borderColor` and `borderWidth` to Popover.Content. +::: + +## Props + +```ComponentPropTable path=composites,Popover,Popover.tsx + +``` + +### Popover.Arrow + +`Popover.Arrow` composes the [`Box`](box.md) component. + +### Popover.Content + +`Popover.Content` composes the [`Box`](box.md) component. + +### Popover.Header + +`Popover.Header` composes the [`Box`](box.md) component. + +### Popover.Footer + +`Popover.Footer` composes the [`Box`](box.md) component. + +### Popover.Body + +`Popover.Body` composes the [`Box`](box.md) component. + +### Popover.CloseButton  + +`Popover.CloseButton` composes the [`Button`](button.md) component. + +## Styling + + + +## Accessibility + +Adheres to the [Dialog WAI-ARIA design pattern.](https://www.w3.org/TR/wai-aria-practices-1.2/#dialog_modal) + +### Keyboard Interactions + +| Name | Description | +| ----------- | ------------------------------------------------------ | +| Space | Opens/closes the popover. | +| Enter | Opens/closes the popover. | +| Tab | Moves focus to the next focusable element. | +| Shift + Tab | Moves focus to the previous focusable element. | +| Esc | Closes the popover and moves focus to Popover.Trigger. | diff --git a/versioned_docs/version-3.2.1/presence-transition.md b/versioned_docs/version-3.2.1/presence-transition.md new file mode 100644 index 000000000..2e725036a --- /dev/null +++ b/versioned_docs/version-3.2.1/presence-transition.md @@ -0,0 +1,63 @@ +--- +id: presence-transition +title: PresenceTransition +--- + +PresenceTransition provides a declarative API to add entry and exit transitions. + +### Fade + +```ComponentSnackPlayer path=composites,Transitions,Fade.tsx + +``` + +### ScaleFade + +```ComponentSnackPlayer path=composites,Transitions,ScaleFade.tsx + +``` + +## Props + +```ComponentPropTable path=composites,Transitions,PresenceTransition.tsx showStylingProps=true + +``` + +### ISupportedTransitions + +```js +interface ISupportedTransitions { + opacity?: number; + translateY?: number; + translateX?: number; + scale?: number; + scaleX?: number; + scaleY?: number; + rotate?: string; +} +``` + +### ITransitionStyleProps + +```js +interface ITransitionStyleProps extends ISupportedTransitions { + transition?: { + type?: 'timing' | 'spring', + easing?: (value: number) => number, + overshootClamping?: boolean, + restDisplacementThreshold?: number, + restSpeedThreshold?: number, + velocity?: number | { x: number, y: number }, + bounciness?: number, + speed?: number, + tension?: number, + friction?: number, + stiffness?: number, + mass?: number, + damping?: number, + delay?: number, + duration?: number, + useNativeDriver?: boolean, + }; +} +``` diff --git a/versioned_docs/version-3.2.1/pressable.md b/versioned_docs/version-3.2.1/pressable.md new file mode 100644 index 000000000..4f37c810d --- /dev/null +++ b/versioned_docs/version-3.2.1/pressable.md @@ -0,0 +1,32 @@ +--- +id: pressable +title: Pressable +--- + +Pressable is a lower level primitive if you need more flexibility than a button and access to hover, pressed and focus events. + +## Examples + +### Basic + +Pressable accepts most of the utility style system props. + +```ComponentSnackPlayer path=primitives,Pressable,Basic.tsx + +``` + +### Accessing events (hover, focus and pressed) + +Pressable accepts a render prop children, which receives isHovered, isFocused and isPressed props. + +```ComponentSnackPlayer path=primitives,Pressable,Events.tsx + +``` + +## Props + +### Pressable + +```ComponentPropTable path=primitives,Pressable,Pressable.tsx showStylingProps=true + +``` diff --git a/versioned_docs/version-3.2.1/progress.md b/versioned_docs/version-3.2.1/progress.md new file mode 100644 index 000000000..c6eabd361 --- /dev/null +++ b/versioned_docs/version-3.2.1/progress.md @@ -0,0 +1,62 @@ +--- +id: progress +title: Progress +--- + +import { ComponentTheme } from '../src/components'; + +`Progress` is used to display the progress status for a task that takes a long time or consists of several steps. + +## Import + +```jsx +import { Progress } from 'native-base'; +``` + +## Examples + +### Basic + +```ComponentSnackPlayer path=composites,Progress,Basic.tsx + +``` + +### Progress colorScheme + +```ComponentSnackPlayer path=composites,Progress,ColorScheme.tsx + +``` + +### Sizes + +```ComponentSnackPlayer path=composites,Progress,Sizes.tsx + +``` + +### Flat Progress + +```ComponentSnackPlayer path=composites,Progress,Flat.tsx + +``` + +### Custom Track Color + +```ComponentSnackPlayer path=composites,Progress,CustomBgColor.tsx + +``` + +## Props + +```ComponentPropTable path=composites,Progress,index.tsx + +``` + +## Styling + + + +## Accessibility + +- Adheres to the `progressbar` [role requirements.](https://www.w3.org/TR/wai-aria-1.2/#progressbar) +- On web, `aria-valuenow`, `aria-valuemin` and `aria-valuemax` to ensure the progress percent is visible to screen readers. +- On mobile, [accessibilityValue](https://reactnative.dev/docs/accessibility#accessibilityvalue) is used to ensure it's announced by Talkback and VoiceOver. diff --git a/versioned_docs/version-3.2.1/pseudoProps.md b/versioned_docs/version-3.2.1/pseudoProps.md new file mode 100644 index 000000000..a28fb89cc --- /dev/null +++ b/versioned_docs/version-3.2.1/pseudoProps.md @@ -0,0 +1,86 @@ +--- +id: pseudo-props-101 +title: Pseudo Props 101 +--- + +Before getting into details of all the common Pseudo Props NativeBase has to offer let's check some key points that these pseudo props follow. + +## Nesting pseudo props: + +In versions before 3.2.0 there was a set order in which pseudo props can be nested, but it had a some learning curve so we have simplified it. Pseudo props can now be nested in any combination with one small thing to keep in mind. + +Example: So assume you want to change the text color of a button on its hover state. + +### Do's + +```jsx + +``` + +### Dont's + +```jsx + +``` + +The above thing translates to a Text(not Button) when hovered changes its color to `secondary.400` . + +## Precedence Order for Pseudo Props: + +Now all the pseudo props follow a specific order that defines which pseudo prop can override the other pseudo prop. You can find the precedence values associated with each pseudo prop. Higher number means higher precedence. + +```jsx +_disabled(100); + +_pressed(70); +_hover(60); +_focus(50); +_focusVisible(55); + +_active(30); +_checked(30); +_readOnly(40); +_invalid(40); + +_web(10); +_android(10); +_ios(10); + +_light(10); +_dark(10); +``` + +```SnackPlayer name=Pseudo%20Props%20Precedence +import React from 'react'; +import { Button, NativeBaseProvider, Center } from 'native-base'; + +function Component() { + return ( + // Here you can see _hover will be overrided by _pressed + + ); +} +export default function () { + return ( + +
+ +
+ + ); +} +``` diff --git a/versioned_docs/version-3.2.1/radio.md b/versioned_docs/version-3.2.1/radio.md new file mode 100644 index 000000000..04da350e5 --- /dev/null +++ b/versioned_docs/version-3.2.1/radio.md @@ -0,0 +1,97 @@ +--- +id: radio +title: Radio +--- + +import { ComponentTheme } from '../src/components'; + +`Radio` is used when only one choice may be selected in a series of options. + +## Examples + +### Controlled + +```ComponentSnackPlayer path=primitives,Radio,controlledRadio.tsx + +``` + +### Uncontrolled + +```ComponentSnackPlayer path=primitives,Radio,uncontrolledRadio.tsx + +``` + +### Disabled + +```ComponentSnackPlayer path=primitives,Radio,disabled.tsx + +``` + +### Invalid + +```ComponentSnackPlayer path=primitives,Radio,invalid.tsx + +``` + +### Size + +```ComponentSnackPlayer path=primitives,Radio,size.tsx + +``` + +### Custom Color + +```ComponentSnackPlayer path=primitives,Radio,customColor.tsx + +``` + +### Custom Icon + +```ComponentSnackPlayer path=primitives,Radio,customIcon.tsx + +``` + +### Form Controlled + +```ComponentSnackPlayer path=primitives,Radio,formControlled.tsx + +``` + +### Basic (With Ref) + +```ComponentSnackPlayer path=primitives,Radio,withRef.tsx + +``` + +## Props + +### Radio + +```ComponentPropTable path=primitives,Radio,Radio.tsx + +``` + +### Radio Group + +```ComponentPropTable path=primitives,Radio,RadioGroup.tsx + +``` + +## Accessibility + +Uses React Native ARIA [@react-native-aria/radio](https://react-native-aria.geekyants.com/docs/useRadioGroup) which follows the [Radio Group WAI-ARIA design pattern](https://www.w3.org/TR/wai-aria-practices-1.2/#radiobutton). + +### Keyboard Interactions + +| Key | Description | +| ------------ | ---------------------------------------------------------------------------------- | +| `Tab` | Moves focus to either the checked radio item or the first radio item in the group. | +| `Space` | When focus is on an unchecked radio item, checks it. | +| `ArrowDown` | Moves focus to the next radio item in the group. | +| `ArrowRight` | Moves focus to the next radio item in the group. | +| `ArrowUp` | Moves focus to the previous radio item in the group. | +| `ArrowLeft` | Moves focus to the previous radio item in the group. | + +## Styling + + diff --git a/versioned_docs/version-3.2.1/responsive.md b/versioned_docs/version-3.2.1/responsive.md new file mode 100644 index 000000000..aa66b499a --- /dev/null +++ b/versioned_docs/version-3.2.1/responsive.md @@ -0,0 +1,173 @@ +--- +id: responsive-style +title: Responsive +--- + +NativeBase v3 supports responsive styles out of the box. Instead of manually adding responsiveness to your apps, NativeBase v3 allows you provide object and array values to add responsive styles. + +Responsive syntax relies on the breakpoints defined in the theme object. + +```jsx +const breakpoints = { + base: 0, + sm: 480, + md: 768, + lg: 992, + xl: 1280, +}; +``` + +To make styles responsive, you can use either the array or object syntax. + +## The Array syntax + +All style props that arrays as values for responsive styles. + +For Example to make a `Box` width or w responsive using the array syntax, here's what you need to do: + +```SnackPlayer name=Responsive%20Usage +import React from 'react'; +import { NativeBaseProvider, Center } from 'native-base'; +function BreakpointExample () { + return ( +
+ This is a box +
+ ); +}; + +// Example template which wraps component with NativeBaseProvider +export default function () { + return ( + +
+ +
+ + ); +} +``` + +## The Object syntax + +You can also define responsive values with breakpoint aliases in an object. Any undefined alias key will define the base, non-responsive value. + +For Example to make a `Text` fontSize responsive using the object syntax, here's what you need to do: + +```SnackPlayer name=Responsive%20ObjectSyntax +import React from 'react'; +import { Text, NativeBaseProvider, Center } from 'native-base'; +function BreakpointExample () { + return ( + + This is responsive text + + ); +}; + +// Example template which wraps component with NativeBaseProvider +export default function () { + return ( + +
+ +
+ + ); +} +``` + +## Demo + +Here's a simple example of a component that uses a stacked layout on small screens, and a side-by-side layout on larger screens. + +```SnackPlayer name=Responsive%20Demo +import React from 'react'; +import { + useToken, + NativeBaseProvider, + Center, + Text, + Box, + HStack, + Image, + Stack, + Heading, +} from 'native-base'; + +function Example() { + return ( + + + image +
+ PHOTOS +
+ + + + + The Garden City + + + The Silicon Valley of India. + + + + Bengaluru (also called Bangalore) is the center of India's high-tech + industry. The city is also known for its parks and nightlife. + + + + + 6 mins ago + + + + + + ); +} + +// Example template which wraps component with NativeBaseProvider +export default function () { + return ( + +
+ +
+ + ); +} + + +``` diff --git a/versioned_docs/version-3.2.1/safe-area-view-props.md b/versioned_docs/version-3.2.1/safe-area-view-props.md new file mode 100644 index 000000000..a1b0deda8 --- /dev/null +++ b/versioned_docs/version-3.2.1/safe-area-view-props.md @@ -0,0 +1,99 @@ +--- +id: safe-area-view-props +title: SafeAreaView Props +--- + +To make your components respect the [SafeAreaView](https://reactnative.dev/docs/safeareaview) of the device, we have provided some props that you can use with Box component. They apply a safe padding to your component in the parts decided by the passed props. These props accept either a boolean or a number. If boolean is passed then component takes flexible inset and adjusts its children according to the the device. If a number is passed then it provides a fixed inset in the chosen direction. + +- `safeArea`: Apply safe padding to all edges. +- `safeAreaX`: Apply safe padding to x direction. +- `safeAreaY`: Apply safe padding to y direction. +- `safeAreaTop`: Apply safe padding to top. +- `safeAreaBottom`: Apply safe padding to bottom. +- `safeAreaLeft`: Apply safe padding to left. +- `safeAreaRight`: Apply safe padding to right. + +Internally, NativeBase uses [useSafeAreaInsets](https://docs.expo.io/versions/latest/sdk/safe-area-context/#hooks) hook of [react-native-safe-area-context](https://github.com/th3rdwave/react-native-safe-area-context). + +:::info +SafeAreaView props can only be applied on [Box](box.md) as of now. To make you App SafeArea safe, just wrap your app with a Box and pass safeArea props to it. +::: + +## Examples + +### Flexible SafeArea + +```SnackPlayer name=SafeAreaView%20Boolean +import React from 'react'; +import { NativeBaseProvider, Box, Text } from 'native-base'; +function MyComponent() { + return ( + // This would look different on devices with different insets + + NativeBase + + ); +} + +// Example template which wraps component with NativeBaseProvider +export default function () { + return ( + + + + ); +} +``` + +### Fixed SafeArea + +```SnackPlayer name=SafeAreaView%20Boolean +import React from 'react'; +import { NativeBaseProvider, Box, Text } from 'native-base'; +function MyComponent() { + return ( + // This would look same on all devices + + NativeBase + + ); +} + +// Example template which wraps component with NativeBaseProvider +export default function () { + return ( + + + + ); +} + +``` + +### Using Hook + +If you want to add the SafeAreaView props to other components, you can use the hook. Since, `SafeAreaView` props add relevant padding to the components, you will need to pass the padding manually that you are applying to the component for it to return the SafeArea adjusted padding. + +```SnackPlayer name=SafeAreaView%20Boolean +import React from 'react'; +import { NativeBaseProvider, Box, Text, useSafeArea } from 'native-base'; +function MyComponent() { + const safeAreaProps = useSafeArea({ safeAreaTop: true, pt: 2 }); + return ( + // This would look same on all devices + + NativeBase + + ); +} + +// Example template which wraps component with NativeBaseProvider +export default function () { + return ( + + + + ); +} + +``` diff --git a/versioned_docs/version-3.2.1/scrollview.md b/versioned_docs/version-3.2.1/scrollview.md new file mode 100644 index 000000000..1064515aa --- /dev/null +++ b/versioned_docs/version-3.2.1/scrollview.md @@ -0,0 +1,18 @@ +--- +id: scrollview +title: Scrollview +--- + +Provides a scrolling container that can host multiple components and views. + +## Example + +```ComponentSnackPlayer path=basic,ScrollView,Basic.tsx + +``` + +## Props + +```ComponentPropTable path=basic,ScrollView,ScrollView.tsx showStylingProps=true + +``` diff --git a/versioned_docs/version-3.2.1/sectionList.md b/versioned_docs/version-3.2.1/sectionList.md new file mode 100644 index 000000000..329206a1d --- /dev/null +++ b/versioned_docs/version-3.2.1/sectionList.md @@ -0,0 +1,18 @@ +--- +id: section-list +title: SectionList +--- + +A performant interface for rendering sectioned lists. + +## Example + +```ComponentSnackPlayer path=basic,SectionList,Basic.tsx + +``` + +## Props + +```ComponentPropTable path=basic,SectionList,SectionList.tsx showStylingProps=true + +``` diff --git a/versioned_docs/version-3.2.1/select.md b/versioned_docs/version-3.2.1/select.md new file mode 100644 index 000000000..aceb730d5 --- /dev/null +++ b/versioned_docs/version-3.2.1/select.md @@ -0,0 +1,87 @@ +--- +id: select +title: Select +--- + +import { ComponentTheme } from '../src/components'; + +import { AndroidBadge } from "/src/components/index"; + +Select creates a dropdown list of items with the selected item in closed view. + +## Import + +```jsx +import { Select } from 'native-base'; +``` + +## Examples + +### Basic + +```ComponentSnackPlayer path=primitives,Select,Basic.tsx + +``` + +### FormControlled + +```ComponentSnackPlayer path=primitives,Select,FormControlled.tsx + +``` + +### Select + +## Props + +```ComponentPropTable path=primitives,Select,Select.tsx + +``` + +### Select.Item + +## Props + +```ComponentPropTable path=primitives,Select,SelectItem.tsx + +``` + + + + + +## Styling + + + +## Accessibility + +- use `native` variant. Accessibility improvements on styled variant is in-progress. diff --git a/versioned_docs/version-3.2.1/setup-provider.md b/versioned_docs/version-3.2.1/setup-provider.md new file mode 100644 index 000000000..91ab8c8b7 --- /dev/null +++ b/versioned_docs/version-3.2.1/setup-provider.md @@ -0,0 +1,129 @@ +--- +id: setup-provider +title: Setup NativeBase Provider +--- + +NativeBaseProvider is a component that makes the theme available throughout your app. It uses React's Context API. Add NativeBaseProvider to the root of your app and update App.js as follows: + +**App.js** + +```jsx +import React from 'react'; +// 1. import `NativeBaseProvider` component +import { NativeBaseProvider, Text, Box } from 'native-base'; + +export default function App() { + // 2. Use at the root of your app + return ( + + + Open up App.js to start working on your app! + + + ); +} +``` + +## **Add custom theme (Optional)** + +If you need to customize the default theme to match your design requirements, you can extend the `theme` from `native-base`. + +NativeBase 3.0 provides an `extendTheme` function that deep merges the default theme with your customizations. + +```jsx +// 1. Import the extendTheme function +import { extendTheme, NativeBaseProvider } from 'native-base'; +// 2. Extend the theme to include custom colors, fonts, etc +const newColorTheme = { + brand: { + 900: '#8287af', + 800: '#7c83db', + 700: '#b3bef6', + }, +}; +const theme = extendTheme({ colors: newColorTheme }); +// 3. Pass the `theme` prop to the `NativeBaseProvider` +function App() { + return ( + + + + ); +} +``` + +## Add colorModeManager (Optional) + +If you want to do something with the color modes in your app, you can use colorModeManager Prop of NativeBaseProvider to achieve it. + +In the below example we will show how to store the active ColorMode in a async storage, so it can be consistent all around our app. + +```tsx +import React from 'react'; +import { NativeBaseProvider, ColorMode } from 'native-base'; +import type { StorageManager } from 'native-base'; +import AsyncStorage from '@react-native-async-storage/async-storage'; + +export default ({ children, theme }: any) => { + const colorModeManager: StorageManager = { + get: async () => { + try { + let val = await AsyncStorage.getItem('@my-app-color-mode'); + return val === 'dark' ? 'dark' : 'light'; + } catch (e) { + console.log(e); + return 'light'; + } + }, + set: async (value: ColorMode) => { + try { + await AsyncStorage.setItem('@my-app-color-mode', value); + } catch (e) { + console.log(e); + } + }, + }; + return ( + + {/* Your App Goes Here */} + + ); +}; +``` + +## Add external dependencies (Optional) + +If you want to use [Gradient feature in Box](box#with-linear-gradient), you need to pass linear gradient dependency as a config object in NativeBaseProvider. This dependency can be either from [expo-linear-gradient](https://docs.expo.io/versions/latest/sdk/linear-gradient/) or [react-native-linear-gradient](https://www.npmjs.com/package/react-native-linear-gradient) + +```jsx +import React from 'react'; +import { NativeBaseProvider } from 'native-base'; + +const config = { + dependencies: { + // For Expo projects (Bare or managed workflow) + 'linear-gradient': require('expo-linear-gradient').LinearGradient, + // For non expo projects + // 'linear-gradient': require('react-native-linear-gradient').default, + }, +}; + +export default () => { + return ( + +
+ +
+ + ); +}; +``` + +## NativeBaseProvider Props + +| Name | Type | Description | Default | +| -------------------- | ----------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------ | ------------------------ | +| initialWindowMetrics | Object | Mock data for frame and insets. [Refer this](https://github.com/th3rdwave/react-native-safe-area-context#testing) for further information. | - | +| colorModeManager | { get : Function , set : Function } | Manage Color mode in your app | - | +| theme | Object | use custom theme in your app | NativeBase Default Theme | +| config | {dependencies: {}} | To include external dependencies. For example - [Linear gradient](box#with-linear-gradient) | - | diff --git a/versioned_docs/version-3.2.1/slide.md b/versioned_docs/version-3.2.1/slide.md new file mode 100644 index 000000000..fb8279ee1 --- /dev/null +++ b/versioned_docs/version-3.2.1/slide.md @@ -0,0 +1,38 @@ +--- +id: slide +title: Slide +--- + +Slide component provides a declarative API to add sliding transitions. + +## Import + +## Examples + +### Slide + +```ComponentSnackPlayer path=composites,Transitions,Slide.tsx + +``` + +### Slide wrapped inside parent + +```ComponentSnackPlayer path=composites,Transitions,SlideWrapped.tsx + +``` + +### Slide Composition + +```ComponentSnackPlayer path=composites,Transitions,SlideComposition.tsx + +``` + +## Props + +### Slide + +| Name | Type | Description | Default | +| --------- | -------------------------------- | ------------------------------------------------------ | -------- | +| in | boolean | Show the component; triggers the enter or exit states. | - | +| duration | number | Duration of animation in mili second. | 500 | +| placement | `top` ,`bottom`, `left`, `right` | The direction to slide drawer from. | `bottom` | diff --git a/versioned_docs/version-3.2.1/slider.md b/versioned_docs/version-3.2.1/slider.md new file mode 100644 index 000000000..0d74ff95f --- /dev/null +++ b/versioned_docs/version-3.2.1/slider.md @@ -0,0 +1,91 @@ +--- +id: slider +title: Slider +--- + +import { ComponentTheme } from '../src/components'; + +The `Slider` is used to allow users to make selections from a range of values. + +## Import + +NativeBase exports 4 slider-related components: + +- `Slider`: The wrapper that provides context and functionality for all children. +- `Slider.Track`: The empty part of the slider that shows the track. +- `Slider.FilledTrack`: The filled part of the slider. +- `Slider.Thumb`: The handle that's used to change the slider value. + +```jsx +import { Slider } from 'native-base'; +``` + +## Examples + +```ComponentSnackPlayer path=primitives,Slider,usage.tsx + +``` + +### Color + +```ComponentSnackPlayer path=primitives,Slider,color.tsx + +``` + +### Value + +```ComponentSnackPlayer path=primitives,Slider,Value.tsx + +``` + +### Size + +```ComponentSnackPlayer path=primitives,Slider,Size.tsx + +``` + +### Customised + +```ComponentSnackPlayer path=primitives,Slider,Customized.tsx + +``` + +### Form Controlled + +```ComponentSnackPlayer path=primitives,Slider,FormControlled.tsx + +``` + +## Props + +### Slider + +```ComponentPropTable path=primitives,Slider,Slider.tsx + +``` + +### Children components + +- `Slider.Track`, `Slider.FilledTrack`, and `Slider.Thumb` composes the [`Box`](box.md) component. + +## Styling + + + + +## Accessibility + +Adheres to the [Slider WAI-ARIA design pattern.](https://www.w3.org/TR/wai-aria-practices-1.2/#slidertwothumb) + +### Keyboard Interactions + +| Name | Description | +| ------------------|-------------| +| ArrowRight | Increments/decrements by the step value depending on orientation.| +| ArrowLeft | Increments/decrements by the step value depending on orientation. +| ArrowUp | Increases the value by the step amount. +| ArrowDown | Decreases the value by the step amount. + + + + diff --git a/versioned_docs/version-3.2.1/spinner.md b/versioned_docs/version-3.2.1/spinner.md new file mode 100644 index 000000000..359275a20 --- /dev/null +++ b/versioned_docs/version-3.2.1/spinner.md @@ -0,0 +1,32 @@ +--- +id: spinner +title: Spinner +--- + +## Examples + +### Basic + +```ComponentSnackPlayer path=primitives,Spinner,usage.tsx + +``` + +### Colors + +```ComponentSnackPlayer path=primitives,Spinner,color.tsx + +``` + +### Sizes + +```ComponentSnackPlayer path=primitives,Spinner,size.tsx + +``` + +## Props + +```ComponentPropTable path=primitives,Spinner,index.tsx + +``` + +Spinner composes [`ActivityIndicator`](https://reactnative.dev/docs/activityindicator) so all `ActivityIndicator` Props can be passed to Spinner. diff --git a/versioned_docs/version-3.2.1/stack.md b/versioned_docs/version-3.2.1/stack.md new file mode 100644 index 000000000..12ac4ecae --- /dev/null +++ b/versioned_docs/version-3.2.1/stack.md @@ -0,0 +1,18 @@ +--- +id: stack +title: Stack +--- + +`Stack` aligns items vertically or horizontally based on the `direction` prop. + +## Example + +```ComponentSnackPlayer path=primitives,Stack,basic.tsx + +``` + +## Props + +```ComponentPropTable path=primitives,Stack,Stack.tsx + +``` diff --git a/versioned_docs/version-3.2.1/stagger.md b/versioned_docs/version-3.2.1/stagger.md new file mode 100644 index 000000000..ac8bce5c4 --- /dev/null +++ b/versioned_docs/version-3.2.1/stagger.md @@ -0,0 +1,54 @@ +--- +id: stagger +title: Stagger +--- + +Stagger component provides a declarative API to add Staggered Transitions. + +## Example + +```ComponentSnackPlayer path=composites,Transitions,Stagger.tsx + +``` + +## Props + +```ComponentPropTable path=composites,Transitions,Stagger.tsx showStylingProps=true + +``` + +## IStaggerStyleProps + +```js +interface IStaggerStyleProps extends ISupportedTransition { + transition?: { + stagger?: { + /** + * Delay to add to each child + */ + offset: number, + /** + * When true, delay is added from the last child + */ + reverse?: boolean, + }, + + type?: 'timing' | 'spring', + easing?: (value: number) => number, + overshootClamping?: boolean, + restDisplacementThreshold?: number, + restSpeedThreshold?: number, + velocity?: number | { x: number, y: number }, + bounciness?: number, + speed?: number, + tension?: number, + friction?: number, + stiffness?: number, + mass?: number, + damping?: number, + delay?: number, + duration?: number, + useNativeDriver?: boolean, + }; +} +``` diff --git a/versioned_docs/version-3.2.1/statusBar.md b/versioned_docs/version-3.2.1/statusBar.md new file mode 100644 index 000000000..c8769bda1 --- /dev/null +++ b/versioned_docs/version-3.2.1/statusBar.md @@ -0,0 +1,18 @@ +--- +id: status-bar +title: StatusBar +--- + +Component to control the app status bar. + +## Example + +```ComponentSnackPlayer path=basic,StatusBar,Basic.tsx + +``` + +## Props + +```ComponentPropTable path=basic,StatusBar,StatusBar.tsx showStylingProps=true + +``` diff --git a/versioned_docs/version-3.2.1/strict-mode.md b/versioned_docs/version-3.2.1/strict-mode.md new file mode 100644 index 000000000..690cb14fc --- /dev/null +++ b/versioned_docs/version-3.2.1/strict-mode.md @@ -0,0 +1,39 @@ +--- +id: strict-mode +title: Strict Mode +--- + +NativeBase comes with its very own Strict Mode that lets you control the level of strictness for your App and Dev environment. A really handy tool to maintain best practices through out your codebase. + +## What it does? + +Strict Mode is a config that you pass into NativeBase config. It takes 3 values `error`, `warn` and `off` by default it is set to `warn`. Based on your chosen option it checks for every prop in your project if you have used proper `token values` from theme and you are only passing `string values` to the props and if not then it throws an error or warning or does nothing. + +## Levels of Strictness + +- **error** - Choosing this mode will throw an error indicating the cause of the error. +- **warn** - Choosing this mode will show a warning indicating the issue. +- **off** - Choosing this mode simply means you want to go rogue and not follow the design system and best practices. + +## How to change the mode? + +To change the `strictMode` create a `config object` like below and choose you `strictMode` value from `error`,`warn` and `off` which ever suits your use-case : + +```jsx +import { INativebaseConfig, NativeBaseProvider } from 'native-base'; + +// ignore the INativebaseConfig if you are not using typescript + +const config: INativebaseConfig = { + // rest of the config keys like dependencies can go here + strictMode: 'warn', +}; +``` + +and pass this as a prop in your App `NativeBaseProvider` + +```jsx + + + +``` diff --git a/versioned_docs/version-3.2.1/switch.md b/versioned_docs/version-3.2.1/switch.md new file mode 100644 index 000000000..3d1f07574 --- /dev/null +++ b/versioned_docs/version-3.2.1/switch.md @@ -0,0 +1,50 @@ +--- +id: switch +title: Switch +--- + +The `Switch` component is an alternative to the Checkbox component. You can switch between enabled or disabled states. + +## Examples + +### Basic + +```ComponentSnackPlayer path=primitives,Switch,Basic.tsx + +``` + +### Sizes + +```ComponentSnackPlayer path=primitives,Switch,Sizes.tsx + +``` + +### Track & Thumb Color + +```ComponentSnackPlayer path=primitives,Switch,SwitchBgColor.tsx + +``` + +### Color Schemes + +```ComponentSnackPlayer path=primitives,Switch,ColorSchemes.tsx + +``` + +## Props + +```ComponentPropTable path=primitives,Switch,index.tsx showStylingProps=true + +``` + +## Accessibility + +- On mobile, uses native switch which is fully accessible. +- On web, it uses checkbox with a [role](https://www.w3.org/TR/wai-aria-1.2/#switch) set to `switch`. + + +### Keyboard Interactions + +| Name | Description | +| --------------------|-------------| +| Space | Toggles the component's state. | \ No newline at end of file diff --git a/versioned_docs/version-3.2.1/testing.md b/versioned_docs/version-3.2.1/testing.md new file mode 100644 index 000000000..cfd5b0139 --- /dev/null +++ b/versioned_docs/version-3.2.1/testing.md @@ -0,0 +1,25 @@ +--- +id: testing +title: Testing +--- + +NativeBase works with react-native's jest preset or expo's jest-expo preset. However, there's one thing you'll need to do for it to work as expected. + +### Adding initialWindowMetrics in NativeBaseProvider. + +- NativeBaseProvider uses [SafeAreaContext](https://github.com/th3rdwave/react-native-safe-area-context#testing) which needs initialWindowMetrics to be passed to the Provider while testing. + +Not following the above may lead to an error related to SafeAreaProvider while running `yarn test`. + +To fix the above issue, you can simply pass initialWindowMetrics to NativeBaseProvider in your tests. + +```jsx +const inset = { + frame: { x: 0, y: 0, width: 0, height: 0 }, + insets: { top: 0, left: 0, right: 0, bottom: 0 }, +}; + + + {children} +; +``` diff --git a/versioned_docs/version-3.2.1/text.md b/versioned_docs/version-3.2.1/text.md new file mode 100644 index 000000000..04eca5545 --- /dev/null +++ b/versioned_docs/version-3.2.1/text.md @@ -0,0 +1,44 @@ +--- +id: text +title: Text +--- + +import { ComponentTheme } from '../src/components'; + +`Text` is used to render text and paragraphs within an interface. + +## Examples + +### ChangingFontSize + +```ComponentSnackPlayer path=primitives,Text,ChangingFontSize.tsx + +``` + +### Truncated + +```ComponentSnackPlayer path=primitives,Text,Truncated.tsx + +``` + +### Nested + +```ComponentSnackPlayer path=primitives,Text,Nested.tsx + +``` + +### Overridden + +```ComponentSnackPlayer path=primitives,Text,Overriden.tsx + +``` + +## Props + +```ComponentPropTable path=primitives,Text,index.tsx showStylingProps=true + +``` + +## Styling + + diff --git a/versioned_docs/version-3.2.1/textArea.md b/versioned_docs/version-3.2.1/textArea.md new file mode 100644 index 000000000..55c834ffa --- /dev/null +++ b/versioned_docs/version-3.2.1/textArea.md @@ -0,0 +1,38 @@ +--- +id: textarea +title: TextArea +--- + +import { ComponentTheme } from '../src/components'; + +The `Textarea` component allows you to easily create multi-line text inputs. + +## Examples + +### Usage + +```ComponentSnackPlayer path=primitives,TextArea,basic.tsx + +``` + +### Invalid and Disabled TextArea + +```ComponentSnackPlayer path=primitives,TextArea,invalid.tsx + +``` + +### Value Controlled TextArea + +```ComponentSnackPlayer path=primitives,TextArea,value.tsx + +``` + +## Props + +```ComponentPropTable path=primitives,TextArea,index.tsx + +``` + +## Styling + + diff --git a/versioned_docs/version-3.2.1/theme.md b/versioned_docs/version-3.2.1/theme.md new file mode 100644 index 000000000..db050174c --- /dev/null +++ b/versioned_docs/version-3.2.1/theme.md @@ -0,0 +1,205 @@ +--- +id: theme +title: Using Theme +--- + +NativeBase provides multiple tools to use the central theme defined in the app. First tool is [`useTheme`](/useTheme.md), which you can use to access the values from the current theme. + +## useTheme + +```SnackPlayer name=useTheme%20Demo +import React from 'react'; +import { + NativeBaseProvider, + useTheme, + FlatList, + Center, + Box, +} from 'native-base'; + +function ColorPalete() { + const { colors } = useTheme(); + return ( + + } + /> + + ); +} + +// Example template which wraps component with NativeBaseProvider +export default function () { + return ( + +
+ +
+ + ); +} + +``` + +## useToken + +You can also get specific values from the theme with [`useToken`](/useToken.md) hook. + +```SnackPlayer name=useToken%20Demo +import React from 'react'; +import { useToken, NativeBaseProvider, Center, Text } from 'native-base'; + +function Tokens() { + const [contrastThreshold, lightText] = useToken('colors', [ + 'contrastThreshold', + 'lightText', + ]); + return ( +
+ Contrast threshold is:{' '} + + {contrastThreshold} + +
+ ); +} + +// Example template which wraps component with NativeBaseProvider +export default function () { + return ( + +
+ +
+ + ); +} + + +``` + +## useContrastText + +If you are defining the background yourself and pass a contrasting color to the text then you can use [`useContrastText`](use-contrast-text). + +```SnackPlayer name=useContrastText + +import React from 'react'; +import { + Button, + Stack, + useContrastText, + NativeBaseProvider, + Center, +} from 'native-base'; +function UseContrastingTextHook() { + const bgDark = 'primary.700'; + const bgLight = 'primary.200'; + const colorContrastDark = useContrastText(bgDark); + const colorContrastLight = useContrastText(bgLight); + + return ( + + + + + ); +} + +// Example template which wraps component with NativeBaseProvider +export default function () { + return ( + +
+ +
+ + ); +} + +``` + +## useColorMode + +If you want to define some conditionals based on current color mode or change the color mode then you can try [useColorMode](useColorMode.md). + +```SnackPlayer name=useColorMode +import React from 'react'; +import { + NativeBaseProvider, + useColorMode, + Text, + Button, + Center, +} from 'native-base'; + +function UseColorMode() { + const { colorMode, toggleColorMode } = useColorMode(); + return ( +
+ + The active color mode is{' '} + + {colorMode} + + + +
+ ); +} + +export default Example = () => { + return ( + + + + ); +}; + +``` + +## useColorModeValue + +If you do not want to add conditionals for color mode everywhere and keep the code clean, then you can use [useColorModeValue](useColorModeValue.md) hook. It takes two parameters, light mode value as the first and dark mode value as second. + +```SnackPlayer name=useColorModeValue +import React from 'react'; +import { + NativeBaseProvider, + useColorMode, + Text, + Button, + Center, + useColorModeValue, +} from 'native-base'; + +function UseColorMode() { + const { toggleColorMode } = useColorMode(); + return ( +
+ + The active color mode is{' '} + + {useColorModeValue('Light', 'Dark')} + + + +
+ ); +} + +export default Example = () => { + return ( + + + + ); +}; + +``` diff --git a/versioned_docs/version-3.2.1/toast.md b/versioned_docs/version-3.2.1/toast.md new file mode 100644 index 000000000..914ce3de9 --- /dev/null +++ b/versioned_docs/version-3.2.1/toast.md @@ -0,0 +1,88 @@ +--- +id: toast +title: Toast +--- + +import { ComponentTheme } from '../src/components'; + +`Toast` is used to show alerts on top of an overlay. `Toast` will close itself when the close button is clicked, or after a timeout — the default is 5 seconds. The toast component is used to give feeback to users after an action has taken place. + +Toasts can be configured to appear at either the top or the bottom of an application window, and it is possible to have more than one toast onscreen at a time. + +## Import + +```jsx +import { useToast } from 'native-base'; +``` + +## Examples + +### Basic + +```ComponentSnackPlayer path=composites,Toast,Basic.tsx + +``` + +### Position + +```ComponentSnackPlayer path=composites,Toast,ToastPositions.tsx + +``` + +### Custom component + +Display a custom component instead of the default Toast UI. + +```ComponentSnackPlayer path=composites,Toast,CustomComponent.tsx + +``` + +### Closing Toasts + +Toasts can be closed imperatively, individually (via the close instance method) or all together (via the closeAll instance method). + +```ComponentSnackPlayer path=composites,Toast,CloseToast.tsx + +``` + +### Status + +You can use status to change the color of your toasts. +`Toast` uses the same variants as the [Alert](alert.md) component. + +```ComponentSnackPlayer path=composites,Toast,ToastStatus.tsx + +``` + +### Preventing Duplicate Toast + +In some cases you might need to prevent duplicate of specific toasts. To achieve you need to pass an id and use the toast.isActive method to determine when to call toast.show(...). + +```ComponentSnackPlayer path=composites,Toast,PreventDuplicate.tsx + +``` + +### Standalone Toast + +You can use standalone toast where you don't have access to `useToast` hook. e.g. in a different file, out of a React component. + +```ComponentSnackPlayer path=composites,Toast,StandaloneToast.tsx + +``` + +## Props + +Below props can be passed while calling toast.show. + +```ComponentPropTable path=composites,Toast,ToastDummy.tsx + +``` + +## Accessibility + +- On Android and Web, Toast renders under a View with accessibilityLiveRegion which announces the content rendered inside it to screen reader devices. +- On iOS, accessibilityLiveRegion is not supported yet, so we use the [accessibilityAnnouncement](https://reactnative.dev/docs/accessibilityinfo#announceforaccessibility) to announce the content. + +## Styling + + diff --git a/versioned_docs/version-3.2.1/todo-list.md b/versioned_docs/version-3.2.1/todo-list.md new file mode 100644 index 000000000..d6b9632ff --- /dev/null +++ b/versioned_docs/version-3.2.1/todo-list.md @@ -0,0 +1,135 @@ +--- +id: todo-example +title: Todo-List +--- + +A simple To Do App made using NativeBase 3.0. + +```SnackPlayer name=TodoList%20Examples +import React from 'react'; +import { + Input, + Button, + IconButton, + Checkbox, + Text, + VStack, + HStack, + Heading, + Icon, + Center, + Box, + NativeBaseProvider, +} from 'native-base'; +import { FontAwesome5, Feather, Entypo } from '@expo/vector-icons'; + +export default function () { + const instState = [ + { title: 'Code', isCompleted: true }, + { title: 'Meeting with team at 9', isCompleted: false }, + { title: 'Check Emails', isCompleted: false }, + { title: 'Write an article', isCompleted: false }, + ]; + const [list, setList] = React.useState(instState); + const [inputValue, setInputValue] = React.useState(''); + const addItem = (title: string) => { + setList([ + ...list, + { + title: title, + isCompleted: false, + }, + ]); + }; + const handleDelete = (index: number) => { + const temp = list.filter((_, itemI) => itemI !== index); + setList(temp); + }; + const handleStatusChange = (index: number) => { + const temp = list.map((item, itemI) => + itemI !== index + ? item + : { + ...item, + isCompleted: !item.isCompleted, + } + ); + setList(temp); + }; + return ( + +
+ + Wednesday + + + setInputValue(v)} + value={inputValue} + placeholder="Add Task" + /> + + } + onPress={() => { + addItem(inputValue); + setInputValue(''); + }} + /> + + + {list.map((item, itemI) => ( + + handleStatusChange(itemI)} + value={item.title}> + + {item.title} + + + + } + onPress={() => handleDelete(itemI)} + /> + + ))} + + + +
+ + ); +} + +``` diff --git a/versioned_docs/version-3.2.1/tooltip.md b/versioned_docs/version-3.2.1/tooltip.md new file mode 100644 index 000000000..1d35cabf6 --- /dev/null +++ b/versioned_docs/version-3.2.1/tooltip.md @@ -0,0 +1,65 @@ +--- +id: tooltip +title: Tooltip +--- + +import { ComponentTheme } from '../src/components'; + +A tooltip is a brief, informative message that appears when a user interacts with an element. Tooltips are usually initiated in one of two ways: through a mouse-hover gesture or through a keyboard-hover gesture. + +## Import + +```jsx +import { Tooltip } from 'native-base'; +``` + +## Examples + +### Basic + +```ComponentSnackPlayer path=composites,Tooltip,Basic.tsx + +``` + +### Positions + +```ComponentSnackPlayer path=composites,Tooltip,TooltipPositions.tsx + +``` + +### Customizing tooltip + +Tooltip is a wrapper around [Box](box.md). So, it also accepts all the [Box](box.md#props) props. + +```ComponentSnackPlayer path=composites,Tooltip,CustomTooltip.tsx + +``` + +
+ +:::tip Development Tip +You can pass custom backgroundColor using `bg` or `backgroundColor`, `borderColor` and `borderWidth` to Tooltip. +::: + +## Props + +```ComponentPropTable path=composites,Tooltip,Tooltip.tsx + +``` + +## Styling + + + +## Accessibility + +Adheres to the [Tooltip WAI-ARIA design pattern.](https://www.w3.org/TR/wai-aria-1.1/#tooltip) + +### Keyboard Interactions + +| Name | Description | +| ----- | ------------------------------------------ | +| Space | If open, closes the tooltip without delay. | +| Enter | If open, closes the tooltip without delay. | +| Tab | Moves focus to the next focusable element. | +| Esc | If open, closes the tooltip without delay. | diff --git a/versioned_docs/version-3.2.1/typescript.md b/versioned_docs/version-3.2.1/typescript.md new file mode 100644 index 000000000..33601937b --- /dev/null +++ b/versioned_docs/version-3.2.1/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 + +Typescript intellisense with custom theme tokens diff --git a/versioned_docs/version-3.2.1/useAccessibleColors.md b/versioned_docs/version-3.2.1/useAccessibleColors.md new file mode 100644 index 000000000..1fa0dfd75 --- /dev/null +++ b/versioned_docs/version-3.2.1/useAccessibleColors.md @@ -0,0 +1,64 @@ +--- +id: use-accessible-colors +title: useAccessibleColors +--- + +`useAccessibleColors` is a custom hook used to get the setting for using color with better [color and contrast accessibility](https://web.dev/color-and-contrast-accessibility/) in the app. By default, accessible colors are turned off to get better color matching the theme of the app. You can use this hook if you always want to use accessible text colors. You can also pass it in the config for [`NativeBaseProvider`](setup-provider.md) with [`extendTheme`](setup-provider.md#add-custom-theme-optional). + +## Import + +```jsx +import { useAccessibleColors } from 'native-base'; +``` + +## Example + +```SnackPlayer name=useAccessibleColors + +import React from 'react'; +import { Button, useContrastText, useTheme, NativeBaseProvider, Center, useAccessibleColors } from 'native-base'; + +const ButtonTemplate = ({ shade }: any) => { + const colorContrast = useContrastText(`yellow.${shade}`); + return ( + + ); +}; + +function UseContrastingTextHook () { + let [, , toggleAccessibleColors] = useAccessibleColors(); + const { colors } = useTheme(); + return ( + <> + {Object.keys(colors.yellow).map((key, index) => { + if (index > 2 && index < 9) return ; + })} + + + ); +} + +export default function () { + return ( + +
+ +
+ + ); +} +``` + +## Return value + +Returns an array with values `accessibleColors`, `setAccessibleColors`, `toggleAccessibleColors`. diff --git a/versioned_docs/version-3.2.1/useBreakPointValue.md b/versioned_docs/version-3.2.1/useBreakPointValue.md new file mode 100644 index 000000000..edb6501e9 --- /dev/null +++ b/versioned_docs/version-3.2.1/useBreakPointValue.md @@ -0,0 +1,133 @@ +--- +id: use-breakPoint-value +title: useBreakpointValue +--- + +`useBreakpointValue` is a custom hook which returns the value for the current breakpoint from the provided responsive values object. This hook also responds to the window resizing and returning the appropriate value for the new window size. + +## **Import** + +```jsx +import { useBreakpointValue } from 'native-base'; +``` + +## **Return value** + +The `useBreakpointValue` hook returns the value for the current breakpoint. + +## Usage + +```SnackPlayer name=useBreakpointValue + +import React from 'react'; +import { + Factory, + Button, + Stack, + NativeBaseProvider, + Center, + ScrollView +} from 'native-base'; +import { TextInput } from 'react-native'; + +import { Icon, useBreakpointValue, Text, VStack, Heading } from 'native-base'; +import { FontAwesome, Foundation, Feather } from '@expo/vector-icons'; +import { View } from 'react-native'; + +export const UseBreakpointValueExample = () => { + const flexDir = useBreakpointValue({ + base: 'column', + lg: 'row', + }); + return ( + + + Why us? + + + + + Secure Checkout + + + + + + Secure Checkout + + + + + + Fast Turn Around + + + + + + ); +}; + +// Example template which wraps component with NativeBaseProvider +export default function () { + return ( + +
+ +
+ + ); +} + +``` diff --git a/versioned_docs/version-3.2.1/useClipboard.md b/versioned_docs/version-3.2.1/useClipboard.md new file mode 100644 index 000000000..fa916f05a --- /dev/null +++ b/versioned_docs/version-3.2.1/useClipboard.md @@ -0,0 +1,73 @@ +--- +id: use-clipboard +title: useClipboard +--- + +`useClipboard` is a custom hook that handles copying content to clipboard. + +## Return Value + +The `useClipboard` hook returns an object with the following fields: + +- `value` : ( **string** ) The copied value. +- `onCopy` : ( **Function** ) Callback function to copy content. +- `hasCopied` : ( **boolean** ) If **true**, the content has been copied. + +## Import + +```jsx +import { useClipboard } from 'native-base'; +``` + +## Usage + +```SnackPlayer name=useClipboard%20Usage +import React from "react"; +import { + Button, + HStack, + VStack, + Text, + Input, + useClipboard, + NativeBaseProvider, + Center +} from "native-base"; + +function UseClipboardExample() { + const [copyText, setCopyText] = React.useState('Hello'); + const [pasteText, setPasteText] = React.useState(''); + const { value, onCopy } = useClipboard(); + return ( + + + setCopyText(v)} + value={copyText} + /> + + + + setPasteText(v)} + value={pasteText} + /> + + + + ); +} +export default function () { + return ( + +
+ +
+ + ); +} +``` diff --git a/versioned_docs/version-3.2.1/useColorMode.md b/versioned_docs/version-3.2.1/useColorMode.md new file mode 100644 index 000000000..adb23b90d --- /dev/null +++ b/versioned_docs/version-3.2.1/useColorMode.md @@ -0,0 +1,56 @@ +--- +id: use-color-mode +title: useColorMode +--- + +`useColorMode` is a custom hook used to get and set the color mode. + +## Import + +```jsx +import { useColorMode } from 'native-base'; +``` + +## Example + +```SnackPlayer name=useColorMode +import React from 'react'; +import { + NativeBaseProvider, + VStack, + useColorMode, + Text, + Button, + Center, +} from 'native-base'; + +function UseColorMode() { + const { colorMode, toggleColorMode } = useColorMode(); + return ( +
+ + The active color mode is {colorMode} + + +
+ ); +} + +export default function () { + return ( + + + + ); +} + + +``` + +## Return + +| Name | Type | Description | Default | +| --------------- | --------------- | ------------------------------------------ | ------- | +| colorMode | `light`, `dark` | The active color mode | `light` | +| setColorMode | function | Use to set color mode. | - | +| toggleColorMode | function | Use to toggle between light and dark mode. | - | diff --git a/versioned_docs/version-3.2.1/useColorModeValue.md b/versioned_docs/version-3.2.1/useColorModeValue.md new file mode 100644 index 000000000..65fad698b --- /dev/null +++ b/versioned_docs/version-3.2.1/useColorModeValue.md @@ -0,0 +1,52 @@ +--- +id: use-color-mode-value +title: useColorModeValue +--- + +`useColorModeValue` is a custom hook used to get a value from either of the parameters passed based on active color mode value. + +## Import + +```jsx +import { useColorModeValue } from 'native-base'; +``` + +## Example + +```SnackPlayer name=useColorModeValue +import React from 'react'; +import { + NativeBaseProvider, + useColorMode, + Text, + Button, + Center, + useColorModeValue, +} from 'native-base'; + +function UseColorMode() { + const { colorMode, toggleColorMode } = useColorMode(); + return ( +
+ + The active color mode is + {useColorModeValue('Light', 'Dark')} + + +
+ ); +} + +export default function () { + return ( + + + + ); +} + +``` + +## Return value + +Accepts 2 parameters and returns either of the two, based on current color-mode (first parameter for light mode and second parameter for dark mode). diff --git a/versioned_docs/version-3.2.1/useContrastText.md b/versioned_docs/version-3.2.1/useContrastText.md new file mode 100644 index 000000000..4497c3b17 --- /dev/null +++ b/versioned_docs/version-3.2.1/useContrastText.md @@ -0,0 +1,103 @@ +--- +id: use-contrast-text +title: useContrastText +--- + +`useContrastText` is a custom hook used to get a contrasting color (either `lightText` or `darkText`) to the color passed as a parameter. + +## Import + +```jsx +import { useContrastText } from 'native-base'; +``` + +## Examples + +### Basic + +```SnackPlayer name=useContrastText + +import React from 'react'; +import { Button, useContrastText, NativeBaseProvider, Center } from 'native-base'; +function UseContrastingTextHook () { + const bgDark = 'gray.900'; + const bgLight = 'gray.50'; + const colorContrastDark = useContrastText(bgDark); + const colorContrastLight = useContrastText(bgLight); + + return ( + <> + + + + ); +} + +export default function () { + return ( + +
+ +
+ + ); +} +``` + +### Using Accessible Colors + +By default, NativeBase provides contrasting color based on its theme. You can also choose to get color with better [color and contrast accessibility](https://web.dev/color-and-contrast-accessibility/) with the help of [`useAccessibleColors`](useAccessibleColors.md) hook. + +```SnackPlayer name=usingAccessibleColors + +import React from 'react'; +import { Button, useContrastText, useTheme, NativeBaseProvider, Center, useAccessibleColors } from 'native-base'; + +const ButtonTemplate = ({ shade }: any) => { + const colorContrast = useContrastText(`yellow.${shade}`); + return ( + + ); +}; + +function UseContrastingTextHook () { + let [, , toggleAccessibleColors] = useAccessibleColors(); + const { colors } = useTheme(); + return ( + <> + {Object.keys(colors.yellow).map((key, index) => { + if (index > 2 && index < 9) return ; + })} + + + ); +} + +export default function () { + return ( + +
+ +
+ + ); +} +``` + +## Return value + +Accepts and returns a color defined in the theme. diff --git a/versioned_docs/version-3.2.1/useDisclosure.md b/versioned_docs/version-3.2.1/useDisclosure.md new file mode 100644 index 000000000..4e5cd4cdd --- /dev/null +++ b/versioned_docs/version-3.2.1/useDisclosure.md @@ -0,0 +1,74 @@ +--- +id: use-disclosure +title: useDisclose +--- + +`useDisclose` is a custom hook used to help handle common `open`, `close`, or `toggle` scenarios. It can be used to control feedback component such as **Modal**, **AlertDialog**, **Drawer**, etc. + +## Import + +```jsx +import { useDisclose } from 'native-base'; +``` + +## Example + +```SnackPlayer name=useDisclose%20Usage +import React from "react"; +import { + Modal, + Button, + Center, + Input, + useDisclose, + NativeBaseProvider, +} from "native-base"; + +function UseDiscloseExample() { + const { isOpen, onOpen, onClose } = useDisclose(); + return ( + <> + + + + + Delete Customer + + + This will remove all data relating to Alex. This action cannot be reversed. Deleted data can not be recovered. + + + + + + + + + + + ); +} +export default function () { + return ( + +
+ +
+ + ); +} +``` + +## Return value + +The `useDisclosure` hook returns an object with the following fields: + +`isOpen`: ( **boolean** ) Show the component; triggers the enter or exit states. + +`onClose`: ( **function** ) Callback function to set a falsy value for the `isOpen` parameter. + +`onOpen`: ( **function** ) Callback function to set a truthy value for the `isOpen` parameter. + +`onToggle`: ( **function** ) Callback function to toggle the value of the `isOpen` parameter. diff --git a/versioned_docs/version-3.2.1/useMediaQuery.md b/versioned_docs/version-3.2.1/useMediaQuery.md new file mode 100644 index 000000000..7edf8d5fb --- /dev/null +++ b/versioned_docs/version-3.2.1/useMediaQuery.md @@ -0,0 +1,440 @@ +--- +id: use-media-query +title: useMediaQuery +--- + +`useMediaQuery` is a custom hook used to help detect whether a single media query or multiple media queries individually match. React Native does not natively support media queries, so `useMediaQuery` is still limited. + +## Import + +```jsx +import { useMediaQuery } from 'native-base'; +``` + +## Example + +### max-height + +```SnackPlayer name=useMediaQuery%20Usage(max-height) +import React from "react"; +import { Text, useMediaQuery, NativeBaseProvider, Center } from "native-base"; + +function UseMediaQueryExample() { + const [isSmallScreen] = useMediaQuery({ minHeight: 280, maxHeight: 480 }); + return ( + + {isSmallScreen ? ( + + + + image + +
+ PHOTOS +
+ + + + + The Garden City + + + The Silicon Valley of India. + + + + Bengaluru (also called Bangalore) is the center of India's + high-tech industry. The city is also known for its parks and + nightlife. + + + + + 6 mins ago + + + + + + ) : ( + + + + + The Garden City + + + The Silicon Valley of India. + + + + Bengaluru (also called Bangalore) is the center of India's + high-tech industry. The city is also known for its parks and + nightlife. + + + + + 6 mins ago + + + + + + )} + + ); +} +export default function () { + return ( + +
+ +
+ + ); +} +``` + +### min-width + +```SnackPlayer name=useMediaQuery%20Usage(min-width) +import React from "react"; +import { Text, useMediaQuery, NativeBaseProvider, Center } from "native-base"; + +function UseMediaQueryExample() { + const [isSmallScreen] = useMediaQuery({ minWidth: 280 }); + return ( + + {isSmallScreen ? ( + + + + image + +
+ PHOTOS +
+ + + + + The Garden City + + + The Silicon Valley of India. + + + + Bengaluru (also called Bangalore) is the center of India's + high-tech industry. The city is also known for its parks and + nightlife. + + + + + 6 mins ago + + + + + + ) : ( + + + + + The Garden City + + + The Silicon Valley of India. + + + + Bengaluru (also called Bangalore) is the center of India's + high-tech industry. The city is also known for its parks and + nightlife. + + + + + 6 mins ago + + + + + + )} + + ); +} +export default function () { + return ( + +
+ +
+ + ); +} +``` + +### orientation + +```SnackPlayer name=useMediaQuery%20Usage(orientation) +import React from "react"; +import { Text, useMediaQuery, NativeBaseProvider, Center } from "native-base"; + +function UseMediaQueryExample() { + const [isLandScape, isPortrait] = useMediaQuery([ + { orientation: 'landscape' }, + { orientation: 'portrait' }, + ]); + return ( + + {isPortrait ? ( + + + + image + +
+ PHOTOS +
+ + + + + The Garden City + + + The Silicon Valley of India. + + + + Bengaluru (also called Bangalore) is the center of India's + high-tech industry. The city is also known for its parks and + nightlife. + + + + + 6 mins ago + + + + + + ) : ( + <> + )} + {isLandScape ? ( + + + + + The Garden City + + + The Silicon Valley of India. + + + + Bengaluru (also called Bangalore) is the center of India's + high-tech industry. The city is also known for its parks and + nightlife. + + + + + 6 mins ago + + + + + + ) : ( + <> + )} + + ); +} +export default function () { + return ( + +
+ +
+ + ); +} +``` + +## Return value + +The `useMediaQuery` hook returns an array of booleans, indicating whether the given query matches or queries match. + +Why an array? `useMediaQuery` accepts both an object and an array of object, but will always return an array. This way, you can combine multiple media queries which will be individually matched in a single call. The options to use are still limited to `maxWidth`, `minWidth`, `maxHeight`, `minHeight`, `orientation`. diff --git a/versioned_docs/version-3.2.1/useTheme.md b/versioned_docs/version-3.2.1/useTheme.md new file mode 100644 index 000000000..71ac99174 --- /dev/null +++ b/versioned_docs/version-3.2.1/useTheme.md @@ -0,0 +1,22 @@ +--- +id: use-theme +title: useTheme +--- + +`useTheme` is a custom hook used to get the theme object from context. + +## Import + +```jsx +import { useTheme } from "native-base"; +``` + +## Example + +```jsx +function Example() { + const theme = useTheme(); + + return {/* Do something with the theme */}; +} +``` diff --git a/versioned_docs/version-3.2.1/useToken.md b/versioned_docs/version-3.2.1/useToken.md new file mode 100644 index 000000000..29b824ec2 --- /dev/null +++ b/versioned_docs/version-3.2.1/useToken.md @@ -0,0 +1,51 @@ +--- +id: use-token +title: useToken +--- + +`useToken` is a custom hook used to resolve design tokens from the theme. + +## Import + +```jsx +import { useToken } from 'native-base'; +``` + +## Example + +```SnackPlayer name=useToken%20Example +import React from "react"; +import { Box, Text, useToken, NativeBaseProvider, Center, HStack , VStack} from "native-base"; + +function UseTokenHookExample() { + const [colorPick1, colorPick2] = useToken( + // the key within the theme, in this case `theme.colors` + "colors", + // the subkey(s), resolving to `theme.colors.warning.1` + ["yellow.500", "cyan.500"] + // a single fallback or fallback array matching the length of the previous arg + ); + + return ( + + + + {colorPick1} + + + + {colorPick2} + + + ); +} +export default function () { + return ( + +
+ +
+ + ); +} +``` diff --git a/versioned_docs/version-3.2.1/utility-first.mdx b/versioned_docs/version-3.2.1/utility-first.mdx new file mode 100644 index 000000000..ebd5645c6 --- /dev/null +++ b/versioned_docs/version-3.2.1/utility-first.mdx @@ -0,0 +1,218 @@ +--- +id: utility-first +title: Utility First +--- + +import { UtilityFirstExample } from '../src/components'; +import { KitchenSinkIframe, TileLink, NBHistory } from '../src/components'; + +React Native has a great StyleSheet API which is optimal for component-based systems. NativeBase leverages it and adds a layer of utility props and constraint based designed tokens on top of it. + +To understand utility props, let's take an example. + + + +
+ +## With React Native + +Let's try the traditional way of building the above card in React Native. + +
+ +```jsx +import * as React from 'react'; +import { Text, View, StyleSheet, Image, Pressable } from 'react-native'; + +export default function App() { + return ( + + + + + Today @ 9PM + Let's talk about avatar! + + + Remind me + + + + + + ); +} + +const styles = StyleSheet.create({ + container: { + backgroundColor: '#0891b2', + paddingVertical: 16, + paddingHorizontal: 12, + borderRadius: 5, + alignSelf: 'center', + width: 375, + maxWidth: '100%', + }, + timings: { + color: '#fff', + fontSize: 14, + }, + metaContainer: { + justifyContent: 'space-between', + }, + topContainer: { + flexDirection: 'row', + justifyContent: 'space-between', + }, + avatar: { + height: 100, + width: 100, + borderRadius: 100, + }, + description: { + color: 'white', + marginTop: 5, + fontSize: 20, + }, + button: { + backgroundColor: '#22d3ee', + alignSelf: 'flex-start', + paddingHorizontal: 10, + paddingVertical: 5, + borderRadius: 3, + }, + buttonText: { + fontWeight: 'bold', + color: 'white', + textTransform: 'uppercase', + fontSize: 14, + }, +}); +``` + +
+ + + +
+ +## With NativeBase + +Now let's try to build the same card using NativeBase. + +With NativeBase, you can apply styles directly in the layout using shorthands. + +
+ +```jsx +import * as React from 'react'; +import { + NativeBaseProvider, + Box, + HStack, + VStack, + Text, + Pressable, + Image, +} from 'native-base'; + +export function UtilityFirstExample() { + return ( + + + + + + + Today @ 9PM + + + Let's talk about avatar! + + + + + Remind me + + + + Aang flying and surrounded by clouds + + + + ); +} +``` + +
+ +The above example demonstrates the usage of [utility props](utility-props) alongwith [VStack](vstack), [HStack](hstack) components. This approach allows us to style components without using StyleSheet API. + +Apart from productivity boost and saving time there are other benefits by styling components using utility props. +No need to name styles anymore, no need to define an object and think about naming them. + +Using utility-first props, you can focus on creating reusable components instead of reusable stylesheets. + +Once you start writing styles this way, any other way will feel cumbersome. + +> Put simply, utility first approach opens up the Avatar state within developers. + +
+ aang transitioning to avatar state +
+ +
+ +Once you had a cup of tea, let's proceed to the next section! + +
+
+ +
+ uncle iroh holding cup of tea + +
diff --git a/versioned_docs/version-3.2.1/utilityProps.md b/versioned_docs/version-3.2.1/utilityProps.md new file mode 100644 index 000000000..8cf57537b --- /dev/null +++ b/versioned_docs/version-3.2.1/utilityProps.md @@ -0,0 +1,679 @@ +--- +id: utility-props +title: Utility Props +--- + +Style props are a way to alter the style of a component by simply passing props to it. It helps to save time by providing helpful shorthand ways to style components. + +## Style Props + +The following table shows a list of every style prop and the properties within each group. + +### Margin and padding + +```SnackPlayer name=Margin%20and%20padding +import React from 'react'; +import { Box as NBBox, NativeBaseProvider, Center } from 'native-base'; + +const Box = (props) => { + return +} + +function Component() { + return ( + <> + { /* m={2} refers to the value of `theme.space[2]` */ } + + { /* You can also use custom values */ } + + { /* sets margin `8px` on all viewports and `16px` from the first breakpoint and up */ } + + + ); +} +export default function () { + return ( + +
+ +
+ + ); +} + +``` + +
+ +| Prop | CSS Equivalent | Theme Key | +| ----------------- | ------------------------------ | --------- | +| m, margin | margin | space | +| mt, marginTop | margin-top | space | +| mr, marginRight | margin-right | space | +| mb, marginBottom | margin-bottom | space | +| ml, marginLeft | margin-left | space | +| mx | margin-left and margin-right | space | +| my | margin-top and margin-bottom | space | +| p, padding | padding | space | +| pt, paddingTop | padding-top | space | +| pr, paddingRight | padding-right | space | +| pb, paddingBottom | padding-bottom | space | +| pl, paddingLeft | padding-left | space | +| px | padding-left and padding-right | space | +| py | padding-top and padding-bottom | space | + +### Color and background color + +```SnackPlayer name=Color%20and%20background%20COolor +import React from 'react'; +import { Box as NBBox, NativeBaseProvider, Center, Text } from 'native-base'; + +const Box = (props) => { + return ; +}; + +function Component() { + return ( + <> + {/* raw CSS color value */} + + {/* picks up a nested color value using dot notation */} + {/* => `theme.colors.lightBlue[300]` */} + + {/* using theme colors to set text color */} + + {' '} + I love NativeBase + + + {/* verbose prop */} + + + ); +} +export default function () { + return ( + +
+ +
+ + ); +} + + +``` + +
+ +| Prop | CSS Eqquivalent | Theme Key | +| -------------- | ---------------- | --------- | +| color | color | colors | +| bg, background | background | colors | +| bgColor | background-color | colors | +| opacity | opacity | - | + +

+ +:::tip Note + +Above props can be written in the format: {color}:alpha.{opacityToken}, this gets converted into RGBA color format and the opacityToken is mapped to [`Opacity`](default-theme#opacity) + +::: + +
+ +```SnackPlayer name=Alpha%20Opacity%20Usage + +import React from "react" +import { HStack, Stack, Center, NativeBaseProvider } from "native-base" +export function Example() { + return ( + + +
+ Box 1 +
+
+ Box 2 +
+
+ Box 3 +
+ + + ) +} + +export default () => { + return ( + +
+ +
+ + ) +} + +``` + +### Typography + +```SnackPlayer name=Typography +import React from 'react'; +import { Text as NBText, NativeBaseProvider, Center } from 'native-base'; + +const Text = (props) => { + return +} + +function Component() { + return ( + <> + { /* font-size of `theme.fontSizes.2xl` */ } + Thank You + { /* text decoration `underline` */ } + Merci Beaucoup + { /* font-size `'2em'` */ } + { /* font-weight of `theme.fontWeights.semibold i.e. 600` */ } + Danke sehr + { /* letter-spacing `0.1 em` */ } + Arigatou + + ); +} +export default function () { + return ( + +
+ +
+ + ); +} + +``` + +
+ +| Prop | CSS Eqquivalent | Theme Key | +| -------------- | --------------- | -------------- | +| fontFamily | font-family | fonts | +| fontSize | font-size | fontSizes | +| fontWeight | font-weight | fontWeights | +| lineHeight | line-height | lineHeights | +| letterSpacing | letter-spacing | letterSpacings | +| textAlign | text-align | - | +| fontStyle | font-style | - | +| textTransform | text-transform | - | +| textDecoration | text-decoration | - | + +### Layout, width and height + +```SnackPlayer name=Layout,%20width%20and%20height +import React from 'react'; +import { Box as NBBox, NativeBaseProvider, Center } from 'native-base'; + +const Box = (props) => { + return +} + +function Component() { + return ( + <> + { /* verbose */ } + + { /* shorthand */ } + + { /* use boxSizing */ } + + { /* width `50%` */ } + + { /* width `256px` h={8} */ } + + { /* width `'40px'` */ } + + + ); +} +export default function () { + return ( + +
+ +
+ + ); +} + +``` + +
+ +| Prop | CSS Eqquivalent | Theme Key | +| --------------- | --------------- | --------- | +| w, width | width | sizes | +| h, height | height | sizes | +| minW, minWidth | min-width | sizes | +| maxW, maxWidth | max-width | sizes | +| minH, minHeight | min-height | sizes | +| maxH, maxHeight | max-height | sizes | +| d, display | display | - | +| boxSize | width, height | sizes | +| verticalAlign | vertical-align | - | +| overflow | overflow | - | +| overflowX | overflowX | - | +| overflowY | overflowY | - | + +### Flexbox + +```SnackPlayer name=Flexbox +import React from 'react'; +import { Box as NBBox, Flex, NativeBaseProvider, Center } from 'native-base'; + +const Box = (props) => { + return +} + +function Component() { + return ( + <> + { /* verbose */ } + + + + + + { /* shorthand using the `Flex` component */ } + + + + + + ); +} +export default function () { + return ( + +
+ +
+ + ); +} + +``` + +
+ +| Prop | CSS Eqquivalent | Theme Key | +| ----------------------------------- | --------------- | --------- | +| alignItems, \*align | align-items | - | +| alignContent | align-content | - | +| justifyItems | justify-items | - | +| justifyContent, \*justify | justify-content | - | +| flexWrap, \*wrap | flex-wrap | - | +| flexDirection, flexDir, \*direction | flex-direction | - | +| flex | flex | - | +| flexGrow | flex-grow | - | +| flexShrink | flex-shrink | - | +| flexBasis | flex-basis | - | +| justifySelf | justify-self | - | +| alignSelf | align-self | - | +| order | order | - | + +### Borders + +```SnackPlayer name=Borders +import React from 'react'; +import { Box as NBBox, NativeBaseProvider, Center } from 'native-base'; + +const Box = (props) => { + return ; +}; + +function Component() { + return ( + <> + + + + + ); +} +export default function () { + return ( + +
+ +
+ + ); +} + + +``` + +
+ +| Prop | CSS Eququivalent | Theme Field | +| ----------------- | ------------------- | ------------ | +| border | border | borders | +| borderWidth | border-width | borderWidths | +| borderStyle | border-style | borderStyles | +| borderColor | border-color | colors | +| borderTop | border-top | borders | +| borderTopWidth | border-top-width | borderWidths | +| borderTopStyle | border-top-style | borderStyles | +| borderTopColor | border-top-color | colors | +| borderRight | border-right | borders | +| borderRightWidth | border-right-width | borderWidths | +| borderRightStyle | border-right-style | borderStyles | +| borderRightColor | border-right-color | colors | +| borderBottom | border-bottom | borders | +| borderBottomWidth | border-bottom-width | borderWidths | +| borderBottomStyle | border-bottom-style | borderStyles | +| borderBottomColor | border-bottom-color | colors | +| borderLeft | border-left | borders | +| borderLeftWidth | border-left-width | borderWidths | +| borderLeftStyle | border-left-style | borderStyles | +| borderLeftColor | border-left-color | colors | + +### Borders Radius + +```SnackPlayer name=Borders%20Radius +import React from 'react'; +import { Box as NBBox, NativeBaseProvider, Center } from 'native-base'; + +const Box = (props) => { + return +} + +function Component() { + return ( + <> + { /* picks up a nested radius value using dot notation */ } + { /* => `theme.radius.md` */ } + + + { /* partial border radius */ } + + { /* absolute value prop */ } + + + ); +} +export default function () { + return ( + +
+ +
+ + ); +} + +``` + +
+ +| Prop | CSS Eququivalent | Theme Field | +| ----------------------- | ------------------------------------------------------ | ----------- | +| borderRadius | border-radius | radii | +| borderTopLeftRadius | border-top-left-radius | radii | +| borderTopRightRadius | border-top-right-radius | radii | +| borderBottomRightRadius | border-bottom-right-radius | radii | +| borderBottomLeftRadius | border-bottom-left-radius | radii | +| borderTopRadius | border-top-left-radius & border-top-right-radius | radii | +| borderRightRadius | border-top-right-radius & border-bottom-right-radius | radii | +| borderBottomRadius | border-bottom-left-radius & border-bottom-right-radius | radii | +| borderLeftRadius | border-top-left-radius & border-bottom-left-radius | radii | + +### Position + +```SnackPlayer name=Position +import React from 'react'; +import { Box as NBBox, NativeBaseProvider, Center } from 'native-base'; + +const Box = (props) => { + return +} + +function Component() { + return ( + <> + + + + + ); +} +export default function () { + return ( + +
+ +
+ + ); +} + +``` + +
+ +| Prop | CSS Equivalent | Theme Field | +| ------------ | -------------- | ----------- | +| pos,position | position | - | +| zIndex | z-index | zIndices | +| top | top | space | +| right | right | space | +| bottom | bottom | space | +| left | left | space | + +### Shadow + +```SnackPlayer name=Shadow +import React from 'react'; +import { Box as NBBox, NativeBaseProvider, Center } from 'native-base'; + +const Box = (props) => { + return +} + +function Component() { + return ( + <> + { /* => `theme.shadows.md` */ } + + + + + + + ); +} +export default function () { + return ( + +
+ +
+ + ); +} + +``` + +
+ +| Prop | CSS Equivalent | Theme Field | +| ------ | -------------- | ----------- | +| shadow | box-shadow | shadows | + +## Underscore Props + +### Internal Props + +Provides a way to pass props to child components inside Composite componets. + +```SnackPlayer name=Internal +import React from 'react'; +import { Button, NativeBaseProvider, Center } from 'native-base'; + +function Example() { + return ( + + ); +} + +export default function () { + return ( + +
+ +
+ + ); +} + +``` + +
+ +| Prop | Type | Description | +| ------- | -------------------------- | -------------------------------------------------------- | +| \_stack | [IStackProps](stack#props) | Passed props will be provided to [`Stack`](stack) child. | +| \_text | [ITextProps](text#props) | Passed props will be provided to [`Text`](text) child. | + +### Interaction Props + +Provides a way to pass props on certain interaction. + +```SnackPlayer name=Internal +import React from 'react'; +import { Button, NativeBaseProvider, Center } from 'native-base'; + +function Example() { + return ( + + ); +} + +export default function () { + return ( + +
+ +
+ + ); +} + +``` + +
+ +| Prop | Type | Description | +| ---------- | ----------------------- | ----------------------------------------------- | +| \_disabled | _Same as the component_ | Passed props will be applied on disabled state. | +| \_focus | _Same as the component_ | Passed props will be applied on focused state. | +| \_hover | _Same as the component_ | Passed props will be applied on hovered state. | +| \_invalid | _Same as the component_ | Passed props will be applied on invalid state. | +| \_pressed | _Same as the component_ | Passed props will be applied on pressed state. | + +### Platform Props + +Provides a way to pass props bassed on Platform (_android, ios or web_). + +```SnackPlayer name=Internal +import React from 'react'; +import { Button, NativeBaseProvider, Center } from 'native-base'; + +function Example() { + return ( + + ); +} + +export default function () { + return ( + +
+ +
+ + ); +} + +``` + +
+ +| Prop | Type | Description | +| --------- | ----------------------- | ---------------------------------------- | +| \_android | _Same as the component_ | Passed props will be applied on android. | +| \_ios | _Same as the component_ | Passed props will be applied on ios. | +| \_web | _Same as the component_ | Passed props will be applied on web. | diff --git a/versioned_docs/version-3.2.1/utilityPropsSpecificity.md b/versioned_docs/version-3.2.1/utilityPropsSpecificity.md new file mode 100644 index 000000000..70e42236a --- /dev/null +++ b/versioned_docs/version-3.2.1/utilityPropsSpecificity.md @@ -0,0 +1,55 @@ +--- +id: utility-props-specificity +title: Utility Props Specificity +--- + +- If we have two similar props for a particular component, the more specific prop will be applied when the component is rendered. + + ```jsx + + ``` + + In the above example, we have two similar props for the Input component, but as you might have noticed `px={2}` is more specific than `p={0}` in terms of providing padding to the Input. This follows React Native's specificity precedence while applying utility style props to a component, order does not matter. So, `px={2}` will be applied when the Input component is rendered. + +- If we have a similar prop which is also defined in the baseStyle of that component, the value of the prop will override the value of the prop defined in the baseStyle. + + Let's take an example of `Input` to understand better. + + ```jsx + + + // baseStyle for Input component + return { + ... + px: 4, + py: 2, + ... + } + ``` + + As you can see, we have `px:2` and `py:2` defined in the baseStyle of Input component, but if we pass `p={0}` in the props of an Input, it will override the the baseStyle and apply `p={0}` to that component. **Similar happens with other utility props.** + +Now, here is an example to analyze both the cases together: + +```jsx + + +// baseStyle for Input component + return { + ... + px: 4, + py: 2, + ... + } + +``` +In the above example, what do you think should be the padding of the rendered Input component? + +Let's see. + +We have `p={0}` which will override the value of padding coming from the baseStyle of Input component, then we have `px={3}` which is a more specific prop. So, the padding of the rendered Input will be `padding : { paddingTop:0, paddingRight:3, paddingBottom:0, paddingLeft:3 }`. + + + + + diff --git a/versioned_docs/version-3.2.1/view.md b/versioned_docs/version-3.2.1/view.md new file mode 100644 index 000000000..dd1890b6f --- /dev/null +++ b/versioned_docs/version-3.2.1/view.md @@ -0,0 +1,18 @@ +--- +id: view +title: View +--- + +The most fundamental component for building a UI. + +## Example + +```ComponentSnackPlayer path=basic,View,Basic.tsx + +``` + +## Props + +```ComponentPropTable path=basic,View,View.tsx showStylingProps=true + +``` diff --git a/versioned_sidebars/version-3.2.1-sidebars.json b/versioned_sidebars/version-3.2.1-sidebars.json new file mode 100644 index 000000000..8c8572875 --- /dev/null +++ b/versioned_sidebars/version-3.2.1-sidebars.json @@ -0,0 +1,680 @@ +{ + "version-3.2.1/componentsSidebar": [ + { + "collapsed": false, + "type": "category", + "label": "Introduction", + "items": [ + { + "type": "doc", + "id": "version-3.2.1/getting-started" + }, + { + "type": "doc", + "id": "version-3.2.1/installation" + }, + { + "type": "doc", + "id": "version-3.2.1/setup-provider" + } + ] + }, + { + "collapsed": false, + "type": "category", + "label": "Core concepts", + "items": [ + { + "type": "doc", + "id": "version-3.2.1/utility-first" + }, + { + "type": "doc", + "id": "version-3.2.1/utility-props-specificity" + }, + { + "type": "doc", + "id": "version-3.2.1/design-tokens" + }, + { + "type": "doc", + "id": "version-3.2.1/pseudo-props" + }, + { + "type": "doc", + "id": "version-3.2.1/pseudo-props-101" + }, + { + "type": "doc", + "id": "version-3.2.1/responsive-style" + } + ] + }, + { + "collapsed": false, + "type": "category", + "label": "Features", + "items": [ + { + "type": "doc", + "id": "version-3.2.1/utility-props" + }, + { + "type": "doc", + "id": "version-3.2.1/color-mode" + }, + { + "type": "doc", + "id": "version-3.2.1/nativebase-factory" + }, + { + "type": "doc", + "id": "version-3.2.1/safe-area-view-props" + }, + { + "type": "doc", + "id": "version-3.2.1/strict-mode" + }, + { + "type": "doc", + "id": "version-3.2.1/accessibility" + } + ] + }, + { + "collapsed": false, + "type": "category", + "label": "Theme", + "items": [ + { + "type": "doc", + "id": "version-3.2.1/default-theme" + }, + { + "type": "doc", + "id": "version-3.2.1/customizing-theme" + }, + { + "type": "doc", + "id": "version-3.2.1/customizing-fonts" + }, + { + "type": "doc", + "id": "version-3.2.1/customizing-components" + }, + { + "type": "doc", + "id": "version-3.2.1/dark-mode" + }, + { + "type": "doc", + "id": "version-3.2.1/breakpoints" + }, + { + "type": "doc", + "id": "version-3.2.1/theme" + }, + { + "type": "doc", + "id": "version-3.2.1/typescript" + } + ] + }, + { + "collapsed": false, + "type": "category", + "label": "Layout", + "items": [ + { + "type": "doc", + "id": "version-3.2.1/box" + }, + { + "type": "doc", + "id": "version-3.2.1/center" + }, + { + "type": "doc", + "id": "version-3.2.1/container" + }, + { + "type": "doc", + "id": "version-3.2.1/flex" + }, + { + "type": "doc", + "id": "version-3.2.1/h-stack" + }, + { + "type": "doc", + "id": "version-3.2.1/stack" + }, + { + "type": "doc", + "id": "version-3.2.1/v-stack" + }, + { + "type": "doc", + "id": "version-3.2.1/z-stack" + } + ] + }, + { + "collapsed": false, + "type": "category", + "label": "Forms", + "items": [ + { + "type": "doc", + "id": "version-3.2.1/button" + }, + { + "type": "doc", + "id": "version-3.2.1/pressable" + }, + { + "type": "doc", + "id": "version-3.2.1/checkbox" + }, + { + "type": "doc", + "id": "version-3.2.1/form-control" + }, + { + "type": "doc", + "id": "version-3.2.1/icon-button" + }, + { + "type": "doc", + "id": "version-3.2.1/input" + }, + { + "type": "doc", + "id": "version-3.2.1/link" + }, + { + "type": "doc", + "id": "version-3.2.1/radio" + }, + { + "type": "doc", + "id": "version-3.2.1/select" + }, + { + "type": "doc", + "id": "version-3.2.1/slider" + }, + { + "type": "doc", + "id": "version-3.2.1/switch" + }, + { + "type": "doc", + "id": "version-3.2.1/textarea" + } + ] + }, + { + "collapsed": false, + "type": "category", + "label": "Data Display", + "items": [ + { + "type": "doc", + "id": "version-3.2.1/badge" + }, + { + "type": "doc", + "id": "version-3.2.1/divider" + } + ] + }, + { + "collapsed": false, + "type": "category", + "label": "Feedback", + "items": [ + { + "type": "doc", + "id": "version-3.2.1/alert" + }, + { + "type": "doc", + "id": "version-3.2.1/progress" + }, + { + "type": "doc", + "id": "version-3.2.1/spinner" + }, + { + "type": "doc", + "id": "version-3.2.1/toast" + } + ] + }, + { + "collapsed": false, + "type": "category", + "label": "Typography", + "items": [ + { + "type": "doc", + "id": "version-3.2.1/text" + }, + { + "type": "doc", + "id": "version-3.2.1/heading" + } + ] + }, + { + "collapsed": false, + "type": "category", + "label": "Overlay", + "items": [ + { + "type": "doc", + "id": "version-3.2.1/alert-dialog" + }, + { + "type": "doc", + "id": "version-3.2.1/menu" + }, + { + "type": "doc", + "id": "version-3.2.1/modal" + }, + { + "type": "doc", + "id": "version-3.2.1/popover" + }, + { + "type": "doc", + "id": "version-3.2.1/tooltip" + } + ] + }, + { + "collapsed": false, + "type": "category", + "label": "Disclosure", + "items": [ + { + "type": "doc", + "id": "version-3.2.1/action-sheet" + } + ] + }, + { + "collapsed": false, + "type": "category", + "label": "Media and Icons", + "items": [ + { + "type": "doc", + "id": "version-3.2.1/avatar" + }, + { + "type": "doc", + "id": "version-3.2.1/icon" + }, + { + "type": "doc", + "id": "version-3.2.1/image" + } + ] + }, + { + "collapsed": false, + "type": "category", + "label": "Transition", + "items": [ + { + "type": "doc", + "id": "version-3.2.1/presence-transition" + }, + { + "type": "doc", + "id": "version-3.2.1/slide" + }, + { + "type": "doc", + "id": "version-3.2.1/stagger" + } + ] + }, + { + "collapsed": false, + "type": "category", + "label": "Others", + "items": [ + { + "type": "doc", + "id": "version-3.2.1/FAB" + }, + { + "type": "doc", + "id": "version-3.2.1/hidden" + } + ] + }, + { + "collapsed": false, + "type": "category", + "label": "ReactNative Components", + "items": [ + { + "type": "doc", + "id": "version-3.2.1/scrollview" + }, + { + "type": "doc", + "id": "version-3.2.1/view" + }, + { + "type": "doc", + "id": "version-3.2.1/keyboard-avoiding-view" + }, + { + "type": "doc", + "id": "version-3.2.1/status-bar" + }, + { + "type": "doc", + "id": "version-3.2.1/flat-list" + }, + { + "type": "doc", + "id": "version-3.2.1/section-list" + } + ] + }, + { + "collapsed": false, + "type": "category", + "label": "Hooks", + "items": [ + { + "type": "doc", + "id": "version-3.2.1/use-disclosure" + }, + { + "type": "doc", + "id": "version-3.2.1/use-breakPoint-value" + }, + { + "type": "doc", + "id": "version-3.2.1/use-clipboard" + }, + { + "type": "doc", + "id": "version-3.2.1/use-media-query" + }, + { + "type": "doc", + "id": "version-3.2.1/use-theme" + }, + { + "type": "doc", + "id": "version-3.2.1/use-token" + }, + { + "type": "doc", + "id": "version-3.2.1/use-color-mode" + }, + { + "type": "doc", + "id": "version-3.2.1/use-color-mode-value" + }, + { + "type": "doc", + "id": "version-3.2.1/use-contrast-text" + }, + { + "type": "doc", + "id": "version-3.2.1/use-accessible-colors" + } + ] + }, + { + "type": "doc", + "id": "version-3.2.1/testing" + }, + { + "collapsed": false, + "type": "category", + "label": "Examples", + "items": [ + { + "type": "doc", + "id": "version-3.2.1/todo-example" + }, + { + "type": "doc", + "id": "version-3.2.1/kitchen-sink" + } + ] + }, + { + "collapsed": false, + "type": "category", + "label": "Recipes", + "items": [ + { + "collapsed": true, + "type": "category", + "label": "Designs", + "items": [ + { + "type": "doc", + "id": "version-3.2.1/building-app-bar" + }, + { + "type": "doc", + "id": "version-3.2.1/building-card" + }, + { + "type": "doc", + "id": "version-3.2.1/building-drawer-navigation" + }, + { + "type": "doc", + "id": "version-3.2.1/building-tab-view" + }, + { + "type": "doc", + "id": "version-3.2.1/building-swipe-list" + } + ] + }, + { + "collapsed": true, + "type": "category", + "label": "Forms", + "items": [ + { + "type": "doc", + "id": "version-3.2.1/form" + }, + { + "type": "doc", + "id": "version-3.2.1/login-signup-forms" + }, + { + "type": "doc", + "id": "version-3.2.1/building-search-bar" + } + ] + }, + { + "collapsed": true, + "type": "category", + "label": "Layout", + "items": [ + { + "type": "doc", + "id": "version-3.2.1/app-drawer" + }, + { + "type": "doc", + "id": "version-3.2.1/building-footer-tabs" + } + ] + } + ] + }, + { + "collapsed": false, + "type": "category", + "label": "Migration", + "items": [ + { + "type": "doc", + "id": "version-3.2.1/migration/migration-guide-three" + }, + { + "type": "doc", + "id": "version-3.2.1/migration/migration-guide-three-point-two" + }, + { + "collapsed": true, + "type": "category", + "label": "Components Migration", + "items": [ + { + "type": "doc", + "id": "version-3.2.1/migration/action-sheet" + }, + { + "type": "doc", + "id": "version-3.2.1/migration/badge" + }, + { + "type": "doc", + "id": "version-3.2.1/migration/button" + }, + { + "type": "doc", + "id": "version-3.2.1/migration/card" + }, + { + "type": "doc", + "id": "version-3.2.1/migration/checkbox" + }, + { + "type": "doc", + "id": "version-3.2.1/migration/date-picker" + }, + { + "type": "doc", + "id": "version-3.2.1/migration/deck-swiper" + }, + { + "type": "doc", + "id": "version-3.2.1/migration/drawer" + }, + { + "type": "doc", + "id": "version-3.2.1/migration/FABs" + }, + { + "type": "doc", + "id": "version-3.2.1/migration/footer-tab" + }, + { + "type": "doc", + "id": "version-3.2.1/migration/form" + }, + { + "type": "doc", + "id": "version-3.2.1/migration/header" + }, + { + "type": "doc", + "id": "version-3.2.1/migration/icon" + }, + { + "type": "doc", + "id": "version-3.2.1/migration/layout" + }, + { + "type": "doc", + "id": "version-3.2.1/migration/picker" + }, + { + "type": "doc", + "id": "version-3.2.1/migration/radio-button" + }, + { + "type": "doc", + "id": "version-3.2.1/migration/search-bar" + }, + { + "type": "doc", + "id": "version-3.2.1/migration/segment" + }, + { + "type": "doc", + "id": "version-3.2.1/migration/spinner" + }, + { + "type": "doc", + "id": "version-3.2.1/migration/swipe-list" + }, + { + "type": "doc", + "id": "version-3.2.1/migration/tabs" + }, + { + "type": "doc", + "id": "version-3.2.1/migration/thumbnail" + }, + { + "type": "doc", + "id": "version-3.2.1/migration/toast" + }, + { + "type": "doc", + "id": "version-3.2.1/migration/typography" + } + ] + } + ] + }, + { + "collapsed": false, + "type": "category", + "label": "More", + "items": [ + { + "type": "doc", + "id": "version-3.2.1/changelog" + }, + { + "type": "doc", + "id": "version-3.2.1/faq" + } + ] + }, + { + "type": "doc", + "id": "version-3.2.1/more-props" + }, + { + "type": "doc", + "id": "version-3.2.1/install-expo" + }, + { + "type": "doc", + "id": "version-3.2.1/install-rn" + }, + { + "type": "doc", + "id": "version-3.2.1/install-cra" + }, + { + "type": "doc", + "id": "version-3.2.1/install-next" + } + ] +} diff --git a/versions.json b/versions.json index b82e5df0f..f5878ada0 100644 --- a/versions.json +++ b/versions.json @@ -1,5 +1,5 @@ [ - "3.2.0", + "3.2.1", "3.1.0", "3.0.7", "3.0.6", From a40548a0042cdefea50d2cb2440ff7227885e9ea Mon Sep 17 00:00:00 2001 From: Nishan Bende Date: Tue, 12 Oct 2021 19:38:04 +0530 Subject: [PATCH 3/7] fix: change imports in 3.2.1 --- versioned_docs/version-3.2.1/FAB.md | 2 +- versioned_docs/version-3.2.1/actionSheet.md | 2 +- versioned_docs/version-3.2.1/alert.md | 6 +++--- versioned_docs/version-3.2.1/alertDialog.md | 5 +---- versioned_docs/version-3.2.1/avatar.md | 2 +- versioned_docs/version-3.2.1/badge.md | 2 +- versioned_docs/version-3.2.1/button.mdx | 2 +- versioned_docs/version-3.2.1/checkBox.md | 2 +- versioned_docs/version-3.2.1/divider.md | 2 +- versioned_docs/version-3.2.1/formControl.md | 2 +- .../version-3.2.1/getting-started.mdx | 4 ++-- versioned_docs/version-3.2.1/heading.md | 2 +- versioned_docs/version-3.2.1/hidden.md | 2 +- versioned_docs/version-3.2.1/iconButton.md | 2 +- versioned_docs/version-3.2.1/input.md | 2 +- versioned_docs/version-3.2.1/install-cra.mdx | 2 +- versioned_docs/version-3.2.1/install-expo.mdx | 8 +------- versioned_docs/version-3.2.1/install-next.mdx | 3 +-- versioned_docs/version-3.2.1/install-rn.mdx | 9 +-------- versioned_docs/version-3.2.1/installation.mdx | 2 +- versioned_docs/version-3.2.1/kitchen-sink.mdx | 2 +- versioned_docs/version-3.2.1/link.md | 4 ++-- versioned_docs/version-3.2.1/menu.md | 5 ++--- versioned_docs/version-3.2.1/modal.md | 2 +- versioned_docs/version-3.2.1/popOver.md | 4 ++-- versioned_docs/version-3.2.1/progress.md | 2 +- versioned_docs/version-3.2.1/radio.md | 2 +- versioned_docs/version-3.2.1/select.md | 2 +- versioned_docs/version-3.2.1/slider.md | 19 +++++++------------ versioned_docs/version-3.2.1/text.md | 2 +- versioned_docs/version-3.2.1/textArea.md | 2 +- versioned_docs/version-3.2.1/toast.md | 2 +- versioned_docs/version-3.2.1/tooltip.md | 2 +- .../version-3.2.1/utility-first.mdx | 4 ++-- 34 files changed, 47 insertions(+), 70 deletions(-) diff --git a/versioned_docs/version-3.2.1/FAB.md b/versioned_docs/version-3.2.1/FAB.md index 1dddda32b..b2da69276 100644 --- a/versioned_docs/version-3.2.1/FAB.md +++ b/versioned_docs/version-3.2.1/FAB.md @@ -3,7 +3,7 @@ id: FAB title: FAB --- -import { ComponentTheme } from '../src/components'; +import { ComponentTheme } from '../../src/components'; A floating action button is a circular icon button that hovers over content to promote a primary action in the application. diff --git a/versioned_docs/version-3.2.1/actionSheet.md b/versioned_docs/version-3.2.1/actionSheet.md index 940d5c246..0035b1242 100644 --- a/versioned_docs/version-3.2.1/actionSheet.md +++ b/versioned_docs/version-3.2.1/actionSheet.md @@ -3,7 +3,7 @@ id: action-sheet title: ActionSheet --- -import { ComponentTheme } from '../src/components'; +import { ComponentTheme } from '../../src/components'; An Action Sheet is a dialog that displays a set of options. It appears on top of the app's content. diff --git a/versioned_docs/version-3.2.1/alert.md b/versioned_docs/version-3.2.1/alert.md index 8c3d0b47a..1b8c4d293 100644 --- a/versioned_docs/version-3.2.1/alert.md +++ b/versioned_docs/version-3.2.1/alert.md @@ -3,7 +3,7 @@ id: alert title: Alert --- -import { ComponentTheme } from '../src/components'; +import { ComponentTheme } from '../../src/components'; `Alerts` are used to communicate a state that affects a system, feature or page. @@ -13,8 +13,8 @@ NativeBase exports 5 Alert related components: - `Alert`: The wrapper for alert components. - `Alert.Icon`: The visual icon for the alert that changes based on the `status` prop. - - + + ```jsx import { Alert } from 'native-base'; diff --git a/versioned_docs/version-3.2.1/alertDialog.md b/versioned_docs/version-3.2.1/alertDialog.md index 138554305..b4f1cfbc0 100644 --- a/versioned_docs/version-3.2.1/alertDialog.md +++ b/versioned_docs/version-3.2.1/alertDialog.md @@ -3,7 +3,7 @@ id: alert-dialog title: AlertDialog --- -import { ComponentTheme } from '../src/components'; +import { ComponentTheme } from '../../src/components'; `AlertDialog` component is used to interrupt the user with a mandatory confirmation or action. AlertDialog composes [`Modal`](modal.md) so you can use all its props. @@ -40,7 +40,6 @@ AlertDialog and its components compose the **[Modal](modal.md)** component, so a | ------------------- | --------- | -------------------------------------------------------------- | ------- | | leastDestructiveRef | React.Ref | The least destructive action to get focus when dialog is open. | - | - ## Accessibility Adheres to the [Alert and Message Dialogs WAI-ARIA design pattern.](https://www.w3.org/TR/wai-aria-practices-1.2/#alertdialog) @@ -54,5 +53,3 @@ Adheres to the [Alert and Message Dialogs WAI-ARIA design pattern.](https://www. | Tab | Moves focus to the next focusable element. | | Shift + Tab | Moves focus to the previous focusable element. | | Esc | Closes the dialog and moves focus to AlertDialog.Trigger. | - - diff --git a/versioned_docs/version-3.2.1/avatar.md b/versioned_docs/version-3.2.1/avatar.md index a0b5f1913..dff7875cc 100644 --- a/versioned_docs/version-3.2.1/avatar.md +++ b/versioned_docs/version-3.2.1/avatar.md @@ -3,7 +3,7 @@ id: avatar title: Avatar --- -import { ComponentTheme } from '../src/components'; +import { ComponentTheme } from '../../src/components'; `Avatar` component is used to represent a user and it can display a profile picture, initials or a fallback icon. diff --git a/versioned_docs/version-3.2.1/badge.md b/versioned_docs/version-3.2.1/badge.md index 23636b2ae..607a80451 100644 --- a/versioned_docs/version-3.2.1/badge.md +++ b/versioned_docs/version-3.2.1/badge.md @@ -3,7 +3,7 @@ id: badge title: Badge --- -import { ComponentTheme } from '../src/components'; +import { ComponentTheme } from '../../src/components'; `Badges` are used to highlight an item's status for quick recognition. diff --git a/versioned_docs/version-3.2.1/button.mdx b/versioned_docs/version-3.2.1/button.mdx index 9e25eaec8..4d2260a91 100644 --- a/versioned_docs/version-3.2.1/button.mdx +++ b/versioned_docs/version-3.2.1/button.mdx @@ -3,7 +3,7 @@ id: button title: Button --- -import { ComponentTheme } from '../src/components'; +import { ComponentTheme } from '../../src/components'; The `Button` component is used to trigger an action or event. diff --git a/versioned_docs/version-3.2.1/checkBox.md b/versioned_docs/version-3.2.1/checkBox.md index 933b5cc30..10ee1772f 100644 --- a/versioned_docs/version-3.2.1/checkBox.md +++ b/versioned_docs/version-3.2.1/checkBox.md @@ -3,7 +3,7 @@ id: checkbox title: CheckBox --- -import { ComponentTheme } from '../src/components'; +import { ComponentTheme } from '../../src/components'; The `Checkbox` component is used in forms when a user needs to select multiple values from several options. diff --git a/versioned_docs/version-3.2.1/divider.md b/versioned_docs/version-3.2.1/divider.md index a6bd0c33c..70f897268 100644 --- a/versioned_docs/version-3.2.1/divider.md +++ b/versioned_docs/version-3.2.1/divider.md @@ -3,7 +3,7 @@ id: divider title: Divider --- -import { ComponentTheme } from '../src/components'; +import { ComponentTheme } from '../../src/components'; `Divider` is used to visually separate content in a list or group. diff --git a/versioned_docs/version-3.2.1/formControl.md b/versioned_docs/version-3.2.1/formControl.md index 931133b29..05b32b0d3 100644 --- a/versioned_docs/version-3.2.1/formControl.md +++ b/versioned_docs/version-3.2.1/formControl.md @@ -3,7 +3,7 @@ id: form-control title: FormControl --- -import { ComponentTheme } from '../src/components'; +import { ComponentTheme } from '../../src/components'; `FormControl` provides context such as `isInvalid`, `isDisabled`, and `isRequired` to form elements. diff --git a/versioned_docs/version-3.2.1/getting-started.mdx b/versioned_docs/version-3.2.1/getting-started.mdx index 670c72d99..0c37272fc 100644 --- a/versioned_docs/version-3.2.1/getting-started.mdx +++ b/versioned_docs/version-3.2.1/getting-started.mdx @@ -4,7 +4,7 @@ title: Getting Started slug: / --- -import { KitchenSinkIframe, TileLink, NBHistory } from '../src/components'; +import { KitchenSinkIframe, TileLink, NBHistory } from '../../src/components'; import TOCInline from '@theme/TOCInline';
@@ -42,7 +42,7 @@ import TOCInline from '@theme/TOCInline'; className="bg-indigo-600" />
- +
diff --git a/versioned_docs/version-3.2.1/heading.md b/versioned_docs/version-3.2.1/heading.md index 40a96a759..971b44a20 100644 --- a/versioned_docs/version-3.2.1/heading.md +++ b/versioned_docs/version-3.2.1/heading.md @@ -3,7 +3,7 @@ id: heading title: Heading --- -import { ComponentTheme } from '../src/components'; +import { ComponentTheme } from '../../src/components'; Headings are used for rendering headlines. `Heading` composes [`Text`](text.md) so you can use all the style props. diff --git a/versioned_docs/version-3.2.1/hidden.md b/versioned_docs/version-3.2.1/hidden.md index 2a8b0b906..0d74cacee 100644 --- a/versioned_docs/version-3.2.1/hidden.md +++ b/versioned_docs/version-3.2.1/hidden.md @@ -3,7 +3,7 @@ id: hidden title: Hidden --- -import { ComponentTheme } from '../src/components'; +import { ComponentTheme } from '../../src/components'; Hidden is used to toggle the visibility value of child components responsively, based on the colorMode or based on the platform. It doesn't mount the child components in the restricted values of props. diff --git a/versioned_docs/version-3.2.1/iconButton.md b/versioned_docs/version-3.2.1/iconButton.md index 0767912b5..60d5f1741 100644 --- a/versioned_docs/version-3.2.1/iconButton.md +++ b/versioned_docs/version-3.2.1/iconButton.md @@ -3,7 +3,7 @@ id: icon-button title: IconButton --- -import { ComponentTheme } from '../src/components'; +import { ComponentTheme } from '../../src/components'; `IconButton` composes the `Button` component. It is generally used to make an Icon pressable. diff --git a/versioned_docs/version-3.2.1/input.md b/versioned_docs/version-3.2.1/input.md index 641f15c50..9dcf9e138 100644 --- a/versioned_docs/version-3.2.1/input.md +++ b/versioned_docs/version-3.2.1/input.md @@ -3,7 +3,7 @@ id: input title: Input --- -import { ComponentTheme } from '../src/components'; +import { ComponentTheme } from '../../src/components'; The `Input` component is a component that is used to get user input in a text field. diff --git a/versioned_docs/version-3.2.1/install-cra.mdx b/versioned_docs/version-3.2.1/install-cra.mdx index 5cb6b9652..853c65e3a 100644 --- a/versioned_docs/version-3.2.1/install-cra.mdx +++ b/versioned_docs/version-3.2.1/install-cra.mdx @@ -5,7 +5,7 @@ title: Install in Create React App project import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; -import { TileLink } from '../src/components'; +import { TileLink } from '../../src/components'; - @@ -108,13 +106,9 @@ export default function App() { } ``` - - - -
minions clapping
diff --git a/versioned_docs/version-3.2.1/install-next.mdx b/versioned_docs/version-3.2.1/install-next.mdx index 06d2dccab..dc9dbca16 100644 --- a/versioned_docs/version-3.2.1/install-next.mdx +++ b/versioned_docs/version-3.2.1/install-next.mdx @@ -5,7 +5,7 @@ title: Install in Next.js project import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; -import { TileLink } from '../src/components'; +import { TileLink } from '../../src/components'; -

Choose your preferred setting and start your development swiftly 🚀

diff --git a/versioned_docs/version-3.2.1/install-rn.mdx b/versioned_docs/version-3.2.1/install-rn.mdx index 202de7126..8ed3a885d 100644 --- a/versioned_docs/version-3.2.1/install-rn.mdx +++ b/versioned_docs/version-3.2.1/install-rn.mdx @@ -5,8 +5,7 @@ title: Install in React Native project import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; -import { TileLink } from '../src/components'; - +import { TileLink } from '../../src/components'; - - - ### Create a new project using ReactNative CLI with NativeBase template [Refer this link](https://github.com/react-native-community/cli#about) to get infomation about the React Native CLI. @@ -44,10 +40,8 @@ npx react-native init MyApp --template react-native-template-native-base-typescr Yey! you are all set, start editing App.js/App.tsx now. - - ### Create a new project if not exist @@ -112,7 +106,6 @@ export default function App() { -
diff --git a/versioned_docs/version-3.2.1/installation.mdx b/versioned_docs/version-3.2.1/installation.mdx index 5b8e02daa..91616aeed 100644 --- a/versioned_docs/version-3.2.1/installation.mdx +++ b/versioned_docs/version-3.2.1/installation.mdx @@ -3,7 +3,7 @@ id: installation title: Installation --- -import { InstallationTiles } from '../src/components'; +import { InstallationTiles } from '../../src/components'; **NativeBase** is supported in [Expo](https://docs.expo.io/get-started/installation/) or React Native CLI initiated apps. Web support is made possible by [react-native-web](https://necolas.github.io/react-native-web/). diff --git a/versioned_docs/version-3.2.1/kitchen-sink.mdx b/versioned_docs/version-3.2.1/kitchen-sink.mdx index 000ac0ae3..7187d2c16 100644 --- a/versioned_docs/version-3.2.1/kitchen-sink.mdx +++ b/versioned_docs/version-3.2.1/kitchen-sink.mdx @@ -3,7 +3,7 @@ id: kitchen-sink title: Kitchen Sink --- -import { KitchenSinkIframe, TileLink, NBHistory } from '../src/components'; +import { KitchenSinkIframe, TileLink, NBHistory } from '../../src/components'; import useBaseUrl from '@docusaurus/useBaseUrl'; import ExpoIcon from '@site/static/img/expo-icon.svg'; import useThemeContext from '@theme/hooks/useThemeContext'; diff --git a/versioned_docs/version-3.2.1/link.md b/versioned_docs/version-3.2.1/link.md index 96c5d2b60..cdfcb946a 100644 --- a/versioned_docs/version-3.2.1/link.md +++ b/versioned_docs/version-3.2.1/link.md @@ -3,7 +3,7 @@ id: link title: Link --- -import { ComponentTheme } from '../src/components'; +import { ComponentTheme } from '../../src/components'; `Links` are accessible elements used primarily for navigation. This component is styled to resemble a hyperlink. @@ -57,4 +57,4 @@ import { Link } from 'native-base'; ## Accessibility -Adheres to the [Link WAI-ARIA design pattern.](https://www.w3.org/TR/wai-aria-practices-1.2/#link) \ No newline at end of file +Adheres to the [Link WAI-ARIA design pattern.](https://www.w3.org/TR/wai-aria-practices-1.2/#link) diff --git a/versioned_docs/version-3.2.1/menu.md b/versioned_docs/version-3.2.1/menu.md index 70d276936..736456663 100644 --- a/versioned_docs/version-3.2.1/menu.md +++ b/versioned_docs/version-3.2.1/menu.md @@ -3,7 +3,7 @@ id: menu title: Menu --- -import { ComponentTheme } from '../src/components'; +import { ComponentTheme } from '../../src/components'; A dropdown menu for the common dropdown menu button design pattern. @@ -89,7 +89,6 @@ Extends `MenuItem`. - ## Accessibility -Adheres to the [Menu WAI-ARIA design pattern.](https://www.w3.org/TR/wai-aria-practices-1.2/#menu) \ No newline at end of file +Adheres to the [Menu WAI-ARIA design pattern.](https://www.w3.org/TR/wai-aria-practices-1.2/#menu) diff --git a/versioned_docs/version-3.2.1/modal.md b/versioned_docs/version-3.2.1/modal.md index f4a013563..cd8f50169 100644 --- a/versioned_docs/version-3.2.1/modal.md +++ b/versioned_docs/version-3.2.1/modal.md @@ -3,7 +3,7 @@ id: modal title: Modal --- -import { ComponentTheme } from '../src/components'; +import { ComponentTheme } from '../../src/components'; A Modal is a window overlaid on either the primary window or another dialog window. Content behind a modal dialog is **inert**, meaning that users cannot interact with it. diff --git a/versioned_docs/version-3.2.1/popOver.md b/versioned_docs/version-3.2.1/popOver.md index 4ee92bdd4..57a4c1ed5 100644 --- a/versioned_docs/version-3.2.1/popOver.md +++ b/versioned_docs/version-3.2.1/popOver.md @@ -3,7 +3,7 @@ id: popover title: Popover --- -import { ComponentTheme } from '../src/components'; +import { ComponentTheme } from '../../src/components'; `Popover` is a non-modal dialog that floats around a trigger. It's used to display contextual information to the user, and should be paired with a pressable trigger element. @@ -71,7 +71,7 @@ You can pass custom backgroundColor using `bg` or `backgroundColor`, `borderColo `Popover.Body` composes the [`Box`](box.md) component. -### Popover.CloseButton  +### Popover.CloseButton `Popover.CloseButton` composes the [`Button`](button.md) component. diff --git a/versioned_docs/version-3.2.1/progress.md b/versioned_docs/version-3.2.1/progress.md index c6eabd361..9fe5ee80c 100644 --- a/versioned_docs/version-3.2.1/progress.md +++ b/versioned_docs/version-3.2.1/progress.md @@ -3,7 +3,7 @@ id: progress title: Progress --- -import { ComponentTheme } from '../src/components'; +import { ComponentTheme } from '../../src/components'; `Progress` is used to display the progress status for a task that takes a long time or consists of several steps. diff --git a/versioned_docs/version-3.2.1/radio.md b/versioned_docs/version-3.2.1/radio.md index 04da350e5..63485030b 100644 --- a/versioned_docs/version-3.2.1/radio.md +++ b/versioned_docs/version-3.2.1/radio.md @@ -3,7 +3,7 @@ id: radio title: Radio --- -import { ComponentTheme } from '../src/components'; +import { ComponentTheme } from '../../src/components'; `Radio` is used when only one choice may be selected in a series of options. diff --git a/versioned_docs/version-3.2.1/select.md b/versioned_docs/version-3.2.1/select.md index aceb730d5..cfecd7ead 100644 --- a/versioned_docs/version-3.2.1/select.md +++ b/versioned_docs/version-3.2.1/select.md @@ -3,7 +3,7 @@ id: select title: Select --- -import { ComponentTheme } from '../src/components'; +import { ComponentTheme } from '../../src/components'; import { AndroidBadge } from "/src/components/index"; diff --git a/versioned_docs/version-3.2.1/slider.md b/versioned_docs/version-3.2.1/slider.md index 0d74ff95f..b8d94b9e9 100644 --- a/versioned_docs/version-3.2.1/slider.md +++ b/versioned_docs/version-3.2.1/slider.md @@ -3,7 +3,7 @@ id: slider title: Slider --- -import { ComponentTheme } from '../src/components'; +import { ComponentTheme } from '../../src/components'; The `Slider` is used to allow users to make selections from a range of values. @@ -72,20 +72,15 @@ import { Slider } from 'native-base'; - ## Accessibility Adheres to the [Slider WAI-ARIA design pattern.](https://www.w3.org/TR/wai-aria-practices-1.2/#slidertwothumb) ### Keyboard Interactions -| Name | Description | -| ------------------|-------------| -| ArrowRight | Increments/decrements by the step value depending on orientation.| -| ArrowLeft | Increments/decrements by the step value depending on orientation. -| ArrowUp | Increases the value by the step amount. -| ArrowDown | Decreases the value by the step amount. - - - - +| Name | Description | +| ---------- | ----------------------------------------------------------------- | +| ArrowRight | Increments/decrements by the step value depending on orientation. | +| ArrowLeft | Increments/decrements by the step value depending on orientation. | +| ArrowUp | Increases the value by the step amount. | +| ArrowDown | Decreases the value by the step amount. | diff --git a/versioned_docs/version-3.2.1/text.md b/versioned_docs/version-3.2.1/text.md index 04eca5545..10d3cdfe5 100644 --- a/versioned_docs/version-3.2.1/text.md +++ b/versioned_docs/version-3.2.1/text.md @@ -3,7 +3,7 @@ id: text title: Text --- -import { ComponentTheme } from '../src/components'; +import { ComponentTheme } from '../../src/components'; `Text` is used to render text and paragraphs within an interface. diff --git a/versioned_docs/version-3.2.1/textArea.md b/versioned_docs/version-3.2.1/textArea.md index 55c834ffa..31f18b444 100644 --- a/versioned_docs/version-3.2.1/textArea.md +++ b/versioned_docs/version-3.2.1/textArea.md @@ -3,7 +3,7 @@ id: textarea title: TextArea --- -import { ComponentTheme } from '../src/components'; +import { ComponentTheme } from '../../src/components'; The `Textarea` component allows you to easily create multi-line text inputs. diff --git a/versioned_docs/version-3.2.1/toast.md b/versioned_docs/version-3.2.1/toast.md index 914ce3de9..af50b7379 100644 --- a/versioned_docs/version-3.2.1/toast.md +++ b/versioned_docs/version-3.2.1/toast.md @@ -3,7 +3,7 @@ id: toast title: Toast --- -import { ComponentTheme } from '../src/components'; +import { ComponentTheme } from '../../src/components'; `Toast` is used to show alerts on top of an overlay. `Toast` will close itself when the close button is clicked, or after a timeout — the default is 5 seconds. The toast component is used to give feeback to users after an action has taken place. diff --git a/versioned_docs/version-3.2.1/tooltip.md b/versioned_docs/version-3.2.1/tooltip.md index 1d35cabf6..5723d66e1 100644 --- a/versioned_docs/version-3.2.1/tooltip.md +++ b/versioned_docs/version-3.2.1/tooltip.md @@ -3,7 +3,7 @@ id: tooltip title: Tooltip --- -import { ComponentTheme } from '../src/components'; +import { ComponentTheme } from '../../src/components'; A tooltip is a brief, informative message that appears when a user interacts with an element. Tooltips are usually initiated in one of two ways: through a mouse-hover gesture or through a keyboard-hover gesture. diff --git a/versioned_docs/version-3.2.1/utility-first.mdx b/versioned_docs/version-3.2.1/utility-first.mdx index ebd5645c6..9de7d2ddb 100644 --- a/versioned_docs/version-3.2.1/utility-first.mdx +++ b/versioned_docs/version-3.2.1/utility-first.mdx @@ -3,8 +3,8 @@ id: utility-first title: Utility First --- -import { UtilityFirstExample } from '../src/components'; -import { KitchenSinkIframe, TileLink, NBHistory } from '../src/components'; +import { UtilityFirstExample } from '../../src/components'; +import { KitchenSinkIframe, TileLink, NBHistory } from '../../src/components'; React Native has a great StyleSheet API which is optimal for component-based systems. NativeBase leverages it and adds a layer of utility props and constraint based designed tokens on top of it. From 7bbf82b30fed20d607aca8eaa1737999a5cbfa65 Mon Sep 17 00:00:00 2001 From: Nishan Bende Date: Wed, 13 Oct 2021 10:52:15 +0530 Subject: [PATCH 4/7] fix: unterminated jsx error --- versioned_docs/version-3.2.1/getting-started.mdx | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/versioned_docs/version-3.2.1/getting-started.mdx b/versioned_docs/version-3.2.1/getting-started.mdx index 0c37272fc..858d2bcc4 100644 --- a/versioned_docs/version-3.2.1/getting-started.mdx +++ b/versioned_docs/version-3.2.1/getting-started.mdx @@ -48,6 +48,7 @@ import TOCInline from '@theme/TOCInline';
+

A Brief History of NativeBase

@@ -89,5 +90,3 @@ We had clear goals in mind while building version 3. Take a look at some of the The default theme can be extended as you desire. You can also customise specific components for your app needs.
- - From 856e5dd074f3a0036b040a7268418357c9f9fd8f Mon Sep 17 00:00:00 2001 From: Nishan Bende Date: Wed, 13 Oct 2021 17:06:49 +0530 Subject: [PATCH 5/7] don't know --- versioned_docs/version-3.2.1/FAB.md | 44 -- versioned_docs/version-3.2.1/VStack.md | 24 - versioned_docs/version-3.2.1/ZStack.md | 28 - versioned_docs/version-3.2.1/accessibility.md | 24 - versioned_docs/version-3.2.1/actionSheet.md | 78 -- versioned_docs/version-3.2.1/alert.md | 87 --- versioned_docs/version-3.2.1/alertDialog.md | 55 -- versioned_docs/version-3.2.1/appDrawer.md | 70 -- versioned_docs/version-3.2.1/avatar.md | 76 -- versioned_docs/version-3.2.1/badge.md | 50 -- versioned_docs/version-3.2.1/box.md | 139 ---- versioned_docs/version-3.2.1/breakpoints.md | 131 ---- .../version-3.2.1/buildingAppBar.md | 48 -- .../version-3.2.1/buildingDrawerNavigation.md | 174 ----- .../version-3.2.1/buildingFooterTabs.md | 131 ---- .../version-3.2.1/buildingSearchBar.md | 117 --- .../version-3.2.1/buildingSwipeList.md | 195 ----- .../version-3.2.1/buildingTabView.md | 106 --- versioned_docs/version-3.2.1/builldingCard.md | 104 --- versioned_docs/version-3.2.1/button.mdx | 84 --- versioned_docs/version-3.2.1/center.md | 48 -- versioned_docs/version-3.2.1/changelog.md | 32 - versioned_docs/version-3.2.1/checkBox.md | 104 --- versioned_docs/version-3.2.1/colorMode.md | 163 ----- versioned_docs/version-3.2.1/container.md | 56 -- .../version-3.2.1/customizingComponents.md | 160 ----- .../version-3.2.1/customizingFonts.md | 87 --- .../version-3.2.1/customizingTheme.md | 108 --- versioned_docs/version-3.2.1/darkMode.md | 89 --- versioned_docs/version-3.2.1/default-theme.md | 229 ------ versioned_docs/version-3.2.1/design-tokens.md | 69 -- versioned_docs/version-3.2.1/divider.md | 56 -- versioned_docs/version-3.2.1/faq.md | 6 - versioned_docs/version-3.2.1/flatList.md | 152 ---- versioned_docs/version-3.2.1/flex.md | 44 -- versioned_docs/version-3.2.1/form.md | 199 ----- versioned_docs/version-3.2.1/formControl.md | 52 -- .../version-3.2.1/getting-started.mdx | 92 --- versioned_docs/version-3.2.1/hStack.md | 24 - versioned_docs/version-3.2.1/heading.md | 56 -- versioned_docs/version-3.2.1/hidden.md | 125 ---- versioned_docs/version-3.2.1/icon.md | 54 -- versioned_docs/version-3.2.1/iconButton.md | 43 -- versioned_docs/version-3.2.1/image.md | 49 -- versioned_docs/version-3.2.1/input.md | 76 -- versioned_docs/version-3.2.1/install-cra.mdx | 131 ---- versioned_docs/version-3.2.1/install-expo.mdx | 141 ---- versioned_docs/version-3.2.1/install-next.mdx | 263 ------- versioned_docs/version-3.2.1/install-rn.mdx | 138 ---- versioned_docs/version-3.2.1/installation.mdx | 30 - .../version-3.2.1/interaction-styles.mdx | 229 ------ .../version-3.2.1/keyboardAvoidingView.md | 18 - versioned_docs/version-3.2.1/kitchen-sink.mdx | 66 -- versioned_docs/version-3.2.1/link.md | 60 -- .../version-3.2.1/loginsignupforms.md | 157 ---- versioned_docs/version-3.2.1/menu.md | 94 --- .../version-3.2.1/migration/Accordion.md | 89 --- .../version-3.2.1/migration/Actionsheet.md | 107 --- .../version-3.2.1/migration/Badge.md | 44 -- .../version-3.2.1/migration/Button.md | 196 ----- .../Screenshot_2021-01-22_at_1.15.34_PM.png | Bin 9022 -> 0 bytes .../Screenshot_2021-01-22_at_1.16.25_PM.png | Bin 8669 -> 0 bytes .../Screenshot_2021-01-22_at_1.17.11_PM.png | Bin 10048 -> 0 bytes .../Screenshot_2021-01-22_at_1.20.36_PM.png | Bin 9795 -> 0 bytes .../Screenshot_2021-01-22_at_1.22.36_PM.png | Bin 8306 -> 0 bytes .../Screenshot_2021-01-22_at_1.23.42_PM.png | Bin 7841 -> 0 bytes .../Screenshot_2021-01-22_at_1.32.47_PM.png | Bin 9384 -> 0 bytes .../Screenshot_2021-01-22_at_1.38.15_PM.png | Bin 10101 -> 0 bytes .../Screenshot_2021-01-22_at_12.29.32_PM.png | Bin 8297 -> 0 bytes .../Screenshot_2021-01-22_at_12.53.09_PM.png | Bin 8494 -> 0 bytes .../Screenshot_2021-01-22_at_2.37.09_PM.png | Bin 8816 -> 0 bytes .../Screenshot_2021-01-22_at_2.38.52_PM.png | Bin 8409 -> 0 bytes .../version-3.2.1/migration/Card.md | 91 --- .../version-3.2.1/migration/Checkbox.md | 54 -- .../Screenshot_2021-01-22_at_3.09.29_PM.png | Bin 10808 -> 0 bytes .../Screenshot_2021-01-22_at_4.34.08_PM.png | Bin 9954 -> 0 bytes .../version-3.2.1/migration/DatePicker.md | 6 - .../version-3.2.1/migration/DeckSwiper.md | 8 - .../version-3.2.1/migration/Drawer.md | 6 - .../version-3.2.1/migration/FABs.md | 63 -- .../version-3.2.1/migration/FooterTab.md | 6 - .../version-3.2.1/migration/Form.md | 72 -- .../version-3.2.1/migration/Header.md | 6 - .../version-3.2.1/migration/Icon.md | 80 --- .../version-3.2.1/migration/Layout.md | 77 -- .../version-3.2.1/migration/List.md | 0 .../version-3.2.1/migration/Picker.md | 91 --- .../version-3.2.1/migration/Radio Button.md | 95 --- .../version-3.2.1/migration/Searchbar.md | 6 - .../version-3.2.1/migration/Segment.md | 7 - .../version-3.2.1/migration/Spinner.md | 47 -- .../version-3.2.1/migration/SwipeList.md | 6 - .../version-3.2.1/migration/Tabs.md | 67 -- .../version-3.2.1/migration/Thumbnail.md | 73 -- .../version-3.2.1/migration/Toast.md | 84 --- .../version-3.2.1/migration/Typography.md | 39 - versioned_docs/version-3.2.1/migration/v3.md | 19 - .../version-3.2.1/migration/v3xtov32.md | 71 -- versioned_docs/version-3.2.1/modal.md | 104 --- versioned_docs/version-3.2.1/more-props.md | 13 - .../version-3.2.1/nativebase-factory.md | 155 ---- versioned_docs/version-3.2.1/popOver.md | 94 --- .../version-3.2.1/presence-transition.md | 63 -- versioned_docs/version-3.2.1/pressable.md | 32 - versioned_docs/version-3.2.1/progress.md | 62 -- versioned_docs/version-3.2.1/pseudoProps.md | 86 --- versioned_docs/version-3.2.1/radio.md | 97 --- versioned_docs/version-3.2.1/responsive.md | 173 ----- .../version-3.2.1/safe-area-view-props.md | 99 --- versioned_docs/version-3.2.1/scrollview.md | 18 - versioned_docs/version-3.2.1/sectionList.md | 18 - versioned_docs/version-3.2.1/select.md | 87 --- .../version-3.2.1/setup-provider.md | 129 ---- versioned_docs/version-3.2.1/slide.md | 38 - versioned_docs/version-3.2.1/slider.md | 86 --- versioned_docs/version-3.2.1/spinner.md | 32 - versioned_docs/version-3.2.1/stack.md | 18 - versioned_docs/version-3.2.1/stagger.md | 54 -- versioned_docs/version-3.2.1/statusBar.md | 18 - versioned_docs/version-3.2.1/strict-mode.md | 39 - versioned_docs/version-3.2.1/switch.md | 50 -- versioned_docs/version-3.2.1/testing.md | 25 - versioned_docs/version-3.2.1/text.md | 44 -- versioned_docs/version-3.2.1/textArea.md | 38 - versioned_docs/version-3.2.1/theme.md | 205 ------ versioned_docs/version-3.2.1/toast.md | 88 --- versioned_docs/version-3.2.1/todo-list.md | 135 ---- versioned_docs/version-3.2.1/tooltip.md | 65 -- versioned_docs/version-3.2.1/typescript.md | 40 -- .../version-3.2.1/useAccessibleColors.md | 64 -- .../version-3.2.1/useBreakPointValue.md | 133 ---- versioned_docs/version-3.2.1/useClipboard.md | 73 -- versioned_docs/version-3.2.1/useColorMode.md | 56 -- .../version-3.2.1/useColorModeValue.md | 52 -- .../version-3.2.1/useContrastText.md | 103 --- versioned_docs/version-3.2.1/useDisclosure.md | 74 -- versioned_docs/version-3.2.1/useMediaQuery.md | 440 ------------ versioned_docs/version-3.2.1/useTheme.md | 22 - versioned_docs/version-3.2.1/useToken.md | 51 -- .../version-3.2.1/utility-first.mdx | 218 ------ versioned_docs/version-3.2.1/utilityProps.md | 679 ------------------ .../version-3.2.1/utilityPropsSpecificity.md | 55 -- versioned_docs/version-3.2.1/view.md | 18 - 143 files changed, 11018 deletions(-) delete mode 100644 versioned_docs/version-3.2.1/FAB.md delete mode 100644 versioned_docs/version-3.2.1/VStack.md delete mode 100644 versioned_docs/version-3.2.1/ZStack.md delete mode 100644 versioned_docs/version-3.2.1/accessibility.md delete mode 100644 versioned_docs/version-3.2.1/actionSheet.md delete mode 100644 versioned_docs/version-3.2.1/alert.md delete mode 100644 versioned_docs/version-3.2.1/alertDialog.md delete mode 100644 versioned_docs/version-3.2.1/appDrawer.md delete mode 100644 versioned_docs/version-3.2.1/avatar.md delete mode 100644 versioned_docs/version-3.2.1/badge.md delete mode 100644 versioned_docs/version-3.2.1/box.md delete mode 100644 versioned_docs/version-3.2.1/breakpoints.md delete mode 100644 versioned_docs/version-3.2.1/buildingAppBar.md delete mode 100644 versioned_docs/version-3.2.1/buildingDrawerNavigation.md delete mode 100644 versioned_docs/version-3.2.1/buildingFooterTabs.md delete mode 100644 versioned_docs/version-3.2.1/buildingSearchBar.md delete mode 100644 versioned_docs/version-3.2.1/buildingSwipeList.md delete mode 100644 versioned_docs/version-3.2.1/buildingTabView.md delete mode 100644 versioned_docs/version-3.2.1/builldingCard.md delete mode 100644 versioned_docs/version-3.2.1/button.mdx delete mode 100644 versioned_docs/version-3.2.1/center.md delete mode 100644 versioned_docs/version-3.2.1/changelog.md delete mode 100644 versioned_docs/version-3.2.1/checkBox.md delete mode 100644 versioned_docs/version-3.2.1/colorMode.md delete mode 100644 versioned_docs/version-3.2.1/container.md delete mode 100644 versioned_docs/version-3.2.1/customizingComponents.md delete mode 100644 versioned_docs/version-3.2.1/customizingFonts.md delete mode 100644 versioned_docs/version-3.2.1/customizingTheme.md delete mode 100644 versioned_docs/version-3.2.1/darkMode.md delete mode 100644 versioned_docs/version-3.2.1/default-theme.md delete mode 100644 versioned_docs/version-3.2.1/design-tokens.md delete mode 100644 versioned_docs/version-3.2.1/divider.md delete mode 100644 versioned_docs/version-3.2.1/faq.md delete mode 100644 versioned_docs/version-3.2.1/flatList.md delete mode 100644 versioned_docs/version-3.2.1/flex.md delete mode 100644 versioned_docs/version-3.2.1/form.md delete mode 100644 versioned_docs/version-3.2.1/formControl.md delete mode 100644 versioned_docs/version-3.2.1/getting-started.mdx delete mode 100644 versioned_docs/version-3.2.1/hStack.md delete mode 100644 versioned_docs/version-3.2.1/heading.md delete mode 100644 versioned_docs/version-3.2.1/hidden.md delete mode 100644 versioned_docs/version-3.2.1/icon.md delete mode 100644 versioned_docs/version-3.2.1/iconButton.md delete mode 100644 versioned_docs/version-3.2.1/image.md delete mode 100644 versioned_docs/version-3.2.1/input.md delete mode 100644 versioned_docs/version-3.2.1/install-cra.mdx delete mode 100644 versioned_docs/version-3.2.1/install-expo.mdx delete mode 100644 versioned_docs/version-3.2.1/install-next.mdx delete mode 100644 versioned_docs/version-3.2.1/install-rn.mdx delete mode 100644 versioned_docs/version-3.2.1/installation.mdx delete mode 100644 versioned_docs/version-3.2.1/interaction-styles.mdx delete mode 100644 versioned_docs/version-3.2.1/keyboardAvoidingView.md delete mode 100644 versioned_docs/version-3.2.1/kitchen-sink.mdx delete mode 100644 versioned_docs/version-3.2.1/link.md delete mode 100644 versioned_docs/version-3.2.1/loginsignupforms.md delete mode 100644 versioned_docs/version-3.2.1/menu.md delete mode 100644 versioned_docs/version-3.2.1/migration/Accordion.md delete mode 100644 versioned_docs/version-3.2.1/migration/Actionsheet.md delete mode 100644 versioned_docs/version-3.2.1/migration/Badge.md delete mode 100644 versioned_docs/version-3.2.1/migration/Button.md delete mode 100644 versioned_docs/version-3.2.1/migration/Button/Screenshot_2021-01-22_at_1.15.34_PM.png delete mode 100644 versioned_docs/version-3.2.1/migration/Button/Screenshot_2021-01-22_at_1.16.25_PM.png delete mode 100644 versioned_docs/version-3.2.1/migration/Button/Screenshot_2021-01-22_at_1.17.11_PM.png delete mode 100644 versioned_docs/version-3.2.1/migration/Button/Screenshot_2021-01-22_at_1.20.36_PM.png delete mode 100644 versioned_docs/version-3.2.1/migration/Button/Screenshot_2021-01-22_at_1.22.36_PM.png delete mode 100644 versioned_docs/version-3.2.1/migration/Button/Screenshot_2021-01-22_at_1.23.42_PM.png delete mode 100644 versioned_docs/version-3.2.1/migration/Button/Screenshot_2021-01-22_at_1.32.47_PM.png delete mode 100644 versioned_docs/version-3.2.1/migration/Button/Screenshot_2021-01-22_at_1.38.15_PM.png delete mode 100644 versioned_docs/version-3.2.1/migration/Button/Screenshot_2021-01-22_at_12.29.32_PM.png delete mode 100644 versioned_docs/version-3.2.1/migration/Button/Screenshot_2021-01-22_at_12.53.09_PM.png delete mode 100644 versioned_docs/version-3.2.1/migration/Button/Screenshot_2021-01-22_at_2.37.09_PM.png delete mode 100644 versioned_docs/version-3.2.1/migration/Button/Screenshot_2021-01-22_at_2.38.52_PM.png delete mode 100644 versioned_docs/version-3.2.1/migration/Card.md delete mode 100644 versioned_docs/version-3.2.1/migration/Checkbox.md delete mode 100644 versioned_docs/version-3.2.1/migration/Checkbox/Screenshot_2021-01-22_at_3.09.29_PM.png delete mode 100644 versioned_docs/version-3.2.1/migration/Checkbox/Screenshot_2021-01-22_at_4.34.08_PM.png delete mode 100644 versioned_docs/version-3.2.1/migration/DatePicker.md delete mode 100644 versioned_docs/version-3.2.1/migration/DeckSwiper.md delete mode 100644 versioned_docs/version-3.2.1/migration/Drawer.md delete mode 100644 versioned_docs/version-3.2.1/migration/FABs.md delete mode 100644 versioned_docs/version-3.2.1/migration/FooterTab.md delete mode 100644 versioned_docs/version-3.2.1/migration/Form.md delete mode 100644 versioned_docs/version-3.2.1/migration/Header.md delete mode 100644 versioned_docs/version-3.2.1/migration/Icon.md delete mode 100644 versioned_docs/version-3.2.1/migration/Layout.md delete mode 100644 versioned_docs/version-3.2.1/migration/List.md delete mode 100644 versioned_docs/version-3.2.1/migration/Picker.md delete mode 100644 versioned_docs/version-3.2.1/migration/Radio Button.md delete mode 100644 versioned_docs/version-3.2.1/migration/Searchbar.md delete mode 100644 versioned_docs/version-3.2.1/migration/Segment.md delete mode 100644 versioned_docs/version-3.2.1/migration/Spinner.md delete mode 100644 versioned_docs/version-3.2.1/migration/SwipeList.md delete mode 100644 versioned_docs/version-3.2.1/migration/Tabs.md delete mode 100644 versioned_docs/version-3.2.1/migration/Thumbnail.md delete mode 100644 versioned_docs/version-3.2.1/migration/Toast.md delete mode 100644 versioned_docs/version-3.2.1/migration/Typography.md delete mode 100644 versioned_docs/version-3.2.1/migration/v3.md delete mode 100644 versioned_docs/version-3.2.1/migration/v3xtov32.md delete mode 100644 versioned_docs/version-3.2.1/modal.md delete mode 100644 versioned_docs/version-3.2.1/more-props.md delete mode 100644 versioned_docs/version-3.2.1/nativebase-factory.md delete mode 100644 versioned_docs/version-3.2.1/popOver.md delete mode 100644 versioned_docs/version-3.2.1/presence-transition.md delete mode 100644 versioned_docs/version-3.2.1/pressable.md delete mode 100644 versioned_docs/version-3.2.1/progress.md delete mode 100644 versioned_docs/version-3.2.1/pseudoProps.md delete mode 100644 versioned_docs/version-3.2.1/radio.md delete mode 100644 versioned_docs/version-3.2.1/responsive.md delete mode 100644 versioned_docs/version-3.2.1/safe-area-view-props.md delete mode 100644 versioned_docs/version-3.2.1/scrollview.md delete mode 100644 versioned_docs/version-3.2.1/sectionList.md delete mode 100644 versioned_docs/version-3.2.1/select.md delete mode 100644 versioned_docs/version-3.2.1/setup-provider.md delete mode 100644 versioned_docs/version-3.2.1/slide.md delete mode 100644 versioned_docs/version-3.2.1/slider.md delete mode 100644 versioned_docs/version-3.2.1/spinner.md delete mode 100644 versioned_docs/version-3.2.1/stack.md delete mode 100644 versioned_docs/version-3.2.1/stagger.md delete mode 100644 versioned_docs/version-3.2.1/statusBar.md delete mode 100644 versioned_docs/version-3.2.1/strict-mode.md delete mode 100644 versioned_docs/version-3.2.1/switch.md delete mode 100644 versioned_docs/version-3.2.1/testing.md delete mode 100644 versioned_docs/version-3.2.1/text.md delete mode 100644 versioned_docs/version-3.2.1/textArea.md delete mode 100644 versioned_docs/version-3.2.1/theme.md delete mode 100644 versioned_docs/version-3.2.1/toast.md delete mode 100644 versioned_docs/version-3.2.1/todo-list.md delete mode 100644 versioned_docs/version-3.2.1/tooltip.md delete mode 100644 versioned_docs/version-3.2.1/typescript.md delete mode 100644 versioned_docs/version-3.2.1/useAccessibleColors.md delete mode 100644 versioned_docs/version-3.2.1/useBreakPointValue.md delete mode 100644 versioned_docs/version-3.2.1/useClipboard.md delete mode 100644 versioned_docs/version-3.2.1/useColorMode.md delete mode 100644 versioned_docs/version-3.2.1/useColorModeValue.md delete mode 100644 versioned_docs/version-3.2.1/useContrastText.md delete mode 100644 versioned_docs/version-3.2.1/useDisclosure.md delete mode 100644 versioned_docs/version-3.2.1/useMediaQuery.md delete mode 100644 versioned_docs/version-3.2.1/useTheme.md delete mode 100644 versioned_docs/version-3.2.1/useToken.md delete mode 100644 versioned_docs/version-3.2.1/utility-first.mdx delete mode 100644 versioned_docs/version-3.2.1/utilityProps.md delete mode 100644 versioned_docs/version-3.2.1/utilityPropsSpecificity.md delete mode 100644 versioned_docs/version-3.2.1/view.md diff --git a/versioned_docs/version-3.2.1/FAB.md b/versioned_docs/version-3.2.1/FAB.md deleted file mode 100644 index b2da69276..000000000 --- a/versioned_docs/version-3.2.1/FAB.md +++ /dev/null @@ -1,44 +0,0 @@ ---- -id: FAB -title: FAB ---- - -import { ComponentTheme } from '../../src/components'; - -A floating action button is a circular icon button that hovers over content to promote a primary action in the application. - -## Import - -```jsx -import { Fab } from 'native-base'; -``` - -## Example - -### Basic - -```ComponentSnackPlayer path=composites,Fab,Basic.tsx - -``` - -### Placement - -```ComponentSnackPlayer path=composites,Fab,Placement.tsx - -``` - -### Custom Position - -```ComponentSnackPlayer path=composites,Fab,CustomPosition.tsx - -``` - -## Styling - - - -## Props - -```ComponentPropTable path=composites,Fab,Fab.tsx - -``` diff --git a/versioned_docs/version-3.2.1/VStack.md b/versioned_docs/version-3.2.1/VStack.md deleted file mode 100644 index 94bc25cf0..000000000 --- a/versioned_docs/version-3.2.1/VStack.md +++ /dev/null @@ -1,24 +0,0 @@ ---- -id: v-stack -title: VStack / Column ---- - -`VStack` aligns items vertically.`Column` is also an alias for `VStack`. - -## Import - -```jsx -import { VStack } from 'native-base'; -``` - -## Usage - -```ComponentSnackPlayer path=primitives,VStack,basic.tsx - -``` - -## Props - -```ComponentPropTable path=primitives,Stack,VStack.tsx - -``` diff --git a/versioned_docs/version-3.2.1/ZStack.md b/versioned_docs/version-3.2.1/ZStack.md deleted file mode 100644 index 1daab38f9..000000000 --- a/versioned_docs/version-3.2.1/ZStack.md +++ /dev/null @@ -1,28 +0,0 @@ ---- -id: z-stack -title: ZStack ---- - -`ZStack` aligns items absolutely in the z-axis. - -## Examples - -### Basic - -```ComponentSnackPlayer path=primitives,ZStack,example.tsx - -``` - -### Items Centered - -You can pass `alignItems="center"` `justifyContent="center"` to vertically and horizontally center the children. - -```ComponentSnackPlayer path=primitives,ZStack,CenterStack.tsx - -``` - -## Props - -```ComponentPropTable path=primitives,ZStack,index.tsx - -``` diff --git a/versioned_docs/version-3.2.1/accessibility.md b/versioned_docs/version-3.2.1/accessibility.md deleted file mode 100644 index 3ccb492bb..000000000 --- a/versioned_docs/version-3.2.1/accessibility.md +++ /dev/null @@ -1,24 +0,0 @@ ---- -id: accessibility -title: Accessibility ---- - -NativeBase comes with the latest accessibility standards out of the box including aria and role attributes, focus management, and keyboard navigation. - -## Accessible Roles - -NativeBase uses [React Native ARIA](https://react-native-aria.geekyants.com/) to implements [WAI-ARIA](https://www.w3.org/TR/wai-aria-1.2/) standards to its components. This is designed to provide meaning for controls that aren't built using components provided by the platform. - -## Accessible Labels - -When a view is marked as accessible, it is a good practice to set an `accessibilityLabel` on the view, so that people who use voice-over know what element they have selected. Voice-over will read this string when a user selects the associated element. NativeBase with the use of [React Native ARIA](https://react-native-aria.geekyants.com/) does this for you out of the box. - -## Keyboard Navigation - -Many complex components, like Tabs and Dialog, come with expectations from users on how to interact with their content using a keyboard or other non-mouse input modalities. NativeBase Primitives provide basic keyboard support in accordance with the [WAI-ARIA authoring practices](https://www.w3.org/TR/wai-aria-practices-1.2/). - -## Focus Management - -Proper keyboard navigation and good labelling often go hand-in-hand with managing focus. When a user interacts with a component and something changes as a result, it's often helpful to move focus with the interaction. And for screen reader users, moving focus often results in an announcement to convey the new context, which relies on proper labelling. - -In many NativeBase Components, we move focus based on the interactions a user normally takes in a given component. For example, in `Modal`, when the modal is opened, the focus is programmatically moved to the `first focusable element` and trapped inside the modal to anticipate a response to the prompt. diff --git a/versioned_docs/version-3.2.1/actionSheet.md b/versioned_docs/version-3.2.1/actionSheet.md deleted file mode 100644 index 0035b1242..000000000 --- a/versioned_docs/version-3.2.1/actionSheet.md +++ /dev/null @@ -1,78 +0,0 @@ ---- -id: action-sheet -title: ActionSheet ---- - -import { ComponentTheme } from '../../src/components'; - -An Action Sheet is a dialog that displays a set of options. It appears on top of the app's content. - -## Import - -NativeBase exports 3 modal-related components: - -- **Actionsheet**: Provides the context and state for all components. -- **Actionsheet.Content**: Component to wrap the list of **Actionsheet.Item** components. -- **Actionsheet.Item**: A button to wrap the options of the Actionsheet. - -```jsx -import { Actionsheet } from 'native-base'; -``` - -## Examples - -### Usage - -```ComponentSnackPlayer path=composites,Actionsheet,Usage.tsx - -``` - -### Composition - -```ComponentSnackPlayer path=composites,Actionsheet,Composition.tsx - -``` - -### DisableOverlay - -```ComponentSnackPlayer path=composites,Actionsheet,DisableOverlay.tsx - -``` - -### Icons - -```ComponentSnackPlayer path=composites,Actionsheet,Icon.tsx - -``` - -## Props - -### Actionsheet - -```ComponentPropTable path=composites,Actionsheet,Actionsheet.tsx - -``` - -### Actionsheet.Content - -```ComponentPropTable path=composites,Actionsheet,ActionsheetContent.tsx - -``` - -### Actionsheet.Item - -ActionsheetItem implements [Button](button.md#props) - -## Styling - - - -## Accessibility - -- ActionSheet has `aria-modal` set to true. -- ActionSheet has `role` set to `dialog`. -- When the ActionSheet opens, focus is trapped within it. -- Pressing Esc closes the ActionSheet. -- When the ActionSheet opens, focus is automatically set to the first enabled element. -- Clicking on the overlay closes the ActionSheet. -- Scrolling is blocked on the elements behind the ActionSheet. diff --git a/versioned_docs/version-3.2.1/alert.md b/versioned_docs/version-3.2.1/alert.md deleted file mode 100644 index 1b8c4d293..000000000 --- a/versioned_docs/version-3.2.1/alert.md +++ /dev/null @@ -1,87 +0,0 @@ ---- -id: alert -title: Alert ---- - -import { ComponentTheme } from '../../src/components'; - -`Alerts` are used to communicate a state that affects a system, feature or page. - -## Import - -NativeBase exports 5 Alert related components: - -- `Alert`: The wrapper for alert components. -- `Alert.Icon`: The visual icon for the alert that changes based on the `status` prop. - - - -```jsx -import { Alert } from 'native-base'; -``` - -## Examples - -### Basic - -```ComponentSnackPlayer path=composites,Alert,usage.tsx - -``` - -### Status - -```ComponentSnackPlayer path=composites,Alert,status.tsx - -``` - -### Variant - -```ComponentSnackPlayer path=composites,Alert,variant.tsx - -``` - -### Composition - -```ComponentSnackPlayer path=composites,Alert,composition.tsx - -``` - -### Action - -```ComponentSnackPlayer path=composites,Alert,action.tsx - -``` - -## Props - -### Alert - -```ComponentPropTable path=composites,Alert,Alert.tsx - -``` - -### Alert.Icon - -```ComponentPropTable path=composites,Alert,AlertIcon.tsx - -``` - -### Alert.Title - -```ComponentPropTable path=composites,Alert,AlertTitle.tsx - -``` - -### Alert.Description - -```ComponentPropTable path=composites,Alert,AlertDescription.tsx - -``` - -## Styling - - - -## Accessibility - -Alert has `role` set to `alert`. diff --git a/versioned_docs/version-3.2.1/alertDialog.md b/versioned_docs/version-3.2.1/alertDialog.md deleted file mode 100644 index b4f1cfbc0..000000000 --- a/versioned_docs/version-3.2.1/alertDialog.md +++ /dev/null @@ -1,55 +0,0 @@ ---- -id: alert-dialog -title: AlertDialog ---- - -import { ComponentTheme } from '../../src/components'; - -`AlertDialog` component is used to interrupt the user with a mandatory confirmation or action. AlertDialog composes [`Modal`](modal.md) so you can use all its props. - -## Import - -- `AlertDialog`: provides context and state for the dialog. -- `AlertDialog.Header`: contains the title announced by screen readers. -- `AlertDialog.Body`: contains the description announced by screen readers. -- `AlertDialog.Footer`: contains the actions of the dialog. -- `AlertDialog.Content`: The wrapper for the alert dialog's content. -- `AlertDialog.CloseButton`: The button that closes the dialog. - -```jsx -import { AlertDialog } from 'native-base'; -``` - -## Examples - -### Basic - -```ComponentSnackPlayer path=composites,AlertDialog,Basic.tsx - -``` - -## Styling - - - -## Props - -AlertDialog and its components compose the **[Modal](modal.md)** component, so all the [`Modal props`](modal.md#props) can be passed to it. The only exception is that it requires `leastDestructiveRef` which is similar to `initialFocusRef` of `Modal`. - -| Name | Type | Description | Default | -| ------------------- | --------- | -------------------------------------------------------------- | ------- | -| leastDestructiveRef | React.Ref | The least destructive action to get focus when dialog is open. | - | - -## Accessibility - -Adheres to the [Alert and Message Dialogs WAI-ARIA design pattern.](https://www.w3.org/TR/wai-aria-practices-1.2/#alertdialog) - -### Keyboard Interactions - -| Name | Description | -| ----------- | --------------------------------------------------------- | -| Space | Opens/closes the dialog. | -| Enter | Opens/closes the dialog. | -| Tab | Moves focus to the next focusable element. | -| Shift + Tab | Moves focus to the previous focusable element. | -| Esc | Closes the dialog and moves focus to AlertDialog.Trigger. | diff --git a/versioned_docs/version-3.2.1/appDrawer.md b/versioned_docs/version-3.2.1/appDrawer.md deleted file mode 100644 index 3fa173b72..000000000 --- a/versioned_docs/version-3.2.1/appDrawer.md +++ /dev/null @@ -1,70 +0,0 @@ ---- -id: app-drawer -title: App drawer ---- - -Creating an app drawer like layout is very common and with NativeBase's SimpleGrid make this extremely simple while still keeping it extremely customisable. Here is an example to illustrate it. - -```SnackPlayer name=AppDrawer -import React from 'react'; -import { - IconButton, - SimpleGrid, - Icon, - NativeBaseProvider, - Box, -} from 'native-base'; -import { MaterialIcons } from '@expo/vector-icons'; - -function AppDrawer() { - const icons = [ - { name: 'bolt', bg: 'amber.600' }, - { name: 'build', bg: 'emerald.600' }, - { name: 'cloud', bg: 'blue.600' }, - { name: 'delivery-dining', bg: 'orange.600' }, - { name: 'favorite', bg: 'rose.600' }, - { name: 'music-note', bg: 'violet.600' }, - { name: 'invert-colors-on', bg: 'lime.600' }, - { name: 'navigation', bg: 'indigo.600' }, - { name: 'settings', bg: 'pink.600' }, - { name: 'sports-esports', bg: 'coolGray.600' }, - { name: 'shield', bg: 'darkBlue.600' }, - { name: 'photo-camera', bg: 'fuchsia.600' }, - { name: 'network-wifi', bg: 'amber.500' }, - { name: 'nightlight-round', bg: 'violet.800' }, - { name: 'flight', bg: 'blue.800' }, - { name: 'extension', bg: 'indigo.600' }, - { name: 'duo', bg: 'orange.600' }, - { name: 'album', bg: 'rose.600' }, - { name: 'access-alarm', bg: 'emerald.600' }, - { name: 'forum', bg: 'indigo.600' }, - ]; - - return ( - - {icons.map((icon) => ( - - } - /> - ))} - - ); -} - -export default function () { - return ( - - - - - - ); -} - -``` diff --git a/versioned_docs/version-3.2.1/avatar.md b/versioned_docs/version-3.2.1/avatar.md deleted file mode 100644 index dff7875cc..000000000 --- a/versioned_docs/version-3.2.1/avatar.md +++ /dev/null @@ -1,76 +0,0 @@ ---- -id: avatar -title: Avatar ---- - -import { ComponentTheme } from '../../src/components'; - -`Avatar` component is used to represent a user and it can display a profile picture, initials or a fallback icon. - -## Import - -NativeBase exports 3 avatar-related components: - -- `Avatar`: An image that represents the user. -- `Avatar.Badge`: A wrapper that displays its content on the bottom right corner of the avatar. -- `Avatar.Group`: A wrapper to stack multiple avatars together. - -```jsx -import { Avatar } from 'native-base'; -``` - -## Examples - -### Basic - -```ComponentSnackPlayer path=composites,Avatar,usage.tsx - -``` - -### Sizes - -```ComponentSnackPlayer path=composites,Avatar,size.tsx - -``` - -### Fallbacks - -```ComponentSnackPlayer path=composites,Avatar,Fallback.tsx - -``` - -### Avatar Badge - -```ComponentSnackPlayer path=composites,Avatar,AvatarBadge.tsx - -``` - -### Avatar Group - -```ComponentSnackPlayer path=composites,Avatar,AvatarGroup.tsx - -``` - -## Props - -### Avatar - -```ComponentPropTable path=composites,Avatar,Avatar.tsx - -``` - -### Avatar.Group - -```ComponentPropTable path=composites,Avatar,Group.tsx - -``` - -### Avatar.Badge - -```ComponentPropTable path=composites,Avatar,Badge.tsx - -``` - -## Styling - - diff --git a/versioned_docs/version-3.2.1/badge.md b/versioned_docs/version-3.2.1/badge.md deleted file mode 100644 index 607a80451..000000000 --- a/versioned_docs/version-3.2.1/badge.md +++ /dev/null @@ -1,50 +0,0 @@ ---- -id: badge -title: Badge ---- - -import { ComponentTheme } from '../../src/components'; - -`Badges` are used to highlight an item's status for quick recognition. - -## Import - -```jsx -import { Badge } from 'native-base'; -``` - -## Examples - -### Basic - -```ComponentSnackPlayer path=composites,Badge,usage.tsx - -``` - -### Color Scheme - -```ComponentSnackPlayer path=composites,Badge,color.tsx - -``` - -### Variants - -```ComponentSnackPlayer path=composites,Badge,variants.tsx - -``` - -### Composition - -```ComponentSnackPlayer path=composites,Badge,composition.tsx - -``` - -## Props - -```ComponentPropTable path=composites,Badge,index.tsx - -``` - -## Styling - - diff --git a/versioned_docs/version-3.2.1/box.md b/versioned_docs/version-3.2.1/box.md deleted file mode 100644 index fd38a7ed2..000000000 --- a/versioned_docs/version-3.2.1/box.md +++ /dev/null @@ -1,139 +0,0 @@ ---- -id: box -title: Box ---- - -This is a generic component for low level layout needs. It is similar to a [`div`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/div) in HTML. - -## Example - -### Basic - -```ComponentSnackPlayer path=primitives,Box,basic.tsx - -``` - -
- -### Composition - -```ComponentSnackPlayer path=primitives,Box,composition.tsx - -``` - -
- -### With Linear gradient - -If you're using [Expo](https://docs.expo.io/) managed or bare workflow, you can install [expo-linear-gradient](https://docs.expo.io/versions/latest/sdk/linear-gradient/) and configure it in the [NativeBaseProvider](setup-provider#add-external-dependencies-optional) as shown below. - -```SnackPlayer name=LinearGradient -import React from "react" -import { Box, Center, NativeBaseProvider } from "native-base" - -export const Example = () => { - return ( - - This is a Box with Linear Gradient - - ) -} - -const config = { - dependencies: { - 'linear-gradient': require('expo-linear-gradient').LinearGradient - } -} - -export default () => { - return ( - -
- -
- - ) -} -``` - -
- -If you're not using Expo, you can install [react-native-linear-gradient](https://www.npmjs.com/package/react-native-linear-gradient) and configure in the [NativeBaseProvider](setup-provider#add-external-dependencies-optional) as shown below. - -```jsx -import React from 'react'; -import { Box, NativeBaseProvider } from 'native-base'; - -const Example = () => { - return ( - - This is a Box with Linear Gradient - - ); -}; - -const config = { - dependencies: { - 'linear-gradient': require('react-native-linear-gradient').default, - }, -}; - -export default () => { - return ( - - - - ); -}; -``` - -
- -### Basic (With Ref) - -```ComponentSnackPlayer path=primitives,Box,WithRef.tsx - -``` - -
-
- -:::tip Common use cases for Box component are: - -- Create responsive layouts with ease. -- Provide a shorthand to pass styles via props (`bg` instead of `backgroundColor`). - -::: - -## Props - -```ComponentPropTable path=primitives,Box,index.tsx showStylingProps=true - -``` diff --git a/versioned_docs/version-3.2.1/breakpoints.md b/versioned_docs/version-3.2.1/breakpoints.md deleted file mode 100644 index 563075139..000000000 --- a/versioned_docs/version-3.2.1/breakpoints.md +++ /dev/null @@ -1,131 +0,0 @@ ---- -id: breakpoints -title: Breakpoints ---- - -Breakpoints are the building blocks of responsive design. Use them to control when your layout can be adapted at a particular viewport or device size. - -NativeBase provides these default breakpoints and you can update with using extendTheme. - -```tsx -breakpoints = { - base: 0, - sm: 480, - md: 768, - lg: 992, - xl: 1280, -}; -``` - -`useBreakpointValue` is a custom hook which returns the value for the current breakpoint from the provided responsive values object. This hook also responds to the window resizing and returning the appropriate value for the new window size. - -```SnackPlayer name=useBreakpointValue -import React from 'react'; -import { - Factory, - Button, - Stack, - NativeBaseProvider, - Center, -} from 'native-base'; -import { TextInput } from 'react-native'; - -import { Icon, useBreakpointValue, Text, VStack, Heading } from 'native-base'; -import { FontAwesome, Foundation, Feather } from '@expo/vector-icons'; -import { View } from 'react-native'; - -export const UseBreakpointValueExample = () => { - const flexDir = useBreakpointValue({ - base: 'column', - lg: 'row', - }); - return ( - - Why us? - - - - - Secure Checkout - - - - - - Secure Checkout - - - - - - Fast Turn Around - - - - - ); -}; - -// Example template which wraps component with NativeBaseProvider -export default function () { - return ( - -
- -
- - ); -} - -``` diff --git a/versioned_docs/version-3.2.1/buildingAppBar.md b/versioned_docs/version-3.2.1/buildingAppBar.md deleted file mode 100644 index 463c93df3..000000000 --- a/versioned_docs/version-3.2.1/buildingAppBar.md +++ /dev/null @@ -1,48 +0,0 @@ ---- -id: building-app-bar -title: AppBar ---- - -The top app bar provides content and actions related to the current screen. It’s used for branding, screen titles, navigation, and actions. - -## Example - -We can easily create it using basic layout components from NativeBase. - -```SnackPlayer name=App%20Bar -import React from "react"; -import { VStack, HStack, Button, IconButton, Icon, Text, NativeBaseProvider, Center, Box, StatusBar } from "native-base"; -import { MaterialIcons } from '@expo/vector-icons'; - -function AppBar(){ - return ( - <> - - - - - - - } color="white" />} /> - Home - - - } size='sm' color="white" />} /> - } - color="white" size='sm' />} /> - } size='sm' color="white" />} /> - - - - - ) -} - -export default function () { - return ( - - - - ); -} -``` diff --git a/versioned_docs/version-3.2.1/buildingDrawerNavigation.md b/versioned_docs/version-3.2.1/buildingDrawerNavigation.md deleted file mode 100644 index aa78a13c7..000000000 --- a/versioned_docs/version-3.2.1/buildingDrawerNavigation.md +++ /dev/null @@ -1,174 +0,0 @@ ---- -id: building-drawer-navigation -title: Drawer Navigation ---- - -Common pattern in navigation is to use drawer from left (sometimes right) side for navigating between screens. - -## Example - -Here is an example to show how easily and quickly we can use React Native's [DrawerNavigation](https://reactnavigation.org/docs/drawer-based-navigation/) in NB. - -```SnackPlayer name=Drawer-Navigation dependencies=@react-navigation/stack@5.1.0,@react-navigation/drawer,@react-navigation/native@5.0.8,react-native-vector-icons,react-native-gesture-handler@1.10.2,react-native-linear-gradient,@react-native-community/masked-view@0.1.10,react-native-screens@3.0.0,react-native-reanimated@2.1.0 -import * as React from 'react'; -import { NavigationContainer } from '@react-navigation/native'; -import { - createDrawerNavigator, - DrawerContentScrollView, -} from '@react-navigation/drawer'; -import { - MaterialCommunityIcons -} from '@expo/vector-icons'; -import { - NativeBaseProvider, - Button, - Box, - HamburgerIcon, - Pressable, - Heading, - VStack, - Text, - Center, - HStack, - Divider, - Icon -} from 'native-base'; -const Drawer = createDrawerNavigator(); -function Component(props) { - return ( - - props.navigation.toggleDrawer()} position="absolute" ml="2" zIndex="1"> - - -
- {props.route.name} -
- - ); -} - -const getIcon = (screenName) => { - switch (screenName) { - case 'Inbox': - return "email" - case 'Outbox': - return 'send' - case 'Favorites': - return 'heart' - case 'Archive': - return 'archive' - case 'Trash': - return 'trash-can' - case 'Spam': - return 'alert-circle' - default: - return undefined - } -} - -function CustomDrawerContent(props) { - return ( - - - - Mail - john_doe@gmail.com - - } space="4"> - - {props.state.routeNames.map((name, index) => ( - { - props.navigation.navigate(name); - }} - > - - } /> - - {name} - - - - ))} - - - Labels - - - - } /> - - Family - - - - - - } /> - - Friends - - - - - - } /> - - Work - - - - - - - - - ); -} -function MyDrawer() { - return ( - - } - > - - - - - - - - - ); -} -export default function App() { - return ( - - - - - - ); -} -``` diff --git a/versioned_docs/version-3.2.1/buildingFooterTabs.md b/versioned_docs/version-3.2.1/buildingFooterTabs.md deleted file mode 100644 index 4a4e7f597..000000000 --- a/versioned_docs/version-3.2.1/buildingFooterTabs.md +++ /dev/null @@ -1,131 +0,0 @@ ---- -id: building-footer-tabs -title: Footer ---- - -With NativeBase v3 we have removed FooterTab components because as it's very simple to create it using HStack component. Here is an example of how we can make Footer in our Apps. - -## Example - -```SnackPlayer name=Footer dependencies=react-native-linear-gradient - -import React from 'react'; -import { - NativeBaseProvider, - Box, - Text, - Heading, - VStack, - FormControl, - Input, - Link, - Button, - Icon, - HStack, - Center, - Pressable, -} from 'native-base'; -import { MaterialCommunityIcons, MaterialIcons } from '@expo/vector-icons'; - -export default function App() { - const [selected, setSelected] = React.useState(1); - return ( - - -
- - setSelected(0)}> -
- - } - color="white" - size="sm" - /> - - Home - -
- - setSelected(1)} - > -
- } - color="white" - size="sm" - /> - - Search - -
- - setSelected(2)} - > -
- - } - color="white" - size="sm" - /> - - Cart - -
- - setSelected(3)} - > -
- - } - color="white" - size="sm" - /> - - Account - -
- - - - - ); -} - - -``` diff --git a/versioned_docs/version-3.2.1/buildingSearchBar.md b/versioned_docs/version-3.2.1/buildingSearchBar.md deleted file mode 100644 index ee8651d84..000000000 --- a/versioned_docs/version-3.2.1/buildingSearchBar.md +++ /dev/null @@ -1,117 +0,0 @@ ---- -id: building-search-bar -title: SearchBar ---- - -Search-bar are one of the most commonly seen variation of input. Here are design to make life easier. - -## Example - -Here are some examples to show how easily and quickly we can create so many types of search-bars. - - - -```SnackPlayer name=Search%20Bar -import React from 'react'; -import { - VStack, - Input, - Button, - IconButton, - Icon, - Text, - NativeBaseProvider, - Center, - Box, - Divider, - Heading, -} from 'native-base'; -import { Ionicons, MaterialIcons } from '@expo/vector-icons'; -import { FontAwesome5 } from '@expo/vector-icons'; - -function SearchBar() { - return ( - - - - }> - - Cupertino - } - /> - } - /> - - - - Material - } - /> - } - InputRightElement={ - } - /> - } - /> - - - ); -} - -export default function () { - return ( - -
- -
- - ); -} - -``` diff --git a/versioned_docs/version-3.2.1/buildingSwipeList.md b/versioned_docs/version-3.2.1/buildingSwipeList.md deleted file mode 100644 index 4e44901a3..000000000 --- a/versioned_docs/version-3.2.1/buildingSwipeList.md +++ /dev/null @@ -1,195 +0,0 @@ ---- -id: building-swipe-list -title: Swipe List ---- - -SwipeListView is a vertical ListView with rows that swipe open and closed. Handles default native behavior such as closing rows when ListView is scrolled or when other rows are opened. - -## Example - -Here is an example to show how easily and quickly we can use [react-native-swipe-list](https://www.npmjs.com/package/react-native-swipe-list-view) in NativeBase. - -```SnackPlayer name=SwipeList dependencies=react-native-swipe-list-view - -import React, { useState } from 'react'; -import { Dimensions, TouchableOpacity, View } from 'react-native'; - -import { - NativeBaseProvider, - Box, - Text, - Pressable, - Heading, - IconButton, - Icon, - HStack, - Avatar, - VStack, - Spacer, -} from 'native-base'; -import { SwipeListView } from 'react-native-swipe-list-view'; -import { MaterialIcons, Ionicons, Entypo } from '@expo/vector-icons'; - -export default function App() { - const [mode, setMode] = useState('Basic'); - - return ( - - - - Inbox - - - - - ); -} - -function Basic() { - const data = [ - { - id: 'bd7acbea-c1b1-46c2-aed5-3ad53abb28ba', - fullName: 'Afreen Khan', - timeStamp: '12:47 PM', - recentText: 'Good Day!', - avatarUrl: - 'https://images.pexels.com/photos/220453/pexels-photo-220453.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500', - }, - { - id: '3ac68afc-c605-48d3-a4f8-fbd91aa97f63', - fullName: 'Sujita Mathur', - timeStamp: '11:11 PM', - recentText: 'Cheer up, there!', - avatarUrl: - 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTyEaZqT3fHeNrPGcnjLLX1v_W4mvBlgpwxnA&usqp=CAU', - }, - { - id: '58694a0f-3da1-471f-bd96-145571e29d72', - fullName: 'Anci Barroco', - timeStamp: '6:22 PM', - recentText: 'Good Day!', - avatarUrl: 'https://miro.medium.com/max/1400/0*0fClPmIScV5pTLoE.jpg', - }, - { - id: '68694a0f-3da1-431f-bd56-142371e29d72', - fullName: 'Aniket Kumar', - timeStamp: '8:56 PM', - recentText: 'All the best', - avatarUrl: - 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSr01zI37DYuR8bMV5exWQBSw28C1v_71CAh8d7GP1mplcmTgQA6Q66Oo--QedAN1B4E1k&usqp=CAU', - }, - { - id: '28694a0f-3da1-471f-bd96-142456e29d72', - fullName: 'Kiara', - timeStamp: '12:47 PM', - recentText: 'I will call today.', - avatarUrl: - 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRBwgu1A5zgPSvfE83nurkuzNEoXs9DMNr8Ww&usqp=CAU', - }, - ]; - - const [listData, setListData] = useState(data); - - const closeRow = (rowMap, rowKey) => { - if (rowMap[rowKey]) { - rowMap[rowKey].closeRow(); - } - }; - - const deleteRow = (rowMap, rowKey) => { - closeRow(rowMap, rowKey); - const newData = [...listData]; - const prevIndex = listData.findIndex((item) => item.key === rowKey); - newData.splice(prevIndex, 1); - setListData(newData); - }; - - const onRowDidOpen = (rowKey) => { - console.log('This row opened', rowKey); - }; - - const renderItem = ({ item, index }) => ( - - console.log('You touched me')} bg="white"> - - - - - - {item.fullName} - - {item.recentText} - - - - {item.timeStamp} - - - - - - ); - - const renderHiddenItem = (data, rowMap) => ( - - closeRow(rowMap, data.item.key)} - _pressed={{ - opacity: 0.5, - }}> - - } - size="xs" - color="coolGray.800" - /> - - More - - - - deleteRow(rowMap, data.item.key)} - _pressed={{ - opacity: 0.5, - }}> - - } color="white" size="xs" /> - - Delete - - - - - ); - - return ( - - - - ); -} - -``` diff --git a/versioned_docs/version-3.2.1/buildingTabView.md b/versioned_docs/version-3.2.1/buildingTabView.md deleted file mode 100644 index e6ce91847..000000000 --- a/versioned_docs/version-3.2.1/buildingTabView.md +++ /dev/null @@ -1,106 +0,0 @@ ---- -id: building-tab-view -title: Tab View ---- - -A cross-platform Tab View component for React Native - -## Example - -Here is an example to show how easily and quickly we can use [react-native-tab-view](https://www.npmjs.com/package/react-native-tab-view) in NB. - -```SnackPlayer name=TabView dependencies=react-native-linear-gradient,react-native-tab-view,react-native-pager-view@5.0.12 - -import * as React from 'react'; -import { - View, - StyleSheet, - Dimensions, - StatusBar, - TouchableOpacity, - Animated, - Pressable, -} from 'react-native'; -import { TabView, SceneMap } from 'react-native-tab-view'; -import { NativeBaseProvider, Box, Text, Center } from 'native-base'; -import Constants from 'expo-constants'; - -const FirstRoute = () =>
This is Tab 1
; - -const SecondRoute = () =>
This is Tab 2
; - -const ThirdRoute = () =>
This is Tab 3
; - -const FourthRoute = () =>
This is Tab 4
; - -const initialLayout = { width: Dimensions.get('window').width }; - -const renderScene = SceneMap({ - first: FirstRoute, - second: SecondRoute, - third: ThirdRoute, - fourth: FourthRoute, -}); - -export default function TabViewExample() { - const [index, setIndex] = React.useState(0); - const [routes] = React.useState([ - { key: 'first', title: 'Tab 1' }, - { key: 'second', title: 'Tab 2' }, - { key: 'third', title: 'Tab 3' }, - { key: 'fourth', title: 'Tab 4' }, - ]); - - const renderTabBar = (props) => { - const inputRange = props.navigationState.routes.map((x, i) => i); - return ( - - {props.navigationState.routes.map((route, i) => { - const opacity = props.position.interpolate({ - inputRange, - outputRange: inputRange.map((inputIndex) => - inputIndex === i ? 1 : 0.5 - ), - }); - const color = index === i ? '#1f2937' : '#a1a1aa'; - const borderColor = index === i ? 'cyan.500' : 'coolGray.200'; - - return ( - - { - console.log(i); - setIndex(i); - }}> - {route.title} - - - ); - })} - - ); - }; - - return ( - - - - ); -} - - - -``` diff --git a/versioned_docs/version-3.2.1/builldingCard.md b/versioned_docs/version-3.2.1/builldingCard.md deleted file mode 100644 index aab840b4b..000000000 --- a/versioned_docs/version-3.2.1/builldingCard.md +++ /dev/null @@ -1,104 +0,0 @@ ---- -id: building-card -title: Card ---- - -A card is a flexible and extensible content container. It comes in caries shapes and sizes and here we'll make few of them. - -## Most Commonly used design - -This card design widely used where the Header consist of Avatar, accompanied by the Title and Sub-title. - -Followed by the image which flows till the very edge. - -And lastly a description. - -```SnackPlayer name=Card -import React from "react"; -import { - Box, - Heading, - Icon, - AspectRatio, - Image, - Text, - Center, - HStack, - Stack, - NativeBaseProvider -} from 'native-base'; -import { MaterialIcons, Ionicons } from '@expo/vector-icons'; - -function CardComponent(){ - return( - - - - image - -
- PHOTOS -
- - - - - The Garden City - - - The Silicon Valley of India. - - - - Bengaluru (also called Bangalore) is the center of India's high-tech - industry. The city is also known for its parks and nightlife. - - - - - 6 mins ago - - - - - - ); -} - -export default function () { - return ( - -
- -
- - ); -} -``` diff --git a/versioned_docs/version-3.2.1/button.mdx b/versioned_docs/version-3.2.1/button.mdx deleted file mode 100644 index 4d2260a91..000000000 --- a/versioned_docs/version-3.2.1/button.mdx +++ /dev/null @@ -1,84 +0,0 @@ ---- -id: button -title: Button ---- - -import { ComponentTheme } from '../../src/components'; - -The `Button` component is used to trigger an action or event. - -## Import - -```jsx -import { Button, ButtonGroup } from 'native-base'; -``` - -- **Button** : The button component with support for custom icons, spinners, etc. -- **ButtonGroup** : Used to group buttons whose actions are related, with an option to flush them together. - -## Examples - -### Basic - -```ComponentSnackPlayer path=primitives,Button,basic.tsx - -``` - -### Sizes - -```ComponentSnackPlayer path=primitives,Button,sizes.tsx - -``` - -### Variants - -```ComponentSnackPlayer path=primitives,Button,variants.tsx - -``` - -### Loading - -```ComponentSnackPlayer path=primitives,Button,loading.tsx - -``` - -### Icons - -```ComponentSnackPlayer path=primitives,Button,icons.tsx - -``` - -### ButtonGroup - -```ComponentSnackPlayer path=primitives,ButtonGroup,basic.tsx - -``` - -### Basic (With Ref) - -```ComponentSnackPlayer path=primitives,Button,WithRef.tsx - -``` - -## Props - -### Button - -```ComponentPropTable path=primitives,Button,Button.tsx - -``` - -### ButtonGroup - -```ComponentPropTable path=primitives,Button,ButtonGroup.tsx - -``` - -## Styling - - - -## Accessibility - -- Button has `role` set to [button](https://www.w3.org/TR/wai-aria-practices-1.2/#button). -- When Button has focus, Space or Enter activates it. diff --git a/versioned_docs/version-3.2.1/center.md b/versioned_docs/version-3.2.1/center.md deleted file mode 100644 index af1b45de7..000000000 --- a/versioned_docs/version-3.2.1/center.md +++ /dev/null @@ -1,48 +0,0 @@ ---- -id: center -title: Center ---- - -`Center` is a layout component that centers its child within itself. - -## **Import** - -```jsx -import { Center, Square, Circle } from 'native-base'; -``` - -- **Center:** Centers its child, pass `width` and `height` -- **Square:** `Center` but we need to pass `size` (width and height) -- **Circle:** `Center` with round `borderRadius`, pass `size` (width and height) - -## Examples - -### Basic - -Put any child element inside it, give it any width or/and height. It'll ensure the child is centered. - -```ComponentSnackPlayer path=composites,Center,Basic.tsx - -``` - -### Icon frames - -Center can be used to nicely position icons in the center and add frames around them. - -```ComponentSnackPlayer path=composites,Center,WithIcons.tsx - -``` - -### Square and Circle - -Square and Circle automatically centers their children. - -```ComponentSnackPlayer path=composites,Center,SquareCircle.tsx - -``` - -## Props - -```ComponentPropTable path=composites,Center,Center.tsx - -``` diff --git a/versioned_docs/version-3.2.1/changelog.md b/versioned_docs/version-3.2.1/changelog.md deleted file mode 100644 index 417a3a41e..000000000 --- a/versioned_docs/version-3.2.1/changelog.md +++ /dev/null @@ -1,32 +0,0 @@ ---- -id: changelog -title: Changelog ---- - -## Features - -TypeScript enhancement for custom theme tokens and variants - https://github.com/GeekyAnts/NativeBase/pull/4173 - -## Fixes - -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). diff --git a/versioned_docs/version-3.2.1/checkBox.md b/versioned_docs/version-3.2.1/checkBox.md deleted file mode 100644 index 10ee1772f..000000000 --- a/versioned_docs/version-3.2.1/checkBox.md +++ /dev/null @@ -1,104 +0,0 @@ ---- -id: checkbox -title: CheckBox ---- - -import { ComponentTheme } from '../../src/components'; - -The `Checkbox` component is used in forms when a user needs to select multiple values from several options. - -## Examples - -### Basic - -```ComponentSnackPlayer path=primitives,Checkbox,basic.tsx - -``` - -### Controlled - -```ComponentSnackPlayer path=primitives,Checkbox,controlledCheckbox.tsx - -``` - -### Uncontrolled - -```ComponentSnackPlayer path=primitives,Checkbox,uncontrolledCheckbox.tsx - -``` - -### Disabled - -```ComponentSnackPlayer path=primitives,Checkbox,disabled.tsx - -``` - -### Invalid - -```ComponentSnackPlayer path=primitives,Checkbox,invalid.tsx - -``` - -### Custom Color - -```ComponentSnackPlayer path=primitives,Checkbox,customColor.tsx - -``` - -### Custom Icon - -```ComponentSnackPlayer path=primitives,Checkbox,customIcon.tsx - -``` - -### Size - -```ComponentSnackPlayer path=primitives,Checkbox,size.tsx - -``` - -### Checkbox Group - -```ComponentSnackPlayer path=primitives,Checkbox,checkboxGroup.tsx - -``` - -### Form Controlled - -```ComponentSnackPlayer path=primitives,Checkbox,FormControlled.tsx - -``` - -### Basic (With Ref) - -```ComponentSnackPlayer path=primitives,Checkbox,withRef.tsx - -``` - -## Props - -### Checkbox - -```ComponentPropTable path=primitives,Checkbox,Checkbox.tsx - -``` - -### Checkbox.Group - -```ComponentPropTable path=primitives,Checkbox,CheckboxGroup.tsx - -``` - -## Styling - - - -## Accessibility - -Uses React Native ARIA [@react-native-aria/checkbox](https://react-native-aria.geekyants.com/docs/useCheckbox) which follows the [Checkbox WAI-ARIA design pattern](https://www.w3.org/TR/wai-aria-practices-1.2/#checkbox). - -### Keyboard Interactions - -| Key | Description | -| ------- | ----------------------------- | -| `Space` | Checks/unchecks the checkbox. | diff --git a/versioned_docs/version-3.2.1/colorMode.md b/versioned_docs/version-3.2.1/colorMode.md deleted file mode 100644 index e24285266..000000000 --- a/versioned_docs/version-3.2.1/colorMode.md +++ /dev/null @@ -1,163 +0,0 @@ ---- -id: color-mode -title: Color mode (Dark Mode) ---- - -When you use the `NativebaseProvider` at the root of your app, you can automatically use color mode in your apps. - -By default, most components are dark mode compatible. To handle color mode manually in your application, use the `useColorMode` or `useColorModeValue` hooks. - -## useColorMode - -`useColorMode` is a React hook that gives you access to the current color mode, and a function to toggle the color mode. - -Calling toggleColorMode anywhere in your app tree toggles the color mode. - -## useColorModeValue - -`useColorModeValue` is a React hook used to change any value or style based on the color mode. It takes 2 arguments: the value in light mode, and the value in dark mode. - -```SnackPlayer name=ColorMode%20Usage -import React from 'react'; -import { - Heading, - useColorMode, - Button, - HStack, - Avatar, - Center, - useColorModeValue, - Text, - NativeBaseProvider, -} from 'native-base'; - -function ColorModeExample() { - const { colorMode, toggleColorMode } = useColorMode(); - return ( -
- - The active color mode is{' '} - - {useColorModeValue('Light', 'Dark')} - - - -
- ); -} - -export default function () { - return ( - - - - ); -} - -``` - -## \_light and \_dark Pseudo props - -All components accepts \_light and \_dark props which applies the passed props on dark and light mode. - -```SnackPlayer name=PseudoProps%20Usage -import React from 'react'; -import { - Heading, - useColorMode, - Button, - HStack, - Avatar, - Center, - useColorModeValue, - Text, - NativeBaseProvider, -} from 'native-base'; - -function PseudoPropsUsage() { - const { colorMode, toggleColorMode } = useColorMode(); - return ( -
- - The active color mode is{' '} - - {colorMode} - - - -
- ); -} - -export default function () { - return ( - - - - ); -} - -``` - -## Default color mode - -You can set default color mode. By default, the color mode will be `light`. To support this, extend the default theme with a `config` - -```jsx -import { NativeBaseProvider, extendTheme, Text } from 'native-base'; - -// Define the config -const config = { - useSystemColorMode: false, - initialColorMode: 'dark', -}; - -// extend the theme -const customTheme = extendTheme({ config }); -function App() { - return ( - // pass itto NativeBaseProvider - - // Your component - - ); -} -``` - -## Persisting the color mode - -You can persist the color mode in you app by defining you color mode manager of type `StorageManager` and passing it to the NativeBaseProvider. This will retain the color mode even when the app is refreshed. - -```jsx -import React from 'react'; -import { NativeBaseProvider, StorageManager, ColorMode } from 'native-base'; -import AsyncStorage from '@react-native-async-storage/async-storage'; - -// Define the colorModeManager, -// here we are using react-native-async-storage (https://react-native-async-storage.github.io/async-storage/) -const colorModeManager: StorageManager = { - get: async () => { - try { - let val = await AsyncStorage.getItem('@color-mode'); - return val === 'dark' ? 'dark' : 'light'; - } catch (e) { - return 'light'; - } - }, - set: async (value: ColorMode) => { - try { - await AsyncStorage.setItem('@color-mode', value); - } catch (e) { - console.log(e); - } - }, -}; -export default function () { - return ( - // pass it to NativeBaseProvider - - // Your components - - ); -} -``` diff --git a/versioned_docs/version-3.2.1/container.md b/versioned_docs/version-3.2.1/container.md deleted file mode 100644 index 9938207f4..000000000 --- a/versioned_docs/version-3.2.1/container.md +++ /dev/null @@ -1,56 +0,0 @@ ---- -id: container -title: Container ---- - -The `Container` is used to constrain a content's width to the current breakpoint, while keeping it fluid. - -## Implements - -- [`Box`](box.md) - -## Usage - -To include content, wrap it in the Container component. - -## Example - -```SnackPlayer name=Container%20Example -import React from 'react'; -import { Container, Text, Heading, NativeBaseProvider, Center } from 'native-base'; -function ContainerComponent() { - return ( - - - A component library for the - React Ecosystem - - - NativeBase is a simple, modular and accessible component library that - gives you building blocks to build you React applications. - - - ); -} - -// Example template which wraps component with NativeBaseProvider -export default function () { - return ( - -
- -
- - ); -} -``` - -## Props - -**Container** implements **[Box](box.md)**, so all the Box Props can be passed to it. - -### Container - -| Name | Type | Description | Default | -| ------------- | ------- | --------------------------------------------------------- | ------- | -| centerContent | boolean | It'll center child elements based on their content width. | true | diff --git a/versioned_docs/version-3.2.1/customizingComponents.md b/versioned_docs/version-3.2.1/customizingComponents.md deleted file mode 100644 index da9c028c6..000000000 --- a/versioned_docs/version-3.2.1/customizingComponents.md +++ /dev/null @@ -1,160 +0,0 @@ ---- -id: customizing-components -title: Customizing Components ---- - -Theme customisation is at the heart of NativeBase. Using NativeBase's `extendTheme` function, we can customise components. - -Components can be customised by overriding baseStyle/defaultProps or adding a new variant. - -Let's customise a Button component to include rounded borders and red colorScheme. - -## Basic - -```tsx -import React from 'react'; -import { NativeBaseProvider, extendTheme } from 'native-base'; - -export default function () { - const theme = extendTheme({ - components: { - Button: { - // Can simply pass default props to change default behaviour of components. - baseStyle: { - rounded: 'md', - }, - defaultProps: { - colorScheme: 'red', - }, - }, - Heading: { - // Can pass also function, giving you access theming tools - baseStyle: ({ colorMode }) => { - return { - color: colorMode === 'dark' ? 'red.300' : 'blue.300', - fontWeight: 'normal', - }; - }, - }, - }, - }); - return ( - {/* components */} - ); -} -``` - -As shown above, we can customize components by passing the **components** object with the **key** being the **name** of the **component**. Whereas you set `defaultProps` or `baseStyle` to customize the components. - -### Difference between baseStyle and defaultProps? - -#### Base Style - -- As the name suggests, it's used to define the base style of a component. -- Base style can be a function or a plain object. Use function if you want to get access to defaultProps, current colorMode (light/dark) and theme object. - -Take a look at an [example here](https://github.com/GeekyAnts/NativeBase/blob/v3.1.0/src/theme/components/button.ts#L5). - -#### Default Props - -- Default props can be used to initialize props of a component. -- For e.g. You have a Button component and it has 2 variants. i.e. outline, solid. You can use it like. - -Take a look at an [example here](https://github.com/GeekyAnts/NativeBase/blob/v3.1.0/src/theme/components/button.ts#L201). - -```jsx - - - - - - ); -} - -``` - -
- -NativeBase ships with default styles for each components. [You can find it here](https://github.com/GeekyAnts/NativeBase/tree/v3.1.0/src/theme/components). diff --git a/versioned_docs/version-3.2.1/customizingFonts.md b/versioned_docs/version-3.2.1/customizingFonts.md deleted file mode 100644 index c8ade5f00..000000000 --- a/versioned_docs/version-3.2.1/customizingFonts.md +++ /dev/null @@ -1,87 +0,0 @@ ---- -id: customizing-fonts -title: Customizing Fonts ---- - -Follow 3 simple steps to add a custom font family. - -### Loading fonts in Expo or React Native init project. - -[Refer this guide if you're using Expo](https://docs.expo.io/guides/using-custom-fonts/) - -[Refer this guide if you're using React Native init](https://medium.com/@aravindmnair/add-custom-fonts-to-react-native-0-60-easily-in-3-steps-fcd71459f4c9) - -### Extend NativeBase theme object. - -We extend the theme object and override `fontConfig` and `fonts` properties which define the mappings. - -This mapping is needed to make sure fontWeight, fontStyle properties work in all platforms. - -```jsx -import { NativeBaseProvider, extendTheme } from 'native-base'; - -const theme = extendTheme({ - fontConfig: { - Roboto: { - 100: { - normal: 'Roboto-Light', - italic: 'Roboto-LightItalic', - }, - 200: { - normal: 'Roboto-Light', - italic: 'Roboto-LightItalic', - }, - 300: { - normal: 'Roboto-Light', - italic: 'Roboto-LightItalic', - }, - 400: { - normal: 'Roboto-Regular', - italic: 'Roboto-Italic', - }, - 500: { - normal: 'Roboto-Medium', - }, - 600: { - normal: 'Roboto-Medium', - italic: 'Roboto-MediumItalic', - }, - // Add more variants - // 700: { - // normal: 'Roboto-Bold', - // }, - // 800: { - // normal: 'Roboto-Bold', - // italic: 'Roboto-BoldItalic', - // }, - // 900: { - // normal: 'Roboto-Bold', - // italic: 'Roboto-BoldItalic', - // }, - }, - }, - - // Make sure values below matches any of the keys in `fontConfig` - fonts: { - heading: 'Roboto', - body: 'Roboto', - mono: 'Roboto', - }, -}); - -export default function App() { - return ( - - - - ); -} -``` - -### Using fonts - -Fonts can be used as shown below. The below `Text` will be rendered in `Roboto-MediumItalic` font family. - -```jsx - -``` diff --git a/versioned_docs/version-3.2.1/customizingTheme.md b/versioned_docs/version-3.2.1/customizingTheme.md deleted file mode 100644 index 34e5bd136..000000000 --- a/versioned_docs/version-3.2.1/customizingTheme.md +++ /dev/null @@ -1,108 +0,0 @@ ---- -id: customizing-theme -title: Customizing Theme ---- - -import { NativeBaseProvider, Box } from 'native-base'; - -Theme is one core elements of NativeBase. You can customize NativeBase's theme as per your liking. NativeBase theme is complex object which looks like - -```tsx -// theme -{ - colors: {...}, - fontSizes: {...}, - fonts: {...}, - . - . - . - config: {...}, -} -``` - -It has many [other properties](default-theme) but in this recipe, we'll only update few of them (namely colors, fonts, and config) using NativeBase's `extendTheme` function. - -```tsx -import React from 'react'; -import { NativeBaseProvider, extendTheme } from 'native-base'; -import { Content } from './Content'; - -export default function () { - const theme = extendTheme({ - colors: { - // Add new color - primary: { - 50: '#E3F2F9', - 100: '#C5E4F3', - 200: '#A2D4EC', - 300: '#7AC1E4', - 400: '#47A9DA', - 500: '#0088CC', - 600: '#007AB8', - 700: '#006BA1', - 800: '#005885', - 900: '#003F5E', - }, - // Redefinig only one shade, rest of the color will remain same. - amber: { - 400: '#d97706', - }, - }, - config: { - // Changing initialColorMode to 'dark' - initialColorMode: 'dark', - }, - }); - - return ( - - - - ); -} -``` - -In the above example, the following changes have been made: - -- Added a new color named **primary**. -- Updated one of the shade of **amber** color. -- Updated the initial color mode to **dark**. Default is **light**. -- Finally passed the new **theme** object to the **NativeBaseProvider**. - -### Using the new tokens in components - -```jsx live -function App() { - const theme = extendTheme({ - colors: { - // Add new color - primary: { - 50: '#E3F2F9', - 100: '#C5E4F3', - 200: '#A2D4EC', - 300: '#7AC1E4', - 400: '#47A9DA', - 500: '#0088CC', - 600: '#007AB8', - 700: '#006BA1', - 800: '#005885', - 900: '#003F5E', - }, - // Redefinig only one shade, rest of the color will remain same. - amber: { - 400: '#d97706', - }, - }, - config: { - // Changing initialColorMode to 'dark' - initialColorMode: 'dark', - }, - }); - - return ( - - - - ); -} -``` diff --git a/versioned_docs/version-3.2.1/darkMode.md b/versioned_docs/version-3.2.1/darkMode.md deleted file mode 100644 index 1c427554a..000000000 --- a/versioned_docs/version-3.2.1/darkMode.md +++ /dev/null @@ -1,89 +0,0 @@ ---- -id: dark-mode -title: Making components dark mode compatible ---- - -By default, most of NativeBase's components are dark mode compatible. In some scenario, you might need to make your component respond to color mode. There are 2 way to achieve this: - -1. By updating component's theme -2. By using useColorModeValue - -## 1. By updating component's theme - -In this approach we use NativeBase's `extendTheme` function to customise the components and the use themeTools to make the component dark mode compatible. - -Note: Changes on the theme will be reflected on the entire application. - -```tsx -import React from 'react'; -import { NativeBaseProvider, themeTools } from 'native-base'; -import { extendTheme } from 'native-base'; -import { Content } from './Content'; - -export default function () { - const theme = extendTheme({ - components: { - Heading: { - baseStyle: (props: any) => { - return { - color: themeTools.mode('red.300', 'blue.300')(props), - }; - }, - }, - }, - }); - return ( - - - - ); -} -``` - -In the above example, the Heading component's color property will now respond to change in color, namely in light mode it will be red (red.300) colored and in dark mode it will blue (blue.300) colored. - -## 2. By using useColorModeValue - -In this approach we use NativeBase's `useColorModeValue` function and update specific props instead of updating the entire theme. - -Note: Changes on the theme will be reflected on the entire application. - -```tsx -import React from 'react'; -import { useColorModeValue, Button } from 'native-base'; - -export default function () { - const colorScheme = useColorModeValue('teal', 'amber'); - const variant = useColorModeValue('solid', 'outline'); - - return ( - - ); -} -``` - -In the above example, you'll get a **solid teal Button** in **light** mode whereas an **outline amber Button** in **dark** mode. You can get creative and make other properties respond to the color mode as well. - -## 3. By using \_light and \_dark props - -In this approach we pass the required props inside \_light and \_dark based on the requirement. - -```tsx -import React from 'react'; -import { Button } from 'native-base'; - -export default function () { - return ( - - ); -} -``` - -In the above example, you'll get a **teal Button** in **light** mode whereas an **amber Button** in **dark** mode. You can get creative and make other properties respond to the color mode as well. diff --git a/versioned_docs/version-3.2.1/default-theme.md b/versioned_docs/version-3.2.1/default-theme.md deleted file mode 100644 index 7a6ab70bf..000000000 --- a/versioned_docs/version-3.2.1/default-theme.md +++ /dev/null @@ -1,229 +0,0 @@ ---- -id: default-theme -title: Default Theme ---- - -import { ColorsBlock, FontBlocks, SpaceBlocks } from "/src/components/index"; - -The theme object is where you define your application's color palette, type scale, font stacks, breakpoints, border radius values, and more. - -Theming in NativeBase is based on the **[Styled System Theme Specification](https://system-ui.com/theme/)** - -## Colors - -You can add a `theme.colors` object to provide colors for your project. By default these colors can be referenced by the `color`, `borderColor`, `backgroundColor`, etc.. props. - -We recommend adding a palette that ranges from `50` to `900`. Tools like **[Smart Swatch](https://smart-swatch.netlify.app/)**, **[Palx](https://palx.jxnblk.com/)** are available to generate these palettes. - - - -## Typography - -To manage Typography options, the theme object supports the following keys: - -- `fonts` (font families) -- `fontSizes` -- `fontWeights` -- `lineHeights` -- `letterSpacings` - -```jsx -const typography = { - letterSpacings: { - xs: '-0.05em', - sm: '-0.025em', - md: 0, - lg: '0.025em', - xl: '0.05em', - '2xl': '0.1em', - }, - lineHeights: { - '2xs': '1em', - xs: '1.125em', - sm: '1.25em', - md: '1.375em', - lg: '1.5em', - xl: '1.75em', - '2xl': '2em', - '3xl': '2.5em', - '4xl': '3em', - '5xl': '4em', - }, - fontWeights: { - hairline: 100, - thin: 200, - light: 300, - normal: 400, - medium: 500, - semibold: 600, - bold: 700, - extrabold: 800, - black: 900, - extrablack: 950, - }, - fonts: { - heading: undefined, - body: undefined, - mono: undefined, - }, - fontSizes: { - '2xs': 10, - xs: 12, - sm: 14, - md: 16, - lg: 18, - xl: 20, - '2xl': 24, - '3xl': 30, - '4xl': 36, - '5xl': 48, - '6xl': 60, - '7xl': 72, - '8xl': 96, - '9xl': 128, - }, -}; -``` - - - -## Size - -The `size` key allows you to customize the global spacing and sizing scale for your project. By default these spacing value can be referenced by the `padding`, `margin`, and `top`, `left`, `right`, `bottom` props. - - - -## Opacity - -The `opacity` key is used in opacity style object and to define colors opacity using the red-green-blue-alpha (RGBA) model, RGBA color values are an extension of RGB color values with an alpha channel - which specifies the opacity of the color. - -```jsx -const opacity = { - 0: 0, - 5: 0.05, - 10: 0.1, - 20: 0.2, - 25: 0.25, - 30: 0.3, - 40: 0.4, - 50: 0.5, - 60: 0.6, - 70: 0.7, - 75: 0.75, - 80: 0.8, - 90: 0.9, - 95: 0.95, - 100: 1, -}; -``` - -## Shadows - -The `shadow` key allows you to customize the global box shadow for your project. - -```jsx -export default { - 0: { - shadowColor: '#000', - shadowOffset: { - width: 0, - height: 1, - }, - shadowOpacity: 0.18, - shadowRadius: 1.0, - elevation: 1, - }, - 1: { - shadowColor: '#000', - shadowOffset: { - width: 0, - height: 1, - }, - shadowOpacity: 0.2, - shadowRadius: 1.41, - elevation: 2, - }, - 2: { - shadowColor: '#000', - shadowOffset: { - width: 0, - height: 1, - }, - shadowOpacity: 0.22, - shadowRadius: 2.22, - elevation: 3, - }, - 3: { - shadowColor: '#000', - shadowOffset: { - width: 0, - height: 2, - }, - shadowOpacity: 0.23, - shadowRadius: 2.62, - elevation: 4, - }, - 4: { - shadowColor: '#000', - shadowOffset: { - width: 0, - height: 2, - }, - shadowOpacity: 0.25, - shadowRadius: 3.84, - elevation: 5, - }, - 5: { - shadowColor: '#000', - shadowOffset: { - width: 0, - height: 3, - }, - shadowOpacity: 0.27, - shadowRadius: 4.65, - elevation: 6, - }, - 6: { - shadowColor: '#000', - shadowOffset: { - width: 0, - height: 3, - }, - shadowOpacity: 0.29, - shadowRadius: 4.65, - elevation: 7, - }, - 7: { - shadowColor: '#000', - shadowOffset: { - width: 0, - height: 4, - }, - shadowOpacity: 0.3, - shadowRadius: 4.65, - elevation: 8, - }, - 8: { - shadowColor: '#000', - shadowOffset: { - width: 0, - height: 4, - }, - shadowOpacity: 0.32, - shadowRadius: 5.46, - elevation: 9, - }, - 9: { - shadowColor: '#000', - shadowOffset: { - width: 0, - height: 5, - }, - shadowOpacity: 0.34, - shadowRadius: 6.27, - elevation: 10, - }, -}; -``` - -Still confused? You can always explore [here](https://github.com/GeekyAnts/NativeBase/tree/master/src/theme/base). diff --git a/versioned_docs/version-3.2.1/design-tokens.md b/versioned_docs/version-3.2.1/design-tokens.md deleted file mode 100644 index 8198af8e3..000000000 --- a/versioned_docs/version-3.2.1/design-tokens.md +++ /dev/null @@ -1,69 +0,0 @@ ---- -id: design-tokens -title: Design tokens ---- - -Design tokens are the values or constants needed to construct a design system. These values can represent spacing, color, typography etc. Design tokens help to achieve consistency in building user interfaces across all platforms. - -Let's take an example by defining a space and color design tokens. - -```jsx title="colors" -const colors = { - primary: { - 50: '#ecfeff', - 100: '#cffafe', - 200: '#a5f3fc', - 300: '#67e8f9', - 400: '#22d3ee', - 500: '#06b6d4', - 600: '#0891b2', - 700: '#0e7490', - 800: '#155e75', - 900: '#164e63', - }, -}; -``` - -```jsx title="spacing" -export const spacing = { - px: 1, - 1: 4, - 2: 8, - 3: 12, - 4: 16, - 5: 20, - 6: 24, - 7: 28, - 8: 32, - 9: 36, - 10: 40, - 12: 48, - 16: 64, - 20: 80, - 24: 96, - 32: 128, - 40: 160, - 48: 192, - 56: 224, - 64: 256, - 72: 288, - 80: 320, - 96: 384, -}; -``` - -We can use the above tokens in our code instead of using absolute values. - -```jsx title="using the above tokens in Box component" - -``` - -The above Box will be translated to - -```jsx title="actual applied styles" - -``` - -With NativeBase, you can create your own design system. NativeBase follows [styled-system's specification](https://styled-system.com/theme-specification/) to construct design system. - -Checkout the **[default NativeBase theme](default-theme)** and how to customize it **[here](customizingTheme)**. diff --git a/versioned_docs/version-3.2.1/divider.md b/versioned_docs/version-3.2.1/divider.md deleted file mode 100644 index 70f897268..000000000 --- a/versioned_docs/version-3.2.1/divider.md +++ /dev/null @@ -1,56 +0,0 @@ ---- -id: divider -title: Divider ---- - -import { ComponentTheme } from '../../src/components'; - -`Divider` is used to visually separate content in a list or group. - -## **Import** - -```jsx -import { Divider } from 'native-base'; -``` - -## Examples - -### Basic - -The Divider displays a thin horizontal or vertical line. - -```ComponentSnackPlayer path=composites,Divider,Basic.tsx - -``` - -### Divider Orientation - -Pass the `orientation` prop and set it to either `horizontal` or `vertical`. - -> **Note:** If the horizontal orientation is used, make sure that the parent element is assigned a width and If the vertical orientation is used, make sure that the parent element is assigned a height. - -```ComponentSnackPlayer path=composites,Divider,Orientation.tsx - -``` - -### Composition - -You can use `bg` or `backgroundColor` to change the divider's color and `width` and `height` to change its width and height respectively. - -```ComponentSnackPlayer path=composites,Divider,Composition.tsx - -``` - -## Props - -```ComponentPropTable path=composites,Divider,index.tsx - -``` - -## Styling - - - -## Accessibility - -- Divider has role set to `separator` and `aria-orientation` to either `horizontal` or `vertical`. diff --git a/versioned_docs/version-3.2.1/faq.md b/versioned_docs/version-3.2.1/faq.md deleted file mode 100644 index d366df99c..000000000 --- a/versioned_docs/version-3.2.1/faq.md +++ /dev/null @@ -1,6 +0,0 @@ ---- -id: faq -title: FAQ's ---- - -NativeBase FAQ's Coming Soon. diff --git a/versioned_docs/version-3.2.1/flatList.md b/versioned_docs/version-3.2.1/flatList.md deleted file mode 100644 index ef73e46fe..000000000 --- a/versioned_docs/version-3.2.1/flatList.md +++ /dev/null @@ -1,152 +0,0 @@ ---- -id: flat-list -title: FlatList ---- - -A component for rendering performant scrollable lists. - -## Example - -```SnackPlayer name=Basic -import React from "react" -import { - Box, - FlatList, - Heading, - Avatar, - HStack, - VStack, - Text, - Spacer, - Center, - NativeBaseProvider, -} from "native-base" -export const Example = () => { - const data = [ - { - id: "bd7acbea-c1b1-46c2-aed5-3ad53abb28ba", - fullName: "Aafreen Khan", - timeStamp: "12:47 PM", - recentText: "Good Day!", - avatarUrl: - "https://images.pexels.com/photos/220453/pexels-photo-220453.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500", - }, - { - id: "3ac68afc-c605-48d3-a4f8-fbd91aa97f63", - fullName: "Sujitha Mathur", - timeStamp: "11:11 PM", - recentText: "Cheer up, there!", - avatarUrl: - "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTyEaZqT3fHeNrPGcnjLLX1v_W4mvBlgpwxnA&usqp=CAU", - }, - { - id: "58694a0f-3da1-471f-bd96-145571e29d72", - fullName: "Anci Barroco", - timeStamp: "6:22 PM", - recentText: "Good Day!", - avatarUrl: "https://miro.medium.com/max/1400/0*0fClPmIScV5pTLoE.jpg", - }, - { - id: "68694a0f-3da1-431f-bd56-142371e29d72", - fullName: "Aniket Kumar", - timeStamp: "8:56 PM", - recentText: "All the best", - avatarUrl: - "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSr01zI37DYuR8bMV5exWQBSw28C1v_71CAh8d7GP1mplcmTgQA6Q66Oo--QedAN1B4E1k&usqp=CAU", - }, - { - id: "28694a0f-3da1-471f-bd96-142456e29d72", - fullName: "Kiara", - timeStamp: "12:47 PM", - recentText: "I will call today.", - avatarUrl: - "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRBwgu1A5zgPSvfE83nurkuzNEoXs9DMNr8Ww&usqp=CAU", - }, - ] - return ( - - - Inbox - - ( - - - - - - {item.fullName} - - - {item.recentText} - - - - - {item.timeStamp} - - - - )} - keyExtractor={(item) => item.id} - /> - - ) -} - -export default () => { - return ( - -
- -
- - ) -} - - -``` - -## Props - -```ComponentPropTable path=basic,FlatList,FlatList.tsx showStylingProps=true - -``` diff --git a/versioned_docs/version-3.2.1/flex.md b/versioned_docs/version-3.2.1/flex.md deleted file mode 100644 index 1667dabac..000000000 --- a/versioned_docs/version-3.2.1/flex.md +++ /dev/null @@ -1,44 +0,0 @@ ---- -id: flex -title: Flex ---- - -`Flex` is a [`Box`](box.md) with `display: flex` and comes with helpful style shorthand. - -## Import - -```jsx -import { Flex, Spacer } from 'native-base'; -``` - -- `Flex`: a **[Box](box.md)** with `display: flex` -- `Spacer`: creates an adjustable, empty space that can be used to tune the spacing between child elements within `Flex` - -## Usage - -Flex components comes with some helpful shorthand props: - -- `flexDirection` is `direction` -- `flexWrap` is `wrap` -- `alignItems` is `align` -- `justifyContent` is `justify` - -While you can pass the verbose props, using the shorthand can save you some time. - -## Example - -```ComponentSnackPlayer path=primitives,Flex,basic.tsx - -``` - -### Using the Spacer - -You can pass Spacer to add Space between Flex items. - -```ComponentSnackPlayer path=primitives,Flex,spacer.tsx - -``` - -## Props - -**Flex** implements **[Box](box.md)**, so all the Box Props can be passed to it, i.e. [`color`](utility-props#color-and-background-color), [`space`](utility-props#margin-and-padding), [`layout`](utility-props#layout-width-and-height), [`flexbox`](utility-props#flexbox) & [`border`](utility-props#borders) props from [style-system](utility-props). diff --git a/versioned_docs/version-3.2.1/form.md b/versioned_docs/version-3.2.1/form.md deleted file mode 100644 index 6a078af67..000000000 --- a/versioned_docs/version-3.2.1/form.md +++ /dev/null @@ -1,199 +0,0 @@ ---- -id: form -title: Form with Validation ---- - -Apps often require users to enter information into a text field. For example, you might require users to log in with an email address and password combination. - -To make apps secure and easy to use, check whether the information the user has provided is valid. If the user has correctly filled out the form, process the information. If the user submits incorrect information, display a friendly error message letting them know what went wrong. - -## Example - -In this example, learn how to add validation to a form that has a single text field using the following steps: - -1. Create an Input wrapped in FormControl. -2. Add validation logic. -3. Create a button to validate and submit the form. - -### Step 1 - -Create an Input wrapped in FormControl. - -```SnackPlayer name=Form%20Example -import React from "react"; -import { - VStack, - FormControl, - Input, - NativeBaseProvider, - Center -} from "native-base"; - -function BuildingAFormExample() { - const [formData, setData] = React.useState({}); - - return ( - - - Name - setData({ ...formData, name: value })} - /> - - Name should contain atleast 3 character. - - Error Name - - - ); -} -export default function () { - return ( - -
- -
- - ); -} -``` - -### Step 2 - -Add validation logic. - -```SnackPlayer name=Form%20Example(Validation) -import React from 'react'; -import { - VStack, - FormControl, - Input, - NativeBaseProvider, - Center -} from 'native-base'; - - -function BuildingAFormExample() { - const [formData, setData] = React.useState({}); - const [errors, setErrors] = React.useState({}); - const validate = () => { - if (formData.name === undefined) { - setErrors({ - ...errors, - name: 'Name is required', - }); - return false; - } else if (formData.name.length < 3) { - setErrors({ - ...errors, - name: 'Name is too short', - }); - return false; - } - return true; - }; - - return ( - - - Name - setData({ ...formData, name: value })} - /> - - Name should contain atleast 3 character. - - Error Name - - - ); -} -export default function () { - return ( - -
- -
- - ); -} -``` - -### Step 3 - -Create a button to validate and submit the form. - -```SnackPlayer name=Form%20Example(Validate%20and%20Submit) -import React from 'react'; -import { - VStack, - Button, - FormControl, - Input, - NativeBaseProvider, - Center -} from 'native-base'; - -function BuildingAFormExample() { - const [formData, setData] = React.useState({}); - const [errors, setErrors] = React.useState({}); - const validate = () => { - if (formData.name === undefined) { - setErrors({ - ...errors, - name: 'Name is required', - }); - return false; - } else if (formData.name.length < 3) { - setErrors({ - ...errors, - name: 'Name is too short', - }); - return false; - } - return true; - }; - - const onSubmit = () => { - validate() ? console.log('Submitted') : console.log('Validation Failed'); - }; - - return ( - - - Name - setData({ ...formData, name: value })} - /> - {'name' in errors ? - Error -: - - - Name should contain atleast 3 character. - - } - - - - ); -} -export default function () { - return ( - -
- -
- - ); -} -``` - -## Community Integration - -NativeBase can be used with other popular Form libraries like [`Formik`](nativebase-formik-ui.md) and [`React Hook Forms`](reactHooksForms.md) as well. For more details checkout Community Integration section of the docs. diff --git a/versioned_docs/version-3.2.1/formControl.md b/versioned_docs/version-3.2.1/formControl.md deleted file mode 100644 index 05b32b0d3..000000000 --- a/versioned_docs/version-3.2.1/formControl.md +++ /dev/null @@ -1,52 +0,0 @@ ---- -id: form-control -title: FormControl ---- - -import { ComponentTheme } from '../../src/components'; - -`FormControl` provides context such as `isInvalid`, `isDisabled`, and `isRequired` to form elements. - -## Examples - -### Basic - -```ComponentSnackPlayer path=composites,FormControl,Usage.tsx - -``` - -### Custom Style - -```ComponentSnackPlayer path=composites,FormControl,CustomStyle.tsx - -``` - -## Props - -### FormControl - -```ComponentPropTable path=composites,FormControl,FormControl.tsx - -``` - -### FormControl.Label - -```ComponentPropTable path=composites,FormControl,FormControlLabel.tsx - -``` - -### FormControl.ErrorMessage - -```ComponentPropTable path=composites,FormControl,FormControlErrorMessage.tsx - -``` - -### FormControl.HelperText - -```ComponentPropTable path=composites,FormControl,FormControlHelperText.tsx - -``` - -## Styling - - diff --git a/versioned_docs/version-3.2.1/getting-started.mdx b/versioned_docs/version-3.2.1/getting-started.mdx deleted file mode 100644 index 858d2bcc4..000000000 --- a/versioned_docs/version-3.2.1/getting-started.mdx +++ /dev/null @@ -1,92 +0,0 @@ ---- -id: getting-started -title: Getting Started -slug: / ---- - -import { KitchenSinkIframe, TileLink, NBHistory } from '../../src/components'; -import TOCInline from '@theme/TOCInline'; - -
-
-
-

- 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. -

-
-
- - -
-
- - -
- -
-
-
- -
- -
-

A Brief History of NativeBase

-
- -
-

What's New with NativeBase v3?

- -We had clear goals in mind while building version 3. Take a look at some of the new features we added: - -
-

Multiplatform

-
- NativeBase supports multiple platforms; android, iOS and web. You can also - customise properties using platform-specific props. -
-
- -
-

Inherently Beautiful

-
- NativeBase ships with a default theme that provides beautiful components, - out of the box. -
-
- -
-

Accessible

-
- This version has out of the box accessibility including focus management, - keyboard navigation and more. -
-
- -
-

Customisable - -

-
-The default theme can be extended as you desire. You can also customise specific components for your app needs. -
-
diff --git a/versioned_docs/version-3.2.1/hStack.md b/versioned_docs/version-3.2.1/hStack.md deleted file mode 100644 index d8e8c178d..000000000 --- a/versioned_docs/version-3.2.1/hStack.md +++ /dev/null @@ -1,24 +0,0 @@ ---- -id: h-stack -title: HStack / Row ---- - -`HStack` aligns items horizontally. `Row` is also an alias for `HStack`. - -## Import - -```jsx -import { HStack } from 'native-base'; -``` - -## Examples - -```ComponentSnackPlayer path=primitives,HStack,basic.tsx - -``` - -## Props - -```ComponentPropTable path=primitives,Stack,HStack.tsx - -``` diff --git a/versioned_docs/version-3.2.1/heading.md b/versioned_docs/version-3.2.1/heading.md deleted file mode 100644 index 971b44a20..000000000 --- a/versioned_docs/version-3.2.1/heading.md +++ /dev/null @@ -1,56 +0,0 @@ ---- -id: heading -title: Heading ---- - -import { ComponentTheme } from '../../src/components'; - -Headings are used for rendering headlines. `Heading` composes [`Text`](text.md) so you can use all the style props. - -## Import - -```jsx -import { Heading } from 'native-base'; -``` - -## Example - -### Basic - -```ComponentSnackPlayer path=primitives,Heading,Basic.tsx - -``` - -### Sizes - -```ComponentSnackPlayer path=primitives,Heading,Sizes.tsx - -``` - -### Truncate - -```ComponentSnackPlayer path=primitives,Heading,Truncate.tsx - -``` - -### Override - -```ComponentSnackPlayer path=primitives,Heading,OverridenStyle.tsx - -``` - -### Composition - -```ComponentSnackPlayer path=primitives,Heading,Composition.tsx - -``` - -## Props - -```ComponentPropTable path=primitives,Heading,index.tsx - -``` - -## Styling - - diff --git a/versioned_docs/version-3.2.1/hidden.md b/versioned_docs/version-3.2.1/hidden.md deleted file mode 100644 index 0d74cacee..000000000 --- a/versioned_docs/version-3.2.1/hidden.md +++ /dev/null @@ -1,125 +0,0 @@ ---- -id: hidden -title: Hidden ---- - -import { ComponentTheme } from '../../src/components'; - -Hidden is used to toggle the visibility value of child components responsively, based on the colorMode or based on the platform. It doesn't mount the child components in the restricted values of props. - -## Import - -```jsx -import { Hidden } from 'native-base'; -``` - -## Example - -### Basic - -```jsx - - - This text will be always hidden. - - -``` - -### Hidden according to breakpoints - -```jsx -<> - - - This text will be hidden from sm to lg screens. - - - - - This text will be hidden on sm and lg screens only. - - - -``` - -### Hidden according to colorMode - -```SnackPlayer name=ColorMode%20Usage -import React from 'react'; -import { - useColorMode, - Button, - VStack, - Center, - Box,Text, - Hidden, - useColorModeValue, - NativeBaseProvider -} from 'native-base'; - -function ColorModeExample () { - const { colorMode, toggleColorMode } = useColorMode(); - return ( - <> - - - - - This text will be hidden on light mode - - - - - This text will be hidden on dark mode - - - - - ); -} - -const LocalWrapper = ({ children }) => { - const bg = useColorModeValue('gray.200', 'gray.800') - return ( -
- {children} -
- ); -}; - -export default function () { - return ( - - - - - - ); -} -``` - -## Hidden according to platform - -```jsx - - - This text will be hidden on android and web. - - -``` - -## Props - -```ComponentPropTable path=composites,Fab,Fab.tsx - -``` diff --git a/versioned_docs/version-3.2.1/icon.md b/versioned_docs/version-3.2.1/icon.md deleted file mode 100644 index 4b19156e5..000000000 --- a/versioned_docs/version-3.2.1/icon.md +++ /dev/null @@ -1,54 +0,0 @@ ---- -id: icon -title: Icon ---- - -You can use icons in multiple ways in NativeBase: - -- Create icon by creating an SVG Icon -- Create icon using createIcon function and use it as a component -- Use a third-party icon library ( such as [@expo/vector-icons](https://github.com/expo/vector-icons) ), with `as` prop. - -## Examples - -### Basic - -```ComponentSnackPlayer path=primitives,Icon,Basic.tsx - -``` - -Apart from the icons provided by [@expo/vector-icon](https://github.com/expo/vector-icons), you can also create custom icons using SVG. You can use all the components from [react-native-svg](https://github.com/react-native-svg/react-native-svg). - -### NativeBase Icons - -We provides a set of commonly used interface icons. So you can directly use them in your project. All our icons are create using [`createIcon`](icon#createicon) function from NativeBase. - -```ComponentSnackPlayer path=primitives,Icon,AllIcons.tsx - -``` - -### Custom Icon - -```ComponentSnackPlayer path=primitives,Icon,CustomIcon.tsx - -``` - -### Create Icon - -```ComponentSnackPlayer path=primitives,Icon,CreateIcon.tsx - -``` - -## Props - -### Icon - -```ComponentPropTable path=primitives,Icon,Icon.tsx showStylingProps=true - -``` - -### createIcon - -```ComponentPropTable path=primitives,Icon,createIcon.tsx - -``` diff --git a/versioned_docs/version-3.2.1/iconButton.md b/versioned_docs/version-3.2.1/iconButton.md deleted file mode 100644 index 60d5f1741..000000000 --- a/versioned_docs/version-3.2.1/iconButton.md +++ /dev/null @@ -1,43 +0,0 @@ ---- -id: icon-button -title: IconButton ---- - -import { ComponentTheme } from '../../src/components'; - -`IconButton` composes the `Button` component. It is generally used to make an Icon pressable. - -## Examples - -### Basic - -```ComponentSnackPlayer path=composites,IconButton,Basic.tsx - -``` - -### Sizes - -```ComponentSnackPlayer path=composites,IconButton,Sizes.tsx - -``` - -### Variants - -```ComponentSnackPlayer path=composites,IconButton,Variant.tsx - -``` - -## Props - -```ComponentPropTable path=composites,IconButton,index.tsx - -``` - -## Styling - - - -## Accessibility - -- Use accessibilityLabel for labelling icon buttons to make sure it's announced by screen reader devices. -- IconButton has a `role` set to [button](https://www.w3.org/TR/wai-aria-practices-1.2/#button). diff --git a/versioned_docs/version-3.2.1/image.md b/versioned_docs/version-3.2.1/image.md deleted file mode 100644 index 550e56ec4..000000000 --- a/versioned_docs/version-3.2.1/image.md +++ /dev/null @@ -1,49 +0,0 @@ ---- -id: image -title: Image ---- - -Generic Image components from [React Native](https://reactnative.dev). - -## Implements - -- [`Image`](https://reactnative.dev/docs/image) from [React Native](https://reactnative.dev). -- You can use all props of React native Image. - -## Examples - -### Basic - -```ComponentSnackPlayer path=primitives,Image,Basic.tsx - -``` - -### Sizes - -```ComponentSnackPlayer path=primitives,Image,Sizes.tsx - -``` - -### Border Radius - -```ComponentSnackPlayer path=primitives,Image,BorderRadius.tsx - -``` - -### Fallback - -```ComponentSnackPlayer path=primitives,Image,FallbackSupport.tsx - -``` - -### Basic (With Ref) - -```ComponentSnackPlayer path=primitives,Image,WithRef.tsx - -``` - -## Props - -```ComponentPropTable path=primitives,Image,index.tsx showStylingProps=true - -``` diff --git a/versioned_docs/version-3.2.1/input.md b/versioned_docs/version-3.2.1/input.md deleted file mode 100644 index 9dcf9e138..000000000 --- a/versioned_docs/version-3.2.1/input.md +++ /dev/null @@ -1,76 +0,0 @@ ---- -id: input -title: Input ---- - -import { ComponentTheme } from '../../src/components'; - -The `Input` component is a component that is used to get user input in a text field. - -## Examples - -### Basic - -```ComponentSnackPlayer path=primitives,Input,Basic.tsx - -``` - -### Input Sizes - -```ComponentSnackPlayer path=primitives,Input,Size.tsx - -``` - -### Input Variants - -```ComponentSnackPlayer path=primitives,Input,Variant.tsx - -``` - - - -### Input Elements - -```ComponentSnackPlayer path=primitives,Input,Elements.tsx - -``` - -### Password Input - -```ComponentSnackPlayer path=primitives,Input,Masked.tsx - -``` - -### Controlled Input - -```ComponentSnackPlayer path=primitives,Input,Controlled.tsx - -``` - -### Form Controlled - -```ComponentSnackPlayer path=primitives,Input,FormControlled.tsx - -``` - -## Props - -### Input - -```ComponentPropTable path=primitives,Input,Input.tsx showStylingProps=true - -``` - -### Input.Group - -```ComponentPropTable path=primitives,Input,InputGroup.tsx - -``` - -## Styling - - diff --git a/versioned_docs/version-3.2.1/install-cra.mdx b/versioned_docs/version-3.2.1/install-cra.mdx deleted file mode 100644 index 853c65e3a..000000000 --- a/versioned_docs/version-3.2.1/install-cra.mdx +++ /dev/null @@ -1,131 +0,0 @@ ---- -id: install-cra -title: Install in Create React App project ---- - -import Tabs from '@theme/Tabs'; -import TabItem from '@theme/TabItem'; -import { TileLink } from '../../src/components'; - - - - - -The easiest way to get started with NativeBase in create react app is using NativeBase template. - -### JavaScript - -```bash -npx create-react-app my-app --template nativebase -cd my-app/ -yarn start -``` - -### TypeScript - -```bash -npx create-react-app my-app --template nativebase-typescript -cd my-app/ -yarn start -``` - - - - - -Create a new CRA project If not exist - -```bash -npx create-react-app my-app -cd my-app -``` - -[Refer this guide](https://necolas.github.io/react-native-web/docs/installation/) if you need additional configurations. - -### Install dependencies - - - - -
- -```bash -yarn add react-native-web native-base react-native-svg styled-components styled-system react-native-safe-area-context -``` - -
- - - -
- -```bash -npm install react-native-web native-base react-native-svg styled-components styled-system react-native-safe-area-context -``` - -
- - - - -### Run the Hello world example - -Put the below code in your App.js - -```jsx -import React from 'react'; -import { NativeBaseProvider, Box } from 'native-base'; - -export default function App() { - return ( - - Hello world - - ); -} -``` - - - - - -
- -
- -
-
-
- - -
-
- -
-
-
diff --git a/versioned_docs/version-3.2.1/install-expo.mdx b/versioned_docs/version-3.2.1/install-expo.mdx deleted file mode 100644 index 9d29951b2..000000000 --- a/versioned_docs/version-3.2.1/install-expo.mdx +++ /dev/null @@ -1,141 +0,0 @@ ---- -id: install-expo -title: Install in Expo project ---- - -import Tabs from '@theme/Tabs'; -import TabItem from '@theme/TabItem'; -import { TileLink } from '../../src/components'; - -Expo helps you to create universal (iOS, Android and Web) React Native apps with no build configuration. - - - - -### Create a new project using Expo CLI with NativeBase template - -

Plain Javascript

-
- -```bash -expo init my-app --template expo-template-native-base -``` - -
- -

With Typescript

-
- -```bash -expo init my-app --template expo-template-native-base-typescript -``` - -
- -Yey! you are all set, start editing App.js/App.tsx now. - - - - - - -### Create a new expo project if not exist - -```bash -npm install --global expo-cli -expo init my-project -cd my-project/ -``` - -[Refer this link](https://docs.expo.io/) for additional information on Expo and setting up an Expo starter app. - -### Install dependencies - - - - - -```bash -yarn add native-base styled-components styled-system -``` - - - - - -```bash -npm install native-base styled-components styled-system -``` - - - - - -```bash -expo install react-native-svg -``` - -```bash -expo install react-native-safe-area-context -``` - -### Run the Hello world example - -Put the below code in your App.js - -```jsx -import React from 'react'; -import { NativeBaseProvider, Box } from 'native-base'; - -export default function App() { - return ( - - Hello world - - ); -} -``` - - - - -
- minions clapping -
- -
-
-
- - -
-
- -
-
-
diff --git a/versioned_docs/version-3.2.1/install-next.mdx b/versioned_docs/version-3.2.1/install-next.mdx deleted file mode 100644 index dc9dbca16..000000000 --- a/versioned_docs/version-3.2.1/install-next.mdx +++ /dev/null @@ -1,263 +0,0 @@ ---- -id: install-next -title: Install in Next.js project ---- - -import Tabs from '@theme/Tabs'; -import TabItem from '@theme/TabItem'; -import { TileLink } from '../../src/components'; - - - - - -### Create a new project using Next.js CLI with NativeBase template - -
- - - - -

Choose your preferred setting and start your development swiftly 🚀

- -

Plain Javascript

-
- -```bash - yarn create next-app -e https://github.com/GeekyAnts/nativebase-templates/tree/master/nextjs-with-native-base -``` - -
-Yey! you are all set, start editing src/pages/index.js now. - -

With Typescript

-
- -```bash - yarn create next-app -e https://github.com/GeekyAnts/nativebase-templates/tree/master/nextjs-with-native-base-typescript -``` - -
-Yey! you are all set, start editing src/pages/index.tsx now. - - - - - -

Choose your preferred setting and start your development swiftly 🚀

- -

Plain Javascript

-
- -```bash - npx create-next-app -example https://github.com/GeekyAnts/nativebase-templates/tree/master/nextjs-with-native-base -``` - -
- -Yey! you are all set, start editing src/pages/index.js now. - -

With Typescript

-
- -```bash - npx create-next-app -example https://github.com/GeekyAnts/nativebase-templates/tree/master/nextjs-with-native-base-typescript -``` - -
- -Yey! you are all set, start editing src/pages/index.tsx now. - - - -
- - - - -### Install dependencies - - - - - -
- -```bash -yarn add react-native-web native-base react-native-svg styled-components styled-system react-native-safe-area-context -``` - -
- - - - - -
- -```bash -npm install react-native-web native-base react-native-svg styled-components styled-system react-native-safe-area-context -``` - -
- - - - - -We'll need 2 more additional steps. - -1. Install dev dependencies. - - - - - -```bash - yarn add next-compose-plugins next-transpile-modules -D -``` - - - - - -```bash - npm i next-compose-plugins next-transpile-modules --save-dev -``` - - - - - -2. Update your next.config.js with the below content. - -```js -const withPlugins = require('next-compose-plugins'); -const withTM = require('next-transpile-modules')([ - 'native-base', - 'react-native-svg', - 'styled-components', - 'react-native-safe-area-context', - '@react-aria/visually-hidden', - '@react-native-aria/button', - '@react-native-aria/checkbox', - '@react-native-aria/combobox', - '@react-native-aria/focus', - '@react-native-aria/interactions', - '@react-native-aria/listbox', - '@react-native-aria/overlays', - '@react-native-aria/radio', - '@react-native-aria/slider', - '@react-native-aria/tabs', - '@react-native-aria/utils', - '@react-stately/combobox', - '@react-stately/radio', -]); - -module.exports = withPlugins( - [ - withTM, - // your plugins go here. - ], - { - webpack: (config) => { - config.resolve.alias = { - ...(config.resolve.alias || {}), - // Transform all direct `react-native` imports to `react-native-web` - 'react-native$': 'react-native-web', - }; - config.resolve.extensions = [ - '.web.js', - '.web.ts', - '.web.tsx', - ...config.resolve.extensions, - ]; - return config; - }, - } -); -``` - -### Run the Hello world example - -Replace the below code in your pages/\_app.js - -```jsx -import '../styles/globals.css'; -import { NativeBaseProvider } from 'native-base'; - -function MyApp({ Component, pageProps }) { - return ( - - - - ); -} - -export default MyApp; -``` - -and put this in your pages/index.js - -```jsx -import React from 'react'; -import { Box } from 'native-base'; - -export default function App() { - return Hello world; -} -``` - - - - -
- -
- -
-
-
- - -
-
- -
-
-
diff --git a/versioned_docs/version-3.2.1/install-rn.mdx b/versioned_docs/version-3.2.1/install-rn.mdx deleted file mode 100644 index 8ed3a885d..000000000 --- a/versioned_docs/version-3.2.1/install-rn.mdx +++ /dev/null @@ -1,138 +0,0 @@ ---- -id: install-rn -title: Install in React Native project ---- - -import Tabs from '@theme/Tabs'; -import TabItem from '@theme/TabItem'; -import { TileLink } from '../../src/components'; - - - - - -### Create a new project using ReactNative CLI with NativeBase template - -[Refer this link](https://github.com/react-native-community/cli#about) to get infomation about the React Native CLI. - -

Plain Javascript

-
- -```bash -npx react-native init MyApp --template react-native-template-native-base -``` - -
- -

With Typescript

-
- -```bash -npx react-native init MyApp --template react-native-template-native-base-typescript -``` - -
- -Yey! you are all set, start editing App.js/App.tsx now. - - - - - -### Create a new project if not exist - -```bash -npx react-native init AwesomeNativeBase -cd AwesomeNativeBase -``` - -### Install dependencies - - - - - -```bash -yarn add native-base react-native-svg styled-components styled-system react-native-safe-area-context -``` - - - - - -```bash -npm install native-base react-native-svg styled-components styled-system react-native-safe-area-context -``` - - - - - -### Run pod install - -```bash -cd ios/ -pod install -``` - -### Run the Hello world example - -Put the below code in your App.js - -```jsx -import React from 'react'; -import { NativeBaseProvider, Box } from 'native-base'; - -export default function App() { - return ( - - Hello world - - ); -} -``` - - - - - -
- -
- -
-
-
- - -
-
- -
-
-
diff --git a/versioned_docs/version-3.2.1/installation.mdx b/versioned_docs/version-3.2.1/installation.mdx deleted file mode 100644 index 91616aeed..000000000 --- a/versioned_docs/version-3.2.1/installation.mdx +++ /dev/null @@ -1,30 +0,0 @@ ---- -id: installation -title: Installation ---- - -import { InstallationTiles } from '../../src/components'; - -**NativeBase** is supported in [Expo](https://docs.expo.io/get-started/installation/) or React Native CLI initiated apps. Web support is made possible by [react-native-web](https://necolas.github.io/react-native-web/). - -Refer the guides shown below to setup NativeBase in your React app. - -
-
- -
-
- -
- -### NativeBase VS Code Extensions - -NativeBase VS Code Extensions are specifically designed to quicken your development process using **NativeBase 3.0**. -NativeBase snippets are shorthand for commonly used NativeBase components. - -All snippets start with the prefix `nb-` and are followed by the name of the desired component. - -aang transitioning to avatar state diff --git a/versioned_docs/version-3.2.1/interaction-styles.mdx b/versioned_docs/version-3.2.1/interaction-styles.mdx deleted file mode 100644 index 8c07bf6a5..000000000 --- a/versioned_docs/version-3.2.1/interaction-styles.mdx +++ /dev/null @@ -1,229 +0,0 @@ ---- -id: pseudo-props -title: Pseudo props in Detail ---- - -import { - Box, - NativeBaseProvider, - HStack, - VStack, - Text, - Pressable, - Image, -} from 'native-base'; - -NativeBase provides a declarative way to add interaction or platform specific props. - -## Hover - -Using `_hover` pseudo prop, we can customize the style of Pressable component on hover. - - - - - - Hover - - - - - -```jsx title="Hover example" - - - Hover me - - -``` - -## Pressed - -Using `_pressed` pseudo prop, we can customize the style of Pressable component on pressed. - - - - - - Pressed - - - - - -```jsx title="Pressed example" - - - Pressed - - -``` - -## Focus - -Using `_focus` pseudo prop, we can customize the style of Pressable component on focus. - - - - - - Focus - - - - - -```jsx title="Focus example" - - - Focus - - -``` - -## Platform specific styling - -Using `_web`, `_iOS`, `_android` pseudo props, we can customize the style or behaviour of NativeBase components across platforms. - - - - - - - Save - - - Web - - - - - Save - - - Android - - - - - Save - - - iOS - - - - -```jsx title="Platform specific example" - - - - - Save - - - Web - - - - - Save - - - Android - - - - - Save - - - iOS - - -``` diff --git a/versioned_docs/version-3.2.1/keyboardAvoidingView.md b/versioned_docs/version-3.2.1/keyboardAvoidingView.md deleted file mode 100644 index a124d3063..000000000 --- a/versioned_docs/version-3.2.1/keyboardAvoidingView.md +++ /dev/null @@ -1,18 +0,0 @@ ---- -id: keyboard-avoiding-view -title: KeyboardAvoidingView ---- - -Provides a view that moves out of the way of virtual keyboard automatically. It is a component to solve the common problem of views that need to move out of the way of the virtual keyboard. It can automatically adjust either its height, position, or bottom padding based on the keyboard height. - -## Example - -```ComponentSnackPlayer path=basic,KeyboardAvoidingView,Basic.tsx - -``` - -## Props - -```ComponentPropTable path=basic,KeyboardAvoidingView,KeyboardAvoidingView.tsx showStylingProps=true - -``` diff --git a/versioned_docs/version-3.2.1/kitchen-sink.mdx b/versioned_docs/version-3.2.1/kitchen-sink.mdx deleted file mode 100644 index 7187d2c16..000000000 --- a/versioned_docs/version-3.2.1/kitchen-sink.mdx +++ /dev/null @@ -1,66 +0,0 @@ ---- -id: kitchen-sink -title: Kitchen Sink ---- - -import { KitchenSinkIframe, TileLink, NBHistory } from '../../src/components'; -import useBaseUrl from '@docusaurus/useBaseUrl'; -import ExpoIcon from '@site/static/img/expo-icon.svg'; -import useThemeContext from '@theme/hooks/useThemeContext'; - -
-
-
-

- Kitchen Sink is a comprehensive demo app showcasing all the NativeBase - components in action. It includes buttons, forms, icons and much more! -

-
-
-
- Scan with the - - - - Expo app on your Android device to see the special dish we cooked - for you! -
- -
-
-
- -
-
-
-
-
- -
-
-
diff --git a/versioned_docs/version-3.2.1/link.md b/versioned_docs/version-3.2.1/link.md deleted file mode 100644 index cdfcb946a..000000000 --- a/versioned_docs/version-3.2.1/link.md +++ /dev/null @@ -1,60 +0,0 @@ ---- -id: link -title: Link ---- - -import { ComponentTheme } from '../../src/components'; - -`Links` are accessible elements used primarily for navigation. This component is styled to resemble a hyperlink. - -## **Import** - -```jsx -import { Link } from 'native-base'; -``` - -## Examples - -### Basic - -```ComponentSnackPlayer path=primitives,Link,Basic.tsx - -``` - -### External Link - -```ComponentSnackPlayer path=primitives,Link,ExternalLink.tsx - -``` - -### Link with Underline - -```ComponentSnackPlayer path=primitives,Link,UnderlineLink.tsx - -``` - -### Link custom onPress - -```ComponentSnackPlayer path=primitives,Link,CustomOnPress.tsx - -``` - -### Link around containers - -```ComponentSnackPlayer path=primitives,Link,CompositeLink.tsx - -``` - -## Props - -```ComponentPropTable path=primitives,Link,index.tsx - -``` - -## Styling - - - -## Accessibility - -Adheres to the [Link WAI-ARIA design pattern.](https://www.w3.org/TR/wai-aria-practices-1.2/#link) diff --git a/versioned_docs/version-3.2.1/loginsignupforms.md b/versioned_docs/version-3.2.1/loginsignupforms.md deleted file mode 100644 index 9abc14ca3..000000000 --- a/versioned_docs/version-3.2.1/loginsignupforms.md +++ /dev/null @@ -1,157 +0,0 @@ ---- -id: login-signup-forms -title: Login/Signup Forms ---- - -## Example - -### Login Form - -```SnackPlayer name=login dependencies=react-native-linear-gradient -import * as React from 'react'; -import { MaterialCommunityIcons, Ionicons } from '@expo/vector-icons'; -import { - NativeBaseProvider, - Box, - Text, - Heading, - VStack, - FormControl, - Input, - Link, - Button, - Icon, - IconButton, - HStack, - Divider, -} from 'native-base'; - -export default function App() { - return ( - - - - Welcome - - - Sign in to continue! - - - - - - Email ID - - - - - - Password - - - - Forget Password? - - - - - - I'm a new user.{' '} - - - Sign Up - - - - - - ); -} - -``` - -### Signup Form - -```SnackPlayer name=Signup dependencies=react-native-linear-gradient -import * as React from 'react'; -import { MaterialCommunityIcons, Ionicons } from '@expo/vector-icons'; -import { - NativeBaseProvider, - Box, - Text, - Heading, - VStack, - FormControl, - Input, - Link, - Button, - Icon, - IconButton, - HStack, - Divider, -} from 'native-base'; - -export default function App() { - return ( - - - - Welcome - - - Sign up to continue! - - - - - - Email - - - - - - Password - - - - - - Confirm Password - - - - - - - - ); -} - -``` diff --git a/versioned_docs/version-3.2.1/menu.md b/versioned_docs/version-3.2.1/menu.md deleted file mode 100644 index 736456663..000000000 --- a/versioned_docs/version-3.2.1/menu.md +++ /dev/null @@ -1,94 +0,0 @@ ---- -id: menu -title: Menu ---- - -import { ComponentTheme } from '../../src/components'; - -A dropdown menu for the common dropdown menu button design pattern. - -## Import - -NativeBase uses 5 components for rendering menus: - -- `Menu`: The wrapper component provides context, state, and focus management. -- `Menu.Item`: The trigger that handles menu selection. -- `Menu.Group`: A wrapper to group related menu items. -- `Menu.OptionGroup`: A wrapper for checkable menu items (radio and checkbox). -- `Menu.ItemOption`: The checkable menu item, to be used with `MenuOptionGroup`. - -```jsx -import { Menu } from 'native-base'; -``` - -## Examples - -### Basic - -```ComponentSnackPlayer path=composites,Menu,Basic.tsx - -``` - -### Group - -```ComponentSnackPlayer path=composites,Menu,Group.tsx - -``` - -### MenuOptionGroups - -```ComponentSnackPlayer path=composites,Menu,MenuOptionsGroup.tsx - -``` - -### Menu Placement - -```ComponentSnackPlayer path=composites,Menu,MenuPositions.tsx - -``` - -## Props - -### Menu - -```ComponentPropTable path=composites,Menu,Menu.tsx - -``` - -### MenuItem - -```ComponentPropTable path=composites,Menu,MenuItem.tsx - -``` - -MenuItem implements [Pressable] - -### MenuItemOption - -Extends `MenuItem`. - -### MenuItemOption - -```ComponentPropTable path=composites,Menu,MenuItemOption.tsx - -``` - -### MenuGroup - -```ComponentPropTable path=composites,Menu,MenuGroup.tsx - -``` - -### MenuOptionGroup - -```ComponentPropTable path=composites,Menu,MenuOptionGroup.tsx - -``` - -## Styling - - - -## Accessibility - -Adheres to the [Menu WAI-ARIA design pattern.](https://www.w3.org/TR/wai-aria-practices-1.2/#menu) diff --git a/versioned_docs/version-3.2.1/migration/Accordion.md b/versioned_docs/version-3.2.1/migration/Accordion.md deleted file mode 100644 index 9f75bc7ea..000000000 --- a/versioned_docs/version-3.2.1/migration/Accordion.md +++ /dev/null @@ -1,89 +0,0 @@ -import Tabs from '@theme/Tabs'; -import TabItem from '@theme/TabItem'; - -We have sliced Accordion into multiple smaller component which not only provides more control over the the code but also makes it more readable. - -## Overview - -Migrating Checkbox components can broadly described in these points: - -- **dataArray** is depreciated. -- **expanded** → `defaultIndex`, and now accepts array of index. -- Pros like **headerStyle**, **contentStyle**, **icon**, **expandedIcon**, **iconStyle**, **expandedIconStyle**, **renderHeader**, **renderContent** are _no longer required_ as components like `Accordion.Button`, `Accordion.Panel`, `Accordion.Icon` replaces them. -- **onAccordionOpen,** **onAccordionOpen** → `onChange`, one callback instead of 2. - -## Code Comparison - - - - -```tsx -import React, { Component } from 'react'; -import { Container, Header, Content, Accordion } from 'native-base'; -const dataArray = [ - { - title: 'First Element', - content: 'Lorem ipsum dolor sit amet', - }, - { title: 'Second Element', content: 'Lorem ipsum dolor sit amet' }, - { - title: 'Third Element', - content: 'Lorem ipsum dolor sit amet', - }, -]; -export default class AccordionExample extends Component { - render() { - return ( - -
- - - - - ); - } -} -``` - - - - -```tsx -import React from 'react'; -import { Accordion } from 'native-base'; -export default function () { - return ( - - - - First Element - - - Lorem ipsum dolor sit amet - - - - Second Element - - - Lorem ipsum dolor sit amet - - - - Third Element - - - Lorem ipsum dolor sit amet - - - ); -} -``` - - - diff --git a/versioned_docs/version-3.2.1/migration/Actionsheet.md b/versioned_docs/version-3.2.1/migration/Actionsheet.md deleted file mode 100644 index 50e681848..000000000 --- a/versioned_docs/version-3.2.1/migration/Actionsheet.md +++ /dev/null @@ -1,107 +0,0 @@ ---- -id: action-sheet -title: ActionSheet ---- - -import Tabs from '@theme/Tabs'; -import TabItem from '@theme/TabItem'; - -We have sliced [`Actionsheet`](actionSheet.md) into multiple smaller component which not only provides more control over the the code but also makes it more readable. - -## Overview - -Migrating Checkbox components can broadly described in these points: - -- **options** (prop) → `Actionsheet.Item` (component). -- Props like **cancelButtonIndex**, **cancelButtonIndex** are _no longer required_ as components like `Actionsheet.Item` can be customised as per need. -- **title** (prop) → NativeBase components such as `Heading` and `Text` can be used inside `ActionSheet.Content` to show the title. -- Declarative approach to show and hide using `isOpen` prop, instead of `show()` and `hide()`. - -## Code Comparison - - - - -```tsx -import React, { Component } from 'react'; -import { - Container, - Header, - Button, - Content, - ActionSheet, - Text, -} from 'native-base'; -var BUTTONS = ['Option 1', 'Option 2', 'Option 3', 'Delete', 'Cancel']; -var DESTRUCTIVE_INDEX = 3; -var CANCEL_INDEX = 4; -export default class ActionSheetExample extends Component { - constructor(props) { - super(props); - this.state = {}; - } - render() { - return ( - - - - - - ); - } -} -``` - - - - -```tsx -import React from 'react'; -import { Button, Actionsheet, useDisclose } from 'native-base'; - -export default function () { - const { isOpen, onOpen, onClose } = useDisclose(); - return ( - <> - - - - - Header - Option 1 - Option 2 - Option 3 - Delete - - - Cancel - - - - ); -} -``` - - - diff --git a/versioned_docs/version-3.2.1/migration/Badge.md b/versioned_docs/version-3.2.1/migration/Badge.md deleted file mode 100644 index 50dad69ac..000000000 --- a/versioned_docs/version-3.2.1/migration/Badge.md +++ /dev/null @@ -1,44 +0,0 @@ ---- -id: badge -title: Badge ---- - -import Tabs from '@theme/Tabs'; -import TabItem from '@theme/TabItem'; - -Migrating [`Badge`](badge.md) to v3 will provide a lot more **design**, **size, variant**, **color** and **customisation** options. - -## Overview - -Migrating Badge components can be broadly described in these points: - -- No need to wrap you text inside text component anymore. -- In v3 the color is controlled by `colorScheme` prop. And it accepts all the color available in the theme. - -## Code Comparison - - - - -```tsx - - Success - -``` - - - - -```tsx - - Success - -``` - - - diff --git a/versioned_docs/version-3.2.1/migration/Button.md b/versioned_docs/version-3.2.1/migration/Button.md deleted file mode 100644 index a33b068df..000000000 --- a/versioned_docs/version-3.2.1/migration/Button.md +++ /dev/null @@ -1,196 +0,0 @@ ---- -id: button -title: Button ---- - -import Tabs from '@theme/Tabs'; -import TabItem from '@theme/TabItem'; - -Migrating [`Button`](button.mdx) to v3 will provide a lot more **design**, **size**, **color** and **customisation** options. - -## Overview - -Migrating Button components can broadly described in these points: - -- No need to wrap your text inside `Text` component anymore. -- `isDisabled` prop can be used to disable the button. -- Icons in Button: - `leftIcon` and `rightIcon` are the new alternative to iconLeft and iconRight respectively and they accept **tsx.Element**. -- Colors of the Buttons: - In v3 the color is controlled by `colorScheme` prop. So all the color providing props [ **light**, **info**, **success**, **warning**, **danger** and **dark** ] can be passed as value (and more) to `colorScheme` props. -- Design of the Button: - With v3 we're providing some mostly frequently used designs as `variants` [ **solid**, **outline**, **ghost**, **link** and **unstyled** ] and lot more customisation. -- Sizes of the Button: - In v3 the size is controlled by `size` prop. And it accepts pre-defined sizes [ like xs, sm md, lg ] and also custom values. - -## Code Comparison - -## Colors to the Button - -Besides option like **light**, **info**, **success**, **warning**, **danger** and **dark**. Now you can also provide colors like **red**, **blue**, **cyan**, **teal** and a lot more. - - - - -![Button/Screenshot_2021-01-22_at_12.29.32_PM.png](Button/Screenshot_2021-01-22_at_12.29.32_PM.png) - -```tsx - -``` - - - - -![Button/Screenshot_2021-01-22_at_12.53.09_PM.png](Button/Screenshot_2021-01-22_at_12.53.09_PM.png) - -```tsx - -``` - - - - -### Sizes of the Button: - -Besides option like **light**, **info**, **success**, **warning**, **danger** and **dark**. Now you can also provide colors like **red**, **blue**, **cyan**, **teal** and a lot more. - - - - -![Button/Screenshot_2021-01-22_at_2.37.09_PM.png](Button/Screenshot_2021-01-22_at_2.37.09_PM.png) - -```tsx - -``` - - - - -![Button/Screenshot_2021-01-22_at_2.38.52_PM.png](Button/Screenshot_2021-01-22_at_2.38.52_PM.png) - -```tsx - -``` - - - - -### Designing the Button - -With v3 you can combine variants and style props to create various designs. - - - - -![Button/Screenshot_2021-01-22_at_1.16.25_PM.png](Button/Screenshot_2021-01-22_at_1.16.25_PM.png) - -```tsx - -``` - -![Button/Screenshot_2021-01-22_at_1.23.42_PM.png](Button/Screenshot_2021-01-22_at_1.23.42_PM.png) - -```tsx - -``` - -![Button/Screenshot_2021-01-22_at_1.17.11_PM.png](Button/Screenshot_2021-01-22_at_1.17.11_PM.png) - -```tsx - -``` - - - - -![Button/Screenshot_2021-01-22_at_1.15.34_PM.png](Button/Screenshot_2021-01-22_at_1.15.34_PM.png) - -```tsx - -``` - -![Button/Screenshot_2021-01-22_at_1.22.36_PM.png](Button/Screenshot_2021-01-22_at_1.22.36_PM.png) - -```tsx - -``` - -![Button/Screenshot_2021-01-22_at_1.20.36_PM.png](Button/Screenshot_2021-01-22_at_1.20.36_PM.png) - -```tsx - -``` - - - - -### Icon Button - -With v3 iconLeft and iconRight can now accepts tsx.Element as child and render the element at the appropriate place. - - - - -![Button/Screenshot_2021-01-22_at_1.32.47_PM.png](Button/Screenshot_2021-01-22_at_1.32.47_PM.png) - -```tsx - -``` - - - - -![Button/Screenshot_2021-01-22_at_1.38.15_PM.png](Button/Screenshot_2021-01-22_at_1.38.15_PM.png) - -```tsx - -``` - - - diff --git a/versioned_docs/version-3.2.1/migration/Button/Screenshot_2021-01-22_at_1.15.34_PM.png b/versioned_docs/version-3.2.1/migration/Button/Screenshot_2021-01-22_at_1.15.34_PM.png deleted file mode 100644 index 1f0a85886576217db343150d2e295264fcfad8fa..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 9022 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 Yc51Ey+58dy`~Q@ZoSJO4v_;7O0lVT4&j0`b diff --git a/versioned_docs/version-3.2.1/migration/Button/Screenshot_2021-01-22_at_1.17.11_PM.png b/versioned_docs/version-3.2.1/migration/Button/Screenshot_2021-01-22_at_1.17.11_PM.png deleted file mode 100644 index 2c80f15496b1cb3c88a84b637f60b3a5dc1fc2d9..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 10048 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 diff --git a/versioned_docs/version-3.2.1/migration/Button/Screenshot_2021-01-22_at_1.22.36_PM.png b/versioned_docs/version-3.2.1/migration/Button/Screenshot_2021-01-22_at_1.22.36_PM.png deleted file mode 100644 index cd3d19be5125925682daa1702d1bb8a58aef387c..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 8306 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 diff --git a/versioned_docs/version-3.2.1/migration/Button/Screenshot_2021-01-22_at_1.23.42_PM.png b/versioned_docs/version-3.2.1/migration/Button/Screenshot_2021-01-22_at_1.23.42_PM.png deleted file mode 100644 index 5bef6f3942a96f65ff94287897fa2dc013fc6357..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 7841 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 E0C`eO$p8QV diff --git a/versioned_docs/version-3.2.1/migration/Button/Screenshot_2021-01-22_at_1.32.47_PM.png b/versioned_docs/version-3.2.1/migration/Button/Screenshot_2021-01-22_at_1.32.47_PM.png deleted file mode 100644 index 7bb43656da0b713ded795a0025aafb6002a68f46..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 9384 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 ZR}i?Ov7)pI`=tONBdH)!DP|P-e*kRRuoM6Q diff --git a/versioned_docs/version-3.2.1/migration/Button/Screenshot_2021-01-22_at_12.29.32_PM.png b/versioned_docs/version-3.2.1/migration/Button/Screenshot_2021-01-22_at_12.29.32_PM.png deleted file mode 100644 index 24f882b52744257850152b4232ac76d98fb4e8dc..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 8297 zcmZX31ymee67DcSaF^f^Ai>=ScXx*bm*6(IySuv#8YB!(aDoI6POu;oNN{&~Gtxt)?Q2fl7i3001!L<)k!Tc-#vqA-{S#_Rt&0008K=Hjb8yAWjmlkE~BRu0$*ql{R*I5(2J59E$j0 z0xM&i2hLzjT@3vfLNP)DXr?sudN3rWft3(n`j@ht*rNY0-`)G2$-t?+Th(^1>vcG> z#!RMUSg`>B7K>JTit}b1T4kf8fg}dNr0+#lYZuB6BY6E9qX_*fF!P$Ph$pRD1+^|P z;aPWj6U{;hkOYq6y5%$y8JGZU?0e(dzyYMf*Uc1yrGj_GYM8>|Bsvv>8`HfifYyvI zvq8#cLZn+`fJ*iD_cpu$lIx-Z{cmFtLL`N6JaEpX%>dlwZ!lpf?S4@NP{EyDRgDeQ zD2L)M1T!M6laYr6u6w74Y{`fBj#t<^J3Lgj#njofiGqjE%oEQU4??#^SawU55;hi{ z)PZ_m4ck*o@Uu`|GWogQ>8RU9`AYj)uEB{hNO)VM%uw)bjV#p%1i?Yk3Q0*2p*RDZ zTb)@S(?z%x@h5|c>IlJ~DuYsyp&|olhz<1!=@V9eO1;wAnphP_t*S1p+h^c

r!* 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 diff --git a/versioned_docs/version-3.2.1/migration/Button/Screenshot_2021-01-22_at_12.53.09_PM.png b/versioned_docs/version-3.2.1/migration/Button/Screenshot_2021-01-22_at_12.53.09_PM.png deleted file mode 100644 index 17cf494df3626e48fb0851c0b0324b43a9f5bdf2..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 8494 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 diff --git a/versioned_docs/version-3.2.1/migration/Card.md b/versioned_docs/version-3.2.1/migration/Card.md deleted file mode 100644 index c9acc1d07..000000000 --- a/versioned_docs/version-3.2.1/migration/Card.md +++ /dev/null @@ -1,91 +0,0 @@ ---- -id: card -title: Card ---- - -import Tabs from '@theme/Tabs'; -import TabItem from '@theme/TabItem'; - -With NativeBase v3 we have removed Card components because as it's very simple to create various card layout using primitive components. - -## Code Comparison - - - - -```tsx -import React, { Component } from 'react'; -import { - Container, - Header, - Content, - Card, - CardItem, - Text, - Body, -} from 'native-base'; -export default class CardItemBordered extends Component { - render() { - return ( - -

- - - - NativeBase - - - - - NativeBase is a free and open source framework that enable - developers to build high-quality mobile apps using React - Native iOS and Android apps with a fusion of ES6. - - - - - GeekyAnts - - - - - ); - } -} -``` - - - - -```tsx -import React from 'react'; -import { VStack, Box, Divider } from 'native-base'; - -export default function () { - return ( - - }> - - NativeBase - - - NativeBase is a free and open source framework that enable developers - to build high-quality mobile apps using React Native iOS and Android - apps with a fusion of ES6. - - - GeekyAnts - - - - ); -} -``` - - - diff --git a/versioned_docs/version-3.2.1/migration/Checkbox.md b/versioned_docs/version-3.2.1/migration/Checkbox.md deleted file mode 100644 index f63647256..000000000 --- a/versioned_docs/version-3.2.1/migration/Checkbox.md +++ /dev/null @@ -1,54 +0,0 @@ ---- -id: checkbox -title: Checkbox ---- - -import Tabs from '@theme/Tabs'; -import TabItem from '@theme/TabItem'; - -Migrating [`Checkbox`](checkBox.md) to v3 will provide a lot more **design**, **size**, **color** and **customisation** option. - -## Overview - -Migrating Checkbox components can broadly described in these points: - -- **checked** props is deprecated, instead now we provide you with `defaultIsChecked` and `isChecked` prop to better manage your checkbox. For most cases **checked** can be replaced with `isChecked`. -- Colors of the Checkbox: - In v3 the color is controlled by `colorScheme` prop. And it accepts all the color available in the theme. -- onPress props is deprecated, instead v3 provides onChange which provides a callback when state of the checkbox change. - -## Code Comparison - - - - -![Checkbox/Screenshot_2021-01-22_at_3.09.29_PM.png](Checkbox/Screenshot_2021-01-22_at_3.09.29_PM.png) - -```tsx - - - Finish list Screen - -``` - - - - -![Checkbox/Screenshot_2021-01-22_at_4.34.08_PM.png](Checkbox/Screenshot_2021-01-22_at_4.34.08_PM.png) - -```tsx - -Finish list Screen -// alternative: pressing the text will also trigger onChange - - Finish list Screen - -``` - - - diff --git a/versioned_docs/version-3.2.1/migration/Checkbox/Screenshot_2021-01-22_at_3.09.29_PM.png b/versioned_docs/version-3.2.1/migration/Checkbox/Screenshot_2021-01-22_at_3.09.29_PM.png deleted file mode 100644 index 121ecaa72899fd19e5270f0ef05545eafc2add0d..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 10808 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

<0X>;T!R$9~6$gERf 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 De@@vF diff --git a/versioned_docs/version-3.2.1/migration/Checkbox/Screenshot_2021-01-22_at_4.34.08_PM.png b/versioned_docs/version-3.2.1/migration/Checkbox/Screenshot_2021-01-22_at_4.34.08_PM.png deleted file mode 100644 index ef1c1a20da072291a0e4f16f34ec0f2f6b190f2e..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 9954 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 diff --git a/versioned_docs/version-3.2.1/migration/DatePicker.md b/versioned_docs/version-3.2.1/migration/DatePicker.md deleted file mode 100644 index 9d2dcf583..000000000 --- a/versioned_docs/version-3.2.1/migration/DatePicker.md +++ /dev/null @@ -1,6 +0,0 @@ ---- -id: date-picker -title: DatePicker ---- - -DatePicker is currently in progress and will be coming soon. Till then you can use React Native's [DateTimePicker](https://github.com/react-native-datetimepicker/datetimepicker). diff --git a/versioned_docs/version-3.2.1/migration/DeckSwiper.md b/versioned_docs/version-3.2.1/migration/DeckSwiper.md deleted file mode 100644 index 9fd590f78..000000000 --- a/versioned_docs/version-3.2.1/migration/DeckSwiper.md +++ /dev/null @@ -1,8 +0,0 @@ ---- -id: deck-swiper -title: DeckSwiper ---- - -We're still thinking whether we should add a DeckSwiper component, let us know on [discord channel](https://discord.com/invite/TSgCw2UPmb). -Till then you can use [react-native-deck-swiper -](https://www.npmjs.com/package/react-native-deck-swiper). diff --git a/versioned_docs/version-3.2.1/migration/Drawer.md b/versioned_docs/version-3.2.1/migration/Drawer.md deleted file mode 100644 index 1c4f74752..000000000 --- a/versioned_docs/version-3.2.1/migration/Drawer.md +++ /dev/null @@ -1,6 +0,0 @@ ---- -id: drawer -title: Drawer ---- - -Drawer component is still in progress, until it's done you can check out the recipe of integrating React Navigation's [DrawerNavigation](https://reactnavigation.org/docs/drawer-based-navigation/) in NB. diff --git a/versioned_docs/version-3.2.1/migration/FABs.md b/versioned_docs/version-3.2.1/migration/FABs.md deleted file mode 100644 index 7c7e20906..000000000 --- a/versioned_docs/version-3.2.1/migration/FABs.md +++ /dev/null @@ -1,63 +0,0 @@ -import Tabs from '@theme/Tabs'; -import TabItem from '@theme/TabItem'; - -Migrating [`FAB`](FAB.md) to v3 will provide a lot more **design**, **size**, **color** and **customisation** option. - -## Overview - -Migrating Badge components can broadly described in these points: - -- Instead of Passing Icon as child, use `icon` prop. - -## Code Comparison - - - - -```tsx -import React, { Component } from 'react'; -import { Container, Header, View, Icon, Fab } from 'native-base'; -export default function () { - return ( - -

- - - - - - - ); -} -``` - - - - -```tsx -import React from 'react'; -import { Fab, Icon } from 'native-base'; - -export default function () { - return ( - } - /> - ); -} -``` - - - diff --git a/versioned_docs/version-3.2.1/migration/FooterTab.md b/versioned_docs/version-3.2.1/migration/FooterTab.md deleted file mode 100644 index 6262a397a..000000000 --- a/versioned_docs/version-3.2.1/migration/FooterTab.md +++ /dev/null @@ -1,6 +0,0 @@ ---- -id: footer-tab -title: FooterTab ---- - -With NativeBase v3 we have removed FooterTab components because as it's very simple to create using HStack components. You can checkout the [recipe](buildingFooterTabs.md). diff --git a/versioned_docs/version-3.2.1/migration/Form.md b/versioned_docs/version-3.2.1/migration/Form.md deleted file mode 100644 index c7fe61675..000000000 --- a/versioned_docs/version-3.2.1/migration/Form.md +++ /dev/null @@ -1,72 +0,0 @@ ---- -id: form -title: Form ---- - -import Tabs from '@theme/Tabs'; -import TabItem from '@theme/TabItem'; - -With NativeBase v3 we have replaced Form with [`FormControl`](formControl.md) and sliced into [`FormControl.Label`](formControl.md#formcontrollabel), [`FormControl.HelperText`](formControl.md#formcontrolhelpertext) and [`FormControl.ErrorMessage`](formControl#formcontrolerrormessage). - -Here an example to show the code comparison. - -## Code Comparison - - - - -```tsx -import React, { Component } from 'react'; -import { Form, Item, Input } from 'native-base'; -export default class FormExample extends Component { - render() { - return ( -
- - - - - - - - -
- ); - } -} -// need to re-write -``` - - - - -```tsx -import React from 'react'; -import { Input, Stack, FormControl } from 'native-base'; -export const FormExample = () => { - return ( - - - - Username - - - - Password - - - - - ); -}; - -// v3 version -``` - - - diff --git a/versioned_docs/version-3.2.1/migration/Header.md b/versioned_docs/version-3.2.1/migration/Header.md deleted file mode 100644 index 9ec9f0288..000000000 --- a/versioned_docs/version-3.2.1/migration/Header.md +++ /dev/null @@ -1,6 +0,0 @@ ---- -id: header -title: Header ---- - -With v3 we have removed the **Header** as it can be easily built using `HStack`. You can checkout its recipe [here](/buildingAppBar). diff --git a/versioned_docs/version-3.2.1/migration/Icon.md b/versioned_docs/version-3.2.1/migration/Icon.md deleted file mode 100644 index cdaba70a0..000000000 --- a/versioned_docs/version-3.2.1/migration/Icon.md +++ /dev/null @@ -1,80 +0,0 @@ ---- -id: icon -title: Icon ---- - -import Tabs from '@theme/Tabs'; -import TabItem from '@theme/TabItem'; - -Migrating [`Icon`](icon.md) to v3 will provide a lot more **customisation** option. You can also create custom icons using SVG. - -## Overview - -Migrating Icon components can broadly described in these points: - -- **ios**, **android** and **type** props have been deprecated. -- default Icon type i.e **Ionicons** has been removed, now v3 does not uses any. -- v3 uses a third-party icon library ( such as @expo/vector-icons ), with **as** prop. -- custom colors and size can be added using **color** and **size** props. - -## Code Comparison - - - - -```tsx -import React, { Component } from 'react'; -import { Icon } from 'native-base'; - -export default class IconExample extends Component { - render() { - return ( - <> - - - - - ); - } -} -// need to re-write -``` - - - - -```tsx -import React from 'react'; -import { Platform } from 'react-native'; -import { Icon } from 'native-base'; -import { Ionicons, FontAwesome } from '@expo/vector-icons'; - -export default function () { - return ( - <> - - - - - ); -} - -// v3 version -``` - - - diff --git a/versioned_docs/version-3.2.1/migration/Layout.md b/versioned_docs/version-3.2.1/migration/Layout.md deleted file mode 100644 index 40ecc91a0..000000000 --- a/versioned_docs/version-3.2.1/migration/Layout.md +++ /dev/null @@ -1,77 +0,0 @@ ---- -id: layout -title: Layout ---- - -import Tabs from '@theme/Tabs'; -import TabItem from '@theme/TabItem'; - -## Grid - -You can easily design layouts with [Row](hStack.md) or [Column](VStack.md) components. - -## List - -With NativeBase v3 we have removed List components because as it's very simple to create various list layout using primitive components. - -### Code Comparison - - - - -```tsx - - - - Simon Mignolet - - - - - - - - Nathaniel Clyne - - - - - - - - Dejan Lovren - - - - - - -``` - - - - -```tsx -} w="90%"> - - Simon Mignolet - - - - Nathaniel Clyne - - - - Dejan Lovren - - - -``` - - - diff --git a/versioned_docs/version-3.2.1/migration/List.md b/versioned_docs/version-3.2.1/migration/List.md deleted file mode 100644 index e69de29bb..000000000 diff --git a/versioned_docs/version-3.2.1/migration/Picker.md b/versioned_docs/version-3.2.1/migration/Picker.md deleted file mode 100644 index 87dbb6037..000000000 --- a/versioned_docs/version-3.2.1/migration/Picker.md +++ /dev/null @@ -1,91 +0,0 @@ ---- -id: picker -title: Picker ---- - -import Tabs from '@theme/Tabs'; -import TabItem from '@theme/TabItem'; - -With v3 we have replaced the **Picker** with [`Select`](select.md). - -## Code Comparison - - - - -```tsx -import React, { Component } from 'react'; -import { Container, Header, Content, Picker, Form } from 'native-base'; - -export default class PickerExample extends Component { - constructor(props) { - super(props); - this.state = { - selected: 'key1', - }; - } - onValueChange(value: string) { - this.setState({ - selected: value, - }); - } - render() { - return ( - -
- -
- - - - - - - -
- - - ); - } -} -``` - - - - -```tsx -import React from 'react'; -import { Icon, Select } from 'native-base'; - -export default function () { - let [language, setLanguage] = React.useState('key0'); - return ( - - ); -} -``` - - - diff --git a/versioned_docs/version-3.2.1/migration/Radio Button.md b/versioned_docs/version-3.2.1/migration/Radio Button.md deleted file mode 100644 index a2ccedd08..000000000 --- a/versioned_docs/version-3.2.1/migration/Radio Button.md +++ /dev/null @@ -1,95 +0,0 @@ ---- -id: radio-button -title: Radio Button ---- - -import Tabs from '@theme/Tabs'; -import TabItem from '@theme/TabItem'; - -Migrating [`Radio`](radio.md) to v3 will provide a lot more **design**, **size**, **color** and **customisation** option. - -## Overview - -Migrating Radio components can broadly described in these points: - -- In v3 `Radio` can only used along with `Radio.Group`. -- **selected** is deprecated, instead v3 provides with **value** prop in `Radio.Group`. -- Colors of the Radio: - **color** and **selectedColor** props are deprecated, instead now in v3 **color** is controlled by `colorScheme` prop, and it accepts all the color available in the theme. -- **onPress** prop is deprecated, instead v3 provides **onChange** which provides a callback when state of the checkbox change. - -## Code Comparison - - - - -```tsx -import React, { Component } from 'react'; -import { ListItem, Container, Content, Header, Text, Radio } from 'native-base'; -export default class RadioButtonExample extends Component { - constructor() { - super(); - this.state = { - itemSelected: '', - }; - } - render() { - return ( - -
- - - this.setState({ itemSelected: 'one' })} - selected={this.state.itemSelected == 'one'} - /> - One - - - this.setState({ itemSelected: 'two' })} - selected={this.state.itemSelected == 'two'} - /> - Two - - - - ); - } -} -``` - - - - -```tsx -import React from 'react'; -import { Radio } from 'native-base'; -export default function () { - const [value, setValue] = React.useState('one'); - return ( - { - setValue(nextValue); - }} - > - - One - - - Two - - - ); -} -``` - - - diff --git a/versioned_docs/version-3.2.1/migration/Searchbar.md b/versioned_docs/version-3.2.1/migration/Searchbar.md deleted file mode 100644 index 3f02a608a..000000000 --- a/versioned_docs/version-3.2.1/migration/Searchbar.md +++ /dev/null @@ -1,6 +0,0 @@ ---- -id: search-bar -title: Search Bar ---- - -With NativeBase v3 we have removed **Searchbar** components because as it's very simple to create using `Input` components. To view some examples for seachbars, checkout the [searchbar recipe](buildingSearchBar.md). diff --git a/versioned_docs/version-3.2.1/migration/Segment.md b/versioned_docs/version-3.2.1/migration/Segment.md deleted file mode 100644 index 1f80beece..000000000 --- a/versioned_docs/version-3.2.1/migration/Segment.md +++ /dev/null @@ -1,7 +0,0 @@ ---- -id: segment -title: Segment ---- - -With NativeBase v3 we have removed the **Segment** component because it's more like a Tab component. You can check out the Tab recipe -[here](buildingTabView.md). diff --git a/versioned_docs/version-3.2.1/migration/Spinner.md b/versioned_docs/version-3.2.1/migration/Spinner.md deleted file mode 100644 index a4f8f160d..000000000 --- a/versioned_docs/version-3.2.1/migration/Spinner.md +++ /dev/null @@ -1,47 +0,0 @@ ---- -id: spinner -title: Spinner ---- - -import Tabs from '@theme/Tabs'; -import TabItem from '@theme/TabItem'; - -Migrating [`Spinner`](spinner.md) to v3 will provide a lot more **size**, **color** and **customisation** option. - -## Overview - -Migrating Spinner components can broadly described in these points: - -- Get 2 size options, namely **sm/small** and **lg/large** or pass a number as a **size** prop. -- In v3 the color are provided by theme, so the shade for the color should be passed along with the color name. - -## Code Comparison - - - - -```tsx - - - - -``` - - - - -```tsx - - - - - -``` - - - diff --git a/versioned_docs/version-3.2.1/migration/SwipeList.md b/versioned_docs/version-3.2.1/migration/SwipeList.md deleted file mode 100644 index 7f7b0f37b..000000000 --- a/versioned_docs/version-3.2.1/migration/SwipeList.md +++ /dev/null @@ -1,6 +0,0 @@ ---- -id: swipe-list -title: SwipeList ---- - -With NativeBase v3 we have removed **SwipeList** component. To view example for SwipeList built using [react-native-swipe-list](https://www.npmjs.com/package/react-native-swipe-list-view) in NB, checkout this [recipe](buildingSwipeList.md). diff --git a/versioned_docs/version-3.2.1/migration/Tabs.md b/versioned_docs/version-3.2.1/migration/Tabs.md deleted file mode 100644 index bcbe293cd..000000000 --- a/versioned_docs/version-3.2.1/migration/Tabs.md +++ /dev/null @@ -1,67 +0,0 @@ ---- -id: tabs -title: Tabs ---- - -import Tabs from '@theme/Tabs'; -import TabItem from '@theme/TabItem'; - -API for Tabs is in progress, in the meantine you can check this [recipe](buildingTabView.md) for building Tabs. - - diff --git a/versioned_docs/version-3.2.1/migration/Thumbnail.md b/versioned_docs/version-3.2.1/migration/Thumbnail.md deleted file mode 100644 index 2f8e46907..000000000 --- a/versioned_docs/version-3.2.1/migration/Thumbnail.md +++ /dev/null @@ -1,73 +0,0 @@ ---- -id: thumbnail -title: Thumbnail ---- - -import Tabs from '@theme/Tabs'; -import TabItem from '@theme/TabItem'; - -With v3 we have replaced the **Thumbnail** with [`Image`](image.md). And we also provide [`Avatar`](avatar.md) as well. - -## Code Comparison - - - - -```tsx -import React, { Component } from 'react'; -import { Container, Header, Content, Thumbnail, Text } from 'native-base'; -export default class ThumbnailExample extends Component { - render() { - const uri = - 'https://facebook.github.io/react-native/docs/assets/favicon.png'; - return ( - -
- - Square Thumbnail - - - - Circular Thumbnail - - - - - - ); - } -} -``` - - - - -```tsx -import React from 'react'; -import { Avatar, VStack, Text, Image } from 'native-base'; - -export default function () { - const uri = 'https://facebook.github.io/react-native/docs/assets/favicon.png'; - - return ( - - Square Thumbnail - react-native - react-native - react-native - Circular Thumbnail - - - - - ); -} -``` - - - diff --git a/versioned_docs/version-3.2.1/migration/Toast.md b/versioned_docs/version-3.2.1/migration/Toast.md deleted file mode 100644 index 3c1aec5ac..000000000 --- a/versioned_docs/version-3.2.1/migration/Toast.md +++ /dev/null @@ -1,84 +0,0 @@ ---- -id: toast -title: Toast ---- - -import Tabs from '@theme/Tabs'; -import TabItem from '@theme/TabItem'; - -In v3, [`Toast`](toast.md) can be created using **useToast** hook - -## Overview - -Migrating Toast components can broadly described in these points: - -- **buttonText** is no longer supported. -- **type** (prop) → **status** prop. -- **position** (prop) → **placement** prop. - -## Code Comparison - - - - -```tsx -import React, { Component } from 'react'; -import { Container, Header, Content, Toast, Button, Text } from 'native-base'; - -export default class ToastExample extends Component { - render() { - return ( - -
- - - - - ); - } -} -``` - - - - -```tsx -import React from 'react'; -import { Button, useToast } from 'native-base'; - -export default function () { - const toast = useToast(); - - return ( - - ); -} -``` - - - diff --git a/versioned_docs/version-3.2.1/migration/Typography.md b/versioned_docs/version-3.2.1/migration/Typography.md deleted file mode 100644 index 3f5f0e662..000000000 --- a/versioned_docs/version-3.2.1/migration/Typography.md +++ /dev/null @@ -1,39 +0,0 @@ ---- -id: typography -title: Typography ---- - -import Tabs from '@theme/Tabs'; -import TabItem from '@theme/TabItem'; - -**H1**, **H2** and **H3** all have been replaced with [`Heading`](heading.md) component. - -## Code Comparison - - - - -```tsx -

Header One

-

Header Two

-

Header Three

-Default -``` - - - - -```tsx -Header One -Header Two -Header Three -Default -``` - - - diff --git a/versioned_docs/version-3.2.1/migration/v3.md b/versioned_docs/version-3.2.1/migration/v3.md deleted file mode 100644 index ced3b4587..000000000 --- a/versioned_docs/version-3.2.1/migration/v3.md +++ /dev/null @@ -1,19 +0,0 @@ ---- -id: migration-guide-three -title: Upgrading to v3 ---- - -`v3` comes with a lot of changes in philosophy as well as the API. We have re-imagined how we should code for React Native as well as web. Keeping this in mind, you might face a lot of changes from v2 to v3. This might be a bit of tedious work but we promise you, it will be worth it! - -If you are looking to upgrade NativeBase from `v2` to `v3` in your application, we recommend looking into the following sections first: - -- [Introduction](../) -- [Core Concepts](../utility-first.mdx) -- [Features](../utilityProps.md) -- [Themes](../default-theme.md) - -This will allow you to leverage `v3` to the fullest. We have further divided the migration guide into different components, so that it's easier to search for a specific one. - -We hope that `v3` is able to fulfill all the expectations set by it's predecessor and makes the overall UX and DX of your application better. - -Happy Coding! diff --git a/versioned_docs/version-3.2.1/migration/v3xtov32.md b/versioned_docs/version-3.2.1/migration/v3xtov32.md deleted file mode 100644 index d15108d16..000000000 --- a/versioned_docs/version-3.2.1/migration/v3xtov32.md +++ /dev/null @@ -1,71 +0,0 @@ ---- -id: migration-guide-three-point-two -title: Upgrading to 3.2.0 from 3.x ---- - -As we continue to improve NativeBase v3 we got a lot of feature requests and we also revamped our theme to make it more consistent, easy to understand, optimized and promote good practices while writing code. - -To do that we had to make some changes to our theme in `v3.2.0`. These are breaking changes if you are using some of the tokens in your project. To make it easy for you to upgrade, we are providing three options: - -## Extend previous version's theme for backward compatibility - -You need to add `v3CompatibleTheme` to your `NativeBaseProvider` which preserves all the old token that were changed or removed in v3.2.0. - -```jsx -import { NativeBaseProvider, extendTheme, v3CompatibleTheme } from "native-base"; - -// ... -const yourCustomTheme = { - // ... -} - - - -``` - -## Handling breaking changes - -Below is a rough account of the breaking API changes as well as the minimal change to migrate - - -### Alert: - -* Removed `Alert.Title`. Use `Text` component instead. -* Removed `Alert.Description`. Use `Text` component instead. - -### Divider: - -* Removed `size`. Use `thickness` prop instead. - - -## Note: - -We have introduced [strict mode](../strict-mode.md) in `v3.2.0` which is `off` by default. If you don't want to have strict mode, step 1 is enough. If you want to comply with the strict mode, you also need to do these: - - 1. All utility props which take theme tokens as values, now take only string values as a valid type - - This means that if you pass a number value which is supposed to be a theme token, into a utility prop, then it will be treated as invalid and based on you strict mode config will show you an error or a warning. - - ```js - // Incorrect Way to pass theme tokens to utility props - ❌ - - ``` - - ```js - // Correct Way to pass theme tokens to utility props - ✅ - ``` - - 2. Remove all non token values given to utility props which accept theme tokens. For example, `p="11"` is not supported with the [default theme](../default-theme.md). Pick up another value from default theme tokens or [define a new one yourself](../customizingTheme.md). - 3. If you are using [Icon](../icon.md) with `as` prop, verify this - ```jsx - /* correct */ - - /* incorrect */ - } /> - /* incorrect */ - } name="md-checkmark-circle" /> - \ No newline at end of file diff --git a/versioned_docs/version-3.2.1/modal.md b/versioned_docs/version-3.2.1/modal.md deleted file mode 100644 index cd8f50169..000000000 --- a/versioned_docs/version-3.2.1/modal.md +++ /dev/null @@ -1,104 +0,0 @@ ---- -id: modal -title: Modal ---- - -import { ComponentTheme } from '../../src/components'; - -A Modal is a window overlaid on either the primary window or another dialog window. Content behind a modal dialog is **inert**, meaning that users cannot interact with it. - -## Import - -NativeBase exports Modal Compound component: - -- `Modal`: The wrapper that provides context for its children. -- `Modal.Content`: The container for the modal dialog's content. -- `Modal.Header`: The header that labels the modal dialog. -- `Modal.Footer`: The footer that houses the modal actions. -- `Modal.Body`: The wrapper that houses the modal's main content. -- `Modal.CloseButton`: The button that closes the modal. - -```jsx -import { Modal } from 'native-base'; -``` - -## Examples - -### Basic - -```ComponentSnackPlayer path=composites,Modal,Basic.tsx - -``` - -### Multiple Modals - -```ComponentSnackPlayer path=composites,Modal,MultipleModal.tsx - -``` - -### Modal Sizes - -You can pass `size` prop to NativeBase Modal , it can take `sm`, `md`, `lg`, `full` that maps to **60%**, **75%**, **90%**, **100%**, or a string or a numerical width of the Modal. - -```ComponentSnackPlayer path=composites,Modal,Size.tsx - -``` - -### intialFocusRef and finalFocusRef Example - -```ComponentSnackPlayer path=composites,Modal,ModalRefEg.tsx - -``` - -### Modal with avoidKeyboard - -```ComponentSnackPlayer path=composites,Modal,ModalWithAvoidKeyboard.tsx - -``` - -### Modal Placement - -```ComponentSnackPlayer path=composites,Modal,ModalPlacement.tsx - -``` - -### Custom Backdrop Modal - -```ComponentSnackPlayer path=composites,Modal,CustomBackdrop.tsx - -``` - -
- -:::tip Development Tip -If you want a specifically aligned Modal, pass `justifyContent` and `alignItems` to Modal. -::: - -## Accessibility - -Uses React Native ARIA [@react-native-aria/focus](https://react-native-aria.geekyants.com/docs/FocusScope) which follows the [Dialog Modal WAI-ARIA design pattern](https://www.w3.org/TR/wai-aria-practices-1.2/#dialog_modal). - -### Keyboard Interactions - -| Key | Description | -| --------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| `Tab` | Moves focus to the next tabbable element inside the dialog. If focus is on the last tabbable element inside the dialog, moves focus to the first tabbable element inside the dialog. | -| `Shift` + `Tab` | Moves focus to the previous tabbable element inside the dialog. If focus is on the first tabbable element inside the dialog, moves focus to the last tabbable element inside the dialog. | -| `Escape` | Closes the dialog | - -## Props - -### Modal - -```ComponentPropTable path=composites,Modal,Modal.tsx - -``` - -### Children components - -- `Modal.Header`, `Modal.Footer` and `Modal.Body` composes the [`Box`](box.md) component. -- `Modal.CloseButton` composes the [`Button`](button.md). - -## Styling - - diff --git a/versioned_docs/version-3.2.1/more-props.md b/versioned_docs/version-3.2.1/more-props.md deleted file mode 100644 index 935c792be..000000000 --- a/versioned_docs/version-3.2.1/more-props.md +++ /dev/null @@ -1,13 +0,0 @@ ---- -id: more-props -title: More props ---- - -### ILinearGradientProps - -| Name | Type | Description | Default | -| -------- | ---------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------ | ------- | -| colors | `Array` | An array of colors that represent stops in the gradient. | - | -| start | `Array` | This means that the gradient will start from first value from the left and second value from the top. Array can contain numbers ranging from 0 to 1. | | -| end | `Array` | This means that the gradient will end at first value from the left and at second value from the bottom. Array can contain numbers ranging from 0 to 1. | | -| location | `Array ` | Each number indicates a color-stop location where each respective color should be located. Array can contain numbers ranging from 0 to 1. | | diff --git a/versioned_docs/version-3.2.1/nativebase-factory.md b/versioned_docs/version-3.2.1/nativebase-factory.md deleted file mode 100644 index 242f0bdae..000000000 --- a/versioned_docs/version-3.2.1/nativebase-factory.md +++ /dev/null @@ -1,155 +0,0 @@ ---- -id: nativebase-factory -title: NativeBase Factory ---- - -NativeBase factory is a function that converts non-nativebase components to nativebase enabled components so you can pass style props to them. - -```jsx -import { Factory } from 'native-base'; -``` - -## Usage - -```SnackPlayer name=NativeBase%20Factory%20Usage -import React from 'react'; -import { Factory, NativeBaseProvider, Center } from 'native-base'; -import { View } from 'react-native'; - -function FactoryViewExample () { - const FactoryView = Factory(View); - return ( - - ); -} - -// Example template which wraps component with NativeBaseProvider -export default function () { - return ( - -
- -
- - ); -} -``` - -## Defining component theme - -```SnackPlayer name=NativeBase%20Factory%20Component%20Theme -import React from 'react'; -import { Factory, NativeBaseProvider, Center } from 'native-base'; -import { View } from 'react-native'; - -function FactoryViewExample () { - const FactoryView = Factory(View, { - baseStyle: { - bg: 'cyan.300', - borderRadius: 'md', - }, - }); - return ; -} - -// Example template which wraps component with NativeBaseProvider -export default function () { - return ( - -
- -
- - ); -} -``` - -## Using mode in component theme - -```SnackPlayer name=NativeBase%20Factory%20Component%20Theme -import React from 'react'; -import { Factory, themeTools, NativeBaseProvider, Center } from 'native-base'; -import { View } from 'react-native'; - -function FactoryViewModeExample () { - const FactoryView = Factory(View, { - baseStyle: (props) => { - return { - bg: themeTools.mode('rose.500', 'cyan.300')(props), - borderRadius: 'md', - }; - }, - }); - return ; -} - -// Example template which wraps component with NativeBaseProvider -export default function () { - return ( - -
- -
- - ); -} -``` - -## Using ref - -```SnackPlayer name=NativeBase%20Factory%20Using%20Ref -import React from 'react'; -import { - Factory, - Button, - Stack, - NativeBaseProvider, - Center, -} from 'native-base'; -import { TextInput } from 'react-native'; - -function FactoryViewRefExample() { - const NBInput = Factory(TextInput); - const inputRef = React.useRef(null); - return ( - - - - - ); -} - -// Example template which wraps component with NativeBaseProvider -export default function () { - return ( - -
- -
- - ); -} - -``` - -## Params - -| Name | Type | Description | Default | -| -------------- | --------------- | ----------------------------------------------------------------------------- | ------- | -| component | React component | Original component to be passed on which nativebase props have to be applied. | - | -| componentTheme | Object | This object can include `baseStyle`, `sizes`, `variants`, `defaultProps` | - | diff --git a/versioned_docs/version-3.2.1/popOver.md b/versioned_docs/version-3.2.1/popOver.md deleted file mode 100644 index 57a4c1ed5..000000000 --- a/versioned_docs/version-3.2.1/popOver.md +++ /dev/null @@ -1,94 +0,0 @@ ---- -id: popover -title: Popover ---- - -import { ComponentTheme } from '../../src/components'; - -`Popover` is a non-modal dialog that floats around a trigger. It's used to display contextual information to the user, and should be paired with a pressable trigger element. - -## Import - -- `Popover`: The wrapper that provides props, state, and context to its children. -- `Popover.Arrow`: The popover arrow. -- `Popover.Body`: The body of the popover. -- `Popover.Content`: The popover itself. -- `Popover.CloseButton`: A button to close the popover. -- `Popover.Header`: The header of the popover. -- `Popover.Trigger`: Used to wrap the reference (or trigger) element. - -```jsx -import { Popover } from 'native-base'; -``` - -## Examples - -### Basic - -```ComponentSnackPlayer path=composites,Popover,Basic.tsx - -``` - -### initialFocusRef - -```ComponentSnackPlayer path=composites,Popover,RefEg.tsx - -``` - -### Positions - -```ComponentSnackPlayer path=composites,Popover,PopoverPositions.tsx - -``` - -:::tip Development Tip -You can pass custom backgroundColor using `bg` or `backgroundColor`, `borderColor` and `borderWidth` to Popover.Content. -::: - -## Props - -```ComponentPropTable path=composites,Popover,Popover.tsx - -``` - -### Popover.Arrow - -`Popover.Arrow` composes the [`Box`](box.md) component. - -### Popover.Content - -`Popover.Content` composes the [`Box`](box.md) component. - -### Popover.Header - -`Popover.Header` composes the [`Box`](box.md) component. - -### Popover.Footer - -`Popover.Footer` composes the [`Box`](box.md) component. - -### Popover.Body - -`Popover.Body` composes the [`Box`](box.md) component. - -### Popover.CloseButton - -`Popover.CloseButton` composes the [`Button`](button.md) component. - -## Styling - - - -## Accessibility - -Adheres to the [Dialog WAI-ARIA design pattern.](https://www.w3.org/TR/wai-aria-practices-1.2/#dialog_modal) - -### Keyboard Interactions - -| Name | Description | -| ----------- | ------------------------------------------------------ | -| Space | Opens/closes the popover. | -| Enter | Opens/closes the popover. | -| Tab | Moves focus to the next focusable element. | -| Shift + Tab | Moves focus to the previous focusable element. | -| Esc | Closes the popover and moves focus to Popover.Trigger. | diff --git a/versioned_docs/version-3.2.1/presence-transition.md b/versioned_docs/version-3.2.1/presence-transition.md deleted file mode 100644 index 2e725036a..000000000 --- a/versioned_docs/version-3.2.1/presence-transition.md +++ /dev/null @@ -1,63 +0,0 @@ ---- -id: presence-transition -title: PresenceTransition ---- - -PresenceTransition provides a declarative API to add entry and exit transitions. - -### Fade - -```ComponentSnackPlayer path=composites,Transitions,Fade.tsx - -``` - -### ScaleFade - -```ComponentSnackPlayer path=composites,Transitions,ScaleFade.tsx - -``` - -## Props - -```ComponentPropTable path=composites,Transitions,PresenceTransition.tsx showStylingProps=true - -``` - -### ISupportedTransitions - -```js -interface ISupportedTransitions { - opacity?: number; - translateY?: number; - translateX?: number; - scale?: number; - scaleX?: number; - scaleY?: number; - rotate?: string; -} -``` - -### ITransitionStyleProps - -```js -interface ITransitionStyleProps extends ISupportedTransitions { - transition?: { - type?: 'timing' | 'spring', - easing?: (value: number) => number, - overshootClamping?: boolean, - restDisplacementThreshold?: number, - restSpeedThreshold?: number, - velocity?: number | { x: number, y: number }, - bounciness?: number, - speed?: number, - tension?: number, - friction?: number, - stiffness?: number, - mass?: number, - damping?: number, - delay?: number, - duration?: number, - useNativeDriver?: boolean, - }; -} -``` diff --git a/versioned_docs/version-3.2.1/pressable.md b/versioned_docs/version-3.2.1/pressable.md deleted file mode 100644 index 4f37c810d..000000000 --- a/versioned_docs/version-3.2.1/pressable.md +++ /dev/null @@ -1,32 +0,0 @@ ---- -id: pressable -title: Pressable ---- - -Pressable is a lower level primitive if you need more flexibility than a button and access to hover, pressed and focus events. - -## Examples - -### Basic - -Pressable accepts most of the utility style system props. - -```ComponentSnackPlayer path=primitives,Pressable,Basic.tsx - -``` - -### Accessing events (hover, focus and pressed) - -Pressable accepts a render prop children, which receives isHovered, isFocused and isPressed props. - -```ComponentSnackPlayer path=primitives,Pressable,Events.tsx - -``` - -## Props - -### Pressable - -```ComponentPropTable path=primitives,Pressable,Pressable.tsx showStylingProps=true - -``` diff --git a/versioned_docs/version-3.2.1/progress.md b/versioned_docs/version-3.2.1/progress.md deleted file mode 100644 index 9fe5ee80c..000000000 --- a/versioned_docs/version-3.2.1/progress.md +++ /dev/null @@ -1,62 +0,0 @@ ---- -id: progress -title: Progress ---- - -import { ComponentTheme } from '../../src/components'; - -`Progress` is used to display the progress status for a task that takes a long time or consists of several steps. - -## Import - -```jsx -import { Progress } from 'native-base'; -``` - -## Examples - -### Basic - -```ComponentSnackPlayer path=composites,Progress,Basic.tsx - -``` - -### Progress colorScheme - -```ComponentSnackPlayer path=composites,Progress,ColorScheme.tsx - -``` - -### Sizes - -```ComponentSnackPlayer path=composites,Progress,Sizes.tsx - -``` - -### Flat Progress - -```ComponentSnackPlayer path=composites,Progress,Flat.tsx - -``` - -### Custom Track Color - -```ComponentSnackPlayer path=composites,Progress,CustomBgColor.tsx - -``` - -## Props - -```ComponentPropTable path=composites,Progress,index.tsx - -``` - -## Styling - - - -## Accessibility - -- Adheres to the `progressbar` [role requirements.](https://www.w3.org/TR/wai-aria-1.2/#progressbar) -- On web, `aria-valuenow`, `aria-valuemin` and `aria-valuemax` to ensure the progress percent is visible to screen readers. -- On mobile, [accessibilityValue](https://reactnative.dev/docs/accessibility#accessibilityvalue) is used to ensure it's announced by Talkback and VoiceOver. diff --git a/versioned_docs/version-3.2.1/pseudoProps.md b/versioned_docs/version-3.2.1/pseudoProps.md deleted file mode 100644 index a28fb89cc..000000000 --- a/versioned_docs/version-3.2.1/pseudoProps.md +++ /dev/null @@ -1,86 +0,0 @@ ---- -id: pseudo-props-101 -title: Pseudo Props 101 ---- - -Before getting into details of all the common Pseudo Props NativeBase has to offer let's check some key points that these pseudo props follow. - -## Nesting pseudo props: - -In versions before 3.2.0 there was a set order in which pseudo props can be nested, but it had a some learning curve so we have simplified it. Pseudo props can now be nested in any combination with one small thing to keep in mind. - -Example: So assume you want to change the text color of a button on its hover state. - -### Do's - -```jsx - -``` - -### Dont's - -```jsx - -``` - -The above thing translates to a Text(not Button) when hovered changes its color to `secondary.400` . - -## Precedence Order for Pseudo Props: - -Now all the pseudo props follow a specific order that defines which pseudo prop can override the other pseudo prop. You can find the precedence values associated with each pseudo prop. Higher number means higher precedence. - -```jsx -_disabled(100); - -_pressed(70); -_hover(60); -_focus(50); -_focusVisible(55); - -_active(30); -_checked(30); -_readOnly(40); -_invalid(40); - -_web(10); -_android(10); -_ios(10); - -_light(10); -_dark(10); -``` - -```SnackPlayer name=Pseudo%20Props%20Precedence -import React from 'react'; -import { Button, NativeBaseProvider, Center } from 'native-base'; - -function Component() { - return ( - // Here you can see _hover will be overrided by _pressed - - ); -} -export default function () { - return ( - -
- -
- - ); -} -``` diff --git a/versioned_docs/version-3.2.1/radio.md b/versioned_docs/version-3.2.1/radio.md deleted file mode 100644 index 63485030b..000000000 --- a/versioned_docs/version-3.2.1/radio.md +++ /dev/null @@ -1,97 +0,0 @@ ---- -id: radio -title: Radio ---- - -import { ComponentTheme } from '../../src/components'; - -`Radio` is used when only one choice may be selected in a series of options. - -## Examples - -### Controlled - -```ComponentSnackPlayer path=primitives,Radio,controlledRadio.tsx - -``` - -### Uncontrolled - -```ComponentSnackPlayer path=primitives,Radio,uncontrolledRadio.tsx - -``` - -### Disabled - -```ComponentSnackPlayer path=primitives,Radio,disabled.tsx - -``` - -### Invalid - -```ComponentSnackPlayer path=primitives,Radio,invalid.tsx - -``` - -### Size - -```ComponentSnackPlayer path=primitives,Radio,size.tsx - -``` - -### Custom Color - -```ComponentSnackPlayer path=primitives,Radio,customColor.tsx - -``` - -### Custom Icon - -```ComponentSnackPlayer path=primitives,Radio,customIcon.tsx - -``` - -### Form Controlled - -```ComponentSnackPlayer path=primitives,Radio,formControlled.tsx - -``` - -### Basic (With Ref) - -```ComponentSnackPlayer path=primitives,Radio,withRef.tsx - -``` - -## Props - -### Radio - -```ComponentPropTable path=primitives,Radio,Radio.tsx - -``` - -### Radio Group - -```ComponentPropTable path=primitives,Radio,RadioGroup.tsx - -``` - -## Accessibility - -Uses React Native ARIA [@react-native-aria/radio](https://react-native-aria.geekyants.com/docs/useRadioGroup) which follows the [Radio Group WAI-ARIA design pattern](https://www.w3.org/TR/wai-aria-practices-1.2/#radiobutton). - -### Keyboard Interactions - -| Key | Description | -| ------------ | ---------------------------------------------------------------------------------- | -| `Tab` | Moves focus to either the checked radio item or the first radio item in the group. | -| `Space` | When focus is on an unchecked radio item, checks it. | -| `ArrowDown` | Moves focus to the next radio item in the group. | -| `ArrowRight` | Moves focus to the next radio item in the group. | -| `ArrowUp` | Moves focus to the previous radio item in the group. | -| `ArrowLeft` | Moves focus to the previous radio item in the group. | - -## Styling - - diff --git a/versioned_docs/version-3.2.1/responsive.md b/versioned_docs/version-3.2.1/responsive.md deleted file mode 100644 index aa66b499a..000000000 --- a/versioned_docs/version-3.2.1/responsive.md +++ /dev/null @@ -1,173 +0,0 @@ ---- -id: responsive-style -title: Responsive ---- - -NativeBase v3 supports responsive styles out of the box. Instead of manually adding responsiveness to your apps, NativeBase v3 allows you provide object and array values to add responsive styles. - -Responsive syntax relies on the breakpoints defined in the theme object. - -```jsx -const breakpoints = { - base: 0, - sm: 480, - md: 768, - lg: 992, - xl: 1280, -}; -``` - -To make styles responsive, you can use either the array or object syntax. - -## The Array syntax - -All style props that arrays as values for responsive styles. - -For Example to make a `Box` width or w responsive using the array syntax, here's what you need to do: - -```SnackPlayer name=Responsive%20Usage -import React from 'react'; -import { NativeBaseProvider, Center } from 'native-base'; -function BreakpointExample () { - return ( -
- This is a box -
- ); -}; - -// Example template which wraps component with NativeBaseProvider -export default function () { - return ( - -
- -
- - ); -} -``` - -## The Object syntax - -You can also define responsive values with breakpoint aliases in an object. Any undefined alias key will define the base, non-responsive value. - -For Example to make a `Text` fontSize responsive using the object syntax, here's what you need to do: - -```SnackPlayer name=Responsive%20ObjectSyntax -import React from 'react'; -import { Text, NativeBaseProvider, Center } from 'native-base'; -function BreakpointExample () { - return ( - - This is responsive text - - ); -}; - -// Example template which wraps component with NativeBaseProvider -export default function () { - return ( - -
- -
- - ); -} -``` - -## Demo - -Here's a simple example of a component that uses a stacked layout on small screens, and a side-by-side layout on larger screens. - -```SnackPlayer name=Responsive%20Demo -import React from 'react'; -import { - useToken, - NativeBaseProvider, - Center, - Text, - Box, - HStack, - Image, - Stack, - Heading, -} from 'native-base'; - -function Example() { - return ( - - - image -
- PHOTOS -
- - - - - The Garden City - - - The Silicon Valley of India. - - - - Bengaluru (also called Bangalore) is the center of India's high-tech - industry. The city is also known for its parks and nightlife. - - - - - 6 mins ago - - - - - - ); -} - -// Example template which wraps component with NativeBaseProvider -export default function () { - return ( - -
- -
- - ); -} - - -``` diff --git a/versioned_docs/version-3.2.1/safe-area-view-props.md b/versioned_docs/version-3.2.1/safe-area-view-props.md deleted file mode 100644 index a1b0deda8..000000000 --- a/versioned_docs/version-3.2.1/safe-area-view-props.md +++ /dev/null @@ -1,99 +0,0 @@ ---- -id: safe-area-view-props -title: SafeAreaView Props ---- - -To make your components respect the [SafeAreaView](https://reactnative.dev/docs/safeareaview) of the device, we have provided some props that you can use with Box component. They apply a safe padding to your component in the parts decided by the passed props. These props accept either a boolean or a number. If boolean is passed then component takes flexible inset and adjusts its children according to the the device. If a number is passed then it provides a fixed inset in the chosen direction. - -- `safeArea`: Apply safe padding to all edges. -- `safeAreaX`: Apply safe padding to x direction. -- `safeAreaY`: Apply safe padding to y direction. -- `safeAreaTop`: Apply safe padding to top. -- `safeAreaBottom`: Apply safe padding to bottom. -- `safeAreaLeft`: Apply safe padding to left. -- `safeAreaRight`: Apply safe padding to right. - -Internally, NativeBase uses [useSafeAreaInsets](https://docs.expo.io/versions/latest/sdk/safe-area-context/#hooks) hook of [react-native-safe-area-context](https://github.com/th3rdwave/react-native-safe-area-context). - -:::info -SafeAreaView props can only be applied on [Box](box.md) as of now. To make you App SafeArea safe, just wrap your app with a Box and pass safeArea props to it. -::: - -## Examples - -### Flexible SafeArea - -```SnackPlayer name=SafeAreaView%20Boolean -import React from 'react'; -import { NativeBaseProvider, Box, Text } from 'native-base'; -function MyComponent() { - return ( - // This would look different on devices with different insets - - NativeBase - - ); -} - -// Example template which wraps component with NativeBaseProvider -export default function () { - return ( - - - - ); -} -``` - -### Fixed SafeArea - -```SnackPlayer name=SafeAreaView%20Boolean -import React from 'react'; -import { NativeBaseProvider, Box, Text } from 'native-base'; -function MyComponent() { - return ( - // This would look same on all devices - - NativeBase - - ); -} - -// Example template which wraps component with NativeBaseProvider -export default function () { - return ( - - - - ); -} - -``` - -### Using Hook - -If you want to add the SafeAreaView props to other components, you can use the hook. Since, `SafeAreaView` props add relevant padding to the components, you will need to pass the padding manually that you are applying to the component for it to return the SafeArea adjusted padding. - -```SnackPlayer name=SafeAreaView%20Boolean -import React from 'react'; -import { NativeBaseProvider, Box, Text, useSafeArea } from 'native-base'; -function MyComponent() { - const safeAreaProps = useSafeArea({ safeAreaTop: true, pt: 2 }); - return ( - // This would look same on all devices - - NativeBase - - ); -} - -// Example template which wraps component with NativeBaseProvider -export default function () { - return ( - - - - ); -} - -``` diff --git a/versioned_docs/version-3.2.1/scrollview.md b/versioned_docs/version-3.2.1/scrollview.md deleted file mode 100644 index 1064515aa..000000000 --- a/versioned_docs/version-3.2.1/scrollview.md +++ /dev/null @@ -1,18 +0,0 @@ ---- -id: scrollview -title: Scrollview ---- - -Provides a scrolling container that can host multiple components and views. - -## Example - -```ComponentSnackPlayer path=basic,ScrollView,Basic.tsx - -``` - -## Props - -```ComponentPropTable path=basic,ScrollView,ScrollView.tsx showStylingProps=true - -``` diff --git a/versioned_docs/version-3.2.1/sectionList.md b/versioned_docs/version-3.2.1/sectionList.md deleted file mode 100644 index 329206a1d..000000000 --- a/versioned_docs/version-3.2.1/sectionList.md +++ /dev/null @@ -1,18 +0,0 @@ ---- -id: section-list -title: SectionList ---- - -A performant interface for rendering sectioned lists. - -## Example - -```ComponentSnackPlayer path=basic,SectionList,Basic.tsx - -``` - -## Props - -```ComponentPropTable path=basic,SectionList,SectionList.tsx showStylingProps=true - -``` diff --git a/versioned_docs/version-3.2.1/select.md b/versioned_docs/version-3.2.1/select.md deleted file mode 100644 index cfecd7ead..000000000 --- a/versioned_docs/version-3.2.1/select.md +++ /dev/null @@ -1,87 +0,0 @@ ---- -id: select -title: Select ---- - -import { ComponentTheme } from '../../src/components'; - -import { AndroidBadge } from "/src/components/index"; - -Select creates a dropdown list of items with the selected item in closed view. - -## Import - -```jsx -import { Select } from 'native-base'; -``` - -## Examples - -### Basic - -```ComponentSnackPlayer path=primitives,Select,Basic.tsx - -``` - -### FormControlled - -```ComponentSnackPlayer path=primitives,Select,FormControlled.tsx - -``` - -### Select - -## Props - -```ComponentPropTable path=primitives,Select,Select.tsx - -``` - -### Select.Item - -## Props - -```ComponentPropTable path=primitives,Select,SelectItem.tsx - -``` - - - - - -## Styling - - - -## Accessibility - -- use `native` variant. Accessibility improvements on styled variant is in-progress. diff --git a/versioned_docs/version-3.2.1/setup-provider.md b/versioned_docs/version-3.2.1/setup-provider.md deleted file mode 100644 index 91ab8c8b7..000000000 --- a/versioned_docs/version-3.2.1/setup-provider.md +++ /dev/null @@ -1,129 +0,0 @@ ---- -id: setup-provider -title: Setup NativeBase Provider ---- - -NativeBaseProvider is a component that makes the theme available throughout your app. It uses React's Context API. Add NativeBaseProvider to the root of your app and update App.js as follows: - -**App.js** - -```jsx -import React from 'react'; -// 1. import `NativeBaseProvider` component -import { NativeBaseProvider, Text, Box } from 'native-base'; - -export default function App() { - // 2. Use at the root of your app - return ( - - - Open up App.js to start working on your app! - - - ); -} -``` - -## **Add custom theme (Optional)** - -If you need to customize the default theme to match your design requirements, you can extend the `theme` from `native-base`. - -NativeBase 3.0 provides an `extendTheme` function that deep merges the default theme with your customizations. - -```jsx -// 1. Import the extendTheme function -import { extendTheme, NativeBaseProvider } from 'native-base'; -// 2. Extend the theme to include custom colors, fonts, etc -const newColorTheme = { - brand: { - 900: '#8287af', - 800: '#7c83db', - 700: '#b3bef6', - }, -}; -const theme = extendTheme({ colors: newColorTheme }); -// 3. Pass the `theme` prop to the `NativeBaseProvider` -function App() { - return ( - - - - ); -} -``` - -## Add colorModeManager (Optional) - -If you want to do something with the color modes in your app, you can use colorModeManager Prop of NativeBaseProvider to achieve it. - -In the below example we will show how to store the active ColorMode in a async storage, so it can be consistent all around our app. - -```tsx -import React from 'react'; -import { NativeBaseProvider, ColorMode } from 'native-base'; -import type { StorageManager } from 'native-base'; -import AsyncStorage from '@react-native-async-storage/async-storage'; - -export default ({ children, theme }: any) => { - const colorModeManager: StorageManager = { - get: async () => { - try { - let val = await AsyncStorage.getItem('@my-app-color-mode'); - return val === 'dark' ? 'dark' : 'light'; - } catch (e) { - console.log(e); - return 'light'; - } - }, - set: async (value: ColorMode) => { - try { - await AsyncStorage.setItem('@my-app-color-mode', value); - } catch (e) { - console.log(e); - } - }, - }; - return ( - - {/* Your App Goes Here */} - - ); -}; -``` - -## Add external dependencies (Optional) - -If you want to use [Gradient feature in Box](box#with-linear-gradient), you need to pass linear gradient dependency as a config object in NativeBaseProvider. This dependency can be either from [expo-linear-gradient](https://docs.expo.io/versions/latest/sdk/linear-gradient/) or [react-native-linear-gradient](https://www.npmjs.com/package/react-native-linear-gradient) - -```jsx -import React from 'react'; -import { NativeBaseProvider } from 'native-base'; - -const config = { - dependencies: { - // For Expo projects (Bare or managed workflow) - 'linear-gradient': require('expo-linear-gradient').LinearGradient, - // For non expo projects - // 'linear-gradient': require('react-native-linear-gradient').default, - }, -}; - -export default () => { - return ( - -
- -
- - ); -}; -``` - -## NativeBaseProvider Props - -| Name | Type | Description | Default | -| -------------------- | ----------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------ | ------------------------ | -| initialWindowMetrics | Object | Mock data for frame and insets. [Refer this](https://github.com/th3rdwave/react-native-safe-area-context#testing) for further information. | - | -| colorModeManager | { get : Function , set : Function } | Manage Color mode in your app | - | -| theme | Object | use custom theme in your app | NativeBase Default Theme | -| config | {dependencies: {}} | To include external dependencies. For example - [Linear gradient](box#with-linear-gradient) | - | diff --git a/versioned_docs/version-3.2.1/slide.md b/versioned_docs/version-3.2.1/slide.md deleted file mode 100644 index fb8279ee1..000000000 --- a/versioned_docs/version-3.2.1/slide.md +++ /dev/null @@ -1,38 +0,0 @@ ---- -id: slide -title: Slide ---- - -Slide component provides a declarative API to add sliding transitions. - -## Import - -## Examples - -### Slide - -```ComponentSnackPlayer path=composites,Transitions,Slide.tsx - -``` - -### Slide wrapped inside parent - -```ComponentSnackPlayer path=composites,Transitions,SlideWrapped.tsx - -``` - -### Slide Composition - -```ComponentSnackPlayer path=composites,Transitions,SlideComposition.tsx - -``` - -## Props - -### Slide - -| Name | Type | Description | Default | -| --------- | -------------------------------- | ------------------------------------------------------ | -------- | -| in | boolean | Show the component; triggers the enter or exit states. | - | -| duration | number | Duration of animation in mili second. | 500 | -| placement | `top` ,`bottom`, `left`, `right` | The direction to slide drawer from. | `bottom` | diff --git a/versioned_docs/version-3.2.1/slider.md b/versioned_docs/version-3.2.1/slider.md deleted file mode 100644 index b8d94b9e9..000000000 --- a/versioned_docs/version-3.2.1/slider.md +++ /dev/null @@ -1,86 +0,0 @@ ---- -id: slider -title: Slider ---- - -import { ComponentTheme } from '../../src/components'; - -The `Slider` is used to allow users to make selections from a range of values. - -## Import - -NativeBase exports 4 slider-related components: - -- `Slider`: The wrapper that provides context and functionality for all children. -- `Slider.Track`: The empty part of the slider that shows the track. -- `Slider.FilledTrack`: The filled part of the slider. -- `Slider.Thumb`: The handle that's used to change the slider value. - -```jsx -import { Slider } from 'native-base'; -``` - -## Examples - -```ComponentSnackPlayer path=primitives,Slider,usage.tsx - -``` - -### Color - -```ComponentSnackPlayer path=primitives,Slider,color.tsx - -``` - -### Value - -```ComponentSnackPlayer path=primitives,Slider,Value.tsx - -``` - -### Size - -```ComponentSnackPlayer path=primitives,Slider,Size.tsx - -``` - -### Customised - -```ComponentSnackPlayer path=primitives,Slider,Customized.tsx - -``` - -### Form Controlled - -```ComponentSnackPlayer path=primitives,Slider,FormControlled.tsx - -``` - -## Props - -### Slider - -```ComponentPropTable path=primitives,Slider,Slider.tsx - -``` - -### Children components - -- `Slider.Track`, `Slider.FilledTrack`, and `Slider.Thumb` composes the [`Box`](box.md) component. - -## Styling - - - -## Accessibility - -Adheres to the [Slider WAI-ARIA design pattern.](https://www.w3.org/TR/wai-aria-practices-1.2/#slidertwothumb) - -### Keyboard Interactions - -| Name | Description | -| ---------- | ----------------------------------------------------------------- | -| ArrowRight | Increments/decrements by the step value depending on orientation. | -| ArrowLeft | Increments/decrements by the step value depending on orientation. | -| ArrowUp | Increases the value by the step amount. | -| ArrowDown | Decreases the value by the step amount. | diff --git a/versioned_docs/version-3.2.1/spinner.md b/versioned_docs/version-3.2.1/spinner.md deleted file mode 100644 index 359275a20..000000000 --- a/versioned_docs/version-3.2.1/spinner.md +++ /dev/null @@ -1,32 +0,0 @@ ---- -id: spinner -title: Spinner ---- - -## Examples - -### Basic - -```ComponentSnackPlayer path=primitives,Spinner,usage.tsx - -``` - -### Colors - -```ComponentSnackPlayer path=primitives,Spinner,color.tsx - -``` - -### Sizes - -```ComponentSnackPlayer path=primitives,Spinner,size.tsx - -``` - -## Props - -```ComponentPropTable path=primitives,Spinner,index.tsx - -``` - -Spinner composes [`ActivityIndicator`](https://reactnative.dev/docs/activityindicator) so all `ActivityIndicator` Props can be passed to Spinner. diff --git a/versioned_docs/version-3.2.1/stack.md b/versioned_docs/version-3.2.1/stack.md deleted file mode 100644 index 12ac4ecae..000000000 --- a/versioned_docs/version-3.2.1/stack.md +++ /dev/null @@ -1,18 +0,0 @@ ---- -id: stack -title: Stack ---- - -`Stack` aligns items vertically or horizontally based on the `direction` prop. - -## Example - -```ComponentSnackPlayer path=primitives,Stack,basic.tsx - -``` - -## Props - -```ComponentPropTable path=primitives,Stack,Stack.tsx - -``` diff --git a/versioned_docs/version-3.2.1/stagger.md b/versioned_docs/version-3.2.1/stagger.md deleted file mode 100644 index ac8bce5c4..000000000 --- a/versioned_docs/version-3.2.1/stagger.md +++ /dev/null @@ -1,54 +0,0 @@ ---- -id: stagger -title: Stagger ---- - -Stagger component provides a declarative API to add Staggered Transitions. - -## Example - -```ComponentSnackPlayer path=composites,Transitions,Stagger.tsx - -``` - -## Props - -```ComponentPropTable path=composites,Transitions,Stagger.tsx showStylingProps=true - -``` - -## IStaggerStyleProps - -```js -interface IStaggerStyleProps extends ISupportedTransition { - transition?: { - stagger?: { - /** - * Delay to add to each child - */ - offset: number, - /** - * When true, delay is added from the last child - */ - reverse?: boolean, - }, - - type?: 'timing' | 'spring', - easing?: (value: number) => number, - overshootClamping?: boolean, - restDisplacementThreshold?: number, - restSpeedThreshold?: number, - velocity?: number | { x: number, y: number }, - bounciness?: number, - speed?: number, - tension?: number, - friction?: number, - stiffness?: number, - mass?: number, - damping?: number, - delay?: number, - duration?: number, - useNativeDriver?: boolean, - }; -} -``` diff --git a/versioned_docs/version-3.2.1/statusBar.md b/versioned_docs/version-3.2.1/statusBar.md deleted file mode 100644 index c8769bda1..000000000 --- a/versioned_docs/version-3.2.1/statusBar.md +++ /dev/null @@ -1,18 +0,0 @@ ---- -id: status-bar -title: StatusBar ---- - -Component to control the app status bar. - -## Example - -```ComponentSnackPlayer path=basic,StatusBar,Basic.tsx - -``` - -## Props - -```ComponentPropTable path=basic,StatusBar,StatusBar.tsx showStylingProps=true - -``` diff --git a/versioned_docs/version-3.2.1/strict-mode.md b/versioned_docs/version-3.2.1/strict-mode.md deleted file mode 100644 index 690cb14fc..000000000 --- a/versioned_docs/version-3.2.1/strict-mode.md +++ /dev/null @@ -1,39 +0,0 @@ ---- -id: strict-mode -title: Strict Mode ---- - -NativeBase comes with its very own Strict Mode that lets you control the level of strictness for your App and Dev environment. A really handy tool to maintain best practices through out your codebase. - -## What it does? - -Strict Mode is a config that you pass into NativeBase config. It takes 3 values `error`, `warn` and `off` by default it is set to `warn`. Based on your chosen option it checks for every prop in your project if you have used proper `token values` from theme and you are only passing `string values` to the props and if not then it throws an error or warning or does nothing. - -## Levels of Strictness - -- **error** - Choosing this mode will throw an error indicating the cause of the error. -- **warn** - Choosing this mode will show a warning indicating the issue. -- **off** - Choosing this mode simply means you want to go rogue and not follow the design system and best practices. - -## How to change the mode? - -To change the `strictMode` create a `config object` like below and choose you `strictMode` value from `error`,`warn` and `off` which ever suits your use-case : - -```jsx -import { INativebaseConfig, NativeBaseProvider } from 'native-base'; - -// ignore the INativebaseConfig if you are not using typescript - -const config: INativebaseConfig = { - // rest of the config keys like dependencies can go here - strictMode: 'warn', -}; -``` - -and pass this as a prop in your App `NativeBaseProvider` - -```jsx - - - -``` diff --git a/versioned_docs/version-3.2.1/switch.md b/versioned_docs/version-3.2.1/switch.md deleted file mode 100644 index 3d1f07574..000000000 --- a/versioned_docs/version-3.2.1/switch.md +++ /dev/null @@ -1,50 +0,0 @@ ---- -id: switch -title: Switch ---- - -The `Switch` component is an alternative to the Checkbox component. You can switch between enabled or disabled states. - -## Examples - -### Basic - -```ComponentSnackPlayer path=primitives,Switch,Basic.tsx - -``` - -### Sizes - -```ComponentSnackPlayer path=primitives,Switch,Sizes.tsx - -``` - -### Track & Thumb Color - -```ComponentSnackPlayer path=primitives,Switch,SwitchBgColor.tsx - -``` - -### Color Schemes - -```ComponentSnackPlayer path=primitives,Switch,ColorSchemes.tsx - -``` - -## Props - -```ComponentPropTable path=primitives,Switch,index.tsx showStylingProps=true - -``` - -## Accessibility - -- On mobile, uses native switch which is fully accessible. -- On web, it uses checkbox with a [role](https://www.w3.org/TR/wai-aria-1.2/#switch) set to `switch`. - - -### Keyboard Interactions - -| Name | Description | -| --------------------|-------------| -| Space | Toggles the component's state. | \ No newline at end of file diff --git a/versioned_docs/version-3.2.1/testing.md b/versioned_docs/version-3.2.1/testing.md deleted file mode 100644 index cfd5b0139..000000000 --- a/versioned_docs/version-3.2.1/testing.md +++ /dev/null @@ -1,25 +0,0 @@ ---- -id: testing -title: Testing ---- - -NativeBase works with react-native's jest preset or expo's jest-expo preset. However, there's one thing you'll need to do for it to work as expected. - -### Adding initialWindowMetrics in NativeBaseProvider. - -- NativeBaseProvider uses [SafeAreaContext](https://github.com/th3rdwave/react-native-safe-area-context#testing) which needs initialWindowMetrics to be passed to the Provider while testing. - -Not following the above may lead to an error related to SafeAreaProvider while running `yarn test`. - -To fix the above issue, you can simply pass initialWindowMetrics to NativeBaseProvider in your tests. - -```jsx -const inset = { - frame: { x: 0, y: 0, width: 0, height: 0 }, - insets: { top: 0, left: 0, right: 0, bottom: 0 }, -}; - - - {children} -; -``` diff --git a/versioned_docs/version-3.2.1/text.md b/versioned_docs/version-3.2.1/text.md deleted file mode 100644 index 10d3cdfe5..000000000 --- a/versioned_docs/version-3.2.1/text.md +++ /dev/null @@ -1,44 +0,0 @@ ---- -id: text -title: Text ---- - -import { ComponentTheme } from '../../src/components'; - -`Text` is used to render text and paragraphs within an interface. - -## Examples - -### ChangingFontSize - -```ComponentSnackPlayer path=primitives,Text,ChangingFontSize.tsx - -``` - -### Truncated - -```ComponentSnackPlayer path=primitives,Text,Truncated.tsx - -``` - -### Nested - -```ComponentSnackPlayer path=primitives,Text,Nested.tsx - -``` - -### Overridden - -```ComponentSnackPlayer path=primitives,Text,Overriden.tsx - -``` - -## Props - -```ComponentPropTable path=primitives,Text,index.tsx showStylingProps=true - -``` - -## Styling - - diff --git a/versioned_docs/version-3.2.1/textArea.md b/versioned_docs/version-3.2.1/textArea.md deleted file mode 100644 index 31f18b444..000000000 --- a/versioned_docs/version-3.2.1/textArea.md +++ /dev/null @@ -1,38 +0,0 @@ ---- -id: textarea -title: TextArea ---- - -import { ComponentTheme } from '../../src/components'; - -The `Textarea` component allows you to easily create multi-line text inputs. - -## Examples - -### Usage - -```ComponentSnackPlayer path=primitives,TextArea,basic.tsx - -``` - -### Invalid and Disabled TextArea - -```ComponentSnackPlayer path=primitives,TextArea,invalid.tsx - -``` - -### Value Controlled TextArea - -```ComponentSnackPlayer path=primitives,TextArea,value.tsx - -``` - -## Props - -```ComponentPropTable path=primitives,TextArea,index.tsx - -``` - -## Styling - - diff --git a/versioned_docs/version-3.2.1/theme.md b/versioned_docs/version-3.2.1/theme.md deleted file mode 100644 index db050174c..000000000 --- a/versioned_docs/version-3.2.1/theme.md +++ /dev/null @@ -1,205 +0,0 @@ ---- -id: theme -title: Using Theme ---- - -NativeBase provides multiple tools to use the central theme defined in the app. First tool is [`useTheme`](/useTheme.md), which you can use to access the values from the current theme. - -## useTheme - -```SnackPlayer name=useTheme%20Demo -import React from 'react'; -import { - NativeBaseProvider, - useTheme, - FlatList, - Center, - Box, -} from 'native-base'; - -function ColorPalete() { - const { colors } = useTheme(); - return ( - - } - /> - - ); -} - -// Example template which wraps component with NativeBaseProvider -export default function () { - return ( - -
- -
- - ); -} - -``` - -## useToken - -You can also get specific values from the theme with [`useToken`](/useToken.md) hook. - -```SnackPlayer name=useToken%20Demo -import React from 'react'; -import { useToken, NativeBaseProvider, Center, Text } from 'native-base'; - -function Tokens() { - const [contrastThreshold, lightText] = useToken('colors', [ - 'contrastThreshold', - 'lightText', - ]); - return ( -
- Contrast threshold is:{' '} - - {contrastThreshold} - -
- ); -} - -// Example template which wraps component with NativeBaseProvider -export default function () { - return ( - -
- -
- - ); -} - - -``` - -## useContrastText - -If you are defining the background yourself and pass a contrasting color to the text then you can use [`useContrastText`](use-contrast-text). - -```SnackPlayer name=useContrastText - -import React from 'react'; -import { - Button, - Stack, - useContrastText, - NativeBaseProvider, - Center, -} from 'native-base'; -function UseContrastingTextHook() { - const bgDark = 'primary.700'; - const bgLight = 'primary.200'; - const colorContrastDark = useContrastText(bgDark); - const colorContrastLight = useContrastText(bgLight); - - return ( - - - - - ); -} - -// Example template which wraps component with NativeBaseProvider -export default function () { - return ( - -
- -
- - ); -} - -``` - -## useColorMode - -If you want to define some conditionals based on current color mode or change the color mode then you can try [useColorMode](useColorMode.md). - -```SnackPlayer name=useColorMode -import React from 'react'; -import { - NativeBaseProvider, - useColorMode, - Text, - Button, - Center, -} from 'native-base'; - -function UseColorMode() { - const { colorMode, toggleColorMode } = useColorMode(); - return ( -
- - The active color mode is{' '} - - {colorMode} - - - -
- ); -} - -export default Example = () => { - return ( - - - - ); -}; - -``` - -## useColorModeValue - -If you do not want to add conditionals for color mode everywhere and keep the code clean, then you can use [useColorModeValue](useColorModeValue.md) hook. It takes two parameters, light mode value as the first and dark mode value as second. - -```SnackPlayer name=useColorModeValue -import React from 'react'; -import { - NativeBaseProvider, - useColorMode, - Text, - Button, - Center, - useColorModeValue, -} from 'native-base'; - -function UseColorMode() { - const { toggleColorMode } = useColorMode(); - return ( -
- - The active color mode is{' '} - - {useColorModeValue('Light', 'Dark')} - - - -
- ); -} - -export default Example = () => { - return ( - - - - ); -}; - -``` diff --git a/versioned_docs/version-3.2.1/toast.md b/versioned_docs/version-3.2.1/toast.md deleted file mode 100644 index af50b7379..000000000 --- a/versioned_docs/version-3.2.1/toast.md +++ /dev/null @@ -1,88 +0,0 @@ ---- -id: toast -title: Toast ---- - -import { ComponentTheme } from '../../src/components'; - -`Toast` is used to show alerts on top of an overlay. `Toast` will close itself when the close button is clicked, or after a timeout — the default is 5 seconds. The toast component is used to give feeback to users after an action has taken place. - -Toasts can be configured to appear at either the top or the bottom of an application window, and it is possible to have more than one toast onscreen at a time. - -## Import - -```jsx -import { useToast } from 'native-base'; -``` - -## Examples - -### Basic - -```ComponentSnackPlayer path=composites,Toast,Basic.tsx - -``` - -### Position - -```ComponentSnackPlayer path=composites,Toast,ToastPositions.tsx - -``` - -### Custom component - -Display a custom component instead of the default Toast UI. - -```ComponentSnackPlayer path=composites,Toast,CustomComponent.tsx - -``` - -### Closing Toasts - -Toasts can be closed imperatively, individually (via the close instance method) or all together (via the closeAll instance method). - -```ComponentSnackPlayer path=composites,Toast,CloseToast.tsx - -``` - -### Status - -You can use status to change the color of your toasts. -`Toast` uses the same variants as the [Alert](alert.md) component. - -```ComponentSnackPlayer path=composites,Toast,ToastStatus.tsx - -``` - -### Preventing Duplicate Toast - -In some cases you might need to prevent duplicate of specific toasts. To achieve you need to pass an id and use the toast.isActive method to determine when to call toast.show(...). - -```ComponentSnackPlayer path=composites,Toast,PreventDuplicate.tsx - -``` - -### Standalone Toast - -You can use standalone toast where you don't have access to `useToast` hook. e.g. in a different file, out of a React component. - -```ComponentSnackPlayer path=composites,Toast,StandaloneToast.tsx - -``` - -## Props - -Below props can be passed while calling toast.show. - -```ComponentPropTable path=composites,Toast,ToastDummy.tsx - -``` - -## Accessibility - -- On Android and Web, Toast renders under a View with accessibilityLiveRegion which announces the content rendered inside it to screen reader devices. -- On iOS, accessibilityLiveRegion is not supported yet, so we use the [accessibilityAnnouncement](https://reactnative.dev/docs/accessibilityinfo#announceforaccessibility) to announce the content. - -## Styling - - diff --git a/versioned_docs/version-3.2.1/todo-list.md b/versioned_docs/version-3.2.1/todo-list.md deleted file mode 100644 index d6b9632ff..000000000 --- a/versioned_docs/version-3.2.1/todo-list.md +++ /dev/null @@ -1,135 +0,0 @@ ---- -id: todo-example -title: Todo-List ---- - -A simple To Do App made using NativeBase 3.0. - -```SnackPlayer name=TodoList%20Examples -import React from 'react'; -import { - Input, - Button, - IconButton, - Checkbox, - Text, - VStack, - HStack, - Heading, - Icon, - Center, - Box, - NativeBaseProvider, -} from 'native-base'; -import { FontAwesome5, Feather, Entypo } from '@expo/vector-icons'; - -export default function () { - const instState = [ - { title: 'Code', isCompleted: true }, - { title: 'Meeting with team at 9', isCompleted: false }, - { title: 'Check Emails', isCompleted: false }, - { title: 'Write an article', isCompleted: false }, - ]; - const [list, setList] = React.useState(instState); - const [inputValue, setInputValue] = React.useState(''); - const addItem = (title: string) => { - setList([ - ...list, - { - title: title, - isCompleted: false, - }, - ]); - }; - const handleDelete = (index: number) => { - const temp = list.filter((_, itemI) => itemI !== index); - setList(temp); - }; - const handleStatusChange = (index: number) => { - const temp = list.map((item, itemI) => - itemI !== index - ? item - : { - ...item, - isCompleted: !item.isCompleted, - } - ); - setList(temp); - }; - return ( - -
- - Wednesday - - - setInputValue(v)} - value={inputValue} - placeholder="Add Task" - /> - - } - onPress={() => { - addItem(inputValue); - setInputValue(''); - }} - /> - - - {list.map((item, itemI) => ( - - handleStatusChange(itemI)} - value={item.title}> - - {item.title} - - - - } - onPress={() => handleDelete(itemI)} - /> - - ))} - - - -
- - ); -} - -``` diff --git a/versioned_docs/version-3.2.1/tooltip.md b/versioned_docs/version-3.2.1/tooltip.md deleted file mode 100644 index 5723d66e1..000000000 --- a/versioned_docs/version-3.2.1/tooltip.md +++ /dev/null @@ -1,65 +0,0 @@ ---- -id: tooltip -title: Tooltip ---- - -import { ComponentTheme } from '../../src/components'; - -A tooltip is a brief, informative message that appears when a user interacts with an element. Tooltips are usually initiated in one of two ways: through a mouse-hover gesture or through a keyboard-hover gesture. - -## Import - -```jsx -import { Tooltip } from 'native-base'; -``` - -## Examples - -### Basic - -```ComponentSnackPlayer path=composites,Tooltip,Basic.tsx - -``` - -### Positions - -```ComponentSnackPlayer path=composites,Tooltip,TooltipPositions.tsx - -``` - -### Customizing tooltip - -Tooltip is a wrapper around [Box](box.md). So, it also accepts all the [Box](box.md#props) props. - -```ComponentSnackPlayer path=composites,Tooltip,CustomTooltip.tsx - -``` - -
- -:::tip Development Tip -You can pass custom backgroundColor using `bg` or `backgroundColor`, `borderColor` and `borderWidth` to Tooltip. -::: - -## Props - -```ComponentPropTable path=composites,Tooltip,Tooltip.tsx - -``` - -## Styling - - - -## Accessibility - -Adheres to the [Tooltip WAI-ARIA design pattern.](https://www.w3.org/TR/wai-aria-1.1/#tooltip) - -### Keyboard Interactions - -| Name | Description | -| ----- | ------------------------------------------ | -| Space | If open, closes the tooltip without delay. | -| Enter | If open, closes the tooltip without delay. | -| Tab | Moves focus to the next focusable element. | -| Esc | If open, closes the tooltip without delay. | diff --git a/versioned_docs/version-3.2.1/typescript.md b/versioned_docs/version-3.2.1/typescript.md deleted file mode 100644 index 33601937b..000000000 --- a/versioned_docs/version-3.2.1/typescript.md +++ /dev/null @@ -1,40 +0,0 @@ ---- -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 - -Typescript intellisense with custom theme tokens diff --git a/versioned_docs/version-3.2.1/useAccessibleColors.md b/versioned_docs/version-3.2.1/useAccessibleColors.md deleted file mode 100644 index 1fa0dfd75..000000000 --- a/versioned_docs/version-3.2.1/useAccessibleColors.md +++ /dev/null @@ -1,64 +0,0 @@ ---- -id: use-accessible-colors -title: useAccessibleColors ---- - -`useAccessibleColors` is a custom hook used to get the setting for using color with better [color and contrast accessibility](https://web.dev/color-and-contrast-accessibility/) in the app. By default, accessible colors are turned off to get better color matching the theme of the app. You can use this hook if you always want to use accessible text colors. You can also pass it in the config for [`NativeBaseProvider`](setup-provider.md) with [`extendTheme`](setup-provider.md#add-custom-theme-optional). - -## Import - -```jsx -import { useAccessibleColors } from 'native-base'; -``` - -## Example - -```SnackPlayer name=useAccessibleColors - -import React from 'react'; -import { Button, useContrastText, useTheme, NativeBaseProvider, Center, useAccessibleColors } from 'native-base'; - -const ButtonTemplate = ({ shade }: any) => { - const colorContrast = useContrastText(`yellow.${shade}`); - return ( - - ); -}; - -function UseContrastingTextHook () { - let [, , toggleAccessibleColors] = useAccessibleColors(); - const { colors } = useTheme(); - return ( - <> - {Object.keys(colors.yellow).map((key, index) => { - if (index > 2 && index < 9) return ; - })} - - - ); -} - -export default function () { - return ( - -
- -
- - ); -} -``` - -## Return value - -Returns an array with values `accessibleColors`, `setAccessibleColors`, `toggleAccessibleColors`. diff --git a/versioned_docs/version-3.2.1/useBreakPointValue.md b/versioned_docs/version-3.2.1/useBreakPointValue.md deleted file mode 100644 index edb6501e9..000000000 --- a/versioned_docs/version-3.2.1/useBreakPointValue.md +++ /dev/null @@ -1,133 +0,0 @@ ---- -id: use-breakPoint-value -title: useBreakpointValue ---- - -`useBreakpointValue` is a custom hook which returns the value for the current breakpoint from the provided responsive values object. This hook also responds to the window resizing and returning the appropriate value for the new window size. - -## **Import** - -```jsx -import { useBreakpointValue } from 'native-base'; -``` - -## **Return value** - -The `useBreakpointValue` hook returns the value for the current breakpoint. - -## Usage - -```SnackPlayer name=useBreakpointValue - -import React from 'react'; -import { - Factory, - Button, - Stack, - NativeBaseProvider, - Center, - ScrollView -} from 'native-base'; -import { TextInput } from 'react-native'; - -import { Icon, useBreakpointValue, Text, VStack, Heading } from 'native-base'; -import { FontAwesome, Foundation, Feather } from '@expo/vector-icons'; -import { View } from 'react-native'; - -export const UseBreakpointValueExample = () => { - const flexDir = useBreakpointValue({ - base: 'column', - lg: 'row', - }); - return ( - - - Why us? - - - - - Secure Checkout - - - - - - Secure Checkout - - - - - - Fast Turn Around - - - - - - ); -}; - -// Example template which wraps component with NativeBaseProvider -export default function () { - return ( - -
- -
- - ); -} - -``` diff --git a/versioned_docs/version-3.2.1/useClipboard.md b/versioned_docs/version-3.2.1/useClipboard.md deleted file mode 100644 index fa916f05a..000000000 --- a/versioned_docs/version-3.2.1/useClipboard.md +++ /dev/null @@ -1,73 +0,0 @@ ---- -id: use-clipboard -title: useClipboard ---- - -`useClipboard` is a custom hook that handles copying content to clipboard. - -## Return Value - -The `useClipboard` hook returns an object with the following fields: - -- `value` : ( **string** ) The copied value. -- `onCopy` : ( **Function** ) Callback function to copy content. -- `hasCopied` : ( **boolean** ) If **true**, the content has been copied. - -## Import - -```jsx -import { useClipboard } from 'native-base'; -``` - -## Usage - -```SnackPlayer name=useClipboard%20Usage -import React from "react"; -import { - Button, - HStack, - VStack, - Text, - Input, - useClipboard, - NativeBaseProvider, - Center -} from "native-base"; - -function UseClipboardExample() { - const [copyText, setCopyText] = React.useState('Hello'); - const [pasteText, setPasteText] = React.useState(''); - const { value, onCopy } = useClipboard(); - return ( - - - setCopyText(v)} - value={copyText} - /> - - - - setPasteText(v)} - value={pasteText} - /> - - - - ); -} -export default function () { - return ( - -
- -
- - ); -} -``` diff --git a/versioned_docs/version-3.2.1/useColorMode.md b/versioned_docs/version-3.2.1/useColorMode.md deleted file mode 100644 index adb23b90d..000000000 --- a/versioned_docs/version-3.2.1/useColorMode.md +++ /dev/null @@ -1,56 +0,0 @@ ---- -id: use-color-mode -title: useColorMode ---- - -`useColorMode` is a custom hook used to get and set the color mode. - -## Import - -```jsx -import { useColorMode } from 'native-base'; -``` - -## Example - -```SnackPlayer name=useColorMode -import React from 'react'; -import { - NativeBaseProvider, - VStack, - useColorMode, - Text, - Button, - Center, -} from 'native-base'; - -function UseColorMode() { - const { colorMode, toggleColorMode } = useColorMode(); - return ( -
- - The active color mode is {colorMode} - - -
- ); -} - -export default function () { - return ( - - - - ); -} - - -``` - -## Return - -| Name | Type | Description | Default | -| --------------- | --------------- | ------------------------------------------ | ------- | -| colorMode | `light`, `dark` | The active color mode | `light` | -| setColorMode | function | Use to set color mode. | - | -| toggleColorMode | function | Use to toggle between light and dark mode. | - | diff --git a/versioned_docs/version-3.2.1/useColorModeValue.md b/versioned_docs/version-3.2.1/useColorModeValue.md deleted file mode 100644 index 65fad698b..000000000 --- a/versioned_docs/version-3.2.1/useColorModeValue.md +++ /dev/null @@ -1,52 +0,0 @@ ---- -id: use-color-mode-value -title: useColorModeValue ---- - -`useColorModeValue` is a custom hook used to get a value from either of the parameters passed based on active color mode value. - -## Import - -```jsx -import { useColorModeValue } from 'native-base'; -``` - -## Example - -```SnackPlayer name=useColorModeValue -import React from 'react'; -import { - NativeBaseProvider, - useColorMode, - Text, - Button, - Center, - useColorModeValue, -} from 'native-base'; - -function UseColorMode() { - const { colorMode, toggleColorMode } = useColorMode(); - return ( -
- - The active color mode is - {useColorModeValue('Light', 'Dark')} - - -
- ); -} - -export default function () { - return ( - - - - ); -} - -``` - -## Return value - -Accepts 2 parameters and returns either of the two, based on current color-mode (first parameter for light mode and second parameter for dark mode). diff --git a/versioned_docs/version-3.2.1/useContrastText.md b/versioned_docs/version-3.2.1/useContrastText.md deleted file mode 100644 index 4497c3b17..000000000 --- a/versioned_docs/version-3.2.1/useContrastText.md +++ /dev/null @@ -1,103 +0,0 @@ ---- -id: use-contrast-text -title: useContrastText ---- - -`useContrastText` is a custom hook used to get a contrasting color (either `lightText` or `darkText`) to the color passed as a parameter. - -## Import - -```jsx -import { useContrastText } from 'native-base'; -``` - -## Examples - -### Basic - -```SnackPlayer name=useContrastText - -import React from 'react'; -import { Button, useContrastText, NativeBaseProvider, Center } from 'native-base'; -function UseContrastingTextHook () { - const bgDark = 'gray.900'; - const bgLight = 'gray.50'; - const colorContrastDark = useContrastText(bgDark); - const colorContrastLight = useContrastText(bgLight); - - return ( - <> - - - - ); -} - -export default function () { - return ( - -
- -
- - ); -} -``` - -### Using Accessible Colors - -By default, NativeBase provides contrasting color based on its theme. You can also choose to get color with better [color and contrast accessibility](https://web.dev/color-and-contrast-accessibility/) with the help of [`useAccessibleColors`](useAccessibleColors.md) hook. - -```SnackPlayer name=usingAccessibleColors - -import React from 'react'; -import { Button, useContrastText, useTheme, NativeBaseProvider, Center, useAccessibleColors } from 'native-base'; - -const ButtonTemplate = ({ shade }: any) => { - const colorContrast = useContrastText(`yellow.${shade}`); - return ( - - ); -}; - -function UseContrastingTextHook () { - let [, , toggleAccessibleColors] = useAccessibleColors(); - const { colors } = useTheme(); - return ( - <> - {Object.keys(colors.yellow).map((key, index) => { - if (index > 2 && index < 9) return ; - })} - - - ); -} - -export default function () { - return ( - -
- -
- - ); -} -``` - -## Return value - -Accepts and returns a color defined in the theme. diff --git a/versioned_docs/version-3.2.1/useDisclosure.md b/versioned_docs/version-3.2.1/useDisclosure.md deleted file mode 100644 index 4e5cd4cdd..000000000 --- a/versioned_docs/version-3.2.1/useDisclosure.md +++ /dev/null @@ -1,74 +0,0 @@ ---- -id: use-disclosure -title: useDisclose ---- - -`useDisclose` is a custom hook used to help handle common `open`, `close`, or `toggle` scenarios. It can be used to control feedback component such as **Modal**, **AlertDialog**, **Drawer**, etc. - -## Import - -```jsx -import { useDisclose } from 'native-base'; -``` - -## Example - -```SnackPlayer name=useDisclose%20Usage -import React from "react"; -import { - Modal, - Button, - Center, - Input, - useDisclose, - NativeBaseProvider, -} from "native-base"; - -function UseDiscloseExample() { - const { isOpen, onOpen, onClose } = useDisclose(); - return ( - <> - - - - - Delete Customer - - - This will remove all data relating to Alex. This action cannot be reversed. Deleted data can not be recovered. - - - - - - - - - - - ); -} -export default function () { - return ( - -
- -
- - ); -} -``` - -## Return value - -The `useDisclosure` hook returns an object with the following fields: - -`isOpen`: ( **boolean** ) Show the component; triggers the enter or exit states. - -`onClose`: ( **function** ) Callback function to set a falsy value for the `isOpen` parameter. - -`onOpen`: ( **function** ) Callback function to set a truthy value for the `isOpen` parameter. - -`onToggle`: ( **function** ) Callback function to toggle the value of the `isOpen` parameter. diff --git a/versioned_docs/version-3.2.1/useMediaQuery.md b/versioned_docs/version-3.2.1/useMediaQuery.md deleted file mode 100644 index 7edf8d5fb..000000000 --- a/versioned_docs/version-3.2.1/useMediaQuery.md +++ /dev/null @@ -1,440 +0,0 @@ ---- -id: use-media-query -title: useMediaQuery ---- - -`useMediaQuery` is a custom hook used to help detect whether a single media query or multiple media queries individually match. React Native does not natively support media queries, so `useMediaQuery` is still limited. - -## Import - -```jsx -import { useMediaQuery } from 'native-base'; -``` - -## Example - -### max-height - -```SnackPlayer name=useMediaQuery%20Usage(max-height) -import React from "react"; -import { Text, useMediaQuery, NativeBaseProvider, Center } from "native-base"; - -function UseMediaQueryExample() { - const [isSmallScreen] = useMediaQuery({ minHeight: 280, maxHeight: 480 }); - return ( - - {isSmallScreen ? ( - - - - image - -
- PHOTOS -
- - - - - The Garden City - - - The Silicon Valley of India. - - - - Bengaluru (also called Bangalore) is the center of India's - high-tech industry. The city is also known for its parks and - nightlife. - - - - - 6 mins ago - - - - - - ) : ( - - - - - The Garden City - - - The Silicon Valley of India. - - - - Bengaluru (also called Bangalore) is the center of India's - high-tech industry. The city is also known for its parks and - nightlife. - - - - - 6 mins ago - - - - - - )} - - ); -} -export default function () { - return ( - -
- -
- - ); -} -``` - -### min-width - -```SnackPlayer name=useMediaQuery%20Usage(min-width) -import React from "react"; -import { Text, useMediaQuery, NativeBaseProvider, Center } from "native-base"; - -function UseMediaQueryExample() { - const [isSmallScreen] = useMediaQuery({ minWidth: 280 }); - return ( - - {isSmallScreen ? ( - - - - image - -
- PHOTOS -
- - - - - The Garden City - - - The Silicon Valley of India. - - - - Bengaluru (also called Bangalore) is the center of India's - high-tech industry. The city is also known for its parks and - nightlife. - - - - - 6 mins ago - - - - - - ) : ( - - - - - The Garden City - - - The Silicon Valley of India. - - - - Bengaluru (also called Bangalore) is the center of India's - high-tech industry. The city is also known for its parks and - nightlife. - - - - - 6 mins ago - - - - - - )} - - ); -} -export default function () { - return ( - -
- -
- - ); -} -``` - -### orientation - -```SnackPlayer name=useMediaQuery%20Usage(orientation) -import React from "react"; -import { Text, useMediaQuery, NativeBaseProvider, Center } from "native-base"; - -function UseMediaQueryExample() { - const [isLandScape, isPortrait] = useMediaQuery([ - { orientation: 'landscape' }, - { orientation: 'portrait' }, - ]); - return ( - - {isPortrait ? ( - - - - image - -
- PHOTOS -
- - - - - The Garden City - - - The Silicon Valley of India. - - - - Bengaluru (also called Bangalore) is the center of India's - high-tech industry. The city is also known for its parks and - nightlife. - - - - - 6 mins ago - - - - - - ) : ( - <> - )} - {isLandScape ? ( - - - - - The Garden City - - - The Silicon Valley of India. - - - - Bengaluru (also called Bangalore) is the center of India's - high-tech industry. The city is also known for its parks and - nightlife. - - - - - 6 mins ago - - - - - - ) : ( - <> - )} - - ); -} -export default function () { - return ( - -
- -
- - ); -} -``` - -## Return value - -The `useMediaQuery` hook returns an array of booleans, indicating whether the given query matches or queries match. - -Why an array? `useMediaQuery` accepts both an object and an array of object, but will always return an array. This way, you can combine multiple media queries which will be individually matched in a single call. The options to use are still limited to `maxWidth`, `minWidth`, `maxHeight`, `minHeight`, `orientation`. diff --git a/versioned_docs/version-3.2.1/useTheme.md b/versioned_docs/version-3.2.1/useTheme.md deleted file mode 100644 index 71ac99174..000000000 --- a/versioned_docs/version-3.2.1/useTheme.md +++ /dev/null @@ -1,22 +0,0 @@ ---- -id: use-theme -title: useTheme ---- - -`useTheme` is a custom hook used to get the theme object from context. - -## Import - -```jsx -import { useTheme } from "native-base"; -``` - -## Example - -```jsx -function Example() { - const theme = useTheme(); - - return {/* Do something with the theme */}; -} -``` diff --git a/versioned_docs/version-3.2.1/useToken.md b/versioned_docs/version-3.2.1/useToken.md deleted file mode 100644 index 29b824ec2..000000000 --- a/versioned_docs/version-3.2.1/useToken.md +++ /dev/null @@ -1,51 +0,0 @@ ---- -id: use-token -title: useToken ---- - -`useToken` is a custom hook used to resolve design tokens from the theme. - -## Import - -```jsx -import { useToken } from 'native-base'; -``` - -## Example - -```SnackPlayer name=useToken%20Example -import React from "react"; -import { Box, Text, useToken, NativeBaseProvider, Center, HStack , VStack} from "native-base"; - -function UseTokenHookExample() { - const [colorPick1, colorPick2] = useToken( - // the key within the theme, in this case `theme.colors` - "colors", - // the subkey(s), resolving to `theme.colors.warning.1` - ["yellow.500", "cyan.500"] - // a single fallback or fallback array matching the length of the previous arg - ); - - return ( - - - - {colorPick1} - - - - {colorPick2} - - - ); -} -export default function () { - return ( - -
- -
- - ); -} -``` diff --git a/versioned_docs/version-3.2.1/utility-first.mdx b/versioned_docs/version-3.2.1/utility-first.mdx deleted file mode 100644 index 9de7d2ddb..000000000 --- a/versioned_docs/version-3.2.1/utility-first.mdx +++ /dev/null @@ -1,218 +0,0 @@ ---- -id: utility-first -title: Utility First ---- - -import { UtilityFirstExample } from '../../src/components'; -import { KitchenSinkIframe, TileLink, NBHistory } from '../../src/components'; - -React Native has a great StyleSheet API which is optimal for component-based systems. NativeBase leverages it and adds a layer of utility props and constraint based designed tokens on top of it. - -To understand utility props, let's take an example. - - - -
- -## With React Native - -Let's try the traditional way of building the above card in React Native. - -
- -```jsx -import * as React from 'react'; -import { Text, View, StyleSheet, Image, Pressable } from 'react-native'; - -export default function App() { - return ( - - - - - Today @ 9PM - Let's talk about avatar! - - - Remind me - - - - - - ); -} - -const styles = StyleSheet.create({ - container: { - backgroundColor: '#0891b2', - paddingVertical: 16, - paddingHorizontal: 12, - borderRadius: 5, - alignSelf: 'center', - width: 375, - maxWidth: '100%', - }, - timings: { - color: '#fff', - fontSize: 14, - }, - metaContainer: { - justifyContent: 'space-between', - }, - topContainer: { - flexDirection: 'row', - justifyContent: 'space-between', - }, - avatar: { - height: 100, - width: 100, - borderRadius: 100, - }, - description: { - color: 'white', - marginTop: 5, - fontSize: 20, - }, - button: { - backgroundColor: '#22d3ee', - alignSelf: 'flex-start', - paddingHorizontal: 10, - paddingVertical: 5, - borderRadius: 3, - }, - buttonText: { - fontWeight: 'bold', - color: 'white', - textTransform: 'uppercase', - fontSize: 14, - }, -}); -``` - -
- - - -
- -## With NativeBase - -Now let's try to build the same card using NativeBase. - -With NativeBase, you can apply styles directly in the layout using shorthands. - -
- -```jsx -import * as React from 'react'; -import { - NativeBaseProvider, - Box, - HStack, - VStack, - Text, - Pressable, - Image, -} from 'native-base'; - -export function UtilityFirstExample() { - return ( - - - - - - - Today @ 9PM - - - Let's talk about avatar! - - - - - Remind me - - - - Aang flying and surrounded by clouds - - - - ); -} -``` - -
- -The above example demonstrates the usage of [utility props](utility-props) alongwith [VStack](vstack), [HStack](hstack) components. This approach allows us to style components without using StyleSheet API. - -Apart from productivity boost and saving time there are other benefits by styling components using utility props. -No need to name styles anymore, no need to define an object and think about naming them. - -Using utility-first props, you can focus on creating reusable components instead of reusable stylesheets. - -Once you start writing styles this way, any other way will feel cumbersome. - -> Put simply, utility first approach opens up the Avatar state within developers. - -
- aang transitioning to avatar state -
- -
- -Once you had a cup of tea, let's proceed to the next section! - -
-
- -
- uncle iroh holding cup of tea - -
diff --git a/versioned_docs/version-3.2.1/utilityProps.md b/versioned_docs/version-3.2.1/utilityProps.md deleted file mode 100644 index 8cf57537b..000000000 --- a/versioned_docs/version-3.2.1/utilityProps.md +++ /dev/null @@ -1,679 +0,0 @@ ---- -id: utility-props -title: Utility Props ---- - -Style props are a way to alter the style of a component by simply passing props to it. It helps to save time by providing helpful shorthand ways to style components. - -## Style Props - -The following table shows a list of every style prop and the properties within each group. - -### Margin and padding - -```SnackPlayer name=Margin%20and%20padding -import React from 'react'; -import { Box as NBBox, NativeBaseProvider, Center } from 'native-base'; - -const Box = (props) => { - return -} - -function Component() { - return ( - <> - { /* m={2} refers to the value of `theme.space[2]` */ } - - { /* You can also use custom values */ } - - { /* sets margin `8px` on all viewports and `16px` from the first breakpoint and up */ } - - - ); -} -export default function () { - return ( - -
- -
- - ); -} - -``` - -
- -| Prop | CSS Equivalent | Theme Key | -| ----------------- | ------------------------------ | --------- | -| m, margin | margin | space | -| mt, marginTop | margin-top | space | -| mr, marginRight | margin-right | space | -| mb, marginBottom | margin-bottom | space | -| ml, marginLeft | margin-left | space | -| mx | margin-left and margin-right | space | -| my | margin-top and margin-bottom | space | -| p, padding | padding | space | -| pt, paddingTop | padding-top | space | -| pr, paddingRight | padding-right | space | -| pb, paddingBottom | padding-bottom | space | -| pl, paddingLeft | padding-left | space | -| px | padding-left and padding-right | space | -| py | padding-top and padding-bottom | space | - -### Color and background color - -```SnackPlayer name=Color%20and%20background%20COolor -import React from 'react'; -import { Box as NBBox, NativeBaseProvider, Center, Text } from 'native-base'; - -const Box = (props) => { - return ; -}; - -function Component() { - return ( - <> - {/* raw CSS color value */} - - {/* picks up a nested color value using dot notation */} - {/* => `theme.colors.lightBlue[300]` */} - - {/* using theme colors to set text color */} - - {' '} - I love NativeBase - - - {/* verbose prop */} - - - ); -} -export default function () { - return ( - -
- -
- - ); -} - - -``` - -
- -| Prop | CSS Eqquivalent | Theme Key | -| -------------- | ---------------- | --------- | -| color | color | colors | -| bg, background | background | colors | -| bgColor | background-color | colors | -| opacity | opacity | - | - -

- -:::tip Note - -Above props can be written in the format: {color}:alpha.{opacityToken}, this gets converted into RGBA color format and the opacityToken is mapped to [`Opacity`](default-theme#opacity) - -::: - -
- -```SnackPlayer name=Alpha%20Opacity%20Usage - -import React from "react" -import { HStack, Stack, Center, NativeBaseProvider } from "native-base" -export function Example() { - return ( - - -
- Box 1 -
-
- Box 2 -
-
- Box 3 -
- - - ) -} - -export default () => { - return ( - -
- -
- - ) -} - -``` - -### Typography - -```SnackPlayer name=Typography -import React from 'react'; -import { Text as NBText, NativeBaseProvider, Center } from 'native-base'; - -const Text = (props) => { - return -} - -function Component() { - return ( - <> - { /* font-size of `theme.fontSizes.2xl` */ } - Thank You - { /* text decoration `underline` */ } - Merci Beaucoup - { /* font-size `'2em'` */ } - { /* font-weight of `theme.fontWeights.semibold i.e. 600` */ } - Danke sehr - { /* letter-spacing `0.1 em` */ } - Arigatou - - ); -} -export default function () { - return ( - -
- -
- - ); -} - -``` - -
- -| Prop | CSS Eqquivalent | Theme Key | -| -------------- | --------------- | -------------- | -| fontFamily | font-family | fonts | -| fontSize | font-size | fontSizes | -| fontWeight | font-weight | fontWeights | -| lineHeight | line-height | lineHeights | -| letterSpacing | letter-spacing | letterSpacings | -| textAlign | text-align | - | -| fontStyle | font-style | - | -| textTransform | text-transform | - | -| textDecoration | text-decoration | - | - -### Layout, width and height - -```SnackPlayer name=Layout,%20width%20and%20height -import React from 'react'; -import { Box as NBBox, NativeBaseProvider, Center } from 'native-base'; - -const Box = (props) => { - return -} - -function Component() { - return ( - <> - { /* verbose */ } - - { /* shorthand */ } - - { /* use boxSizing */ } - - { /* width `50%` */ } - - { /* width `256px` h={8} */ } - - { /* width `'40px'` */ } - - - ); -} -export default function () { - return ( - -
- -
- - ); -} - -``` - -
- -| Prop | CSS Eqquivalent | Theme Key | -| --------------- | --------------- | --------- | -| w, width | width | sizes | -| h, height | height | sizes | -| minW, minWidth | min-width | sizes | -| maxW, maxWidth | max-width | sizes | -| minH, minHeight | min-height | sizes | -| maxH, maxHeight | max-height | sizes | -| d, display | display | - | -| boxSize | width, height | sizes | -| verticalAlign | vertical-align | - | -| overflow | overflow | - | -| overflowX | overflowX | - | -| overflowY | overflowY | - | - -### Flexbox - -```SnackPlayer name=Flexbox -import React from 'react'; -import { Box as NBBox, Flex, NativeBaseProvider, Center } from 'native-base'; - -const Box = (props) => { - return -} - -function Component() { - return ( - <> - { /* verbose */ } - - - - - - { /* shorthand using the `Flex` component */ } - - - - - - ); -} -export default function () { - return ( - -
- -
- - ); -} - -``` - -
- -| Prop | CSS Eqquivalent | Theme Key | -| ----------------------------------- | --------------- | --------- | -| alignItems, \*align | align-items | - | -| alignContent | align-content | - | -| justifyItems | justify-items | - | -| justifyContent, \*justify | justify-content | - | -| flexWrap, \*wrap | flex-wrap | - | -| flexDirection, flexDir, \*direction | flex-direction | - | -| flex | flex | - | -| flexGrow | flex-grow | - | -| flexShrink | flex-shrink | - | -| flexBasis | flex-basis | - | -| justifySelf | justify-self | - | -| alignSelf | align-self | - | -| order | order | - | - -### Borders - -```SnackPlayer name=Borders -import React from 'react'; -import { Box as NBBox, NativeBaseProvider, Center } from 'native-base'; - -const Box = (props) => { - return ; -}; - -function Component() { - return ( - <> - - - - - ); -} -export default function () { - return ( - -
- -
- - ); -} - - -``` - -
- -| Prop | CSS Eququivalent | Theme Field | -| ----------------- | ------------------- | ------------ | -| border | border | borders | -| borderWidth | border-width | borderWidths | -| borderStyle | border-style | borderStyles | -| borderColor | border-color | colors | -| borderTop | border-top | borders | -| borderTopWidth | border-top-width | borderWidths | -| borderTopStyle | border-top-style | borderStyles | -| borderTopColor | border-top-color | colors | -| borderRight | border-right | borders | -| borderRightWidth | border-right-width | borderWidths | -| borderRightStyle | border-right-style | borderStyles | -| borderRightColor | border-right-color | colors | -| borderBottom | border-bottom | borders | -| borderBottomWidth | border-bottom-width | borderWidths | -| borderBottomStyle | border-bottom-style | borderStyles | -| borderBottomColor | border-bottom-color | colors | -| borderLeft | border-left | borders | -| borderLeftWidth | border-left-width | borderWidths | -| borderLeftStyle | border-left-style | borderStyles | -| borderLeftColor | border-left-color | colors | - -### Borders Radius - -```SnackPlayer name=Borders%20Radius -import React from 'react'; -import { Box as NBBox, NativeBaseProvider, Center } from 'native-base'; - -const Box = (props) => { - return -} - -function Component() { - return ( - <> - { /* picks up a nested radius value using dot notation */ } - { /* => `theme.radius.md` */ } - - - { /* partial border radius */ } - - { /* absolute value prop */ } - - - ); -} -export default function () { - return ( - -
- -
- - ); -} - -``` - -
- -| Prop | CSS Eququivalent | Theme Field | -| ----------------------- | ------------------------------------------------------ | ----------- | -| borderRadius | border-radius | radii | -| borderTopLeftRadius | border-top-left-radius | radii | -| borderTopRightRadius | border-top-right-radius | radii | -| borderBottomRightRadius | border-bottom-right-radius | radii | -| borderBottomLeftRadius | border-bottom-left-radius | radii | -| borderTopRadius | border-top-left-radius & border-top-right-radius | radii | -| borderRightRadius | border-top-right-radius & border-bottom-right-radius | radii | -| borderBottomRadius | border-bottom-left-radius & border-bottom-right-radius | radii | -| borderLeftRadius | border-top-left-radius & border-bottom-left-radius | radii | - -### Position - -```SnackPlayer name=Position -import React from 'react'; -import { Box as NBBox, NativeBaseProvider, Center } from 'native-base'; - -const Box = (props) => { - return -} - -function Component() { - return ( - <> - - - - - ); -} -export default function () { - return ( - -
- -
- - ); -} - -``` - -
- -| Prop | CSS Equivalent | Theme Field | -| ------------ | -------------- | ----------- | -| pos,position | position | - | -| zIndex | z-index | zIndices | -| top | top | space | -| right | right | space | -| bottom | bottom | space | -| left | left | space | - -### Shadow - -```SnackPlayer name=Shadow -import React from 'react'; -import { Box as NBBox, NativeBaseProvider, Center } from 'native-base'; - -const Box = (props) => { - return -} - -function Component() { - return ( - <> - { /* => `theme.shadows.md` */ } - - - - - - - ); -} -export default function () { - return ( - -
- -
- - ); -} - -``` - -
- -| Prop | CSS Equivalent | Theme Field | -| ------ | -------------- | ----------- | -| shadow | box-shadow | shadows | - -## Underscore Props - -### Internal Props - -Provides a way to pass props to child components inside Composite componets. - -```SnackPlayer name=Internal -import React from 'react'; -import { Button, NativeBaseProvider, Center } from 'native-base'; - -function Example() { - return ( - - ); -} - -export default function () { - return ( - -
- -
- - ); -} - -``` - -
- -| Prop | Type | Description | -| ------- | -------------------------- | -------------------------------------------------------- | -| \_stack | [IStackProps](stack#props) | Passed props will be provided to [`Stack`](stack) child. | -| \_text | [ITextProps](text#props) | Passed props will be provided to [`Text`](text) child. | - -### Interaction Props - -Provides a way to pass props on certain interaction. - -```SnackPlayer name=Internal -import React from 'react'; -import { Button, NativeBaseProvider, Center } from 'native-base'; - -function Example() { - return ( - - ); -} - -export default function () { - return ( - -
- -
- - ); -} - -``` - -
- -| Prop | Type | Description | -| ---------- | ----------------------- | ----------------------------------------------- | -| \_disabled | _Same as the component_ | Passed props will be applied on disabled state. | -| \_focus | _Same as the component_ | Passed props will be applied on focused state. | -| \_hover | _Same as the component_ | Passed props will be applied on hovered state. | -| \_invalid | _Same as the component_ | Passed props will be applied on invalid state. | -| \_pressed | _Same as the component_ | Passed props will be applied on pressed state. | - -### Platform Props - -Provides a way to pass props bassed on Platform (_android, ios or web_). - -```SnackPlayer name=Internal -import React from 'react'; -import { Button, NativeBaseProvider, Center } from 'native-base'; - -function Example() { - return ( - - ); -} - -export default function () { - return ( - -
- -
- - ); -} - -``` - -
- -| Prop | Type | Description | -| --------- | ----------------------- | ---------------------------------------- | -| \_android | _Same as the component_ | Passed props will be applied on android. | -| \_ios | _Same as the component_ | Passed props will be applied on ios. | -| \_web | _Same as the component_ | Passed props will be applied on web. | diff --git a/versioned_docs/version-3.2.1/utilityPropsSpecificity.md b/versioned_docs/version-3.2.1/utilityPropsSpecificity.md deleted file mode 100644 index 70e42236a..000000000 --- a/versioned_docs/version-3.2.1/utilityPropsSpecificity.md +++ /dev/null @@ -1,55 +0,0 @@ ---- -id: utility-props-specificity -title: Utility Props Specificity ---- - -- If we have two similar props for a particular component, the more specific prop will be applied when the component is rendered. - - ```jsx - - ``` - - In the above example, we have two similar props for the Input component, but as you might have noticed `px={2}` is more specific than `p={0}` in terms of providing padding to the Input. This follows React Native's specificity precedence while applying utility style props to a component, order does not matter. So, `px={2}` will be applied when the Input component is rendered. - -- If we have a similar prop which is also defined in the baseStyle of that component, the value of the prop will override the value of the prop defined in the baseStyle. - - Let's take an example of `Input` to understand better. - - ```jsx - - - // baseStyle for Input component - return { - ... - px: 4, - py: 2, - ... - } - ``` - - As you can see, we have `px:2` and `py:2` defined in the baseStyle of Input component, but if we pass `p={0}` in the props of an Input, it will override the the baseStyle and apply `p={0}` to that component. **Similar happens with other utility props.** - -Now, here is an example to analyze both the cases together: - -```jsx - - -// baseStyle for Input component - return { - ... - px: 4, - py: 2, - ... - } - -``` -In the above example, what do you think should be the padding of the rendered Input component? - -Let's see. - -We have `p={0}` which will override the value of padding coming from the baseStyle of Input component, then we have `px={3}` which is a more specific prop. So, the padding of the rendered Input will be `padding : { paddingTop:0, paddingRight:3, paddingBottom:0, paddingLeft:3 }`. - - - - - diff --git a/versioned_docs/version-3.2.1/view.md b/versioned_docs/version-3.2.1/view.md deleted file mode 100644 index dd1890b6f..000000000 --- a/versioned_docs/version-3.2.1/view.md +++ /dev/null @@ -1,18 +0,0 @@ ---- -id: view -title: View ---- - -The most fundamental component for building a UI. - -## Example - -```ComponentSnackPlayer path=basic,View,Basic.tsx - -``` - -## Props - -```ComponentPropTable path=basic,View,View.tsx showStylingProps=true - -``` From 0405a4550bf611d26ef026dac16c85a1a7fafe1a Mon Sep 17 00:00:00 2001 From: Nishan Bende Date: Wed, 13 Oct 2021 18:42:46 +0530 Subject: [PATCH 6/7] v3.2.1 mdx layout fix --- docs/getting-started.mdx | 141 ++-- versioned_docs/version-3.2.1/FAB.md | 44 ++ versioned_docs/version-3.2.1/VStack.md | 24 + versioned_docs/version-3.2.1/ZStack.md | 28 + versioned_docs/version-3.2.1/accessibility.md | 24 + versioned_docs/version-3.2.1/actionSheet.md | 78 ++ versioned_docs/version-3.2.1/alert.md | 87 +++ versioned_docs/version-3.2.1/alertDialog.md | 55 ++ versioned_docs/version-3.2.1/appDrawer.md | 70 ++ versioned_docs/version-3.2.1/avatar.md | 76 ++ versioned_docs/version-3.2.1/badge.md | 50 ++ versioned_docs/version-3.2.1/box.md | 139 ++++ versioned_docs/version-3.2.1/breakpoints.md | 131 ++++ .../version-3.2.1/buildingAppBar.md | 48 ++ .../version-3.2.1/buildingDrawerNavigation.md | 174 +++++ .../version-3.2.1/buildingFooterTabs.md | 131 ++++ .../version-3.2.1/buildingSearchBar.md | 117 +++ .../version-3.2.1/buildingSwipeList.md | 195 +++++ .../version-3.2.1/buildingTabView.md | 106 +++ versioned_docs/version-3.2.1/builldingCard.md | 104 +++ versioned_docs/version-3.2.1/button.mdx | 84 +++ versioned_docs/version-3.2.1/center.md | 48 ++ versioned_docs/version-3.2.1/changelog.md | 32 + versioned_docs/version-3.2.1/checkBox.md | 104 +++ versioned_docs/version-3.2.1/colorMode.md | 163 +++++ versioned_docs/version-3.2.1/container.md | 56 ++ .../version-3.2.1/customizingComponents.md | 160 +++++ .../version-3.2.1/customizingFonts.md | 87 +++ .../version-3.2.1/customizingTheme.md | 108 +++ versioned_docs/version-3.2.1/darkMode.md | 89 +++ versioned_docs/version-3.2.1/default-theme.md | 229 ++++++ versioned_docs/version-3.2.1/design-tokens.md | 69 ++ versioned_docs/version-3.2.1/divider.md | 56 ++ versioned_docs/version-3.2.1/faq.md | 6 + versioned_docs/version-3.2.1/flatList.md | 152 ++++ versioned_docs/version-3.2.1/flex.md | 44 ++ versioned_docs/version-3.2.1/form.md | 199 +++++ versioned_docs/version-3.2.1/formControl.md | 52 ++ .../version-3.2.1/getting-started.mdx | 90 +++ versioned_docs/version-3.2.1/hStack.md | 24 + versioned_docs/version-3.2.1/heading.md | 56 ++ versioned_docs/version-3.2.1/hidden.md | 125 ++++ versioned_docs/version-3.2.1/icon.md | 54 ++ versioned_docs/version-3.2.1/iconButton.md | 43 ++ versioned_docs/version-3.2.1/image.md | 49 ++ versioned_docs/version-3.2.1/input.md | 76 ++ versioned_docs/version-3.2.1/install-cra.mdx | 131 ++++ versioned_docs/version-3.2.1/install-expo.mdx | 141 ++++ versioned_docs/version-3.2.1/install-next.mdx | 263 +++++++ versioned_docs/version-3.2.1/install-rn.mdx | 138 ++++ versioned_docs/version-3.2.1/installation.mdx | 30 + .../version-3.2.1/interaction-styles.mdx | 229 ++++++ .../version-3.2.1/keyboardAvoidingView.md | 18 + versioned_docs/version-3.2.1/kitchen-sink.mdx | 66 ++ versioned_docs/version-3.2.1/link.md | 60 ++ .../version-3.2.1/loginsignupforms.md | 157 ++++ versioned_docs/version-3.2.1/menu.md | 94 +++ .../version-3.2.1/migration/Accordion.md | 89 +++ .../version-3.2.1/migration/Actionsheet.md | 107 +++ .../version-3.2.1/migration/Badge.md | 44 ++ .../version-3.2.1/migration/Button.md | 196 +++++ .../Screenshot_2021-01-22_at_1.15.34_PM.png | Bin 0 -> 9022 bytes .../Screenshot_2021-01-22_at_1.16.25_PM.png | Bin 0 -> 8669 bytes .../Screenshot_2021-01-22_at_1.17.11_PM.png | Bin 0 -> 10048 bytes .../Screenshot_2021-01-22_at_1.20.36_PM.png | Bin 0 -> 9795 bytes .../Screenshot_2021-01-22_at_1.22.36_PM.png | Bin 0 -> 8306 bytes .../Screenshot_2021-01-22_at_1.23.42_PM.png | Bin 0 -> 7841 bytes .../Screenshot_2021-01-22_at_1.32.47_PM.png | Bin 0 -> 9384 bytes .../Screenshot_2021-01-22_at_1.38.15_PM.png | Bin 0 -> 10101 bytes .../Screenshot_2021-01-22_at_12.29.32_PM.png | Bin 0 -> 8297 bytes .../Screenshot_2021-01-22_at_12.53.09_PM.png | Bin 0 -> 8494 bytes .../Screenshot_2021-01-22_at_2.37.09_PM.png | Bin 0 -> 8816 bytes .../Screenshot_2021-01-22_at_2.38.52_PM.png | Bin 0 -> 8409 bytes .../version-3.2.1/migration/Card.md | 91 +++ .../version-3.2.1/migration/Checkbox.md | 54 ++ .../Screenshot_2021-01-22_at_3.09.29_PM.png | Bin 0 -> 10808 bytes .../Screenshot_2021-01-22_at_4.34.08_PM.png | Bin 0 -> 9954 bytes .../version-3.2.1/migration/DatePicker.md | 6 + .../version-3.2.1/migration/DeckSwiper.md | 8 + .../version-3.2.1/migration/Drawer.md | 6 + .../version-3.2.1/migration/FABs.md | 63 ++ .../version-3.2.1/migration/FooterTab.md | 6 + .../version-3.2.1/migration/Form.md | 72 ++ .../version-3.2.1/migration/Header.md | 6 + .../version-3.2.1/migration/Icon.md | 80 +++ .../version-3.2.1/migration/Layout.md | 77 ++ .../version-3.2.1/migration/List.md | 0 .../version-3.2.1/migration/Picker.md | 91 +++ .../version-3.2.1/migration/Radio Button.md | 95 +++ .../version-3.2.1/migration/Searchbar.md | 6 + .../version-3.2.1/migration/Segment.md | 7 + .../version-3.2.1/migration/Spinner.md | 47 ++ .../version-3.2.1/migration/SwipeList.md | 6 + .../version-3.2.1/migration/Tabs.md | 67 ++ .../version-3.2.1/migration/Thumbnail.md | 73 ++ .../version-3.2.1/migration/Toast.md | 84 +++ .../version-3.2.1/migration/Typography.md | 39 + versioned_docs/version-3.2.1/migration/v3.md | 19 + .../version-3.2.1/migration/v3xtov32.md | 71 ++ versioned_docs/version-3.2.1/modal.md | 104 +++ versioned_docs/version-3.2.1/more-props.md | 13 + .../version-3.2.1/nativebase-factory.md | 155 ++++ versioned_docs/version-3.2.1/popOver.md | 94 +++ .../version-3.2.1/presence-transition.md | 63 ++ versioned_docs/version-3.2.1/pressable.md | 32 + versioned_docs/version-3.2.1/progress.md | 62 ++ versioned_docs/version-3.2.1/pseudoProps.md | 86 +++ versioned_docs/version-3.2.1/radio.md | 97 +++ versioned_docs/version-3.2.1/responsive.md | 173 +++++ .../version-3.2.1/safe-area-view-props.md | 99 +++ versioned_docs/version-3.2.1/scrollview.md | 18 + versioned_docs/version-3.2.1/sectionList.md | 18 + versioned_docs/version-3.2.1/select.md | 87 +++ .../version-3.2.1/setup-provider.md | 129 ++++ versioned_docs/version-3.2.1/slide.md | 38 + versioned_docs/version-3.2.1/slider.md | 86 +++ versioned_docs/version-3.2.1/spinner.md | 32 + versioned_docs/version-3.2.1/stack.md | 18 + versioned_docs/version-3.2.1/stagger.md | 54 ++ versioned_docs/version-3.2.1/statusBar.md | 18 + versioned_docs/version-3.2.1/strict-mode.md | 39 + versioned_docs/version-3.2.1/switch.md | 50 ++ versioned_docs/version-3.2.1/testing.md | 25 + versioned_docs/version-3.2.1/text.md | 44 ++ versioned_docs/version-3.2.1/textArea.md | 38 + versioned_docs/version-3.2.1/theme.md | 205 ++++++ versioned_docs/version-3.2.1/toast.md | 88 +++ versioned_docs/version-3.2.1/todo-list.md | 135 ++++ versioned_docs/version-3.2.1/tooltip.md | 65 ++ versioned_docs/version-3.2.1/typescript.md | 40 ++ .../version-3.2.1/useAccessibleColors.md | 64 ++ .../version-3.2.1/useBreakPointValue.md | 133 ++++ versioned_docs/version-3.2.1/useClipboard.md | 73 ++ versioned_docs/version-3.2.1/useColorMode.md | 56 ++ .../version-3.2.1/useColorModeValue.md | 52 ++ .../version-3.2.1/useContrastText.md | 103 +++ versioned_docs/version-3.2.1/useDisclosure.md | 74 ++ versioned_docs/version-3.2.1/useMediaQuery.md | 440 ++++++++++++ versioned_docs/version-3.2.1/useTheme.md | 22 + versioned_docs/version-3.2.1/useToken.md | 51 ++ .../version-3.2.1/utility-first.mdx | 218 ++++++ versioned_docs/version-3.2.1/utilityProps.md | 679 ++++++++++++++++++ .../version-3.2.1/utilityPropsSpecificity.md | 55 ++ versioned_docs/version-3.2.1/view.md | 18 + 144 files changed, 11085 insertions(+), 72 deletions(-) create mode 100644 versioned_docs/version-3.2.1/FAB.md create mode 100644 versioned_docs/version-3.2.1/VStack.md create mode 100644 versioned_docs/version-3.2.1/ZStack.md create mode 100644 versioned_docs/version-3.2.1/accessibility.md create mode 100644 versioned_docs/version-3.2.1/actionSheet.md create mode 100644 versioned_docs/version-3.2.1/alert.md create mode 100644 versioned_docs/version-3.2.1/alertDialog.md create mode 100644 versioned_docs/version-3.2.1/appDrawer.md create mode 100644 versioned_docs/version-3.2.1/avatar.md create mode 100644 versioned_docs/version-3.2.1/badge.md create mode 100644 versioned_docs/version-3.2.1/box.md create mode 100644 versioned_docs/version-3.2.1/breakpoints.md create mode 100644 versioned_docs/version-3.2.1/buildingAppBar.md create mode 100644 versioned_docs/version-3.2.1/buildingDrawerNavigation.md create mode 100644 versioned_docs/version-3.2.1/buildingFooterTabs.md create mode 100644 versioned_docs/version-3.2.1/buildingSearchBar.md create mode 100644 versioned_docs/version-3.2.1/buildingSwipeList.md create mode 100644 versioned_docs/version-3.2.1/buildingTabView.md create mode 100644 versioned_docs/version-3.2.1/builldingCard.md create mode 100644 versioned_docs/version-3.2.1/button.mdx create mode 100644 versioned_docs/version-3.2.1/center.md create mode 100644 versioned_docs/version-3.2.1/changelog.md create mode 100644 versioned_docs/version-3.2.1/checkBox.md create mode 100644 versioned_docs/version-3.2.1/colorMode.md create mode 100644 versioned_docs/version-3.2.1/container.md create mode 100644 versioned_docs/version-3.2.1/customizingComponents.md create mode 100644 versioned_docs/version-3.2.1/customizingFonts.md create mode 100644 versioned_docs/version-3.2.1/customizingTheme.md create mode 100644 versioned_docs/version-3.2.1/darkMode.md create mode 100644 versioned_docs/version-3.2.1/default-theme.md create mode 100644 versioned_docs/version-3.2.1/design-tokens.md create mode 100644 versioned_docs/version-3.2.1/divider.md create mode 100644 versioned_docs/version-3.2.1/faq.md create mode 100644 versioned_docs/version-3.2.1/flatList.md create mode 100644 versioned_docs/version-3.2.1/flex.md create mode 100644 versioned_docs/version-3.2.1/form.md create mode 100644 versioned_docs/version-3.2.1/formControl.md create mode 100644 versioned_docs/version-3.2.1/getting-started.mdx create mode 100644 versioned_docs/version-3.2.1/hStack.md create mode 100644 versioned_docs/version-3.2.1/heading.md create mode 100644 versioned_docs/version-3.2.1/hidden.md create mode 100644 versioned_docs/version-3.2.1/icon.md create mode 100644 versioned_docs/version-3.2.1/iconButton.md create mode 100644 versioned_docs/version-3.2.1/image.md create mode 100644 versioned_docs/version-3.2.1/input.md create mode 100644 versioned_docs/version-3.2.1/install-cra.mdx create mode 100644 versioned_docs/version-3.2.1/install-expo.mdx create mode 100644 versioned_docs/version-3.2.1/install-next.mdx create mode 100644 versioned_docs/version-3.2.1/install-rn.mdx create mode 100644 versioned_docs/version-3.2.1/installation.mdx create mode 100644 versioned_docs/version-3.2.1/interaction-styles.mdx create mode 100644 versioned_docs/version-3.2.1/keyboardAvoidingView.md create mode 100644 versioned_docs/version-3.2.1/kitchen-sink.mdx create mode 100644 versioned_docs/version-3.2.1/link.md create mode 100644 versioned_docs/version-3.2.1/loginsignupforms.md create mode 100644 versioned_docs/version-3.2.1/menu.md create mode 100644 versioned_docs/version-3.2.1/migration/Accordion.md create mode 100644 versioned_docs/version-3.2.1/migration/Actionsheet.md create mode 100644 versioned_docs/version-3.2.1/migration/Badge.md create mode 100644 versioned_docs/version-3.2.1/migration/Button.md create mode 100644 versioned_docs/version-3.2.1/migration/Button/Screenshot_2021-01-22_at_1.15.34_PM.png create mode 100644 versioned_docs/version-3.2.1/migration/Button/Screenshot_2021-01-22_at_1.16.25_PM.png create mode 100644 versioned_docs/version-3.2.1/migration/Button/Screenshot_2021-01-22_at_1.17.11_PM.png create mode 100644 versioned_docs/version-3.2.1/migration/Button/Screenshot_2021-01-22_at_1.20.36_PM.png create mode 100644 versioned_docs/version-3.2.1/migration/Button/Screenshot_2021-01-22_at_1.22.36_PM.png create mode 100644 versioned_docs/version-3.2.1/migration/Button/Screenshot_2021-01-22_at_1.23.42_PM.png create mode 100644 versioned_docs/version-3.2.1/migration/Button/Screenshot_2021-01-22_at_1.32.47_PM.png create mode 100644 versioned_docs/version-3.2.1/migration/Button/Screenshot_2021-01-22_at_1.38.15_PM.png create mode 100644 versioned_docs/version-3.2.1/migration/Button/Screenshot_2021-01-22_at_12.29.32_PM.png create mode 100644 versioned_docs/version-3.2.1/migration/Button/Screenshot_2021-01-22_at_12.53.09_PM.png create mode 100644 versioned_docs/version-3.2.1/migration/Button/Screenshot_2021-01-22_at_2.37.09_PM.png create mode 100644 versioned_docs/version-3.2.1/migration/Button/Screenshot_2021-01-22_at_2.38.52_PM.png create mode 100644 versioned_docs/version-3.2.1/migration/Card.md create mode 100644 versioned_docs/version-3.2.1/migration/Checkbox.md create mode 100644 versioned_docs/version-3.2.1/migration/Checkbox/Screenshot_2021-01-22_at_3.09.29_PM.png create mode 100644 versioned_docs/version-3.2.1/migration/Checkbox/Screenshot_2021-01-22_at_4.34.08_PM.png create mode 100644 versioned_docs/version-3.2.1/migration/DatePicker.md create mode 100644 versioned_docs/version-3.2.1/migration/DeckSwiper.md create mode 100644 versioned_docs/version-3.2.1/migration/Drawer.md create mode 100644 versioned_docs/version-3.2.1/migration/FABs.md create mode 100644 versioned_docs/version-3.2.1/migration/FooterTab.md create mode 100644 versioned_docs/version-3.2.1/migration/Form.md create mode 100644 versioned_docs/version-3.2.1/migration/Header.md create mode 100644 versioned_docs/version-3.2.1/migration/Icon.md create mode 100644 versioned_docs/version-3.2.1/migration/Layout.md create mode 100644 versioned_docs/version-3.2.1/migration/List.md create mode 100644 versioned_docs/version-3.2.1/migration/Picker.md create mode 100644 versioned_docs/version-3.2.1/migration/Radio Button.md create mode 100644 versioned_docs/version-3.2.1/migration/Searchbar.md create mode 100644 versioned_docs/version-3.2.1/migration/Segment.md create mode 100644 versioned_docs/version-3.2.1/migration/Spinner.md create mode 100644 versioned_docs/version-3.2.1/migration/SwipeList.md create mode 100644 versioned_docs/version-3.2.1/migration/Tabs.md create mode 100644 versioned_docs/version-3.2.1/migration/Thumbnail.md create mode 100644 versioned_docs/version-3.2.1/migration/Toast.md create mode 100644 versioned_docs/version-3.2.1/migration/Typography.md create mode 100644 versioned_docs/version-3.2.1/migration/v3.md create mode 100644 versioned_docs/version-3.2.1/migration/v3xtov32.md create mode 100644 versioned_docs/version-3.2.1/modal.md create mode 100644 versioned_docs/version-3.2.1/more-props.md create mode 100644 versioned_docs/version-3.2.1/nativebase-factory.md create mode 100644 versioned_docs/version-3.2.1/popOver.md create mode 100644 versioned_docs/version-3.2.1/presence-transition.md create mode 100644 versioned_docs/version-3.2.1/pressable.md create mode 100644 versioned_docs/version-3.2.1/progress.md create mode 100644 versioned_docs/version-3.2.1/pseudoProps.md create mode 100644 versioned_docs/version-3.2.1/radio.md create mode 100644 versioned_docs/version-3.2.1/responsive.md create mode 100644 versioned_docs/version-3.2.1/safe-area-view-props.md create mode 100644 versioned_docs/version-3.2.1/scrollview.md create mode 100644 versioned_docs/version-3.2.1/sectionList.md create mode 100644 versioned_docs/version-3.2.1/select.md create mode 100644 versioned_docs/version-3.2.1/setup-provider.md create mode 100644 versioned_docs/version-3.2.1/slide.md create mode 100644 versioned_docs/version-3.2.1/slider.md create mode 100644 versioned_docs/version-3.2.1/spinner.md create mode 100644 versioned_docs/version-3.2.1/stack.md create mode 100644 versioned_docs/version-3.2.1/stagger.md create mode 100644 versioned_docs/version-3.2.1/statusBar.md create mode 100644 versioned_docs/version-3.2.1/strict-mode.md create mode 100644 versioned_docs/version-3.2.1/switch.md create mode 100644 versioned_docs/version-3.2.1/testing.md create mode 100644 versioned_docs/version-3.2.1/text.md create mode 100644 versioned_docs/version-3.2.1/textArea.md create mode 100644 versioned_docs/version-3.2.1/theme.md create mode 100644 versioned_docs/version-3.2.1/toast.md create mode 100644 versioned_docs/version-3.2.1/todo-list.md create mode 100644 versioned_docs/version-3.2.1/tooltip.md create mode 100644 versioned_docs/version-3.2.1/typescript.md create mode 100644 versioned_docs/version-3.2.1/useAccessibleColors.md create mode 100644 versioned_docs/version-3.2.1/useBreakPointValue.md create mode 100644 versioned_docs/version-3.2.1/useClipboard.md create mode 100644 versioned_docs/version-3.2.1/useColorMode.md create mode 100644 versioned_docs/version-3.2.1/useColorModeValue.md create mode 100644 versioned_docs/version-3.2.1/useContrastText.md create mode 100644 versioned_docs/version-3.2.1/useDisclosure.md create mode 100644 versioned_docs/version-3.2.1/useMediaQuery.md create mode 100644 versioned_docs/version-3.2.1/useTheme.md create mode 100644 versioned_docs/version-3.2.1/useToken.md create mode 100644 versioned_docs/version-3.2.1/utility-first.mdx create mode 100644 versioned_docs/version-3.2.1/utilityProps.md create mode 100644 versioned_docs/version-3.2.1/utilityPropsSpecificity.md create mode 100644 versioned_docs/version-3.2.1/view.md diff --git a/docs/getting-started.mdx b/docs/getting-started.mdx index 670c72d99..654d0ac26 100644 --- a/docs/getting-started.mdx +++ b/docs/getting-started.mdx @@ -7,87 +7,84 @@ slug: / import { KitchenSinkIframe, TileLink, NBHistory } from '../src/components'; import TOCInline from '@theme/TOCInline'; -
-
-
-

- 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. -

-
-
- - -
-
- - -
- +
+
+

+ 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. +

+
+
+ + +
+
+ +
-
-
-
-

A Brief History of NativeBase

-
- +
+
-

What's New with NativeBase v3?

+

A Brief History of NativeBase

-We had clear goals in mind while building version 3. Take a look at some of the new features we added: +
+ +
-
-

Multiplatform

-
- NativeBase supports multiple platforms; android, iOS and web. You can also - customise properties using platform-specific props. -
-
+

What's New with NativeBase v3?

-
-

Inherently Beautiful

-
- NativeBase ships with a default theme that provides beautiful components, - out of the box. -
-
+ We had clear goals in mind while building version 3. Take a look at some of the new features we added: -
-

Accessible

-
- This version has out of the box accessibility including focus management, - keyboard navigation and more. -
-
+
+

Multiplatform

+
+ NativeBase supports multiple platforms; android, iOS and web. You can also + customise properties using platform-specific props. +
+
-
-

Customisable +
+

Inherently Beautiful

+
+ NativeBase ships with a default theme that provides beautiful components, + out of the box. +
+
+

Accessible

+
+ This version has out of the box accessibility including focus management, + keyboard navigation and more. +
+
-

-
-The default theme can be extended as you desire. You can also customise specific components for your app needs. -
-
+
+

Customisable

+
+ The default theme can be extended as you desire. You can also customise specific components for your app needs. +
+
diff --git a/versioned_docs/version-3.2.1/FAB.md b/versioned_docs/version-3.2.1/FAB.md new file mode 100644 index 000000000..b2da69276 --- /dev/null +++ b/versioned_docs/version-3.2.1/FAB.md @@ -0,0 +1,44 @@ +--- +id: FAB +title: FAB +--- + +import { ComponentTheme } from '../../src/components'; + +A floating action button is a circular icon button that hovers over content to promote a primary action in the application. + +## Import + +```jsx +import { Fab } from 'native-base'; +``` + +## Example + +### Basic + +```ComponentSnackPlayer path=composites,Fab,Basic.tsx + +``` + +### Placement + +```ComponentSnackPlayer path=composites,Fab,Placement.tsx + +``` + +### Custom Position + +```ComponentSnackPlayer path=composites,Fab,CustomPosition.tsx + +``` + +## Styling + + + +## Props + +```ComponentPropTable path=composites,Fab,Fab.tsx + +``` diff --git a/versioned_docs/version-3.2.1/VStack.md b/versioned_docs/version-3.2.1/VStack.md new file mode 100644 index 000000000..94bc25cf0 --- /dev/null +++ b/versioned_docs/version-3.2.1/VStack.md @@ -0,0 +1,24 @@ +--- +id: v-stack +title: VStack / Column +--- + +`VStack` aligns items vertically.`Column` is also an alias for `VStack`. + +## Import + +```jsx +import { VStack } from 'native-base'; +``` + +## Usage + +```ComponentSnackPlayer path=primitives,VStack,basic.tsx + +``` + +## Props + +```ComponentPropTable path=primitives,Stack,VStack.tsx + +``` diff --git a/versioned_docs/version-3.2.1/ZStack.md b/versioned_docs/version-3.2.1/ZStack.md new file mode 100644 index 000000000..1daab38f9 --- /dev/null +++ b/versioned_docs/version-3.2.1/ZStack.md @@ -0,0 +1,28 @@ +--- +id: z-stack +title: ZStack +--- + +`ZStack` aligns items absolutely in the z-axis. + +## Examples + +### Basic + +```ComponentSnackPlayer path=primitives,ZStack,example.tsx + +``` + +### Items Centered + +You can pass `alignItems="center"` `justifyContent="center"` to vertically and horizontally center the children. + +```ComponentSnackPlayer path=primitives,ZStack,CenterStack.tsx + +``` + +## Props + +```ComponentPropTable path=primitives,ZStack,index.tsx + +``` diff --git a/versioned_docs/version-3.2.1/accessibility.md b/versioned_docs/version-3.2.1/accessibility.md new file mode 100644 index 000000000..3ccb492bb --- /dev/null +++ b/versioned_docs/version-3.2.1/accessibility.md @@ -0,0 +1,24 @@ +--- +id: accessibility +title: Accessibility +--- + +NativeBase comes with the latest accessibility standards out of the box including aria and role attributes, focus management, and keyboard navigation. + +## Accessible Roles + +NativeBase uses [React Native ARIA](https://react-native-aria.geekyants.com/) to implements [WAI-ARIA](https://www.w3.org/TR/wai-aria-1.2/) standards to its components. This is designed to provide meaning for controls that aren't built using components provided by the platform. + +## Accessible Labels + +When a view is marked as accessible, it is a good practice to set an `accessibilityLabel` on the view, so that people who use voice-over know what element they have selected. Voice-over will read this string when a user selects the associated element. NativeBase with the use of [React Native ARIA](https://react-native-aria.geekyants.com/) does this for you out of the box. + +## Keyboard Navigation + +Many complex components, like Tabs and Dialog, come with expectations from users on how to interact with their content using a keyboard or other non-mouse input modalities. NativeBase Primitives provide basic keyboard support in accordance with the [WAI-ARIA authoring practices](https://www.w3.org/TR/wai-aria-practices-1.2/). + +## Focus Management + +Proper keyboard navigation and good labelling often go hand-in-hand with managing focus. When a user interacts with a component and something changes as a result, it's often helpful to move focus with the interaction. And for screen reader users, moving focus often results in an announcement to convey the new context, which relies on proper labelling. + +In many NativeBase Components, we move focus based on the interactions a user normally takes in a given component. For example, in `Modal`, when the modal is opened, the focus is programmatically moved to the `first focusable element` and trapped inside the modal to anticipate a response to the prompt. diff --git a/versioned_docs/version-3.2.1/actionSheet.md b/versioned_docs/version-3.2.1/actionSheet.md new file mode 100644 index 000000000..0035b1242 --- /dev/null +++ b/versioned_docs/version-3.2.1/actionSheet.md @@ -0,0 +1,78 @@ +--- +id: action-sheet +title: ActionSheet +--- + +import { ComponentTheme } from '../../src/components'; + +An Action Sheet is a dialog that displays a set of options. It appears on top of the app's content. + +## Import + +NativeBase exports 3 modal-related components: + +- **Actionsheet**: Provides the context and state for all components. +- **Actionsheet.Content**: Component to wrap the list of **Actionsheet.Item** components. +- **Actionsheet.Item**: A button to wrap the options of the Actionsheet. + +```jsx +import { Actionsheet } from 'native-base'; +``` + +## Examples + +### Usage + +```ComponentSnackPlayer path=composites,Actionsheet,Usage.tsx + +``` + +### Composition + +```ComponentSnackPlayer path=composites,Actionsheet,Composition.tsx + +``` + +### DisableOverlay + +```ComponentSnackPlayer path=composites,Actionsheet,DisableOverlay.tsx + +``` + +### Icons + +```ComponentSnackPlayer path=composites,Actionsheet,Icon.tsx + +``` + +## Props + +### Actionsheet + +```ComponentPropTable path=composites,Actionsheet,Actionsheet.tsx + +``` + +### Actionsheet.Content + +```ComponentPropTable path=composites,Actionsheet,ActionsheetContent.tsx + +``` + +### Actionsheet.Item + +ActionsheetItem implements [Button](button.md#props) + +## Styling + + + +## Accessibility + +- ActionSheet has `aria-modal` set to true. +- ActionSheet has `role` set to `dialog`. +- When the ActionSheet opens, focus is trapped within it. +- Pressing Esc closes the ActionSheet. +- When the ActionSheet opens, focus is automatically set to the first enabled element. +- Clicking on the overlay closes the ActionSheet. +- Scrolling is blocked on the elements behind the ActionSheet. diff --git a/versioned_docs/version-3.2.1/alert.md b/versioned_docs/version-3.2.1/alert.md new file mode 100644 index 000000000..1b8c4d293 --- /dev/null +++ b/versioned_docs/version-3.2.1/alert.md @@ -0,0 +1,87 @@ +--- +id: alert +title: Alert +--- + +import { ComponentTheme } from '../../src/components'; + +`Alerts` are used to communicate a state that affects a system, feature or page. + +## Import + +NativeBase exports 5 Alert related components: + +- `Alert`: The wrapper for alert components. +- `Alert.Icon`: The visual icon for the alert that changes based on the `status` prop. + + + +```jsx +import { Alert } from 'native-base'; +``` + +## Examples + +### Basic + +```ComponentSnackPlayer path=composites,Alert,usage.tsx + +``` + +### Status + +```ComponentSnackPlayer path=composites,Alert,status.tsx + +``` + +### Variant + +```ComponentSnackPlayer path=composites,Alert,variant.tsx + +``` + +### Composition + +```ComponentSnackPlayer path=composites,Alert,composition.tsx + +``` + +### Action + +```ComponentSnackPlayer path=composites,Alert,action.tsx + +``` + +## Props + +### Alert + +```ComponentPropTable path=composites,Alert,Alert.tsx + +``` + +### Alert.Icon + +```ComponentPropTable path=composites,Alert,AlertIcon.tsx + +``` + +### Alert.Title + +```ComponentPropTable path=composites,Alert,AlertTitle.tsx + +``` + +### Alert.Description + +```ComponentPropTable path=composites,Alert,AlertDescription.tsx + +``` + +## Styling + + + +## Accessibility + +Alert has `role` set to `alert`. diff --git a/versioned_docs/version-3.2.1/alertDialog.md b/versioned_docs/version-3.2.1/alertDialog.md new file mode 100644 index 000000000..b4f1cfbc0 --- /dev/null +++ b/versioned_docs/version-3.2.1/alertDialog.md @@ -0,0 +1,55 @@ +--- +id: alert-dialog +title: AlertDialog +--- + +import { ComponentTheme } from '../../src/components'; + +`AlertDialog` component is used to interrupt the user with a mandatory confirmation or action. AlertDialog composes [`Modal`](modal.md) so you can use all its props. + +## Import + +- `AlertDialog`: provides context and state for the dialog. +- `AlertDialog.Header`: contains the title announced by screen readers. +- `AlertDialog.Body`: contains the description announced by screen readers. +- `AlertDialog.Footer`: contains the actions of the dialog. +- `AlertDialog.Content`: The wrapper for the alert dialog's content. +- `AlertDialog.CloseButton`: The button that closes the dialog. + +```jsx +import { AlertDialog } from 'native-base'; +``` + +## Examples + +### Basic + +```ComponentSnackPlayer path=composites,AlertDialog,Basic.tsx + +``` + +## Styling + + + +## Props + +AlertDialog and its components compose the **[Modal](modal.md)** component, so all the [`Modal props`](modal.md#props) can be passed to it. The only exception is that it requires `leastDestructiveRef` which is similar to `initialFocusRef` of `Modal`. + +| Name | Type | Description | Default | +| ------------------- | --------- | -------------------------------------------------------------- | ------- | +| leastDestructiveRef | React.Ref | The least destructive action to get focus when dialog is open. | - | + +## Accessibility + +Adheres to the [Alert and Message Dialogs WAI-ARIA design pattern.](https://www.w3.org/TR/wai-aria-practices-1.2/#alertdialog) + +### Keyboard Interactions + +| Name | Description | +| ----------- | --------------------------------------------------------- | +| Space | Opens/closes the dialog. | +| Enter | Opens/closes the dialog. | +| Tab | Moves focus to the next focusable element. | +| Shift + Tab | Moves focus to the previous focusable element. | +| Esc | Closes the dialog and moves focus to AlertDialog.Trigger. | diff --git a/versioned_docs/version-3.2.1/appDrawer.md b/versioned_docs/version-3.2.1/appDrawer.md new file mode 100644 index 000000000..3fa173b72 --- /dev/null +++ b/versioned_docs/version-3.2.1/appDrawer.md @@ -0,0 +1,70 @@ +--- +id: app-drawer +title: App drawer +--- + +Creating an app drawer like layout is very common and with NativeBase's SimpleGrid make this extremely simple while still keeping it extremely customisable. Here is an example to illustrate it. + +```SnackPlayer name=AppDrawer +import React from 'react'; +import { + IconButton, + SimpleGrid, + Icon, + NativeBaseProvider, + Box, +} from 'native-base'; +import { MaterialIcons } from '@expo/vector-icons'; + +function AppDrawer() { + const icons = [ + { name: 'bolt', bg: 'amber.600' }, + { name: 'build', bg: 'emerald.600' }, + { name: 'cloud', bg: 'blue.600' }, + { name: 'delivery-dining', bg: 'orange.600' }, + { name: 'favorite', bg: 'rose.600' }, + { name: 'music-note', bg: 'violet.600' }, + { name: 'invert-colors-on', bg: 'lime.600' }, + { name: 'navigation', bg: 'indigo.600' }, + { name: 'settings', bg: 'pink.600' }, + { name: 'sports-esports', bg: 'coolGray.600' }, + { name: 'shield', bg: 'darkBlue.600' }, + { name: 'photo-camera', bg: 'fuchsia.600' }, + { name: 'network-wifi', bg: 'amber.500' }, + { name: 'nightlight-round', bg: 'violet.800' }, + { name: 'flight', bg: 'blue.800' }, + { name: 'extension', bg: 'indigo.600' }, + { name: 'duo', bg: 'orange.600' }, + { name: 'album', bg: 'rose.600' }, + { name: 'access-alarm', bg: 'emerald.600' }, + { name: 'forum', bg: 'indigo.600' }, + ]; + + return ( + + {icons.map((icon) => ( + + } + /> + ))} + + ); +} + +export default function () { + return ( + + + + + + ); +} + +``` diff --git a/versioned_docs/version-3.2.1/avatar.md b/versioned_docs/version-3.2.1/avatar.md new file mode 100644 index 000000000..dff7875cc --- /dev/null +++ b/versioned_docs/version-3.2.1/avatar.md @@ -0,0 +1,76 @@ +--- +id: avatar +title: Avatar +--- + +import { ComponentTheme } from '../../src/components'; + +`Avatar` component is used to represent a user and it can display a profile picture, initials or a fallback icon. + +## Import + +NativeBase exports 3 avatar-related components: + +- `Avatar`: An image that represents the user. +- `Avatar.Badge`: A wrapper that displays its content on the bottom right corner of the avatar. +- `Avatar.Group`: A wrapper to stack multiple avatars together. + +```jsx +import { Avatar } from 'native-base'; +``` + +## Examples + +### Basic + +```ComponentSnackPlayer path=composites,Avatar,usage.tsx + +``` + +### Sizes + +```ComponentSnackPlayer path=composites,Avatar,size.tsx + +``` + +### Fallbacks + +```ComponentSnackPlayer path=composites,Avatar,Fallback.tsx + +``` + +### Avatar Badge + +```ComponentSnackPlayer path=composites,Avatar,AvatarBadge.tsx + +``` + +### Avatar Group + +```ComponentSnackPlayer path=composites,Avatar,AvatarGroup.tsx + +``` + +## Props + +### Avatar + +```ComponentPropTable path=composites,Avatar,Avatar.tsx + +``` + +### Avatar.Group + +```ComponentPropTable path=composites,Avatar,Group.tsx + +``` + +### Avatar.Badge + +```ComponentPropTable path=composites,Avatar,Badge.tsx + +``` + +## Styling + + diff --git a/versioned_docs/version-3.2.1/badge.md b/versioned_docs/version-3.2.1/badge.md new file mode 100644 index 000000000..607a80451 --- /dev/null +++ b/versioned_docs/version-3.2.1/badge.md @@ -0,0 +1,50 @@ +--- +id: badge +title: Badge +--- + +import { ComponentTheme } from '../../src/components'; + +`Badges` are used to highlight an item's status for quick recognition. + +## Import + +```jsx +import { Badge } from 'native-base'; +``` + +## Examples + +### Basic + +```ComponentSnackPlayer path=composites,Badge,usage.tsx + +``` + +### Color Scheme + +```ComponentSnackPlayer path=composites,Badge,color.tsx + +``` + +### Variants + +```ComponentSnackPlayer path=composites,Badge,variants.tsx + +``` + +### Composition + +```ComponentSnackPlayer path=composites,Badge,composition.tsx + +``` + +## Props + +```ComponentPropTable path=composites,Badge,index.tsx + +``` + +## Styling + + diff --git a/versioned_docs/version-3.2.1/box.md b/versioned_docs/version-3.2.1/box.md new file mode 100644 index 000000000..fd38a7ed2 --- /dev/null +++ b/versioned_docs/version-3.2.1/box.md @@ -0,0 +1,139 @@ +--- +id: box +title: Box +--- + +This is a generic component for low level layout needs. It is similar to a [`div`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/div) in HTML. + +## Example + +### Basic + +```ComponentSnackPlayer path=primitives,Box,basic.tsx + +``` + +
+ +### Composition + +```ComponentSnackPlayer path=primitives,Box,composition.tsx + +``` + +
+ +### With Linear gradient + +If you're using [Expo](https://docs.expo.io/) managed or bare workflow, you can install [expo-linear-gradient](https://docs.expo.io/versions/latest/sdk/linear-gradient/) and configure it in the [NativeBaseProvider](setup-provider#add-external-dependencies-optional) as shown below. + +```SnackPlayer name=LinearGradient +import React from "react" +import { Box, Center, NativeBaseProvider } from "native-base" + +export const Example = () => { + return ( + + This is a Box with Linear Gradient + + ) +} + +const config = { + dependencies: { + 'linear-gradient': require('expo-linear-gradient').LinearGradient + } +} + +export default () => { + return ( + +
+ +
+ + ) +} +``` + +
+ +If you're not using Expo, you can install [react-native-linear-gradient](https://www.npmjs.com/package/react-native-linear-gradient) and configure in the [NativeBaseProvider](setup-provider#add-external-dependencies-optional) as shown below. + +```jsx +import React from 'react'; +import { Box, NativeBaseProvider } from 'native-base'; + +const Example = () => { + return ( + + This is a Box with Linear Gradient + + ); +}; + +const config = { + dependencies: { + 'linear-gradient': require('react-native-linear-gradient').default, + }, +}; + +export default () => { + return ( + + + + ); +}; +``` + +
+ +### Basic (With Ref) + +```ComponentSnackPlayer path=primitives,Box,WithRef.tsx + +``` + +
+
+ +:::tip Common use cases for Box component are: + +- Create responsive layouts with ease. +- Provide a shorthand to pass styles via props (`bg` instead of `backgroundColor`). + +::: + +## Props + +```ComponentPropTable path=primitives,Box,index.tsx showStylingProps=true + +``` diff --git a/versioned_docs/version-3.2.1/breakpoints.md b/versioned_docs/version-3.2.1/breakpoints.md new file mode 100644 index 000000000..563075139 --- /dev/null +++ b/versioned_docs/version-3.2.1/breakpoints.md @@ -0,0 +1,131 @@ +--- +id: breakpoints +title: Breakpoints +--- + +Breakpoints are the building blocks of responsive design. Use them to control when your layout can be adapted at a particular viewport or device size. + +NativeBase provides these default breakpoints and you can update with using extendTheme. + +```tsx +breakpoints = { + base: 0, + sm: 480, + md: 768, + lg: 992, + xl: 1280, +}; +``` + +`useBreakpointValue` is a custom hook which returns the value for the current breakpoint from the provided responsive values object. This hook also responds to the window resizing and returning the appropriate value for the new window size. + +```SnackPlayer name=useBreakpointValue +import React from 'react'; +import { + Factory, + Button, + Stack, + NativeBaseProvider, + Center, +} from 'native-base'; +import { TextInput } from 'react-native'; + +import { Icon, useBreakpointValue, Text, VStack, Heading } from 'native-base'; +import { FontAwesome, Foundation, Feather } from '@expo/vector-icons'; +import { View } from 'react-native'; + +export const UseBreakpointValueExample = () => { + const flexDir = useBreakpointValue({ + base: 'column', + lg: 'row', + }); + return ( + + Why us? + + + + + Secure Checkout + + + + + + Secure Checkout + + + + + + Fast Turn Around + + + + + ); +}; + +// Example template which wraps component with NativeBaseProvider +export default function () { + return ( + +
+ +
+ + ); +} + +``` diff --git a/versioned_docs/version-3.2.1/buildingAppBar.md b/versioned_docs/version-3.2.1/buildingAppBar.md new file mode 100644 index 000000000..463c93df3 --- /dev/null +++ b/versioned_docs/version-3.2.1/buildingAppBar.md @@ -0,0 +1,48 @@ +--- +id: building-app-bar +title: AppBar +--- + +The top app bar provides content and actions related to the current screen. It’s used for branding, screen titles, navigation, and actions. + +## Example + +We can easily create it using basic layout components from NativeBase. + +```SnackPlayer name=App%20Bar +import React from "react"; +import { VStack, HStack, Button, IconButton, Icon, Text, NativeBaseProvider, Center, Box, StatusBar } from "native-base"; +import { MaterialIcons } from '@expo/vector-icons'; + +function AppBar(){ + return ( + <> + + + + + + + } color="white" />} /> + Home + + + } size='sm' color="white" />} /> + } + color="white" size='sm' />} /> + } size='sm' color="white" />} /> + + + + + ) +} + +export default function () { + return ( + + + + ); +} +``` diff --git a/versioned_docs/version-3.2.1/buildingDrawerNavigation.md b/versioned_docs/version-3.2.1/buildingDrawerNavigation.md new file mode 100644 index 000000000..aa78a13c7 --- /dev/null +++ b/versioned_docs/version-3.2.1/buildingDrawerNavigation.md @@ -0,0 +1,174 @@ +--- +id: building-drawer-navigation +title: Drawer Navigation +--- + +Common pattern in navigation is to use drawer from left (sometimes right) side for navigating between screens. + +## Example + +Here is an example to show how easily and quickly we can use React Native's [DrawerNavigation](https://reactnavigation.org/docs/drawer-based-navigation/) in NB. + +```SnackPlayer name=Drawer-Navigation dependencies=@react-navigation/stack@5.1.0,@react-navigation/drawer,@react-navigation/native@5.0.8,react-native-vector-icons,react-native-gesture-handler@1.10.2,react-native-linear-gradient,@react-native-community/masked-view@0.1.10,react-native-screens@3.0.0,react-native-reanimated@2.1.0 +import * as React from 'react'; +import { NavigationContainer } from '@react-navigation/native'; +import { + createDrawerNavigator, + DrawerContentScrollView, +} from '@react-navigation/drawer'; +import { + MaterialCommunityIcons +} from '@expo/vector-icons'; +import { + NativeBaseProvider, + Button, + Box, + HamburgerIcon, + Pressable, + Heading, + VStack, + Text, + Center, + HStack, + Divider, + Icon +} from 'native-base'; +const Drawer = createDrawerNavigator(); +function Component(props) { + return ( + + props.navigation.toggleDrawer()} position="absolute" ml="2" zIndex="1"> + + +
+ {props.route.name} +
+ + ); +} + +const getIcon = (screenName) => { + switch (screenName) { + case 'Inbox': + return "email" + case 'Outbox': + return 'send' + case 'Favorites': + return 'heart' + case 'Archive': + return 'archive' + case 'Trash': + return 'trash-can' + case 'Spam': + return 'alert-circle' + default: + return undefined + } +} + +function CustomDrawerContent(props) { + return ( + + + + Mail + john_doe@gmail.com + + } space="4"> + + {props.state.routeNames.map((name, index) => ( + { + props.navigation.navigate(name); + }} + > + + } /> + + {name} + + + + ))} + + + Labels + + + + } /> + + Family + + + + + + } /> + + Friends + + + + + + } /> + + Work + + + + + + + + + ); +} +function MyDrawer() { + return ( + + } + > + + + + + + + + + ); +} +export default function App() { + return ( + + + + + + ); +} +``` diff --git a/versioned_docs/version-3.2.1/buildingFooterTabs.md b/versioned_docs/version-3.2.1/buildingFooterTabs.md new file mode 100644 index 000000000..4a4e7f597 --- /dev/null +++ b/versioned_docs/version-3.2.1/buildingFooterTabs.md @@ -0,0 +1,131 @@ +--- +id: building-footer-tabs +title: Footer +--- + +With NativeBase v3 we have removed FooterTab components because as it's very simple to create it using HStack component. Here is an example of how we can make Footer in our Apps. + +## Example + +```SnackPlayer name=Footer dependencies=react-native-linear-gradient + +import React from 'react'; +import { + NativeBaseProvider, + Box, + Text, + Heading, + VStack, + FormControl, + Input, + Link, + Button, + Icon, + HStack, + Center, + Pressable, +} from 'native-base'; +import { MaterialCommunityIcons, MaterialIcons } from '@expo/vector-icons'; + +export default function App() { + const [selected, setSelected] = React.useState(1); + return ( + + +
+ + setSelected(0)}> +
+ + } + color="white" + size="sm" + /> + + Home + +
+ + setSelected(1)} + > +
+ } + color="white" + size="sm" + /> + + Search + +
+ + setSelected(2)} + > +
+ + } + color="white" + size="sm" + /> + + Cart + +
+ + setSelected(3)} + > +
+ + } + color="white" + size="sm" + /> + + Account + +
+ + + + + ); +} + + +``` diff --git a/versioned_docs/version-3.2.1/buildingSearchBar.md b/versioned_docs/version-3.2.1/buildingSearchBar.md new file mode 100644 index 000000000..ee8651d84 --- /dev/null +++ b/versioned_docs/version-3.2.1/buildingSearchBar.md @@ -0,0 +1,117 @@ +--- +id: building-search-bar +title: SearchBar +--- + +Search-bar are one of the most commonly seen variation of input. Here are design to make life easier. + +## Example + +Here are some examples to show how easily and quickly we can create so many types of search-bars. + + + +```SnackPlayer name=Search%20Bar +import React from 'react'; +import { + VStack, + Input, + Button, + IconButton, + Icon, + Text, + NativeBaseProvider, + Center, + Box, + Divider, + Heading, +} from 'native-base'; +import { Ionicons, MaterialIcons } from '@expo/vector-icons'; +import { FontAwesome5 } from '@expo/vector-icons'; + +function SearchBar() { + return ( + + + + }> + + Cupertino + } + /> + } + /> + + + + Material + } + /> + } + InputRightElement={ + } + /> + } + /> + + + ); +} + +export default function () { + return ( + +
+ +
+ + ); +} + +``` diff --git a/versioned_docs/version-3.2.1/buildingSwipeList.md b/versioned_docs/version-3.2.1/buildingSwipeList.md new file mode 100644 index 000000000..4e44901a3 --- /dev/null +++ b/versioned_docs/version-3.2.1/buildingSwipeList.md @@ -0,0 +1,195 @@ +--- +id: building-swipe-list +title: Swipe List +--- + +SwipeListView is a vertical ListView with rows that swipe open and closed. Handles default native behavior such as closing rows when ListView is scrolled or when other rows are opened. + +## Example + +Here is an example to show how easily and quickly we can use [react-native-swipe-list](https://www.npmjs.com/package/react-native-swipe-list-view) in NativeBase. + +```SnackPlayer name=SwipeList dependencies=react-native-swipe-list-view + +import React, { useState } from 'react'; +import { Dimensions, TouchableOpacity, View } from 'react-native'; + +import { + NativeBaseProvider, + Box, + Text, + Pressable, + Heading, + IconButton, + Icon, + HStack, + Avatar, + VStack, + Spacer, +} from 'native-base'; +import { SwipeListView } from 'react-native-swipe-list-view'; +import { MaterialIcons, Ionicons, Entypo } from '@expo/vector-icons'; + +export default function App() { + const [mode, setMode] = useState('Basic'); + + return ( + + + + Inbox + + + + + ); +} + +function Basic() { + const data = [ + { + id: 'bd7acbea-c1b1-46c2-aed5-3ad53abb28ba', + fullName: 'Afreen Khan', + timeStamp: '12:47 PM', + recentText: 'Good Day!', + avatarUrl: + 'https://images.pexels.com/photos/220453/pexels-photo-220453.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500', + }, + { + id: '3ac68afc-c605-48d3-a4f8-fbd91aa97f63', + fullName: 'Sujita Mathur', + timeStamp: '11:11 PM', + recentText: 'Cheer up, there!', + avatarUrl: + 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTyEaZqT3fHeNrPGcnjLLX1v_W4mvBlgpwxnA&usqp=CAU', + }, + { + id: '58694a0f-3da1-471f-bd96-145571e29d72', + fullName: 'Anci Barroco', + timeStamp: '6:22 PM', + recentText: 'Good Day!', + avatarUrl: 'https://miro.medium.com/max/1400/0*0fClPmIScV5pTLoE.jpg', + }, + { + id: '68694a0f-3da1-431f-bd56-142371e29d72', + fullName: 'Aniket Kumar', + timeStamp: '8:56 PM', + recentText: 'All the best', + avatarUrl: + 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSr01zI37DYuR8bMV5exWQBSw28C1v_71CAh8d7GP1mplcmTgQA6Q66Oo--QedAN1B4E1k&usqp=CAU', + }, + { + id: '28694a0f-3da1-471f-bd96-142456e29d72', + fullName: 'Kiara', + timeStamp: '12:47 PM', + recentText: 'I will call today.', + avatarUrl: + 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRBwgu1A5zgPSvfE83nurkuzNEoXs9DMNr8Ww&usqp=CAU', + }, + ]; + + const [listData, setListData] = useState(data); + + const closeRow = (rowMap, rowKey) => { + if (rowMap[rowKey]) { + rowMap[rowKey].closeRow(); + } + }; + + const deleteRow = (rowMap, rowKey) => { + closeRow(rowMap, rowKey); + const newData = [...listData]; + const prevIndex = listData.findIndex((item) => item.key === rowKey); + newData.splice(prevIndex, 1); + setListData(newData); + }; + + const onRowDidOpen = (rowKey) => { + console.log('This row opened', rowKey); + }; + + const renderItem = ({ item, index }) => ( + + console.log('You touched me')} bg="white"> + + + + + + {item.fullName} + + {item.recentText} + + + + {item.timeStamp} + + + + + + ); + + const renderHiddenItem = (data, rowMap) => ( + + closeRow(rowMap, data.item.key)} + _pressed={{ + opacity: 0.5, + }}> + + } + size="xs" + color="coolGray.800" + /> + + More + + + + deleteRow(rowMap, data.item.key)} + _pressed={{ + opacity: 0.5, + }}> + + } color="white" size="xs" /> + + Delete + + + + + ); + + return ( + + + + ); +} + +``` diff --git a/versioned_docs/version-3.2.1/buildingTabView.md b/versioned_docs/version-3.2.1/buildingTabView.md new file mode 100644 index 000000000..e6ce91847 --- /dev/null +++ b/versioned_docs/version-3.2.1/buildingTabView.md @@ -0,0 +1,106 @@ +--- +id: building-tab-view +title: Tab View +--- + +A cross-platform Tab View component for React Native + +## Example + +Here is an example to show how easily and quickly we can use [react-native-tab-view](https://www.npmjs.com/package/react-native-tab-view) in NB. + +```SnackPlayer name=TabView dependencies=react-native-linear-gradient,react-native-tab-view,react-native-pager-view@5.0.12 + +import * as React from 'react'; +import { + View, + StyleSheet, + Dimensions, + StatusBar, + TouchableOpacity, + Animated, + Pressable, +} from 'react-native'; +import { TabView, SceneMap } from 'react-native-tab-view'; +import { NativeBaseProvider, Box, Text, Center } from 'native-base'; +import Constants from 'expo-constants'; + +const FirstRoute = () =>
This is Tab 1
; + +const SecondRoute = () =>
This is Tab 2
; + +const ThirdRoute = () =>
This is Tab 3
; + +const FourthRoute = () =>
This is Tab 4
; + +const initialLayout = { width: Dimensions.get('window').width }; + +const renderScene = SceneMap({ + first: FirstRoute, + second: SecondRoute, + third: ThirdRoute, + fourth: FourthRoute, +}); + +export default function TabViewExample() { + const [index, setIndex] = React.useState(0); + const [routes] = React.useState([ + { key: 'first', title: 'Tab 1' }, + { key: 'second', title: 'Tab 2' }, + { key: 'third', title: 'Tab 3' }, + { key: 'fourth', title: 'Tab 4' }, + ]); + + const renderTabBar = (props) => { + const inputRange = props.navigationState.routes.map((x, i) => i); + return ( + + {props.navigationState.routes.map((route, i) => { + const opacity = props.position.interpolate({ + inputRange, + outputRange: inputRange.map((inputIndex) => + inputIndex === i ? 1 : 0.5 + ), + }); + const color = index === i ? '#1f2937' : '#a1a1aa'; + const borderColor = index === i ? 'cyan.500' : 'coolGray.200'; + + return ( + + { + console.log(i); + setIndex(i); + }}> + {route.title} + + + ); + })} + + ); + }; + + return ( + + + + ); +} + + + +``` diff --git a/versioned_docs/version-3.2.1/builldingCard.md b/versioned_docs/version-3.2.1/builldingCard.md new file mode 100644 index 000000000..aab840b4b --- /dev/null +++ b/versioned_docs/version-3.2.1/builldingCard.md @@ -0,0 +1,104 @@ +--- +id: building-card +title: Card +--- + +A card is a flexible and extensible content container. It comes in caries shapes and sizes and here we'll make few of them. + +## Most Commonly used design + +This card design widely used where the Header consist of Avatar, accompanied by the Title and Sub-title. + +Followed by the image which flows till the very edge. + +And lastly a description. + +```SnackPlayer name=Card +import React from "react"; +import { + Box, + Heading, + Icon, + AspectRatio, + Image, + Text, + Center, + HStack, + Stack, + NativeBaseProvider +} from 'native-base'; +import { MaterialIcons, Ionicons } from '@expo/vector-icons'; + +function CardComponent(){ + return( + + + + image + +
+ PHOTOS +
+ + + + + The Garden City + + + The Silicon Valley of India. + + + + Bengaluru (also called Bangalore) is the center of India's high-tech + industry. The city is also known for its parks and nightlife. + + + + + 6 mins ago + + + + + + ); +} + +export default function () { + return ( + +
+ +
+ + ); +} +``` diff --git a/versioned_docs/version-3.2.1/button.mdx b/versioned_docs/version-3.2.1/button.mdx new file mode 100644 index 000000000..4d2260a91 --- /dev/null +++ b/versioned_docs/version-3.2.1/button.mdx @@ -0,0 +1,84 @@ +--- +id: button +title: Button +--- + +import { ComponentTheme } from '../../src/components'; + +The `Button` component is used to trigger an action or event. + +## Import + +```jsx +import { Button, ButtonGroup } from 'native-base'; +``` + +- **Button** : The button component with support for custom icons, spinners, etc. +- **ButtonGroup** : Used to group buttons whose actions are related, with an option to flush them together. + +## Examples + +### Basic + +```ComponentSnackPlayer path=primitives,Button,basic.tsx + +``` + +### Sizes + +```ComponentSnackPlayer path=primitives,Button,sizes.tsx + +``` + +### Variants + +```ComponentSnackPlayer path=primitives,Button,variants.tsx + +``` + +### Loading + +```ComponentSnackPlayer path=primitives,Button,loading.tsx + +``` + +### Icons + +```ComponentSnackPlayer path=primitives,Button,icons.tsx + +``` + +### ButtonGroup + +```ComponentSnackPlayer path=primitives,ButtonGroup,basic.tsx + +``` + +### Basic (With Ref) + +```ComponentSnackPlayer path=primitives,Button,WithRef.tsx + +``` + +## Props + +### Button + +```ComponentPropTable path=primitives,Button,Button.tsx + +``` + +### ButtonGroup + +```ComponentPropTable path=primitives,Button,ButtonGroup.tsx + +``` + +## Styling + + + +## Accessibility + +- Button has `role` set to [button](https://www.w3.org/TR/wai-aria-practices-1.2/#button). +- When Button has focus, Space or Enter activates it. diff --git a/versioned_docs/version-3.2.1/center.md b/versioned_docs/version-3.2.1/center.md new file mode 100644 index 000000000..af1b45de7 --- /dev/null +++ b/versioned_docs/version-3.2.1/center.md @@ -0,0 +1,48 @@ +--- +id: center +title: Center +--- + +`Center` is a layout component that centers its child within itself. + +## **Import** + +```jsx +import { Center, Square, Circle } from 'native-base'; +``` + +- **Center:** Centers its child, pass `width` and `height` +- **Square:** `Center` but we need to pass `size` (width and height) +- **Circle:** `Center` with round `borderRadius`, pass `size` (width and height) + +## Examples + +### Basic + +Put any child element inside it, give it any width or/and height. It'll ensure the child is centered. + +```ComponentSnackPlayer path=composites,Center,Basic.tsx + +``` + +### Icon frames + +Center can be used to nicely position icons in the center and add frames around them. + +```ComponentSnackPlayer path=composites,Center,WithIcons.tsx + +``` + +### Square and Circle + +Square and Circle automatically centers their children. + +```ComponentSnackPlayer path=composites,Center,SquareCircle.tsx + +``` + +## Props + +```ComponentPropTable path=composites,Center,Center.tsx + +``` diff --git a/versioned_docs/version-3.2.1/changelog.md b/versioned_docs/version-3.2.1/changelog.md new file mode 100644 index 000000000..417a3a41e --- /dev/null +++ b/versioned_docs/version-3.2.1/changelog.md @@ -0,0 +1,32 @@ +--- +id: changelog +title: Changelog +--- + +## Features + +TypeScript enhancement for custom theme tokens and variants - https://github.com/GeekyAnts/NativeBase/pull/4173 + +## Fixes + +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). diff --git a/versioned_docs/version-3.2.1/checkBox.md b/versioned_docs/version-3.2.1/checkBox.md new file mode 100644 index 000000000..10ee1772f --- /dev/null +++ b/versioned_docs/version-3.2.1/checkBox.md @@ -0,0 +1,104 @@ +--- +id: checkbox +title: CheckBox +--- + +import { ComponentTheme } from '../../src/components'; + +The `Checkbox` component is used in forms when a user needs to select multiple values from several options. + +## Examples + +### Basic + +```ComponentSnackPlayer path=primitives,Checkbox,basic.tsx + +``` + +### Controlled + +```ComponentSnackPlayer path=primitives,Checkbox,controlledCheckbox.tsx + +``` + +### Uncontrolled + +```ComponentSnackPlayer path=primitives,Checkbox,uncontrolledCheckbox.tsx + +``` + +### Disabled + +```ComponentSnackPlayer path=primitives,Checkbox,disabled.tsx + +``` + +### Invalid + +```ComponentSnackPlayer path=primitives,Checkbox,invalid.tsx + +``` + +### Custom Color + +```ComponentSnackPlayer path=primitives,Checkbox,customColor.tsx + +``` + +### Custom Icon + +```ComponentSnackPlayer path=primitives,Checkbox,customIcon.tsx + +``` + +### Size + +```ComponentSnackPlayer path=primitives,Checkbox,size.tsx + +``` + +### Checkbox Group + +```ComponentSnackPlayer path=primitives,Checkbox,checkboxGroup.tsx + +``` + +### Form Controlled + +```ComponentSnackPlayer path=primitives,Checkbox,FormControlled.tsx + +``` + +### Basic (With Ref) + +```ComponentSnackPlayer path=primitives,Checkbox,withRef.tsx + +``` + +## Props + +### Checkbox + +```ComponentPropTable path=primitives,Checkbox,Checkbox.tsx + +``` + +### Checkbox.Group + +```ComponentPropTable path=primitives,Checkbox,CheckboxGroup.tsx + +``` + +## Styling + + + +## Accessibility + +Uses React Native ARIA [@react-native-aria/checkbox](https://react-native-aria.geekyants.com/docs/useCheckbox) which follows the [Checkbox WAI-ARIA design pattern](https://www.w3.org/TR/wai-aria-practices-1.2/#checkbox). + +### Keyboard Interactions + +| Key | Description | +| ------- | ----------------------------- | +| `Space` | Checks/unchecks the checkbox. | diff --git a/versioned_docs/version-3.2.1/colorMode.md b/versioned_docs/version-3.2.1/colorMode.md new file mode 100644 index 000000000..e24285266 --- /dev/null +++ b/versioned_docs/version-3.2.1/colorMode.md @@ -0,0 +1,163 @@ +--- +id: color-mode +title: Color mode (Dark Mode) +--- + +When you use the `NativebaseProvider` at the root of your app, you can automatically use color mode in your apps. + +By default, most components are dark mode compatible. To handle color mode manually in your application, use the `useColorMode` or `useColorModeValue` hooks. + +## useColorMode + +`useColorMode` is a React hook that gives you access to the current color mode, and a function to toggle the color mode. + +Calling toggleColorMode anywhere in your app tree toggles the color mode. + +## useColorModeValue + +`useColorModeValue` is a React hook used to change any value or style based on the color mode. It takes 2 arguments: the value in light mode, and the value in dark mode. + +```SnackPlayer name=ColorMode%20Usage +import React from 'react'; +import { + Heading, + useColorMode, + Button, + HStack, + Avatar, + Center, + useColorModeValue, + Text, + NativeBaseProvider, +} from 'native-base'; + +function ColorModeExample() { + const { colorMode, toggleColorMode } = useColorMode(); + return ( +
+ + The active color mode is{' '} + + {useColorModeValue('Light', 'Dark')} + + + +
+ ); +} + +export default function () { + return ( + + + + ); +} + +``` + +## \_light and \_dark Pseudo props + +All components accepts \_light and \_dark props which applies the passed props on dark and light mode. + +```SnackPlayer name=PseudoProps%20Usage +import React from 'react'; +import { + Heading, + useColorMode, + Button, + HStack, + Avatar, + Center, + useColorModeValue, + Text, + NativeBaseProvider, +} from 'native-base'; + +function PseudoPropsUsage() { + const { colorMode, toggleColorMode } = useColorMode(); + return ( +
+ + The active color mode is{' '} + + {colorMode} + + + +
+ ); +} + +export default function () { + return ( + + + + ); +} + +``` + +## Default color mode + +You can set default color mode. By default, the color mode will be `light`. To support this, extend the default theme with a `config` + +```jsx +import { NativeBaseProvider, extendTheme, Text } from 'native-base'; + +// Define the config +const config = { + useSystemColorMode: false, + initialColorMode: 'dark', +}; + +// extend the theme +const customTheme = extendTheme({ config }); +function App() { + return ( + // pass itto NativeBaseProvider + + // Your component + + ); +} +``` + +## Persisting the color mode + +You can persist the color mode in you app by defining you color mode manager of type `StorageManager` and passing it to the NativeBaseProvider. This will retain the color mode even when the app is refreshed. + +```jsx +import React from 'react'; +import { NativeBaseProvider, StorageManager, ColorMode } from 'native-base'; +import AsyncStorage from '@react-native-async-storage/async-storage'; + +// Define the colorModeManager, +// here we are using react-native-async-storage (https://react-native-async-storage.github.io/async-storage/) +const colorModeManager: StorageManager = { + get: async () => { + try { + let val = await AsyncStorage.getItem('@color-mode'); + return val === 'dark' ? 'dark' : 'light'; + } catch (e) { + return 'light'; + } + }, + set: async (value: ColorMode) => { + try { + await AsyncStorage.setItem('@color-mode', value); + } catch (e) { + console.log(e); + } + }, +}; +export default function () { + return ( + // pass it to NativeBaseProvider + + // Your components + + ); +} +``` diff --git a/versioned_docs/version-3.2.1/container.md b/versioned_docs/version-3.2.1/container.md new file mode 100644 index 000000000..9938207f4 --- /dev/null +++ b/versioned_docs/version-3.2.1/container.md @@ -0,0 +1,56 @@ +--- +id: container +title: Container +--- + +The `Container` is used to constrain a content's width to the current breakpoint, while keeping it fluid. + +## Implements + +- [`Box`](box.md) + +## Usage + +To include content, wrap it in the Container component. + +## Example + +```SnackPlayer name=Container%20Example +import React from 'react'; +import { Container, Text, Heading, NativeBaseProvider, Center } from 'native-base'; +function ContainerComponent() { + return ( + + + A component library for the + React Ecosystem + + + NativeBase is a simple, modular and accessible component library that + gives you building blocks to build you React applications. + + + ); +} + +// Example template which wraps component with NativeBaseProvider +export default function () { + return ( + +
+ +
+ + ); +} +``` + +## Props + +**Container** implements **[Box](box.md)**, so all the Box Props can be passed to it. + +### Container + +| Name | Type | Description | Default | +| ------------- | ------- | --------------------------------------------------------- | ------- | +| centerContent | boolean | It'll center child elements based on their content width. | true | diff --git a/versioned_docs/version-3.2.1/customizingComponents.md b/versioned_docs/version-3.2.1/customizingComponents.md new file mode 100644 index 000000000..da9c028c6 --- /dev/null +++ b/versioned_docs/version-3.2.1/customizingComponents.md @@ -0,0 +1,160 @@ +--- +id: customizing-components +title: Customizing Components +--- + +Theme customisation is at the heart of NativeBase. Using NativeBase's `extendTheme` function, we can customise components. + +Components can be customised by overriding baseStyle/defaultProps or adding a new variant. + +Let's customise a Button component to include rounded borders and red colorScheme. + +## Basic + +```tsx +import React from 'react'; +import { NativeBaseProvider, extendTheme } from 'native-base'; + +export default function () { + const theme = extendTheme({ + components: { + Button: { + // Can simply pass default props to change default behaviour of components. + baseStyle: { + rounded: 'md', + }, + defaultProps: { + colorScheme: 'red', + }, + }, + Heading: { + // Can pass also function, giving you access theming tools + baseStyle: ({ colorMode }) => { + return { + color: colorMode === 'dark' ? 'red.300' : 'blue.300', + fontWeight: 'normal', + }; + }, + }, + }, + }); + return ( + {/* components */} + ); +} +``` + +As shown above, we can customize components by passing the **components** object with the **key** being the **name** of the **component**. Whereas you set `defaultProps` or `baseStyle` to customize the components. + +### Difference between baseStyle and defaultProps? + +#### Base Style + +- As the name suggests, it's used to define the base style of a component. +- Base style can be a function or a plain object. Use function if you want to get access to defaultProps, current colorMode (light/dark) and theme object. + +Take a look at an [example here](https://github.com/GeekyAnts/NativeBase/blob/v3.1.0/src/theme/components/button.ts#L5). + +#### Default Props + +- Default props can be used to initialize props of a component. +- For e.g. You have a Button component and it has 2 variants. i.e. outline, solid. You can use it like. + +Take a look at an [example here](https://github.com/GeekyAnts/NativeBase/blob/v3.1.0/src/theme/components/button.ts#L201). + +```jsx + + + + + + ); +} + +``` + +
+ +NativeBase ships with default styles for each components. [You can find it here](https://github.com/GeekyAnts/NativeBase/tree/v3.1.0/src/theme/components). diff --git a/versioned_docs/version-3.2.1/customizingFonts.md b/versioned_docs/version-3.2.1/customizingFonts.md new file mode 100644 index 000000000..c8ade5f00 --- /dev/null +++ b/versioned_docs/version-3.2.1/customizingFonts.md @@ -0,0 +1,87 @@ +--- +id: customizing-fonts +title: Customizing Fonts +--- + +Follow 3 simple steps to add a custom font family. + +### Loading fonts in Expo or React Native init project. + +[Refer this guide if you're using Expo](https://docs.expo.io/guides/using-custom-fonts/) + +[Refer this guide if you're using React Native init](https://medium.com/@aravindmnair/add-custom-fonts-to-react-native-0-60-easily-in-3-steps-fcd71459f4c9) + +### Extend NativeBase theme object. + +We extend the theme object and override `fontConfig` and `fonts` properties which define the mappings. + +This mapping is needed to make sure fontWeight, fontStyle properties work in all platforms. + +```jsx +import { NativeBaseProvider, extendTheme } from 'native-base'; + +const theme = extendTheme({ + fontConfig: { + Roboto: { + 100: { + normal: 'Roboto-Light', + italic: 'Roboto-LightItalic', + }, + 200: { + normal: 'Roboto-Light', + italic: 'Roboto-LightItalic', + }, + 300: { + normal: 'Roboto-Light', + italic: 'Roboto-LightItalic', + }, + 400: { + normal: 'Roboto-Regular', + italic: 'Roboto-Italic', + }, + 500: { + normal: 'Roboto-Medium', + }, + 600: { + normal: 'Roboto-Medium', + italic: 'Roboto-MediumItalic', + }, + // Add more variants + // 700: { + // normal: 'Roboto-Bold', + // }, + // 800: { + // normal: 'Roboto-Bold', + // italic: 'Roboto-BoldItalic', + // }, + // 900: { + // normal: 'Roboto-Bold', + // italic: 'Roboto-BoldItalic', + // }, + }, + }, + + // Make sure values below matches any of the keys in `fontConfig` + fonts: { + heading: 'Roboto', + body: 'Roboto', + mono: 'Roboto', + }, +}); + +export default function App() { + return ( + + + + ); +} +``` + +### Using fonts + +Fonts can be used as shown below. The below `Text` will be rendered in `Roboto-MediumItalic` font family. + +```jsx + +``` diff --git a/versioned_docs/version-3.2.1/customizingTheme.md b/versioned_docs/version-3.2.1/customizingTheme.md new file mode 100644 index 000000000..34e5bd136 --- /dev/null +++ b/versioned_docs/version-3.2.1/customizingTheme.md @@ -0,0 +1,108 @@ +--- +id: customizing-theme +title: Customizing Theme +--- + +import { NativeBaseProvider, Box } from 'native-base'; + +Theme is one core elements of NativeBase. You can customize NativeBase's theme as per your liking. NativeBase theme is complex object which looks like + +```tsx +// theme +{ + colors: {...}, + fontSizes: {...}, + fonts: {...}, + . + . + . + config: {...}, +} +``` + +It has many [other properties](default-theme) but in this recipe, we'll only update few of them (namely colors, fonts, and config) using NativeBase's `extendTheme` function. + +```tsx +import React from 'react'; +import { NativeBaseProvider, extendTheme } from 'native-base'; +import { Content } from './Content'; + +export default function () { + const theme = extendTheme({ + colors: { + // Add new color + primary: { + 50: '#E3F2F9', + 100: '#C5E4F3', + 200: '#A2D4EC', + 300: '#7AC1E4', + 400: '#47A9DA', + 500: '#0088CC', + 600: '#007AB8', + 700: '#006BA1', + 800: '#005885', + 900: '#003F5E', + }, + // Redefinig only one shade, rest of the color will remain same. + amber: { + 400: '#d97706', + }, + }, + config: { + // Changing initialColorMode to 'dark' + initialColorMode: 'dark', + }, + }); + + return ( + + + + ); +} +``` + +In the above example, the following changes have been made: + +- Added a new color named **primary**. +- Updated one of the shade of **amber** color. +- Updated the initial color mode to **dark**. Default is **light**. +- Finally passed the new **theme** object to the **NativeBaseProvider**. + +### Using the new tokens in components + +```jsx live +function App() { + const theme = extendTheme({ + colors: { + // Add new color + primary: { + 50: '#E3F2F9', + 100: '#C5E4F3', + 200: '#A2D4EC', + 300: '#7AC1E4', + 400: '#47A9DA', + 500: '#0088CC', + 600: '#007AB8', + 700: '#006BA1', + 800: '#005885', + 900: '#003F5E', + }, + // Redefinig only one shade, rest of the color will remain same. + amber: { + 400: '#d97706', + }, + }, + config: { + // Changing initialColorMode to 'dark' + initialColorMode: 'dark', + }, + }); + + return ( + + + + ); +} +``` diff --git a/versioned_docs/version-3.2.1/darkMode.md b/versioned_docs/version-3.2.1/darkMode.md new file mode 100644 index 000000000..1c427554a --- /dev/null +++ b/versioned_docs/version-3.2.1/darkMode.md @@ -0,0 +1,89 @@ +--- +id: dark-mode +title: Making components dark mode compatible +--- + +By default, most of NativeBase's components are dark mode compatible. In some scenario, you might need to make your component respond to color mode. There are 2 way to achieve this: + +1. By updating component's theme +2. By using useColorModeValue + +## 1. By updating component's theme + +In this approach we use NativeBase's `extendTheme` function to customise the components and the use themeTools to make the component dark mode compatible. + +Note: Changes on the theme will be reflected on the entire application. + +```tsx +import React from 'react'; +import { NativeBaseProvider, themeTools } from 'native-base'; +import { extendTheme } from 'native-base'; +import { Content } from './Content'; + +export default function () { + const theme = extendTheme({ + components: { + Heading: { + baseStyle: (props: any) => { + return { + color: themeTools.mode('red.300', 'blue.300')(props), + }; + }, + }, + }, + }); + return ( + + + + ); +} +``` + +In the above example, the Heading component's color property will now respond to change in color, namely in light mode it will be red (red.300) colored and in dark mode it will blue (blue.300) colored. + +## 2. By using useColorModeValue + +In this approach we use NativeBase's `useColorModeValue` function and update specific props instead of updating the entire theme. + +Note: Changes on the theme will be reflected on the entire application. + +```tsx +import React from 'react'; +import { useColorModeValue, Button } from 'native-base'; + +export default function () { + const colorScheme = useColorModeValue('teal', 'amber'); + const variant = useColorModeValue('solid', 'outline'); + + return ( + + ); +} +``` + +In the above example, you'll get a **solid teal Button** in **light** mode whereas an **outline amber Button** in **dark** mode. You can get creative and make other properties respond to the color mode as well. + +## 3. By using \_light and \_dark props + +In this approach we pass the required props inside \_light and \_dark based on the requirement. + +```tsx +import React from 'react'; +import { Button } from 'native-base'; + +export default function () { + return ( + + ); +} +``` + +In the above example, you'll get a **teal Button** in **light** mode whereas an **amber Button** in **dark** mode. You can get creative and make other properties respond to the color mode as well. diff --git a/versioned_docs/version-3.2.1/default-theme.md b/versioned_docs/version-3.2.1/default-theme.md new file mode 100644 index 000000000..7a6ab70bf --- /dev/null +++ b/versioned_docs/version-3.2.1/default-theme.md @@ -0,0 +1,229 @@ +--- +id: default-theme +title: Default Theme +--- + +import { ColorsBlock, FontBlocks, SpaceBlocks } from "/src/components/index"; + +The theme object is where you define your application's color palette, type scale, font stacks, breakpoints, border radius values, and more. + +Theming in NativeBase is based on the **[Styled System Theme Specification](https://system-ui.com/theme/)** + +## Colors + +You can add a `theme.colors` object to provide colors for your project. By default these colors can be referenced by the `color`, `borderColor`, `backgroundColor`, etc.. props. + +We recommend adding a palette that ranges from `50` to `900`. Tools like **[Smart Swatch](https://smart-swatch.netlify.app/)**, **[Palx](https://palx.jxnblk.com/)** are available to generate these palettes. + + + +## Typography + +To manage Typography options, the theme object supports the following keys: + +- `fonts` (font families) +- `fontSizes` +- `fontWeights` +- `lineHeights` +- `letterSpacings` + +```jsx +const typography = { + letterSpacings: { + xs: '-0.05em', + sm: '-0.025em', + md: 0, + lg: '0.025em', + xl: '0.05em', + '2xl': '0.1em', + }, + lineHeights: { + '2xs': '1em', + xs: '1.125em', + sm: '1.25em', + md: '1.375em', + lg: '1.5em', + xl: '1.75em', + '2xl': '2em', + '3xl': '2.5em', + '4xl': '3em', + '5xl': '4em', + }, + fontWeights: { + hairline: 100, + thin: 200, + light: 300, + normal: 400, + medium: 500, + semibold: 600, + bold: 700, + extrabold: 800, + black: 900, + extrablack: 950, + }, + fonts: { + heading: undefined, + body: undefined, + mono: undefined, + }, + fontSizes: { + '2xs': 10, + xs: 12, + sm: 14, + md: 16, + lg: 18, + xl: 20, + '2xl': 24, + '3xl': 30, + '4xl': 36, + '5xl': 48, + '6xl': 60, + '7xl': 72, + '8xl': 96, + '9xl': 128, + }, +}; +``` + + + +## Size + +The `size` key allows you to customize the global spacing and sizing scale for your project. By default these spacing value can be referenced by the `padding`, `margin`, and `top`, `left`, `right`, `bottom` props. + + + +## Opacity + +The `opacity` key is used in opacity style object and to define colors opacity using the red-green-blue-alpha (RGBA) model, RGBA color values are an extension of RGB color values with an alpha channel - which specifies the opacity of the color. + +```jsx +const opacity = { + 0: 0, + 5: 0.05, + 10: 0.1, + 20: 0.2, + 25: 0.25, + 30: 0.3, + 40: 0.4, + 50: 0.5, + 60: 0.6, + 70: 0.7, + 75: 0.75, + 80: 0.8, + 90: 0.9, + 95: 0.95, + 100: 1, +}; +``` + +## Shadows + +The `shadow` key allows you to customize the global box shadow for your project. + +```jsx +export default { + 0: { + shadowColor: '#000', + shadowOffset: { + width: 0, + height: 1, + }, + shadowOpacity: 0.18, + shadowRadius: 1.0, + elevation: 1, + }, + 1: { + shadowColor: '#000', + shadowOffset: { + width: 0, + height: 1, + }, + shadowOpacity: 0.2, + shadowRadius: 1.41, + elevation: 2, + }, + 2: { + shadowColor: '#000', + shadowOffset: { + width: 0, + height: 1, + }, + shadowOpacity: 0.22, + shadowRadius: 2.22, + elevation: 3, + }, + 3: { + shadowColor: '#000', + shadowOffset: { + width: 0, + height: 2, + }, + shadowOpacity: 0.23, + shadowRadius: 2.62, + elevation: 4, + }, + 4: { + shadowColor: '#000', + shadowOffset: { + width: 0, + height: 2, + }, + shadowOpacity: 0.25, + shadowRadius: 3.84, + elevation: 5, + }, + 5: { + shadowColor: '#000', + shadowOffset: { + width: 0, + height: 3, + }, + shadowOpacity: 0.27, + shadowRadius: 4.65, + elevation: 6, + }, + 6: { + shadowColor: '#000', + shadowOffset: { + width: 0, + height: 3, + }, + shadowOpacity: 0.29, + shadowRadius: 4.65, + elevation: 7, + }, + 7: { + shadowColor: '#000', + shadowOffset: { + width: 0, + height: 4, + }, + shadowOpacity: 0.3, + shadowRadius: 4.65, + elevation: 8, + }, + 8: { + shadowColor: '#000', + shadowOffset: { + width: 0, + height: 4, + }, + shadowOpacity: 0.32, + shadowRadius: 5.46, + elevation: 9, + }, + 9: { + shadowColor: '#000', + shadowOffset: { + width: 0, + height: 5, + }, + shadowOpacity: 0.34, + shadowRadius: 6.27, + elevation: 10, + }, +}; +``` + +Still confused? You can always explore [here](https://github.com/GeekyAnts/NativeBase/tree/master/src/theme/base). diff --git a/versioned_docs/version-3.2.1/design-tokens.md b/versioned_docs/version-3.2.1/design-tokens.md new file mode 100644 index 000000000..8198af8e3 --- /dev/null +++ b/versioned_docs/version-3.2.1/design-tokens.md @@ -0,0 +1,69 @@ +--- +id: design-tokens +title: Design tokens +--- + +Design tokens are the values or constants needed to construct a design system. These values can represent spacing, color, typography etc. Design tokens help to achieve consistency in building user interfaces across all platforms. + +Let's take an example by defining a space and color design tokens. + +```jsx title="colors" +const colors = { + primary: { + 50: '#ecfeff', + 100: '#cffafe', + 200: '#a5f3fc', + 300: '#67e8f9', + 400: '#22d3ee', + 500: '#06b6d4', + 600: '#0891b2', + 700: '#0e7490', + 800: '#155e75', + 900: '#164e63', + }, +}; +``` + +```jsx title="spacing" +export const spacing = { + px: 1, + 1: 4, + 2: 8, + 3: 12, + 4: 16, + 5: 20, + 6: 24, + 7: 28, + 8: 32, + 9: 36, + 10: 40, + 12: 48, + 16: 64, + 20: 80, + 24: 96, + 32: 128, + 40: 160, + 48: 192, + 56: 224, + 64: 256, + 72: 288, + 80: 320, + 96: 384, +}; +``` + +We can use the above tokens in our code instead of using absolute values. + +```jsx title="using the above tokens in Box component" + +``` + +The above Box will be translated to + +```jsx title="actual applied styles" + +``` + +With NativeBase, you can create your own design system. NativeBase follows [styled-system's specification](https://styled-system.com/theme-specification/) to construct design system. + +Checkout the **[default NativeBase theme](default-theme)** and how to customize it **[here](customizingTheme)**. diff --git a/versioned_docs/version-3.2.1/divider.md b/versioned_docs/version-3.2.1/divider.md new file mode 100644 index 000000000..70f897268 --- /dev/null +++ b/versioned_docs/version-3.2.1/divider.md @@ -0,0 +1,56 @@ +--- +id: divider +title: Divider +--- + +import { ComponentTheme } from '../../src/components'; + +`Divider` is used to visually separate content in a list or group. + +## **Import** + +```jsx +import { Divider } from 'native-base'; +``` + +## Examples + +### Basic + +The Divider displays a thin horizontal or vertical line. + +```ComponentSnackPlayer path=composites,Divider,Basic.tsx + +``` + +### Divider Orientation + +Pass the `orientation` prop and set it to either `horizontal` or `vertical`. + +> **Note:** If the horizontal orientation is used, make sure that the parent element is assigned a width and If the vertical orientation is used, make sure that the parent element is assigned a height. + +```ComponentSnackPlayer path=composites,Divider,Orientation.tsx + +``` + +### Composition + +You can use `bg` or `backgroundColor` to change the divider's color and `width` and `height` to change its width and height respectively. + +```ComponentSnackPlayer path=composites,Divider,Composition.tsx + +``` + +## Props + +```ComponentPropTable path=composites,Divider,index.tsx + +``` + +## Styling + + + +## Accessibility + +- Divider has role set to `separator` and `aria-orientation` to either `horizontal` or `vertical`. diff --git a/versioned_docs/version-3.2.1/faq.md b/versioned_docs/version-3.2.1/faq.md new file mode 100644 index 000000000..d366df99c --- /dev/null +++ b/versioned_docs/version-3.2.1/faq.md @@ -0,0 +1,6 @@ +--- +id: faq +title: FAQ's +--- + +NativeBase FAQ's Coming Soon. diff --git a/versioned_docs/version-3.2.1/flatList.md b/versioned_docs/version-3.2.1/flatList.md new file mode 100644 index 000000000..ef73e46fe --- /dev/null +++ b/versioned_docs/version-3.2.1/flatList.md @@ -0,0 +1,152 @@ +--- +id: flat-list +title: FlatList +--- + +A component for rendering performant scrollable lists. + +## Example + +```SnackPlayer name=Basic +import React from "react" +import { + Box, + FlatList, + Heading, + Avatar, + HStack, + VStack, + Text, + Spacer, + Center, + NativeBaseProvider, +} from "native-base" +export const Example = () => { + const data = [ + { + id: "bd7acbea-c1b1-46c2-aed5-3ad53abb28ba", + fullName: "Aafreen Khan", + timeStamp: "12:47 PM", + recentText: "Good Day!", + avatarUrl: + "https://images.pexels.com/photos/220453/pexels-photo-220453.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500", + }, + { + id: "3ac68afc-c605-48d3-a4f8-fbd91aa97f63", + fullName: "Sujitha Mathur", + timeStamp: "11:11 PM", + recentText: "Cheer up, there!", + avatarUrl: + "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTyEaZqT3fHeNrPGcnjLLX1v_W4mvBlgpwxnA&usqp=CAU", + }, + { + id: "58694a0f-3da1-471f-bd96-145571e29d72", + fullName: "Anci Barroco", + timeStamp: "6:22 PM", + recentText: "Good Day!", + avatarUrl: "https://miro.medium.com/max/1400/0*0fClPmIScV5pTLoE.jpg", + }, + { + id: "68694a0f-3da1-431f-bd56-142371e29d72", + fullName: "Aniket Kumar", + timeStamp: "8:56 PM", + recentText: "All the best", + avatarUrl: + "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSr01zI37DYuR8bMV5exWQBSw28C1v_71CAh8d7GP1mplcmTgQA6Q66Oo--QedAN1B4E1k&usqp=CAU", + }, + { + id: "28694a0f-3da1-471f-bd96-142456e29d72", + fullName: "Kiara", + timeStamp: "12:47 PM", + recentText: "I will call today.", + avatarUrl: + "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRBwgu1A5zgPSvfE83nurkuzNEoXs9DMNr8Ww&usqp=CAU", + }, + ] + return ( + + + Inbox + + ( + + + + + + {item.fullName} + + + {item.recentText} + + + + + {item.timeStamp} + + + + )} + keyExtractor={(item) => item.id} + /> + + ) +} + +export default () => { + return ( + +
+ +
+ + ) +} + + +``` + +## Props + +```ComponentPropTable path=basic,FlatList,FlatList.tsx showStylingProps=true + +``` diff --git a/versioned_docs/version-3.2.1/flex.md b/versioned_docs/version-3.2.1/flex.md new file mode 100644 index 000000000..1667dabac --- /dev/null +++ b/versioned_docs/version-3.2.1/flex.md @@ -0,0 +1,44 @@ +--- +id: flex +title: Flex +--- + +`Flex` is a [`Box`](box.md) with `display: flex` and comes with helpful style shorthand. + +## Import + +```jsx +import { Flex, Spacer } from 'native-base'; +``` + +- `Flex`: a **[Box](box.md)** with `display: flex` +- `Spacer`: creates an adjustable, empty space that can be used to tune the spacing between child elements within `Flex` + +## Usage + +Flex components comes with some helpful shorthand props: + +- `flexDirection` is `direction` +- `flexWrap` is `wrap` +- `alignItems` is `align` +- `justifyContent` is `justify` + +While you can pass the verbose props, using the shorthand can save you some time. + +## Example + +```ComponentSnackPlayer path=primitives,Flex,basic.tsx + +``` + +### Using the Spacer + +You can pass Spacer to add Space between Flex items. + +```ComponentSnackPlayer path=primitives,Flex,spacer.tsx + +``` + +## Props + +**Flex** implements **[Box](box.md)**, so all the Box Props can be passed to it, i.e. [`color`](utility-props#color-and-background-color), [`space`](utility-props#margin-and-padding), [`layout`](utility-props#layout-width-and-height), [`flexbox`](utility-props#flexbox) & [`border`](utility-props#borders) props from [style-system](utility-props). diff --git a/versioned_docs/version-3.2.1/form.md b/versioned_docs/version-3.2.1/form.md new file mode 100644 index 000000000..6a078af67 --- /dev/null +++ b/versioned_docs/version-3.2.1/form.md @@ -0,0 +1,199 @@ +--- +id: form +title: Form with Validation +--- + +Apps often require users to enter information into a text field. For example, you might require users to log in with an email address and password combination. + +To make apps secure and easy to use, check whether the information the user has provided is valid. If the user has correctly filled out the form, process the information. If the user submits incorrect information, display a friendly error message letting them know what went wrong. + +## Example + +In this example, learn how to add validation to a form that has a single text field using the following steps: + +1. Create an Input wrapped in FormControl. +2. Add validation logic. +3. Create a button to validate and submit the form. + +### Step 1 + +Create an Input wrapped in FormControl. + +```SnackPlayer name=Form%20Example +import React from "react"; +import { + VStack, + FormControl, + Input, + NativeBaseProvider, + Center +} from "native-base"; + +function BuildingAFormExample() { + const [formData, setData] = React.useState({}); + + return ( + + + Name + setData({ ...formData, name: value })} + /> + + Name should contain atleast 3 character. + + Error Name + + + ); +} +export default function () { + return ( + +
+ +
+ + ); +} +``` + +### Step 2 + +Add validation logic. + +```SnackPlayer name=Form%20Example(Validation) +import React from 'react'; +import { + VStack, + FormControl, + Input, + NativeBaseProvider, + Center +} from 'native-base'; + + +function BuildingAFormExample() { + const [formData, setData] = React.useState({}); + const [errors, setErrors] = React.useState({}); + const validate = () => { + if (formData.name === undefined) { + setErrors({ + ...errors, + name: 'Name is required', + }); + return false; + } else if (formData.name.length < 3) { + setErrors({ + ...errors, + name: 'Name is too short', + }); + return false; + } + return true; + }; + + return ( + + + Name + setData({ ...formData, name: value })} + /> + + Name should contain atleast 3 character. + + Error Name + + + ); +} +export default function () { + return ( + +
+ +
+ + ); +} +``` + +### Step 3 + +Create a button to validate and submit the form. + +```SnackPlayer name=Form%20Example(Validate%20and%20Submit) +import React from 'react'; +import { + VStack, + Button, + FormControl, + Input, + NativeBaseProvider, + Center +} from 'native-base'; + +function BuildingAFormExample() { + const [formData, setData] = React.useState({}); + const [errors, setErrors] = React.useState({}); + const validate = () => { + if (formData.name === undefined) { + setErrors({ + ...errors, + name: 'Name is required', + }); + return false; + } else if (formData.name.length < 3) { + setErrors({ + ...errors, + name: 'Name is too short', + }); + return false; + } + return true; + }; + + const onSubmit = () => { + validate() ? console.log('Submitted') : console.log('Validation Failed'); + }; + + return ( + + + Name + setData({ ...formData, name: value })} + /> + {'name' in errors ? + Error +: + + + Name should contain atleast 3 character. + + } + + + + ); +} +export default function () { + return ( + +
+ +
+ + ); +} +``` + +## Community Integration + +NativeBase can be used with other popular Form libraries like [`Formik`](nativebase-formik-ui.md) and [`React Hook Forms`](reactHooksForms.md) as well. For more details checkout Community Integration section of the docs. diff --git a/versioned_docs/version-3.2.1/formControl.md b/versioned_docs/version-3.2.1/formControl.md new file mode 100644 index 000000000..05b32b0d3 --- /dev/null +++ b/versioned_docs/version-3.2.1/formControl.md @@ -0,0 +1,52 @@ +--- +id: form-control +title: FormControl +--- + +import { ComponentTheme } from '../../src/components'; + +`FormControl` provides context such as `isInvalid`, `isDisabled`, and `isRequired` to form elements. + +## Examples + +### Basic + +```ComponentSnackPlayer path=composites,FormControl,Usage.tsx + +``` + +### Custom Style + +```ComponentSnackPlayer path=composites,FormControl,CustomStyle.tsx + +``` + +## Props + +### FormControl + +```ComponentPropTable path=composites,FormControl,FormControl.tsx + +``` + +### FormControl.Label + +```ComponentPropTable path=composites,FormControl,FormControlLabel.tsx + +``` + +### FormControl.ErrorMessage + +```ComponentPropTable path=composites,FormControl,FormControlErrorMessage.tsx + +``` + +### FormControl.HelperText + +```ComponentPropTable path=composites,FormControl,FormControlHelperText.tsx + +``` + +## Styling + + diff --git a/versioned_docs/version-3.2.1/getting-started.mdx b/versioned_docs/version-3.2.1/getting-started.mdx new file mode 100644 index 000000000..ac2f9aac7 --- /dev/null +++ b/versioned_docs/version-3.2.1/getting-started.mdx @@ -0,0 +1,90 @@ +--- +id: getting-started +title: Getting Started +slug: / +--- + +import { KitchenSinkIframe, TileLink, NBHistory } from '../../src/components'; +import TOCInline from '@theme/TOCInline'; + +
+
+

+ 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. +

+
+
+ + +
+
+ + +
+
+
+
+ +
+

A Brief History of NativeBase

+ +
+ +
+ +

What's New with NativeBase v3?

+ + We had clear goals in mind while building version 3. Take a look at some of the new features we added: + +
+

Multiplatform

+
+ NativeBase supports multiple platforms; android, iOS and web. You can also + customise properties using platform-specific props. +
+
+ +
+

Inherently Beautiful

+
+ NativeBase ships with a default theme that provides beautiful components, + out of the box. +
+
+

Accessible

+
+ This version has out of the box accessibility including focus management, + keyboard navigation and more. +
+
+ +
+

Customisable

+
+ The default theme can be extended as you desire. You can also customise specific components for your app needs. +
+
+ +
diff --git a/versioned_docs/version-3.2.1/hStack.md b/versioned_docs/version-3.2.1/hStack.md new file mode 100644 index 000000000..d8e8c178d --- /dev/null +++ b/versioned_docs/version-3.2.1/hStack.md @@ -0,0 +1,24 @@ +--- +id: h-stack +title: HStack / Row +--- + +`HStack` aligns items horizontally. `Row` is also an alias for `HStack`. + +## Import + +```jsx +import { HStack } from 'native-base'; +``` + +## Examples + +```ComponentSnackPlayer path=primitives,HStack,basic.tsx + +``` + +## Props + +```ComponentPropTable path=primitives,Stack,HStack.tsx + +``` diff --git a/versioned_docs/version-3.2.1/heading.md b/versioned_docs/version-3.2.1/heading.md new file mode 100644 index 000000000..971b44a20 --- /dev/null +++ b/versioned_docs/version-3.2.1/heading.md @@ -0,0 +1,56 @@ +--- +id: heading +title: Heading +--- + +import { ComponentTheme } from '../../src/components'; + +Headings are used for rendering headlines. `Heading` composes [`Text`](text.md) so you can use all the style props. + +## Import + +```jsx +import { Heading } from 'native-base'; +``` + +## Example + +### Basic + +```ComponentSnackPlayer path=primitives,Heading,Basic.tsx + +``` + +### Sizes + +```ComponentSnackPlayer path=primitives,Heading,Sizes.tsx + +``` + +### Truncate + +```ComponentSnackPlayer path=primitives,Heading,Truncate.tsx + +``` + +### Override + +```ComponentSnackPlayer path=primitives,Heading,OverridenStyle.tsx + +``` + +### Composition + +```ComponentSnackPlayer path=primitives,Heading,Composition.tsx + +``` + +## Props + +```ComponentPropTable path=primitives,Heading,index.tsx + +``` + +## Styling + + diff --git a/versioned_docs/version-3.2.1/hidden.md b/versioned_docs/version-3.2.1/hidden.md new file mode 100644 index 000000000..0d74cacee --- /dev/null +++ b/versioned_docs/version-3.2.1/hidden.md @@ -0,0 +1,125 @@ +--- +id: hidden +title: Hidden +--- + +import { ComponentTheme } from '../../src/components'; + +Hidden is used to toggle the visibility value of child components responsively, based on the colorMode or based on the platform. It doesn't mount the child components in the restricted values of props. + +## Import + +```jsx +import { Hidden } from 'native-base'; +``` + +## Example + +### Basic + +```jsx + + + This text will be always hidden. + + +``` + +### Hidden according to breakpoints + +```jsx +<> + + + This text will be hidden from sm to lg screens. + + + + + This text will be hidden on sm and lg screens only. + + + +``` + +### Hidden according to colorMode + +```SnackPlayer name=ColorMode%20Usage +import React from 'react'; +import { + useColorMode, + Button, + VStack, + Center, + Box,Text, + Hidden, + useColorModeValue, + NativeBaseProvider +} from 'native-base'; + +function ColorModeExample () { + const { colorMode, toggleColorMode } = useColorMode(); + return ( + <> + + + + + This text will be hidden on light mode + + + + + This text will be hidden on dark mode + + + + + ); +} + +const LocalWrapper = ({ children }) => { + const bg = useColorModeValue('gray.200', 'gray.800') + return ( +
+ {children} +
+ ); +}; + +export default function () { + return ( + + + + + + ); +} +``` + +## Hidden according to platform + +```jsx + + + This text will be hidden on android and web. + + +``` + +## Props + +```ComponentPropTable path=composites,Fab,Fab.tsx + +``` diff --git a/versioned_docs/version-3.2.1/icon.md b/versioned_docs/version-3.2.1/icon.md new file mode 100644 index 000000000..4b19156e5 --- /dev/null +++ b/versioned_docs/version-3.2.1/icon.md @@ -0,0 +1,54 @@ +--- +id: icon +title: Icon +--- + +You can use icons in multiple ways in NativeBase: + +- Create icon by creating an SVG Icon +- Create icon using createIcon function and use it as a component +- Use a third-party icon library ( such as [@expo/vector-icons](https://github.com/expo/vector-icons) ), with `as` prop. + +## Examples + +### Basic + +```ComponentSnackPlayer path=primitives,Icon,Basic.tsx + +``` + +Apart from the icons provided by [@expo/vector-icon](https://github.com/expo/vector-icons), you can also create custom icons using SVG. You can use all the components from [react-native-svg](https://github.com/react-native-svg/react-native-svg). + +### NativeBase Icons + +We provides a set of commonly used interface icons. So you can directly use them in your project. All our icons are create using [`createIcon`](icon#createicon) function from NativeBase. + +```ComponentSnackPlayer path=primitives,Icon,AllIcons.tsx + +``` + +### Custom Icon + +```ComponentSnackPlayer path=primitives,Icon,CustomIcon.tsx + +``` + +### Create Icon + +```ComponentSnackPlayer path=primitives,Icon,CreateIcon.tsx + +``` + +## Props + +### Icon + +```ComponentPropTable path=primitives,Icon,Icon.tsx showStylingProps=true + +``` + +### createIcon + +```ComponentPropTable path=primitives,Icon,createIcon.tsx + +``` diff --git a/versioned_docs/version-3.2.1/iconButton.md b/versioned_docs/version-3.2.1/iconButton.md new file mode 100644 index 000000000..60d5f1741 --- /dev/null +++ b/versioned_docs/version-3.2.1/iconButton.md @@ -0,0 +1,43 @@ +--- +id: icon-button +title: IconButton +--- + +import { ComponentTheme } from '../../src/components'; + +`IconButton` composes the `Button` component. It is generally used to make an Icon pressable. + +## Examples + +### Basic + +```ComponentSnackPlayer path=composites,IconButton,Basic.tsx + +``` + +### Sizes + +```ComponentSnackPlayer path=composites,IconButton,Sizes.tsx + +``` + +### Variants + +```ComponentSnackPlayer path=composites,IconButton,Variant.tsx + +``` + +## Props + +```ComponentPropTable path=composites,IconButton,index.tsx + +``` + +## Styling + + + +## Accessibility + +- Use accessibilityLabel for labelling icon buttons to make sure it's announced by screen reader devices. +- IconButton has a `role` set to [button](https://www.w3.org/TR/wai-aria-practices-1.2/#button). diff --git a/versioned_docs/version-3.2.1/image.md b/versioned_docs/version-3.2.1/image.md new file mode 100644 index 000000000..550e56ec4 --- /dev/null +++ b/versioned_docs/version-3.2.1/image.md @@ -0,0 +1,49 @@ +--- +id: image +title: Image +--- + +Generic Image components from [React Native](https://reactnative.dev). + +## Implements + +- [`Image`](https://reactnative.dev/docs/image) from [React Native](https://reactnative.dev). +- You can use all props of React native Image. + +## Examples + +### Basic + +```ComponentSnackPlayer path=primitives,Image,Basic.tsx + +``` + +### Sizes + +```ComponentSnackPlayer path=primitives,Image,Sizes.tsx + +``` + +### Border Radius + +```ComponentSnackPlayer path=primitives,Image,BorderRadius.tsx + +``` + +### Fallback + +```ComponentSnackPlayer path=primitives,Image,FallbackSupport.tsx + +``` + +### Basic (With Ref) + +```ComponentSnackPlayer path=primitives,Image,WithRef.tsx + +``` + +## Props + +```ComponentPropTable path=primitives,Image,index.tsx showStylingProps=true + +``` diff --git a/versioned_docs/version-3.2.1/input.md b/versioned_docs/version-3.2.1/input.md new file mode 100644 index 000000000..9dcf9e138 --- /dev/null +++ b/versioned_docs/version-3.2.1/input.md @@ -0,0 +1,76 @@ +--- +id: input +title: Input +--- + +import { ComponentTheme } from '../../src/components'; + +The `Input` component is a component that is used to get user input in a text field. + +## Examples + +### Basic + +```ComponentSnackPlayer path=primitives,Input,Basic.tsx + +``` + +### Input Sizes + +```ComponentSnackPlayer path=primitives,Input,Size.tsx + +``` + +### Input Variants + +```ComponentSnackPlayer path=primitives,Input,Variant.tsx + +``` + + + +### Input Elements + +```ComponentSnackPlayer path=primitives,Input,Elements.tsx + +``` + +### Password Input + +```ComponentSnackPlayer path=primitives,Input,Masked.tsx + +``` + +### Controlled Input + +```ComponentSnackPlayer path=primitives,Input,Controlled.tsx + +``` + +### Form Controlled + +```ComponentSnackPlayer path=primitives,Input,FormControlled.tsx + +``` + +## Props + +### Input + +```ComponentPropTable path=primitives,Input,Input.tsx showStylingProps=true + +``` + +### Input.Group + +```ComponentPropTable path=primitives,Input,InputGroup.tsx + +``` + +## Styling + + diff --git a/versioned_docs/version-3.2.1/install-cra.mdx b/versioned_docs/version-3.2.1/install-cra.mdx new file mode 100644 index 000000000..853c65e3a --- /dev/null +++ b/versioned_docs/version-3.2.1/install-cra.mdx @@ -0,0 +1,131 @@ +--- +id: install-cra +title: Install in Create React App project +--- + +import Tabs from '@theme/Tabs'; +import TabItem from '@theme/TabItem'; +import { TileLink } from '../../src/components'; + + + + + +The easiest way to get started with NativeBase in create react app is using NativeBase template. + +### JavaScript + +```bash +npx create-react-app my-app --template nativebase +cd my-app/ +yarn start +``` + +### TypeScript + +```bash +npx create-react-app my-app --template nativebase-typescript +cd my-app/ +yarn start +``` + + + + + +Create a new CRA project If not exist + +```bash +npx create-react-app my-app +cd my-app +``` + +[Refer this guide](https://necolas.github.io/react-native-web/docs/installation/) if you need additional configurations. + +### Install dependencies + + + + +
+ +```bash +yarn add react-native-web native-base react-native-svg styled-components styled-system react-native-safe-area-context +``` + +
+ + + +
+ +```bash +npm install react-native-web native-base react-native-svg styled-components styled-system react-native-safe-area-context +``` + +
+ + + + +### Run the Hello world example + +Put the below code in your App.js + +```jsx +import React from 'react'; +import { NativeBaseProvider, Box } from 'native-base'; + +export default function App() { + return ( + + Hello world + + ); +} +``` + + + + + +
+ +
+ +
+
+
+ + +
+
+ +
+
+
diff --git a/versioned_docs/version-3.2.1/install-expo.mdx b/versioned_docs/version-3.2.1/install-expo.mdx new file mode 100644 index 000000000..9d29951b2 --- /dev/null +++ b/versioned_docs/version-3.2.1/install-expo.mdx @@ -0,0 +1,141 @@ +--- +id: install-expo +title: Install in Expo project +--- + +import Tabs from '@theme/Tabs'; +import TabItem from '@theme/TabItem'; +import { TileLink } from '../../src/components'; + +Expo helps you to create universal (iOS, Android and Web) React Native apps with no build configuration. + + + + +### Create a new project using Expo CLI with NativeBase template + +

Plain Javascript

+
+ +```bash +expo init my-app --template expo-template-native-base +``` + +
+ +

With Typescript

+
+ +```bash +expo init my-app --template expo-template-native-base-typescript +``` + +
+ +Yey! you are all set, start editing App.js/App.tsx now. + + + + + + +### Create a new expo project if not exist + +```bash +npm install --global expo-cli +expo init my-project +cd my-project/ +``` + +[Refer this link](https://docs.expo.io/) for additional information on Expo and setting up an Expo starter app. + +### Install dependencies + + + + + +```bash +yarn add native-base styled-components styled-system +``` + + + + + +```bash +npm install native-base styled-components styled-system +``` + + + + + +```bash +expo install react-native-svg +``` + +```bash +expo install react-native-safe-area-context +``` + +### Run the Hello world example + +Put the below code in your App.js + +```jsx +import React from 'react'; +import { NativeBaseProvider, Box } from 'native-base'; + +export default function App() { + return ( + + Hello world + + ); +} +``` + + + + +
+ minions clapping +
+ +
+
+
+ + +
+
+ +
+
+
diff --git a/versioned_docs/version-3.2.1/install-next.mdx b/versioned_docs/version-3.2.1/install-next.mdx new file mode 100644 index 000000000..dc9dbca16 --- /dev/null +++ b/versioned_docs/version-3.2.1/install-next.mdx @@ -0,0 +1,263 @@ +--- +id: install-next +title: Install in Next.js project +--- + +import Tabs from '@theme/Tabs'; +import TabItem from '@theme/TabItem'; +import { TileLink } from '../../src/components'; + + + + + +### Create a new project using Next.js CLI with NativeBase template + +
+ + + + +

Choose your preferred setting and start your development swiftly 🚀

+ +

Plain Javascript

+
+ +```bash + yarn create next-app -e https://github.com/GeekyAnts/nativebase-templates/tree/master/nextjs-with-native-base +``` + +
+Yey! you are all set, start editing src/pages/index.js now. + +

With Typescript

+
+ +```bash + yarn create next-app -e https://github.com/GeekyAnts/nativebase-templates/tree/master/nextjs-with-native-base-typescript +``` + +
+Yey! you are all set, start editing src/pages/index.tsx now. + + + + + +

Choose your preferred setting and start your development swiftly 🚀

+ +

Plain Javascript

+
+ +```bash + npx create-next-app -example https://github.com/GeekyAnts/nativebase-templates/tree/master/nextjs-with-native-base +``` + +
+ +Yey! you are all set, start editing src/pages/index.js now. + +

With Typescript

+
+ +```bash + npx create-next-app -example https://github.com/GeekyAnts/nativebase-templates/tree/master/nextjs-with-native-base-typescript +``` + +
+ +Yey! you are all set, start editing src/pages/index.tsx now. + + + +
+ + + + +### Install dependencies + + + + + +
+ +```bash +yarn add react-native-web native-base react-native-svg styled-components styled-system react-native-safe-area-context +``` + +
+ + + + + +
+ +```bash +npm install react-native-web native-base react-native-svg styled-components styled-system react-native-safe-area-context +``` + +
+ + + + + +We'll need 2 more additional steps. + +1. Install dev dependencies. + + + + + +```bash + yarn add next-compose-plugins next-transpile-modules -D +``` + + + + + +```bash + npm i next-compose-plugins next-transpile-modules --save-dev +``` + + + + + +2. Update your next.config.js with the below content. + +```js +const withPlugins = require('next-compose-plugins'); +const withTM = require('next-transpile-modules')([ + 'native-base', + 'react-native-svg', + 'styled-components', + 'react-native-safe-area-context', + '@react-aria/visually-hidden', + '@react-native-aria/button', + '@react-native-aria/checkbox', + '@react-native-aria/combobox', + '@react-native-aria/focus', + '@react-native-aria/interactions', + '@react-native-aria/listbox', + '@react-native-aria/overlays', + '@react-native-aria/radio', + '@react-native-aria/slider', + '@react-native-aria/tabs', + '@react-native-aria/utils', + '@react-stately/combobox', + '@react-stately/radio', +]); + +module.exports = withPlugins( + [ + withTM, + // your plugins go here. + ], + { + webpack: (config) => { + config.resolve.alias = { + ...(config.resolve.alias || {}), + // Transform all direct `react-native` imports to `react-native-web` + 'react-native$': 'react-native-web', + }; + config.resolve.extensions = [ + '.web.js', + '.web.ts', + '.web.tsx', + ...config.resolve.extensions, + ]; + return config; + }, + } +); +``` + +### Run the Hello world example + +Replace the below code in your pages/\_app.js + +```jsx +import '../styles/globals.css'; +import { NativeBaseProvider } from 'native-base'; + +function MyApp({ Component, pageProps }) { + return ( + + + + ); +} + +export default MyApp; +``` + +and put this in your pages/index.js + +```jsx +import React from 'react'; +import { Box } from 'native-base'; + +export default function App() { + return Hello world; +} +``` + + + + +
+ +
+ +
+
+
+ + +
+
+ +
+
+
diff --git a/versioned_docs/version-3.2.1/install-rn.mdx b/versioned_docs/version-3.2.1/install-rn.mdx new file mode 100644 index 000000000..8ed3a885d --- /dev/null +++ b/versioned_docs/version-3.2.1/install-rn.mdx @@ -0,0 +1,138 @@ +--- +id: install-rn +title: Install in React Native project +--- + +import Tabs from '@theme/Tabs'; +import TabItem from '@theme/TabItem'; +import { TileLink } from '../../src/components'; + + + + + +### Create a new project using ReactNative CLI with NativeBase template + +[Refer this link](https://github.com/react-native-community/cli#about) to get infomation about the React Native CLI. + +

Plain Javascript

+
+ +```bash +npx react-native init MyApp --template react-native-template-native-base +``` + +
+ +

With Typescript

+
+ +```bash +npx react-native init MyApp --template react-native-template-native-base-typescript +``` + +
+ +Yey! you are all set, start editing App.js/App.tsx now. + + + + + +### Create a new project if not exist + +```bash +npx react-native init AwesomeNativeBase +cd AwesomeNativeBase +``` + +### Install dependencies + + + + + +```bash +yarn add native-base react-native-svg styled-components styled-system react-native-safe-area-context +``` + + + + + +```bash +npm install native-base react-native-svg styled-components styled-system react-native-safe-area-context +``` + + + + + +### Run pod install + +```bash +cd ios/ +pod install +``` + +### Run the Hello world example + +Put the below code in your App.js + +```jsx +import React from 'react'; +import { NativeBaseProvider, Box } from 'native-base'; + +export default function App() { + return ( + + Hello world + + ); +} +``` + + + + + +
+ +
+ +
+
+
+ + +
+
+ +
+
+
diff --git a/versioned_docs/version-3.2.1/installation.mdx b/versioned_docs/version-3.2.1/installation.mdx new file mode 100644 index 000000000..91616aeed --- /dev/null +++ b/versioned_docs/version-3.2.1/installation.mdx @@ -0,0 +1,30 @@ +--- +id: installation +title: Installation +--- + +import { InstallationTiles } from '../../src/components'; + +**NativeBase** is supported in [Expo](https://docs.expo.io/get-started/installation/) or React Native CLI initiated apps. Web support is made possible by [react-native-web](https://necolas.github.io/react-native-web/). + +Refer the guides shown below to setup NativeBase in your React app. + +
+
+ +
+
+ +
+ +### NativeBase VS Code Extensions + +NativeBase VS Code Extensions are specifically designed to quicken your development process using **NativeBase 3.0**. +NativeBase snippets are shorthand for commonly used NativeBase components. + +All snippets start with the prefix `nb-` and are followed by the name of the desired component. + +aang transitioning to avatar state diff --git a/versioned_docs/version-3.2.1/interaction-styles.mdx b/versioned_docs/version-3.2.1/interaction-styles.mdx new file mode 100644 index 000000000..8c07bf6a5 --- /dev/null +++ b/versioned_docs/version-3.2.1/interaction-styles.mdx @@ -0,0 +1,229 @@ +--- +id: pseudo-props +title: Pseudo props in Detail +--- + +import { + Box, + NativeBaseProvider, + HStack, + VStack, + Text, + Pressable, + Image, +} from 'native-base'; + +NativeBase provides a declarative way to add interaction or platform specific props. + +## Hover + +Using `_hover` pseudo prop, we can customize the style of Pressable component on hover. + + + + + + Hover + + + + + +```jsx title="Hover example" + + + Hover me + + +``` + +## Pressed + +Using `_pressed` pseudo prop, we can customize the style of Pressable component on pressed. + + + + + + Pressed + + + + + +```jsx title="Pressed example" + + + Pressed + + +``` + +## Focus + +Using `_focus` pseudo prop, we can customize the style of Pressable component on focus. + + + + + + Focus + + + + + +```jsx title="Focus example" + + + Focus + + +``` + +## Platform specific styling + +Using `_web`, `_iOS`, `_android` pseudo props, we can customize the style or behaviour of NativeBase components across platforms. + + + + + + + Save + + + Web + + + + + Save + + + Android + + + + + Save + + + iOS + + + + +```jsx title="Platform specific example" + + + + + Save + + + Web + + + + + Save + + + Android + + + + + Save + + + iOS + + +``` diff --git a/versioned_docs/version-3.2.1/keyboardAvoidingView.md b/versioned_docs/version-3.2.1/keyboardAvoidingView.md new file mode 100644 index 000000000..a124d3063 --- /dev/null +++ b/versioned_docs/version-3.2.1/keyboardAvoidingView.md @@ -0,0 +1,18 @@ +--- +id: keyboard-avoiding-view +title: KeyboardAvoidingView +--- + +Provides a view that moves out of the way of virtual keyboard automatically. It is a component to solve the common problem of views that need to move out of the way of the virtual keyboard. It can automatically adjust either its height, position, or bottom padding based on the keyboard height. + +## Example + +```ComponentSnackPlayer path=basic,KeyboardAvoidingView,Basic.tsx + +``` + +## Props + +```ComponentPropTable path=basic,KeyboardAvoidingView,KeyboardAvoidingView.tsx showStylingProps=true + +``` diff --git a/versioned_docs/version-3.2.1/kitchen-sink.mdx b/versioned_docs/version-3.2.1/kitchen-sink.mdx new file mode 100644 index 000000000..7187d2c16 --- /dev/null +++ b/versioned_docs/version-3.2.1/kitchen-sink.mdx @@ -0,0 +1,66 @@ +--- +id: kitchen-sink +title: Kitchen Sink +--- + +import { KitchenSinkIframe, TileLink, NBHistory } from '../../src/components'; +import useBaseUrl from '@docusaurus/useBaseUrl'; +import ExpoIcon from '@site/static/img/expo-icon.svg'; +import useThemeContext from '@theme/hooks/useThemeContext'; + +
+
+
+

+ Kitchen Sink is a comprehensive demo app showcasing all the NativeBase + components in action. It includes buttons, forms, icons and much more! +

+
+
+
+ Scan with the + + + + Expo app on your Android device to see the special dish we cooked + for you! +
+ +
+
+
+ +
+
+
+
+
+ +
+
+
diff --git a/versioned_docs/version-3.2.1/link.md b/versioned_docs/version-3.2.1/link.md new file mode 100644 index 000000000..cdfcb946a --- /dev/null +++ b/versioned_docs/version-3.2.1/link.md @@ -0,0 +1,60 @@ +--- +id: link +title: Link +--- + +import { ComponentTheme } from '../../src/components'; + +`Links` are accessible elements used primarily for navigation. This component is styled to resemble a hyperlink. + +## **Import** + +```jsx +import { Link } from 'native-base'; +``` + +## Examples + +### Basic + +```ComponentSnackPlayer path=primitives,Link,Basic.tsx + +``` + +### External Link + +```ComponentSnackPlayer path=primitives,Link,ExternalLink.tsx + +``` + +### Link with Underline + +```ComponentSnackPlayer path=primitives,Link,UnderlineLink.tsx + +``` + +### Link custom onPress + +```ComponentSnackPlayer path=primitives,Link,CustomOnPress.tsx + +``` + +### Link around containers + +```ComponentSnackPlayer path=primitives,Link,CompositeLink.tsx + +``` + +## Props + +```ComponentPropTable path=primitives,Link,index.tsx + +``` + +## Styling + + + +## Accessibility + +Adheres to the [Link WAI-ARIA design pattern.](https://www.w3.org/TR/wai-aria-practices-1.2/#link) diff --git a/versioned_docs/version-3.2.1/loginsignupforms.md b/versioned_docs/version-3.2.1/loginsignupforms.md new file mode 100644 index 000000000..9abc14ca3 --- /dev/null +++ b/versioned_docs/version-3.2.1/loginsignupforms.md @@ -0,0 +1,157 @@ +--- +id: login-signup-forms +title: Login/Signup Forms +--- + +## Example + +### Login Form + +```SnackPlayer name=login dependencies=react-native-linear-gradient +import * as React from 'react'; +import { MaterialCommunityIcons, Ionicons } from '@expo/vector-icons'; +import { + NativeBaseProvider, + Box, + Text, + Heading, + VStack, + FormControl, + Input, + Link, + Button, + Icon, + IconButton, + HStack, + Divider, +} from 'native-base'; + +export default function App() { + return ( + + + + Welcome + + + Sign in to continue! + + + + + + Email ID + + + + + + Password + + + + Forget Password? + + + + + + I'm a new user.{' '} + + + Sign Up + + + + + + ); +} + +``` + +### Signup Form + +```SnackPlayer name=Signup dependencies=react-native-linear-gradient +import * as React from 'react'; +import { MaterialCommunityIcons, Ionicons } from '@expo/vector-icons'; +import { + NativeBaseProvider, + Box, + Text, + Heading, + VStack, + FormControl, + Input, + Link, + Button, + Icon, + IconButton, + HStack, + Divider, +} from 'native-base'; + +export default function App() { + return ( + + + + Welcome + + + Sign up to continue! + + + + + + Email + + + + + + Password + + + + + + Confirm Password + + + + + + + + ); +} + +``` diff --git a/versioned_docs/version-3.2.1/menu.md b/versioned_docs/version-3.2.1/menu.md new file mode 100644 index 000000000..736456663 --- /dev/null +++ b/versioned_docs/version-3.2.1/menu.md @@ -0,0 +1,94 @@ +--- +id: menu +title: Menu +--- + +import { ComponentTheme } from '../../src/components'; + +A dropdown menu for the common dropdown menu button design pattern. + +## Import + +NativeBase uses 5 components for rendering menus: + +- `Menu`: The wrapper component provides context, state, and focus management. +- `Menu.Item`: The trigger that handles menu selection. +- `Menu.Group`: A wrapper to group related menu items. +- `Menu.OptionGroup`: A wrapper for checkable menu items (radio and checkbox). +- `Menu.ItemOption`: The checkable menu item, to be used with `MenuOptionGroup`. + +```jsx +import { Menu } from 'native-base'; +``` + +## Examples + +### Basic + +```ComponentSnackPlayer path=composites,Menu,Basic.tsx + +``` + +### Group + +```ComponentSnackPlayer path=composites,Menu,Group.tsx + +``` + +### MenuOptionGroups + +```ComponentSnackPlayer path=composites,Menu,MenuOptionsGroup.tsx + +``` + +### Menu Placement + +```ComponentSnackPlayer path=composites,Menu,MenuPositions.tsx + +``` + +## Props + +### Menu + +```ComponentPropTable path=composites,Menu,Menu.tsx + +``` + +### MenuItem + +```ComponentPropTable path=composites,Menu,MenuItem.tsx + +``` + +MenuItem implements [Pressable] + +### MenuItemOption + +Extends `MenuItem`. + +### MenuItemOption + +```ComponentPropTable path=composites,Menu,MenuItemOption.tsx + +``` + +### MenuGroup + +```ComponentPropTable path=composites,Menu,MenuGroup.tsx + +``` + +### MenuOptionGroup + +```ComponentPropTable path=composites,Menu,MenuOptionGroup.tsx + +``` + +## Styling + + + +## Accessibility + +Adheres to the [Menu WAI-ARIA design pattern.](https://www.w3.org/TR/wai-aria-practices-1.2/#menu) diff --git a/versioned_docs/version-3.2.1/migration/Accordion.md b/versioned_docs/version-3.2.1/migration/Accordion.md new file mode 100644 index 000000000..9f75bc7ea --- /dev/null +++ b/versioned_docs/version-3.2.1/migration/Accordion.md @@ -0,0 +1,89 @@ +import Tabs from '@theme/Tabs'; +import TabItem from '@theme/TabItem'; + +We have sliced Accordion into multiple smaller component which not only provides more control over the the code but also makes it more readable. + +## Overview + +Migrating Checkbox components can broadly described in these points: + +- **dataArray** is depreciated. +- **expanded** → `defaultIndex`, and now accepts array of index. +- Pros like **headerStyle**, **contentStyle**, **icon**, **expandedIcon**, **iconStyle**, **expandedIconStyle**, **renderHeader**, **renderContent** are _no longer required_ as components like `Accordion.Button`, `Accordion.Panel`, `Accordion.Icon` replaces them. +- **onAccordionOpen,** **onAccordionOpen** → `onChange`, one callback instead of 2. + +## Code Comparison + + + + +```tsx +import React, { Component } from 'react'; +import { Container, Header, Content, Accordion } from 'native-base'; +const dataArray = [ + { + title: 'First Element', + content: 'Lorem ipsum dolor sit amet', + }, + { title: 'Second Element', content: 'Lorem ipsum dolor sit amet' }, + { + title: 'Third Element', + content: 'Lorem ipsum dolor sit amet', + }, +]; +export default class AccordionExample extends Component { + render() { + return ( + +
+ + + + + ); + } +} +``` + + + + +```tsx +import React from 'react'; +import { Accordion } from 'native-base'; +export default function () { + return ( + + + + First Element + + + Lorem ipsum dolor sit amet + + + + Second Element + + + Lorem ipsum dolor sit amet + + + + Third Element + + + Lorem ipsum dolor sit amet + + + ); +} +``` + + + diff --git a/versioned_docs/version-3.2.1/migration/Actionsheet.md b/versioned_docs/version-3.2.1/migration/Actionsheet.md new file mode 100644 index 000000000..50e681848 --- /dev/null +++ b/versioned_docs/version-3.2.1/migration/Actionsheet.md @@ -0,0 +1,107 @@ +--- +id: action-sheet +title: ActionSheet +--- + +import Tabs from '@theme/Tabs'; +import TabItem from '@theme/TabItem'; + +We have sliced [`Actionsheet`](actionSheet.md) into multiple smaller component which not only provides more control over the the code but also makes it more readable. + +## Overview + +Migrating Checkbox components can broadly described in these points: + +- **options** (prop) → `Actionsheet.Item` (component). +- Props like **cancelButtonIndex**, **cancelButtonIndex** are _no longer required_ as components like `Actionsheet.Item` can be customised as per need. +- **title** (prop) → NativeBase components such as `Heading` and `Text` can be used inside `ActionSheet.Content` to show the title. +- Declarative approach to show and hide using `isOpen` prop, instead of `show()` and `hide()`. + +## Code Comparison + + + + +```tsx +import React, { Component } from 'react'; +import { + Container, + Header, + Button, + Content, + ActionSheet, + Text, +} from 'native-base'; +var BUTTONS = ['Option 1', 'Option 2', 'Option 3', 'Delete', 'Cancel']; +var DESTRUCTIVE_INDEX = 3; +var CANCEL_INDEX = 4; +export default class ActionSheetExample extends Component { + constructor(props) { + super(props); + this.state = {}; + } + render() { + return ( + + + + + + ); + } +} +``` + + + + +```tsx +import React from 'react'; +import { Button, Actionsheet, useDisclose } from 'native-base'; + +export default function () { + const { isOpen, onOpen, onClose } = useDisclose(); + return ( + <> + + + + + Header + Option 1 + Option 2 + Option 3 + Delete + + + Cancel + + + + ); +} +``` + + + diff --git a/versioned_docs/version-3.2.1/migration/Badge.md b/versioned_docs/version-3.2.1/migration/Badge.md new file mode 100644 index 000000000..50dad69ac --- /dev/null +++ b/versioned_docs/version-3.2.1/migration/Badge.md @@ -0,0 +1,44 @@ +--- +id: badge +title: Badge +--- + +import Tabs from '@theme/Tabs'; +import TabItem from '@theme/TabItem'; + +Migrating [`Badge`](badge.md) to v3 will provide a lot more **design**, **size, variant**, **color** and **customisation** options. + +## Overview + +Migrating Badge components can be broadly described in these points: + +- No need to wrap you text inside text component anymore. +- In v3 the color is controlled by `colorScheme` prop. And it accepts all the color available in the theme. + +## Code Comparison + + + + +```tsx + + Success + +``` + + + + +```tsx + + Success + +``` + + + diff --git a/versioned_docs/version-3.2.1/migration/Button.md b/versioned_docs/version-3.2.1/migration/Button.md new file mode 100644 index 000000000..a33b068df --- /dev/null +++ b/versioned_docs/version-3.2.1/migration/Button.md @@ -0,0 +1,196 @@ +--- +id: button +title: Button +--- + +import Tabs from '@theme/Tabs'; +import TabItem from '@theme/TabItem'; + +Migrating [`Button`](button.mdx) to v3 will provide a lot more **design**, **size**, **color** and **customisation** options. + +## Overview + +Migrating Button components can broadly described in these points: + +- No need to wrap your text inside `Text` component anymore. +- `isDisabled` prop can be used to disable the button. +- Icons in Button: + `leftIcon` and `rightIcon` are the new alternative to iconLeft and iconRight respectively and they accept **tsx.Element**. +- Colors of the Buttons: + In v3 the color is controlled by `colorScheme` prop. So all the color providing props [ **light**, **info**, **success**, **warning**, **danger** and **dark** ] can be passed as value (and more) to `colorScheme` props. +- Design of the Button: + With v3 we're providing some mostly frequently used designs as `variants` [ **solid**, **outline**, **ghost**, **link** and **unstyled** ] and lot more customisation. +- Sizes of the Button: + In v3 the size is controlled by `size` prop. And it accepts pre-defined sizes [ like xs, sm md, lg ] and also custom values. + +## Code Comparison + +## Colors to the Button + +Besides option like **light**, **info**, **success**, **warning**, **danger** and **dark**. Now you can also provide colors like **red**, **blue**, **cyan**, **teal** and a lot more. + + + + +![Button/Screenshot_2021-01-22_at_12.29.32_PM.png](Button/Screenshot_2021-01-22_at_12.29.32_PM.png) + +```tsx + +``` + + + + +![Button/Screenshot_2021-01-22_at_12.53.09_PM.png](Button/Screenshot_2021-01-22_at_12.53.09_PM.png) + +```tsx + +``` + + + + +### Sizes of the Button: + +Besides option like **light**, **info**, **success**, **warning**, **danger** and **dark**. Now you can also provide colors like **red**, **blue**, **cyan**, **teal** and a lot more. + + + + +![Button/Screenshot_2021-01-22_at_2.37.09_PM.png](Button/Screenshot_2021-01-22_at_2.37.09_PM.png) + +```tsx + +``` + + + + +![Button/Screenshot_2021-01-22_at_2.38.52_PM.png](Button/Screenshot_2021-01-22_at_2.38.52_PM.png) + +```tsx + +``` + + + + +### Designing the Button + +With v3 you can combine variants and style props to create various designs. + + + + +![Button/Screenshot_2021-01-22_at_1.16.25_PM.png](Button/Screenshot_2021-01-22_at_1.16.25_PM.png) + +```tsx + +``` + +![Button/Screenshot_2021-01-22_at_1.23.42_PM.png](Button/Screenshot_2021-01-22_at_1.23.42_PM.png) + +```tsx + +``` + +![Button/Screenshot_2021-01-22_at_1.17.11_PM.png](Button/Screenshot_2021-01-22_at_1.17.11_PM.png) + +```tsx + +``` + + + + +![Button/Screenshot_2021-01-22_at_1.15.34_PM.png](Button/Screenshot_2021-01-22_at_1.15.34_PM.png) + +```tsx + +``` + +![Button/Screenshot_2021-01-22_at_1.22.36_PM.png](Button/Screenshot_2021-01-22_at_1.22.36_PM.png) + +```tsx + +``` + +![Button/Screenshot_2021-01-22_at_1.20.36_PM.png](Button/Screenshot_2021-01-22_at_1.20.36_PM.png) + +```tsx + +``` + + + + +### Icon Button + +With v3 iconLeft and iconRight can now accepts tsx.Element as child and render the element at the appropriate place. + + + + +![Button/Screenshot_2021-01-22_at_1.32.47_PM.png](Button/Screenshot_2021-01-22_at_1.32.47_PM.png) + +```tsx + +``` + + + + +![Button/Screenshot_2021-01-22_at_1.38.15_PM.png](Button/Screenshot_2021-01-22_at_1.38.15_PM.png) + +```tsx + +``` + + + diff --git a/versioned_docs/version-3.2.1/migration/Button/Screenshot_2021-01-22_at_1.15.34_PM.png b/versioned_docs/version-3.2.1/migration/Button/Screenshot_2021-01-22_at_1.15.34_PM.png new file mode 100644 index 0000000000000000000000000000000000000000..1f0a85886576217db343150d2e295264fcfad8fa GIT binary patch literal 9022 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 Yc51Ey+58dy`~Q@ZoSJO4v_;7O0lVT4&j0`b literal 0 HcmV?d00001 diff --git a/versioned_docs/version-3.2.1/migration/Button/Screenshot_2021-01-22_at_1.17.11_PM.png b/versioned_docs/version-3.2.1/migration/Button/Screenshot_2021-01-22_at_1.17.11_PM.png new file mode 100644 index 0000000000000000000000000000000000000000..2c80f15496b1cb3c88a84b637f60b3a5dc1fc2d9 GIT binary patch literal 10048 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 literal 0 HcmV?d00001 diff --git a/versioned_docs/version-3.2.1/migration/Button/Screenshot_2021-01-22_at_1.22.36_PM.png b/versioned_docs/version-3.2.1/migration/Button/Screenshot_2021-01-22_at_1.22.36_PM.png new file mode 100644 index 0000000000000000000000000000000000000000..cd3d19be5125925682daa1702d1bb8a58aef387c GIT binary patch literal 8306 zcmd6L1y@|#vTh?mgVShm3lQAt#)7-MyF>7X#$6IT&_ICTP9Oo&xVr@>5Hv`FTX1>3 z_c?E$Gv50F_s%hD);Fu_tD3Ub7;~*S4K;ZjED9_D0Dz;YAftuQwFpteKtuG+3LGu~ zz;h=@X=x2bX=z#wPj@><7h3>8A@03Cx`FmENuF_Pa`HE1f@Hz~`GEI?uM=o#b@AUP zqY^5;#gyt#ItuW(e+LYD;KzU;!%Xa;9R0!c}6K0dz;$-EN! zD3D&IhE*Gq_@qCzfo%f@Bzwp5-SC=;_l*PA_x%YSkpMDLt5!;3GGV)t)$CD7uiKQu zzPyK&A=|Tg%!I01fhjjf0p*&_CXRvtimQ)#hC`##V2XS?UxIU4D*!(g9qtxpb6_m6 z9<;NouCsru`YDI>3GJK!NcjtbeC4Fz=c8RaIBS7m^K%d2!1Uh_rHU5-w55D<` z=e$_{+R>(sKE$BcxH+wm7>4DMDa^;Lr|BFEl?}9AL6T&B?QfGhO)aoFyjT|;id2uC zPf78to}h1Ivkm6(UYt*vcp{9fmc+ZVJTwiXUc3+c+2=ac_v3cIiy`m18aS0l>?$to zo2QXFvCQ$dniXFGpC}7Li#7-O<0Io(@wI82UJ)}5N>(G)e|aTDr)10bSz#!Vydh=e zC-Btx^$RY1`N)?y^*yf~A#Eca{N{o%t|r5mn|UA}9PUC3 zP-7ckf14ggz|+PYN`Jy4gG@`AP0Gv728hylvQ?;R6Ah~lo9YQ8Z(e8ZyP?I}>W1EQ zy*f?)YIB0>B=dAK5%muJ=XiuF&*Sl*h$VLll3AH5{xhj0m2oL$D>9yRGR5aCOB>M; z+M^`-UT1C>H#puA2sS7L?a_Wsxk0cYT9Eq&T3BvyE1g~>1=_;XpQAs&Gg_Zdo*}~P zMxh1S43NX=-t>rlq#>b36@$L!Fa~}tWE-P_KV@|LsY~0+`_dI{S#DW;K1|{hI1m8G z7!Wr;c8HG{@Wt$nQ&ZebN!+#WomOd=%#0mOg{qPW z+dUZa_VVz0CV5(;+0n7ei`GGh@$+721q>fV>3ev1P+jxZ%m)ZNpnVOw6UrS2UT23M z|Nb)S@99{e6~oSndY$nt5;P8g0kAEw&plAgx@b@%xVf?V!ex@Nn7i1pH$*eTSuN0D z*h-S*255Q_J{ClaSia$6782#?s_VkSIGmxQ>!NUMeRXsQW=l8pTMR7*W&xddAAm=; z8Xvt6=Tr(gg`1HgPF^eJIU^+jgQpD|FCMG39_@ZIhl0QvyC<1Q;s@!a-W15)Zx3A$D?C#a<2X)+KEgrz zA{xr`9wz-k%|zvg7!H{eBVpxO$7Uh_u+YK)sE9TK{-ofG<-2lsf4pk0$p$H~1ET!_ zVLt7DyeNYx6ID}G-;IkIXS*gJ+AOmzJNwFjXj)BLaeOlmHKFRzf}oNICiL0vQK_xE z?t<}@^9k?ij(wtTImn0CVh#^d2zK&wh4pt zytmF9XdRf0l}M9Rhr#ODH-fAbHmCbq6`K^#iZg7+w=TB!w(wXBSlP9f1{29ZUI$S+ zy*ips(iE&5BCb%QNqC({)u2x?v^2ALjm(`dc<+Eu;YTJH`hGak1tDl7>OC?*hLUogtHKjrQGN&!T^DDnn zi)r-Gz$gWl_lEj|Y;(;$%S~@jSI#LA>E}>*RQ8~=4Fo(<~eVTM!3YxceM1(F8z7jPjB)~Lu#*^Lloyz z=S$3#g*X{FiMU$p!45YQz$Ny0J+PTbfb9y~PUW=jv7Wj~Q0fLn^)rKo+Lg=II!6}S)IgWVm+W6kc@bGOb8ZAjVi(FbTGwB)MsC{uzv zK;uu$3Jr9*eJKh2JP2~C*;CY-eF|a<02G{HbM8tf}>9Jeo3w6=t$cDMWP{wjz@35pZo z7kqI8+0h;;vk%f1PZQSt*ff_{Q7O-HrCIyp~q(KHg&V^nVrlr~PZ5wh+hv zRC4qB_p%TRtZP5=!)1gL=ABvVesGK|DWSO1^z^YN$6_6nA4Htu3r87s9fU?aV}CamME?>Ye`$nZh;iRD^ddB-qKuRd1nJ-dR3m*C zIFR37H%cXo9N$GR^d3X*B$|Md!$H+~U?)k}p*$ ztfJb;$CGBpTaj3pTve_x8}BEnW3m0Y$J5^Ldf4(OYxTG?aR+E!4OZRg4{sC5^# zdzE)3!o>%R7Wo*H7}`y5F}+Ul%6iEZh=fy%)}2i7ZJmPGb;%K@)~@S+>EJgM>qkK- zjhi~2QNZ%IB|jqSPEyS#1x8sW3pN@-<=6>WVrYDq7)otbClPvWVE9=J-qiR{Nehg# zr)w2EzMg}Wp*%1)`*dfxzqY6Mo;T_n^-%V?KSG0RJvTcu7}qg?G|UXH%BnVMYTR-i z)p*6eZ1j$(%~{#DzT%lHro=9I#6C;9yUwxP_nRQv0u1bTa%Ll7Ft-S$T^jlL3di*i ze~JYot_psp0oC5p5(%l-GCwkfU2o?HseWXLlbVS(kRx8iYCXz%AUJ|vZx%m60G4|@ zA$Nayodcitl+yiq{OX=l&mLG+3F6+uG$XZZL{E~(Z40Kc@f@nls;Pr( zCzDF2vxtjVGqWGe<1cbFtqXhwooGcso9ScUWwD1koMQ*~44ZN7ri#ENtep^gS7W5Vbw_kRyuec{ABRdFF2;-2I(0#WU zg4T4ur>P^TSM`;YX|kVp@b$&b?diZS^xOP$;u~Y(y!<=jO$O#?s@oEJnWi_yF?$kv z+#Jg6eIpG_-RGX)b}73&c01p|ZkK-h_JH^SIReDPMB3c;Bd>_njmOY~^= z;+}c!yU$y9Ez6U=inT`($q`hhdZv(=2Of|!dwz|k=~IM;Uhy;6bUbn-0s~6S`;%8A zIXwwI?aU4PecJfmV@uMT_+a0-N1989RCaB&LoDqb_7w?=Knbb#A09xOS?U4Xfv;;b zqjy3K8TG?zuo?XXr;glSLkymqnHwrul%kFow;YPxiLcf?CREOvPa3{E-mSsRJKn?{ zNF;Lqxz)&ajlun;im;l$(djwIkUB@#?Txy%mBZW5L@#~wAJB14zzX@Ge)1&)x8HA; zhV~nVuYP9Tvm~q5$;okTWGMQ!6%d-K2_q>|BUMD3D-;9yI-|=xJ48xv^Bh|vb6I=~ zZgzlXf@8pl_gTTWhN}IX{QOwXJK$*DtWh16t?Up_s{^rf>Xrc0wpr9Kizh)Lk}jcr zaQ^CX=!@ro!S zUVAQMa4v1#nd}TN2k*Jlb7a^!Vu9g4u&xm@T7LK3)r6oAGM|kJRf8Ti2Bc%LlS-mH z!;18i3UaEVuj|}4jEKv`%R|pKqg@_d(A5Ziv+&Qd%(t;<2}`3TLk#o_m;)gO{7MNS z(bbDO!q6oRtyAR&U$e4{&(^;$tdO&npTNT1W(BE_qc+2|4aSS?kui}JaSI;;vrcCT9;a}2_YHICL+r7q~csac@4r3I${*bWCdcCW=BL2WQab z@4a0(R?9=3e)@I7pKNb`z4o?wp_E{@W22_^mFs=TanytGf-eC{@Wfa98oMZU`Tj=h z#m8aaMo`*5EGe~zM&r}k^j`aF@ImbjD7z*1g9gzF%q zfKjK>sXaFxptH&e42Gc;*0vQ07PV%Yu8qh=o^a(68KSNK=mG`Z5$`~&3J)g#@#9AAcTVK+A5X8;>=}RN;>q%XjG~L0_#FDL6 zSkaDaHW6ByBgnYU@ zC}g1_neHWE`m0C2Ip2D>+12R>QPGaoHjIT%`El-4$fJc@`8#KB-SdQ0JJ4XzO8-RL z!=mryWZg1|hn0?~ibWg;Pw46spZ?V$??RlA$4Q@*Rw>OR= z@SiY>@l<+y2$C3jxGq*_Zr73$$m5nN<&2?xkLeGrxMr)pk^s#D4~X@p9DkF*AKD{! zMmHDtO*49r$t$L#PwKAyanACyI@kl816T6n$6~JePf+Z{^@ou5GK_S>oG{WdF>D&Y zV{zZBwPeQcfoFKah9@O0V&TQ)BorZ?aVF%Qj_US&a*2dWIY$TcVVBSl|F31+V+ss4U{!(+usRpmQd^}lJk>v zLbk}Sp|>J~7i9@CYClYnp^c>qmKieZ^3i{AD!uaxHeId<<$%>E>tt;LP@-&6qq^H~ z0XhpAU4zRslr&I+Ug_v^`(b^S_jgp4bHS0=denY-I@9gK{)8BK^Z!kht;z!h< z>4T9nnL2cL{+KwgM+yGDa6Y4NX);^BDt+7k6r*IKS(JNocRH1Y2c#S9Q|;MPRPUWu zeujFV^y#2K(JMqV9z@TK!!-%P6-4tm+)#a4(}9bJ=YH>SrZo08=Q(L`@f`nxrS$x< zCgjc&Z&PV)%Gkbcdy&$Cg@+;By54PoqVF0nnR70(?o;j~L#?iP6wQO7tQFJ~8ho^_ zT<%^SCPZZGy2Dm1&n&W=Mz||Y$Y1p`!GAN});hnZLF#9~*n44aAeTl3O8Y&PcEvPP z%=v75Ja0EIy>@IE7n`d9+>xV*#IK@{oKQHq@}P16)0f8ldkobN)fS!Kyi}835B&|9 zgvv|bx?t4Xl4UE2ID=o;1E(+rCh;7fY9h%;nmU8TbT+XJgfK3!p90B!aCG1Jc=cYx z<+&N$;wyFASK8lXc7um+_0kJ}n^}4GVCl3-B^%EA=o3g}p!J;8)UX?xjY zuDU}zM|;sVIw!r=K2gFvmeTc%J_Lk@Ee&5DNhBnOzdtk9<_I@Xt_|_#*bKKySL(Q! ztAZP4)XaJWYzo!C*&@O?#|%$L8dRFF^gCM9c^#Yj$y!T^Fs{eFFv&I5By7q+#Eo2w zfp9}ff{mieQ2em3BD`qisks8X4(vlGZlT!7b;Vb5ZH=zp^||5LiZ*|)zqloES9DeM z0cqrjxF>h9cI2MCwC^oY_|_EqtM5>+!gMjG6`ksNGXM91dvYB-KXv}pYC$(2QypwN z^V{UOYfKcfiHJCU%v)!}Pwd;o1%FOX!ummgaUE;TRa)hjZfmT1)>I|o6hmB^D}Lld zXlyxe8?RBTP}GSOU72`n)I=_7K3t=yuwWJ|7P^*dWh(khpT&PFV04UWM-lh~tbFt- zT055uL0_X3NaFOXdODpxUmR(!R?+yrBz@07FeI?FMBx$hlToVgiiupA`)RdXMJZ8V ztv%v{vHjc+k|jJ#R;Eg0*Qz5kQfOiCW}V##U+nILrip&I>R{8l?>J854hFLtvErJd zF6V~So3c3wYC}%ufq?Ur zvZ{#trdCuwyYChp0`}WUI&3wxdM5zNWOkb0i~op!sK~ibCEWT|GqVW&gCB3mhvol5 zRfi**F{{^pj6!ryQL=&$8)CGkraQX5oT!)jgQtv9PeGEAw_;UUdxtg37pzWvOE%mZ z6KwWrY@bix1%hlhU~e^1rvmqIlV^7=?`l%c-vAFUSI@J|dHJOkD{dJ_-2^hE61?Ap zk4Ko``tAmWIRi6U(P}2{HuGtQ^9ewSe@?*9Pq6RY%_UlSpLtNhhLJXryE$uH`w0uw zDk5njhz@C@E|3^f`f9$fG#>A>&~?nlp6ykqEC(k0(YpTR$zFEyw+7a}Ng!TH*!T_N zVVvN}Jzr3IJ=A0(w_U|T(EbCg>-mlAPJ$&S|~f!T;7LApfF)6pa7@Fkpg0=*Zddo!E%W9$ExILz>yyk(4A_c;WHQj7$ar zXf2k0yufhS%x1t{!j3=y3RIPx926u~6R$ogs3krEM1(qedC`81b50a?;CfDv0QlUl vZn&uY9^(Y)hfz`pfP-8*{y#gJN0iUW%b}Mfm>#@5F70 literal 0 HcmV?d00001 diff --git a/versioned_docs/version-3.2.1/migration/Button/Screenshot_2021-01-22_at_1.23.42_PM.png b/versioned_docs/version-3.2.1/migration/Button/Screenshot_2021-01-22_at_1.23.42_PM.png new file mode 100644 index 0000000000000000000000000000000000000000..5bef6f3942a96f65ff94287897fa2dc013fc6357 GIT binary patch literal 7841 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 E0C`eO$p8QV literal 0 HcmV?d00001 diff --git a/versioned_docs/version-3.2.1/migration/Button/Screenshot_2021-01-22_at_1.32.47_PM.png b/versioned_docs/version-3.2.1/migration/Button/Screenshot_2021-01-22_at_1.32.47_PM.png new file mode 100644 index 0000000000000000000000000000000000000000..7bb43656da0b713ded795a0025aafb6002a68f46 GIT binary patch literal 9384 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 ZR}i?Ov7)pI`=tONBdH)!DP|P-e*kRRuoM6Q literal 0 HcmV?d00001 diff --git a/versioned_docs/version-3.2.1/migration/Button/Screenshot_2021-01-22_at_12.29.32_PM.png b/versioned_docs/version-3.2.1/migration/Button/Screenshot_2021-01-22_at_12.29.32_PM.png new file mode 100644 index 0000000000000000000000000000000000000000..24f882b52744257850152b4232ac76d98fb4e8dc GIT binary patch literal 8297 zcmZX31ymee67DcSaF^f^Ai>=ScXx*bm*6(IySuv#8YB!(aDoI6POu;oNN{&~Gtxt)?Q2fl7i3001!L<)k!Tc-#vqA-{S#_Rt&0008K=Hjb8yAWjmlkE~BRu0$*ql{R*I5(2J59E$j0 z0xM&i2hLzjT@3vfLNP)DXr?sudN3rWft3(n`j@ht*rNY0-`)G2$-t?+Th(^1>vcG> z#!RMUSg`>B7K>JTit}b1T4kf8fg}dNr0+#lYZuB6BY6E9qX_*fF!P$Ph$pRD1+^|P z;aPWj6U{;hkOYq6y5%$y8JGZU?0e(dzyYMf*Uc1yrGj_GYM8>|Bsvv>8`HfifYyvI zvq8#cLZn+`fJ*iD_cpu$lIx-Z{cmFtLL`N6JaEpX%>dlwZ!lpf?S4@NP{EyDRgDeQ zD2L)M1T!M6laYr6u6w74Y{`fBj#t<^J3Lgj#njofiGqjE%oEQU4??#^SawU55;hi{ z)PZ_m4ck*o@Uu`|GWogQ>8RU9`AYj)uEB{hNO)VM%uw)bjV#p%1i?Yk3Q0*2p*RDZ zTb)@S(?z%x@h5|c>IlJ~DuYsyp&|olhz<1!=@V9eO1;wAnphP_t*S1p+h^c

r!* z?efe7&!ojckgZ|vn6PLDY)z^bX8gCqVl{BkMrOV@3YJ_Aa^Dh&o03Pj2~G_q$k?!D z!{~3J{meFAoul2{#=Kc&Dyz2`XUG=j5G1!v zG>NZi?dDU6TcrpDs-H`#XpID3SIC`hXSPt=#L~U)9jt;4H_{@y zM33^HmXIA)@>>esaAIRDQQ@-(leH+Zqrd>_cDnwrJ2ex+;8~MG?5O}Mj1wDiX~8%g zo$rFEPw1q8RHQktIoTNj;cCy8a@C!n;F{p+{$S$v4TgbRDpXjX?`<#hX;Q1j34*QE z^T}j*Jks_=s4~aX@nz_;6A9s*R5kaRc%ssTxS|;mM;ehlI^FVSgcsFOqU={Yc6-M* ztRum!VLsn}O$pLXoJ~-1zO!#hrQV%n8bn+WhNU}CeSUASv5+*2ht&s9C1^23-1f$~ zU$}^pkOD#2SAxZmptXc?oU-jXqt8=S(o)vr4FqNiGif+XrXFL%|L;*Ms-K5iIGItll5#-6Odm6vb9$ zh2cDYrPTeUsV<+b7_V3{X8lVq*u*y2Y#T}^UoJ2GqaXMVEr1+BDIsh3;2YS@#SKyH zv{t>ld!6%D_Z#Hx2fj6-wqf{z$HzzIpJ4Su0RP8Vt%3J^`4a>;IYGyN8ppg{ZHhG_ znOG5SGQNiiP5`n1XeMaqF7QUZln9~h?5G1FQc0-qdKu9+L75>8Ca<#46vT-2Ug?Co zo8T>>dV~m@h*lygZ}9VDum+87fZEV>Rgt_G3X>{n>Opw_)Y3UJ!;VIqwrinlLPr1s0jn9&J-fVh2d;Ni<^R{pa0NOP2{&>uKgbUZ~7V9GC|14(Nff*A0;m$d^ysyB=c0> zE3JyHD%!tm!J)+Sm7`688wti2i+SrJk64O3V=&`5!!bjkfmEfd{9!_CLYd_~i?VW! zPK{1oi{fGBGC{Mot-l3J1Hq3(GR2+Lisa0c)@0I=%x~l{kr>{=2wXAwQkdF~1|xlQ znr51BTI=54-p*e4p81^gp4%ML+;vr!I87l)D^g0b~mD%fAH~x~u#aDmMqC zfpRAyQxGReVTtE&Tz3bsz!!lpmS23qhVC7g;0vLPl*{rx?LG2oJ8KhkyH}CP!+N7j zQ*C`W+~ZzEc3CD%C8o_^>(K9uMBj_*85bFU>d}4v@L)OUP~CN@yYUKu@4%tw#3^>zkP*$v2cs0SDO!J8I0_)J@z? zJW6!T4E7(ELY>b~4o-4Tj*zFK{@_d`hkdL3_A8lBV2F&OB4<{3)OT)Noeol|j-tL_ zLLt2(s|X>Lg+OHEjRfwD;kccTS*cI76Aue zgQ>Q9m+E2nQs45-(w{_5TmgGGZg}W)FlByDbvJ6ytzdKs8HJ&`xT#e=M}k(m)YNv7 z#@ykZ+RZK)(z))bAR=4{L5Q_JoIX=Sfi;rF=kX)_S14oQAE;YC=KpqAv6w8+!)k}N z3%cH)Yn)x}RR6MuQ4;P)xee0MWh>=?s+6~=7?PV*uW~zmTwA#nzI=%IHZ(?p3f@$G zly0wmpu7Fr-`hXhzs@kCiK#SSz*ykplJnRkJzGE!{`!%Vyl^sio%5^x&?+&Ob%T{- zcKG;c-aO}u+10}jayROogFMCTT*2#Wv&=1m!Q-8>al1Sxp}@(9VNvM^EzJ^jYL@o) z-oU={@EeKg{srly*ag-*gHbkN;~fnhqbqL?r_5>hFRGgNkJqUt-^}t6={# zf3|>$o6Di6%10I?Kg>CbCQ#cG_M@5&xdvZtU5An0&-J9`?;c)rn;A0CLy|oL&n=LV znyRy?_2e>H2H9Q8Ls1=YO@;oGRwu*)GVE48+wL?vICJm7ACcp=-| z8h(;D|6I`XrgQ4{4$bKG9;=U$&_&1Yail?)!9J_Ev2ELdZ#&e%Vr801TsOfOqs!-x zWOq4ypJQ>wk#?=ko$Jx+p5>`_xAokyr(4sj;`k`fH_W%}y7?$ml-)<|GIEX5ccp7N zQ3&1N>r}lT(vj$$Xe^Q}e7nl=%y4LP%Qb5~KeblC=N{o{6u@yLJ*+q~)?Jq(+Wh?f zdGu<&uP5aB%aU+Q$9D6D`*ZG~6UO?H*Y0Uu8C~6O-~Ge2Kc#{%hL2~!#jV$l=4ger zzotm4h^`;>e&&W}Z@=s5;VA$`ca;2wpw~pQu>s)K2oEq|1c1F9A#s`oh)4+P1;$9& zH>!HxMr7D*09(_Fn|NzJ_vj2>|g$f_otmIMV;fGH~<&_r(2CFSK`xTd+QrKO|W zM<;O9&s($?1&Xtrz8e5Q`1UWs$!pM_yu_ck(b5C!DJy}@og7$AEu73OS-l*b|Hc6b zd4XO;2TQOim6wCPqZ`OenED?N(2M+6%|=c2j|1OU~;|#WOa-{kj*VN3(9V|>u{WsBn#=p+f(#z(*nH=5zy{wl7 zvi-HNaj>$p{U`PdROqi3q-Nt~X|FG3xI8uWB-hIFGuRb2ZQ~iWYkdhv@q)6AKH`8KS|N!R3M=vCgL_m#418p%sF|g)Qc9OI*>JJ zQCcr;5_U4oR~O4s>B5Wyw#K2}T`x*N|BV6nyO8d=kdhA<_eHCJDZ)FYWQ(P>#G_zE zy<&Pu&0yI?$>t!VdtU9llTOFN|CXKRsN)9Kid9c`73xMTFjofHW#x?}-%aR_e`T#Wv!w}i zyEmm2+3OH9Oir<2#+ri!sZ@X6Kir)*@D{R}W(dCZ-+BGM(>qwhSf4SqG$RI+|A+tf zl6RAKzMR2jU9X?lc^9pucaaF-A+x&OI>eahk?^_YxNp8-8lz|YPDeE>z z6s3s%DtChg;8*uD!_WY#%$^jdDrkjj111sc+-8hBnsybbyA04$89xUJBCb#PrJ}MX z&`Sr-oNMK@4f4wUt#W-XnhCFgRG$tzN$#6t*G35kmQhT2xpNQyl zgxuQThd&iYq?e#wgAmQ(eDX`;*MYSqn%`n%>47)5jellNxcPoXYXA~ebG)Xr6Pz}1 zCu@Cb3qC$F?z0tQj+qd+owvg%Dc%c@$Ta2pwLSY3>&!NVIsyiDMe(}4ZGrHAP^~Av zklAyMihi*6)xw=HxDdJi;atnO$oP4PMlH>26d`vEkH-MxhoMQ){w8hSp{D;)IUBJ@ zH}Qp*%V&Dh-HNNcHC(TRhP)n^BSJbs5mDJ?tx$(09o589gSfNKZ-Fxt$ppR5vLAHM z^=-%O2bz&|Pa*p&r7V&8g9)N~U}SF#!A*a$H8e%~vCm>|x9T?`6zG#{GFb**e320? z?Wn%#OIs0Z@I=>fj?q*8Jil(!D;WZSh&o8)2;%&NA#C+Q>QnVgXKfHSxBA)hst;+^ zzsTFmzVR%7E9P*)U_C~*dPpsy0eASj)M>)Z!WYb@XYtBE{=t~JeI3Ex!x^h5^aT+! z^h1k_aM@hHDQ6a9lt=^Rd4k!@E-rxMWc5hh^z+c>md}Yb`^oB6BX-ts)~-nTa^9YrIMD1n{)vSQlkHtqM~lh5x4XOq06t4rS1IR_S5#^vcBH>l-)+ijeF#7{|1 zig+y2@ia)wm7|a37jfY2yBjRz+E-GnTD$f#vWGTl$!=yaFUOg&H&OhVIfey&^S*0Y z<$lq}t^x7n;7{FXkz~za;fvb%l0u_Kiu?yt%7C1*dLuLN84*nAM$R7-a_ZguK5k)J6RDhno*oK5!OcefkLY&Qo; zHzbG!r$su$%;jh>3QL-_rJ#t^IEf`te53NtDNd{R;pO4r`B_pC(H#Il3;eqcAHKIy zOJ5`oIGXGZjiPUZW26Gk5b;2V+6D%Ah7jVbnscmj%DE1wo*b?3AY3lXHv3uHc5@$@ zbhf&s;z^O|kr}HGau4p``4>X2F|nKGT?Jux)-oPj!0b;Dg> zfMg@t*q&gO0%NA`C`D=Od4D!* z%5jtrL5QiZX{tHNa(lstBg~6gah{TF;EFPluk6eT+Dxzi#aWJ^)tt5+YZsUtu(Ejs ziyqu$!WIp{WF^e+`&Huh@z6H-$H%_TXf%$%Giv<#U)yRs6c=MXi)Dx3ppDLqe8h{2 zY>=*M0;^O!LX{5@Kel(b936Nut&gM?bsLolX>KhQ`(?ApIX%@P!=8Iu^c+lbG7FS}#UpBFm>dlt0>AC^dkBs! z6sS9eMA9EO6Wf_i8#;3yBQugHu(Pm}RF|x)`yX|lagYe^P0udEcc~y*r^af0th~lA zO$&$|Kiii>&Q6pD#`yvZV0ob*k3NbWhZ_C1NLWWzvcnlS1A>C zr!>@;+d-h`Tjsyu+3M9hJg9oNFXLd>9JGezG`SkaaU{N!+KuOZCbClgu!Jf8b8WGV zka(qDmY5(2suG8K;z=5M5+oPqrK(XquN-DIM>@T>62Af@snY{S6?q%aXwY#GgEw-XoDx_xB4j8rlBl6X}wQ#}|?LtJ1-D|}* zj~y9HX;%C^tx;>z1vBjGD+tQ@X^I{c&l77~V^g2V!cmb%Cnnq*M_>Do98*`!y#vqa zCyx;#WWwscYmd`GQm%Cguo|<56lOMoO{HD6Hep>yE1ocxkG*@Xf5OFXB{0t26{O!~ z#jzX=s~8o?m>cQ)?BZm4vb9NNc zTGJ}O{K6Rgjk{4_M_>^Oq705zM@$nKC5!v%?#!R2bje~K;xdN6{!na_XYPL}kKRAiJQ}X#V%VUy4y+|atxfMU zN!#s4O-uFvis;vU;&O#2K#adD$mmzA6(l)kk;usiFvqdO-5{(~ViHiOs7VP9AFW4* z8sasJNNW&cqWLLfV~&GqeJJUF@4sTF<&l?li{WDEP`YU5+&^^V00cRa zwL#HZt2rGmDFdb%ew_-UlpEdo)7W-lFX`oti6)@kRz%Dp$<+yTN0w2Nnze?!KhQeD zu@O~lZz*P*&Y$_^j*N1Qr#mF^T@7;*XzTj=3@7F4rPX1yx>3>(_}AgXNh`z%U_uDj z`*E!Ol-+?CL`)nCtpzVEOxe&k0!TRhUh4 zrN)gZ9M`~yu5hZvQ{LW-nCyZB%HVkDiW*bDD08u!w>h+P_Hz^y+)W*Q)aGq>+>}K# zAsPynRxiymcrYc&H*0UAxHHEDuH`|V@3t_lAxB@LtPt@>Opt6q{Lyr ztd11jW#{Qx+91(3A+7mc$5sb z9_1J{`=1GZx=nv?&8k{f2(ygZI|y;$my>&Oh6tSg7+WhXK!gSBoHgpgpuL7vt4>K+ z%_ui_3tvz&MmjbDQT2nX?GH=8RDU&w;Jh&J7)zY$>D75!Z(MKLej~;ox(`0FHAnm$ z^9w>s9oPzI#XM%|RtQ5;g45d(^x2NidGyvPQ(BfE5@I+tk3MMCCF3j~pq$s!`w0lq z%7Ux+B2W#5!`;Gem30YeWRD&-`Bid93;9iTPV5OLzOPxtu2kcXeSJ_03tF0ov3i%k zx5N?j6`Z?AzuZ;!L5$D8#6__xHmFJO@h#etFp_Zmj9)n1zG`mU`8lT9ymatkE`OPs zz!6Eor1v&y&X^t)AG-z0CT;k;dlw59wPU7!q-UhZ#6uL4RCJSt00(ME(R16&_D|BZ z1p{ZO!^S#j!)SdGCX`VGI()yRr3)B)X|%JyJJS1op8c>@nA?U7j1(%h5u*eXFUW=F znU&~KMszDZOe59@v|gms1evHr9!0H&WejVt4spMMafqXEim+8N9PYpUJU7o8-E4@9 zX)N2^ruu~!nB~623lV>ZDnELw63YyfQQ!;PaI*(bG--@qCY^wCKiIqHBG`M{E_vi^ zvFSK+Yb8AIUseL*+;L$DS|&j?tc(%*#&r^3qHNy;u;3~f`gb0ZM`PxNVW-l%63l*1 z_5D7Kr-nY^JwY)1KDs#xFBuElS&O|ET|i3Gx2wSj#siN=Fm^ZIp=LAg&Cak$ABeEk zdxwB0{*8kpb?god9VbhjWjE%k$3~{@gmJDW-sVf8mU*gYzy7_K%ypR!7WA&PiKHc%&_Y8wzM}|CYhi%U^16$j5-eewA7)*-`^H z^k&|+N8Tm~T4+z+V2QzwS*3HYtNgT&;3&M?wmA3jd<(|kbc z48UCU2gqWK#Dq+v_9{2+71903!W+W?#$G>HhYp9tC`kp$+&R3ry$(d8$~R^9^!IF- z4VGzT8?$MLzxPvV&?T>8grKhvi@(bC(v!~dPCcpdE>011SD31btS9H2by(nmA@)`c z1wv#O86KP8alP6if5=`5^{{oIK#(Tf^?IFW!5Rxj0=YDXl!xFQ%kT6}vFdN(jye)j z@G^yX$u>y%KiYoJ{(dhulxb^d_Ss&2ZuI;O+e%$1xw%z9%y5)qy0 zd&3F+K&xxze)mI2@Q~%Jml7P literal 0 HcmV?d00001 diff --git a/versioned_docs/version-3.2.1/migration/Button/Screenshot_2021-01-22_at_12.53.09_PM.png b/versioned_docs/version-3.2.1/migration/Button/Screenshot_2021-01-22_at_12.53.09_PM.png new file mode 100644 index 0000000000000000000000000000000000000000..17cf494df3626e48fb0851c0b0324b43a9f5bdf2 GIT binary patch literal 8494 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 literal 0 HcmV?d00001 diff --git a/versioned_docs/version-3.2.1/migration/Card.md b/versioned_docs/version-3.2.1/migration/Card.md new file mode 100644 index 000000000..c9acc1d07 --- /dev/null +++ b/versioned_docs/version-3.2.1/migration/Card.md @@ -0,0 +1,91 @@ +--- +id: card +title: Card +--- + +import Tabs from '@theme/Tabs'; +import TabItem from '@theme/TabItem'; + +With NativeBase v3 we have removed Card components because as it's very simple to create various card layout using primitive components. + +## Code Comparison + + + + +```tsx +import React, { Component } from 'react'; +import { + Container, + Header, + Content, + Card, + CardItem, + Text, + Body, +} from 'native-base'; +export default class CardItemBordered extends Component { + render() { + return ( + +

+ + + + NativeBase + + + + + NativeBase is a free and open source framework that enable + developers to build high-quality mobile apps using React + Native iOS and Android apps with a fusion of ES6. + + + + + GeekyAnts + + + + + ); + } +} +``` + + + + +```tsx +import React from 'react'; +import { VStack, Box, Divider } from 'native-base'; + +export default function () { + return ( + + }> + + NativeBase + + + NativeBase is a free and open source framework that enable developers + to build high-quality mobile apps using React Native iOS and Android + apps with a fusion of ES6. + + + GeekyAnts + + + + ); +} +``` + + + diff --git a/versioned_docs/version-3.2.1/migration/Checkbox.md b/versioned_docs/version-3.2.1/migration/Checkbox.md new file mode 100644 index 000000000..f63647256 --- /dev/null +++ b/versioned_docs/version-3.2.1/migration/Checkbox.md @@ -0,0 +1,54 @@ +--- +id: checkbox +title: Checkbox +--- + +import Tabs from '@theme/Tabs'; +import TabItem from '@theme/TabItem'; + +Migrating [`Checkbox`](checkBox.md) to v3 will provide a lot more **design**, **size**, **color** and **customisation** option. + +## Overview + +Migrating Checkbox components can broadly described in these points: + +- **checked** props is deprecated, instead now we provide you with `defaultIsChecked` and `isChecked` prop to better manage your checkbox. For most cases **checked** can be replaced with `isChecked`. +- Colors of the Checkbox: + In v3 the color is controlled by `colorScheme` prop. And it accepts all the color available in the theme. +- onPress props is deprecated, instead v3 provides onChange which provides a callback when state of the checkbox change. + +## Code Comparison + + + + +![Checkbox/Screenshot_2021-01-22_at_3.09.29_PM.png](Checkbox/Screenshot_2021-01-22_at_3.09.29_PM.png) + +```tsx + + + Finish list Screen + +``` + + + + +![Checkbox/Screenshot_2021-01-22_at_4.34.08_PM.png](Checkbox/Screenshot_2021-01-22_at_4.34.08_PM.png) + +```tsx + +Finish list Screen +// alternative: pressing the text will also trigger onChange + + Finish list Screen + +``` + + + diff --git a/versioned_docs/version-3.2.1/migration/Checkbox/Screenshot_2021-01-22_at_3.09.29_PM.png b/versioned_docs/version-3.2.1/migration/Checkbox/Screenshot_2021-01-22_at_3.09.29_PM.png new file mode 100644 index 0000000000000000000000000000000000000000..121ecaa72899fd19e5270f0ef05545eafc2add0d GIT binary patch literal 10808 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

<0X>;T!R$9~6$gERf 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 De@@vF literal 0 HcmV?d00001 diff --git a/versioned_docs/version-3.2.1/migration/Checkbox/Screenshot_2021-01-22_at_4.34.08_PM.png b/versioned_docs/version-3.2.1/migration/Checkbox/Screenshot_2021-01-22_at_4.34.08_PM.png new file mode 100644 index 0000000000000000000000000000000000000000..ef1c1a20da072291a0e4f16f34ec0f2f6b190f2e GIT binary patch literal 9954 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 literal 0 HcmV?d00001 diff --git a/versioned_docs/version-3.2.1/migration/DatePicker.md b/versioned_docs/version-3.2.1/migration/DatePicker.md new file mode 100644 index 000000000..9d2dcf583 --- /dev/null +++ b/versioned_docs/version-3.2.1/migration/DatePicker.md @@ -0,0 +1,6 @@ +--- +id: date-picker +title: DatePicker +--- + +DatePicker is currently in progress and will be coming soon. Till then you can use React Native's [DateTimePicker](https://github.com/react-native-datetimepicker/datetimepicker). diff --git a/versioned_docs/version-3.2.1/migration/DeckSwiper.md b/versioned_docs/version-3.2.1/migration/DeckSwiper.md new file mode 100644 index 000000000..9fd590f78 --- /dev/null +++ b/versioned_docs/version-3.2.1/migration/DeckSwiper.md @@ -0,0 +1,8 @@ +--- +id: deck-swiper +title: DeckSwiper +--- + +We're still thinking whether we should add a DeckSwiper component, let us know on [discord channel](https://discord.com/invite/TSgCw2UPmb). +Till then you can use [react-native-deck-swiper +](https://www.npmjs.com/package/react-native-deck-swiper). diff --git a/versioned_docs/version-3.2.1/migration/Drawer.md b/versioned_docs/version-3.2.1/migration/Drawer.md new file mode 100644 index 000000000..1c4f74752 --- /dev/null +++ b/versioned_docs/version-3.2.1/migration/Drawer.md @@ -0,0 +1,6 @@ +--- +id: drawer +title: Drawer +--- + +Drawer component is still in progress, until it's done you can check out the recipe of integrating React Navigation's [DrawerNavigation](https://reactnavigation.org/docs/drawer-based-navigation/) in NB. diff --git a/versioned_docs/version-3.2.1/migration/FABs.md b/versioned_docs/version-3.2.1/migration/FABs.md new file mode 100644 index 000000000..7c7e20906 --- /dev/null +++ b/versioned_docs/version-3.2.1/migration/FABs.md @@ -0,0 +1,63 @@ +import Tabs from '@theme/Tabs'; +import TabItem from '@theme/TabItem'; + +Migrating [`FAB`](FAB.md) to v3 will provide a lot more **design**, **size**, **color** and **customisation** option. + +## Overview + +Migrating Badge components can broadly described in these points: + +- Instead of Passing Icon as child, use `icon` prop. + +## Code Comparison + + + + +```tsx +import React, { Component } from 'react'; +import { Container, Header, View, Icon, Fab } from 'native-base'; +export default function () { + return ( + +

+ + + + + + + ); +} +``` + + + + +```tsx +import React from 'react'; +import { Fab, Icon } from 'native-base'; + +export default function () { + return ( + } + /> + ); +} +``` + + + diff --git a/versioned_docs/version-3.2.1/migration/FooterTab.md b/versioned_docs/version-3.2.1/migration/FooterTab.md new file mode 100644 index 000000000..6262a397a --- /dev/null +++ b/versioned_docs/version-3.2.1/migration/FooterTab.md @@ -0,0 +1,6 @@ +--- +id: footer-tab +title: FooterTab +--- + +With NativeBase v3 we have removed FooterTab components because as it's very simple to create using HStack components. You can checkout the [recipe](buildingFooterTabs.md). diff --git a/versioned_docs/version-3.2.1/migration/Form.md b/versioned_docs/version-3.2.1/migration/Form.md new file mode 100644 index 000000000..c7fe61675 --- /dev/null +++ b/versioned_docs/version-3.2.1/migration/Form.md @@ -0,0 +1,72 @@ +--- +id: form +title: Form +--- + +import Tabs from '@theme/Tabs'; +import TabItem from '@theme/TabItem'; + +With NativeBase v3 we have replaced Form with [`FormControl`](formControl.md) and sliced into [`FormControl.Label`](formControl.md#formcontrollabel), [`FormControl.HelperText`](formControl.md#formcontrolhelpertext) and [`FormControl.ErrorMessage`](formControl#formcontrolerrormessage). + +Here an example to show the code comparison. + +## Code Comparison + + + + +```tsx +import React, { Component } from 'react'; +import { Form, Item, Input } from 'native-base'; +export default class FormExample extends Component { + render() { + return ( +
+ + + + + + + + +
+ ); + } +} +// need to re-write +``` + + + + +```tsx +import React from 'react'; +import { Input, Stack, FormControl } from 'native-base'; +export const FormExample = () => { + return ( + + + + Username + + + + Password + + + + + ); +}; + +// v3 version +``` + + + diff --git a/versioned_docs/version-3.2.1/migration/Header.md b/versioned_docs/version-3.2.1/migration/Header.md new file mode 100644 index 000000000..9ec9f0288 --- /dev/null +++ b/versioned_docs/version-3.2.1/migration/Header.md @@ -0,0 +1,6 @@ +--- +id: header +title: Header +--- + +With v3 we have removed the **Header** as it can be easily built using `HStack`. You can checkout its recipe [here](/buildingAppBar). diff --git a/versioned_docs/version-3.2.1/migration/Icon.md b/versioned_docs/version-3.2.1/migration/Icon.md new file mode 100644 index 000000000..cdaba70a0 --- /dev/null +++ b/versioned_docs/version-3.2.1/migration/Icon.md @@ -0,0 +1,80 @@ +--- +id: icon +title: Icon +--- + +import Tabs from '@theme/Tabs'; +import TabItem from '@theme/TabItem'; + +Migrating [`Icon`](icon.md) to v3 will provide a lot more **customisation** option. You can also create custom icons using SVG. + +## Overview + +Migrating Icon components can broadly described in these points: + +- **ios**, **android** and **type** props have been deprecated. +- default Icon type i.e **Ionicons** has been removed, now v3 does not uses any. +- v3 uses a third-party icon library ( such as @expo/vector-icons ), with **as** prop. +- custom colors and size can be added using **color** and **size** props. + +## Code Comparison + + + + +```tsx +import React, { Component } from 'react'; +import { Icon } from 'native-base'; + +export default class IconExample extends Component { + render() { + return ( + <> + + + + + ); + } +} +// need to re-write +``` + + + + +```tsx +import React from 'react'; +import { Platform } from 'react-native'; +import { Icon } from 'native-base'; +import { Ionicons, FontAwesome } from '@expo/vector-icons'; + +export default function () { + return ( + <> + + + + + ); +} + +// v3 version +``` + + + diff --git a/versioned_docs/version-3.2.1/migration/Layout.md b/versioned_docs/version-3.2.1/migration/Layout.md new file mode 100644 index 000000000..40ecc91a0 --- /dev/null +++ b/versioned_docs/version-3.2.1/migration/Layout.md @@ -0,0 +1,77 @@ +--- +id: layout +title: Layout +--- + +import Tabs from '@theme/Tabs'; +import TabItem from '@theme/TabItem'; + +## Grid + +You can easily design layouts with [Row](hStack.md) or [Column](VStack.md) components. + +## List + +With NativeBase v3 we have removed List components because as it's very simple to create various list layout using primitive components. + +### Code Comparison + + + + +```tsx + + + + Simon Mignolet + + + + + + + + Nathaniel Clyne + + + + + + + + Dejan Lovren + + + + + + +``` + + + + +```tsx +} w="90%"> + + Simon Mignolet + + + + Nathaniel Clyne + + + + Dejan Lovren + + + +``` + + + diff --git a/versioned_docs/version-3.2.1/migration/List.md b/versioned_docs/version-3.2.1/migration/List.md new file mode 100644 index 000000000..e69de29bb diff --git a/versioned_docs/version-3.2.1/migration/Picker.md b/versioned_docs/version-3.2.1/migration/Picker.md new file mode 100644 index 000000000..87dbb6037 --- /dev/null +++ b/versioned_docs/version-3.2.1/migration/Picker.md @@ -0,0 +1,91 @@ +--- +id: picker +title: Picker +--- + +import Tabs from '@theme/Tabs'; +import TabItem from '@theme/TabItem'; + +With v3 we have replaced the **Picker** with [`Select`](select.md). + +## Code Comparison + + + + +```tsx +import React, { Component } from 'react'; +import { Container, Header, Content, Picker, Form } from 'native-base'; + +export default class PickerExample extends Component { + constructor(props) { + super(props); + this.state = { + selected: 'key1', + }; + } + onValueChange(value: string) { + this.setState({ + selected: value, + }); + } + render() { + return ( + +
+ +
+ + + + + + + +
+ + + ); + } +} +``` + + + + +```tsx +import React from 'react'; +import { Icon, Select } from 'native-base'; + +export default function () { + let [language, setLanguage] = React.useState('key0'); + return ( + + ); +} +``` + + + diff --git a/versioned_docs/version-3.2.1/migration/Radio Button.md b/versioned_docs/version-3.2.1/migration/Radio Button.md new file mode 100644 index 000000000..a2ccedd08 --- /dev/null +++ b/versioned_docs/version-3.2.1/migration/Radio Button.md @@ -0,0 +1,95 @@ +--- +id: radio-button +title: Radio Button +--- + +import Tabs from '@theme/Tabs'; +import TabItem from '@theme/TabItem'; + +Migrating [`Radio`](radio.md) to v3 will provide a lot more **design**, **size**, **color** and **customisation** option. + +## Overview + +Migrating Radio components can broadly described in these points: + +- In v3 `Radio` can only used along with `Radio.Group`. +- **selected** is deprecated, instead v3 provides with **value** prop in `Radio.Group`. +- Colors of the Radio: + **color** and **selectedColor** props are deprecated, instead now in v3 **color** is controlled by `colorScheme` prop, and it accepts all the color available in the theme. +- **onPress** prop is deprecated, instead v3 provides **onChange** which provides a callback when state of the checkbox change. + +## Code Comparison + + + + +```tsx +import React, { Component } from 'react'; +import { ListItem, Container, Content, Header, Text, Radio } from 'native-base'; +export default class RadioButtonExample extends Component { + constructor() { + super(); + this.state = { + itemSelected: '', + }; + } + render() { + return ( + +
+ + + this.setState({ itemSelected: 'one' })} + selected={this.state.itemSelected == 'one'} + /> + One + + + this.setState({ itemSelected: 'two' })} + selected={this.state.itemSelected == 'two'} + /> + Two + + + + ); + } +} +``` + + + + +```tsx +import React from 'react'; +import { Radio } from 'native-base'; +export default function () { + const [value, setValue] = React.useState('one'); + return ( + { + setValue(nextValue); + }} + > + + One + + + Two + + + ); +} +``` + + + diff --git a/versioned_docs/version-3.2.1/migration/Searchbar.md b/versioned_docs/version-3.2.1/migration/Searchbar.md new file mode 100644 index 000000000..3f02a608a --- /dev/null +++ b/versioned_docs/version-3.2.1/migration/Searchbar.md @@ -0,0 +1,6 @@ +--- +id: search-bar +title: Search Bar +--- + +With NativeBase v3 we have removed **Searchbar** components because as it's very simple to create using `Input` components. To view some examples for seachbars, checkout the [searchbar recipe](buildingSearchBar.md). diff --git a/versioned_docs/version-3.2.1/migration/Segment.md b/versioned_docs/version-3.2.1/migration/Segment.md new file mode 100644 index 000000000..1f80beece --- /dev/null +++ b/versioned_docs/version-3.2.1/migration/Segment.md @@ -0,0 +1,7 @@ +--- +id: segment +title: Segment +--- + +With NativeBase v3 we have removed the **Segment** component because it's more like a Tab component. You can check out the Tab recipe +[here](buildingTabView.md). diff --git a/versioned_docs/version-3.2.1/migration/Spinner.md b/versioned_docs/version-3.2.1/migration/Spinner.md new file mode 100644 index 000000000..a4f8f160d --- /dev/null +++ b/versioned_docs/version-3.2.1/migration/Spinner.md @@ -0,0 +1,47 @@ +--- +id: spinner +title: Spinner +--- + +import Tabs from '@theme/Tabs'; +import TabItem from '@theme/TabItem'; + +Migrating [`Spinner`](spinner.md) to v3 will provide a lot more **size**, **color** and **customisation** option. + +## Overview + +Migrating Spinner components can broadly described in these points: + +- Get 2 size options, namely **sm/small** and **lg/large** or pass a number as a **size** prop. +- In v3 the color are provided by theme, so the shade for the color should be passed along with the color name. + +## Code Comparison + + + + +```tsx + + + + +``` + + + + +```tsx + + + + + +``` + + + diff --git a/versioned_docs/version-3.2.1/migration/SwipeList.md b/versioned_docs/version-3.2.1/migration/SwipeList.md new file mode 100644 index 000000000..7f7b0f37b --- /dev/null +++ b/versioned_docs/version-3.2.1/migration/SwipeList.md @@ -0,0 +1,6 @@ +--- +id: swipe-list +title: SwipeList +--- + +With NativeBase v3 we have removed **SwipeList** component. To view example for SwipeList built using [react-native-swipe-list](https://www.npmjs.com/package/react-native-swipe-list-view) in NB, checkout this [recipe](buildingSwipeList.md). diff --git a/versioned_docs/version-3.2.1/migration/Tabs.md b/versioned_docs/version-3.2.1/migration/Tabs.md new file mode 100644 index 000000000..bcbe293cd --- /dev/null +++ b/versioned_docs/version-3.2.1/migration/Tabs.md @@ -0,0 +1,67 @@ +--- +id: tabs +title: Tabs +--- + +import Tabs from '@theme/Tabs'; +import TabItem from '@theme/TabItem'; + +API for Tabs is in progress, in the meantine you can check this [recipe](buildingTabView.md) for building Tabs. + + diff --git a/versioned_docs/version-3.2.1/migration/Thumbnail.md b/versioned_docs/version-3.2.1/migration/Thumbnail.md new file mode 100644 index 000000000..2f8e46907 --- /dev/null +++ b/versioned_docs/version-3.2.1/migration/Thumbnail.md @@ -0,0 +1,73 @@ +--- +id: thumbnail +title: Thumbnail +--- + +import Tabs from '@theme/Tabs'; +import TabItem from '@theme/TabItem'; + +With v3 we have replaced the **Thumbnail** with [`Image`](image.md). And we also provide [`Avatar`](avatar.md) as well. + +## Code Comparison + + + + +```tsx +import React, { Component } from 'react'; +import { Container, Header, Content, Thumbnail, Text } from 'native-base'; +export default class ThumbnailExample extends Component { + render() { + const uri = + 'https://facebook.github.io/react-native/docs/assets/favicon.png'; + return ( + +
+ + Square Thumbnail + + + + Circular Thumbnail + + + + + + ); + } +} +``` + + + + +```tsx +import React from 'react'; +import { Avatar, VStack, Text, Image } from 'native-base'; + +export default function () { + const uri = 'https://facebook.github.io/react-native/docs/assets/favicon.png'; + + return ( + + Square Thumbnail + react-native + react-native + react-native + Circular Thumbnail + + + + + ); +} +``` + + + diff --git a/versioned_docs/version-3.2.1/migration/Toast.md b/versioned_docs/version-3.2.1/migration/Toast.md new file mode 100644 index 000000000..3c1aec5ac --- /dev/null +++ b/versioned_docs/version-3.2.1/migration/Toast.md @@ -0,0 +1,84 @@ +--- +id: toast +title: Toast +--- + +import Tabs from '@theme/Tabs'; +import TabItem from '@theme/TabItem'; + +In v3, [`Toast`](toast.md) can be created using **useToast** hook + +## Overview + +Migrating Toast components can broadly described in these points: + +- **buttonText** is no longer supported. +- **type** (prop) → **status** prop. +- **position** (prop) → **placement** prop. + +## Code Comparison + + + + +```tsx +import React, { Component } from 'react'; +import { Container, Header, Content, Toast, Button, Text } from 'native-base'; + +export default class ToastExample extends Component { + render() { + return ( + +
+ + + + + ); + } +} +``` + + + + +```tsx +import React from 'react'; +import { Button, useToast } from 'native-base'; + +export default function () { + const toast = useToast(); + + return ( + + ); +} +``` + + + diff --git a/versioned_docs/version-3.2.1/migration/Typography.md b/versioned_docs/version-3.2.1/migration/Typography.md new file mode 100644 index 000000000..3f5f0e662 --- /dev/null +++ b/versioned_docs/version-3.2.1/migration/Typography.md @@ -0,0 +1,39 @@ +--- +id: typography +title: Typography +--- + +import Tabs from '@theme/Tabs'; +import TabItem from '@theme/TabItem'; + +**H1**, **H2** and **H3** all have been replaced with [`Heading`](heading.md) component. + +## Code Comparison + + + + +```tsx +

Header One

+

Header Two

+

Header Three

+Default +``` + + + + +```tsx +Header One +Header Two +Header Three +Default +``` + + + diff --git a/versioned_docs/version-3.2.1/migration/v3.md b/versioned_docs/version-3.2.1/migration/v3.md new file mode 100644 index 000000000..ced3b4587 --- /dev/null +++ b/versioned_docs/version-3.2.1/migration/v3.md @@ -0,0 +1,19 @@ +--- +id: migration-guide-three +title: Upgrading to v3 +--- + +`v3` comes with a lot of changes in philosophy as well as the API. We have re-imagined how we should code for React Native as well as web. Keeping this in mind, you might face a lot of changes from v2 to v3. This might be a bit of tedious work but we promise you, it will be worth it! + +If you are looking to upgrade NativeBase from `v2` to `v3` in your application, we recommend looking into the following sections first: + +- [Introduction](../) +- [Core Concepts](../utility-first.mdx) +- [Features](../utilityProps.md) +- [Themes](../default-theme.md) + +This will allow you to leverage `v3` to the fullest. We have further divided the migration guide into different components, so that it's easier to search for a specific one. + +We hope that `v3` is able to fulfill all the expectations set by it's predecessor and makes the overall UX and DX of your application better. + +Happy Coding! diff --git a/versioned_docs/version-3.2.1/migration/v3xtov32.md b/versioned_docs/version-3.2.1/migration/v3xtov32.md new file mode 100644 index 000000000..d15108d16 --- /dev/null +++ b/versioned_docs/version-3.2.1/migration/v3xtov32.md @@ -0,0 +1,71 @@ +--- +id: migration-guide-three-point-two +title: Upgrading to 3.2.0 from 3.x +--- + +As we continue to improve NativeBase v3 we got a lot of feature requests and we also revamped our theme to make it more consistent, easy to understand, optimized and promote good practices while writing code. + +To do that we had to make some changes to our theme in `v3.2.0`. These are breaking changes if you are using some of the tokens in your project. To make it easy for you to upgrade, we are providing three options: + +## Extend previous version's theme for backward compatibility + +You need to add `v3CompatibleTheme` to your `NativeBaseProvider` which preserves all the old token that were changed or removed in v3.2.0. + +```jsx +import { NativeBaseProvider, extendTheme, v3CompatibleTheme } from "native-base"; + +// ... +const yourCustomTheme = { + // ... +} + + + +``` + +## Handling breaking changes + +Below is a rough account of the breaking API changes as well as the minimal change to migrate + + +### Alert: + +* Removed `Alert.Title`. Use `Text` component instead. +* Removed `Alert.Description`. Use `Text` component instead. + +### Divider: + +* Removed `size`. Use `thickness` prop instead. + + +## Note: + +We have introduced [strict mode](../strict-mode.md) in `v3.2.0` which is `off` by default. If you don't want to have strict mode, step 1 is enough. If you want to comply with the strict mode, you also need to do these: + + 1. All utility props which take theme tokens as values, now take only string values as a valid type + + This means that if you pass a number value which is supposed to be a theme token, into a utility prop, then it will be treated as invalid and based on you strict mode config will show you an error or a warning. + + ```js + // Incorrect Way to pass theme tokens to utility props + ❌ + + ``` + + ```js + // Correct Way to pass theme tokens to utility props + ✅ + ``` + + 2. Remove all non token values given to utility props which accept theme tokens. For example, `p="11"` is not supported with the [default theme](../default-theme.md). Pick up another value from default theme tokens or [define a new one yourself](../customizingTheme.md). + 3. If you are using [Icon](../icon.md) with `as` prop, verify this + ```jsx + /* correct */ + + /* incorrect */ + } /> + /* incorrect */ + } name="md-checkmark-circle" /> + \ No newline at end of file diff --git a/versioned_docs/version-3.2.1/modal.md b/versioned_docs/version-3.2.1/modal.md new file mode 100644 index 000000000..cd8f50169 --- /dev/null +++ b/versioned_docs/version-3.2.1/modal.md @@ -0,0 +1,104 @@ +--- +id: modal +title: Modal +--- + +import { ComponentTheme } from '../../src/components'; + +A Modal is a window overlaid on either the primary window or another dialog window. Content behind a modal dialog is **inert**, meaning that users cannot interact with it. + +## Import + +NativeBase exports Modal Compound component: + +- `Modal`: The wrapper that provides context for its children. +- `Modal.Content`: The container for the modal dialog's content. +- `Modal.Header`: The header that labels the modal dialog. +- `Modal.Footer`: The footer that houses the modal actions. +- `Modal.Body`: The wrapper that houses the modal's main content. +- `Modal.CloseButton`: The button that closes the modal. + +```jsx +import { Modal } from 'native-base'; +``` + +## Examples + +### Basic + +```ComponentSnackPlayer path=composites,Modal,Basic.tsx + +``` + +### Multiple Modals + +```ComponentSnackPlayer path=composites,Modal,MultipleModal.tsx + +``` + +### Modal Sizes + +You can pass `size` prop to NativeBase Modal , it can take `sm`, `md`, `lg`, `full` that maps to **60%**, **75%**, **90%**, **100%**, or a string or a numerical width of the Modal. + +```ComponentSnackPlayer path=composites,Modal,Size.tsx + +``` + +### intialFocusRef and finalFocusRef Example + +```ComponentSnackPlayer path=composites,Modal,ModalRefEg.tsx + +``` + +### Modal with avoidKeyboard + +```ComponentSnackPlayer path=composites,Modal,ModalWithAvoidKeyboard.tsx + +``` + +### Modal Placement + +```ComponentSnackPlayer path=composites,Modal,ModalPlacement.tsx + +``` + +### Custom Backdrop Modal + +```ComponentSnackPlayer path=composites,Modal,CustomBackdrop.tsx + +``` + +
+ +:::tip Development Tip +If you want a specifically aligned Modal, pass `justifyContent` and `alignItems` to Modal. +::: + +## Accessibility + +Uses React Native ARIA [@react-native-aria/focus](https://react-native-aria.geekyants.com/docs/FocusScope) which follows the [Dialog Modal WAI-ARIA design pattern](https://www.w3.org/TR/wai-aria-practices-1.2/#dialog_modal). + +### Keyboard Interactions + +| Key | Description | +| --------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| `Tab` | Moves focus to the next tabbable element inside the dialog. If focus is on the last tabbable element inside the dialog, moves focus to the first tabbable element inside the dialog. | +| `Shift` + `Tab` | Moves focus to the previous tabbable element inside the dialog. If focus is on the first tabbable element inside the dialog, moves focus to the last tabbable element inside the dialog. | +| `Escape` | Closes the dialog | + +## Props + +### Modal + +```ComponentPropTable path=composites,Modal,Modal.tsx + +``` + +### Children components + +- `Modal.Header`, `Modal.Footer` and `Modal.Body` composes the [`Box`](box.md) component. +- `Modal.CloseButton` composes the [`Button`](button.md). + +## Styling + + diff --git a/versioned_docs/version-3.2.1/more-props.md b/versioned_docs/version-3.2.1/more-props.md new file mode 100644 index 000000000..935c792be --- /dev/null +++ b/versioned_docs/version-3.2.1/more-props.md @@ -0,0 +1,13 @@ +--- +id: more-props +title: More props +--- + +### ILinearGradientProps + +| Name | Type | Description | Default | +| -------- | ---------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------ | ------- | +| colors | `Array` | An array of colors that represent stops in the gradient. | - | +| start | `Array` | This means that the gradient will start from first value from the left and second value from the top. Array can contain numbers ranging from 0 to 1. | | +| end | `Array` | This means that the gradient will end at first value from the left and at second value from the bottom. Array can contain numbers ranging from 0 to 1. | | +| location | `Array ` | Each number indicates a color-stop location where each respective color should be located. Array can contain numbers ranging from 0 to 1. | | diff --git a/versioned_docs/version-3.2.1/nativebase-factory.md b/versioned_docs/version-3.2.1/nativebase-factory.md new file mode 100644 index 000000000..242f0bdae --- /dev/null +++ b/versioned_docs/version-3.2.1/nativebase-factory.md @@ -0,0 +1,155 @@ +--- +id: nativebase-factory +title: NativeBase Factory +--- + +NativeBase factory is a function that converts non-nativebase components to nativebase enabled components so you can pass style props to them. + +```jsx +import { Factory } from 'native-base'; +``` + +## Usage + +```SnackPlayer name=NativeBase%20Factory%20Usage +import React from 'react'; +import { Factory, NativeBaseProvider, Center } from 'native-base'; +import { View } from 'react-native'; + +function FactoryViewExample () { + const FactoryView = Factory(View); + return ( + + ); +} + +// Example template which wraps component with NativeBaseProvider +export default function () { + return ( + +
+ +
+ + ); +} +``` + +## Defining component theme + +```SnackPlayer name=NativeBase%20Factory%20Component%20Theme +import React from 'react'; +import { Factory, NativeBaseProvider, Center } from 'native-base'; +import { View } from 'react-native'; + +function FactoryViewExample () { + const FactoryView = Factory(View, { + baseStyle: { + bg: 'cyan.300', + borderRadius: 'md', + }, + }); + return ; +} + +// Example template which wraps component with NativeBaseProvider +export default function () { + return ( + +
+ +
+ + ); +} +``` + +## Using mode in component theme + +```SnackPlayer name=NativeBase%20Factory%20Component%20Theme +import React from 'react'; +import { Factory, themeTools, NativeBaseProvider, Center } from 'native-base'; +import { View } from 'react-native'; + +function FactoryViewModeExample () { + const FactoryView = Factory(View, { + baseStyle: (props) => { + return { + bg: themeTools.mode('rose.500', 'cyan.300')(props), + borderRadius: 'md', + }; + }, + }); + return ; +} + +// Example template which wraps component with NativeBaseProvider +export default function () { + return ( + +
+ +
+ + ); +} +``` + +## Using ref + +```SnackPlayer name=NativeBase%20Factory%20Using%20Ref +import React from 'react'; +import { + Factory, + Button, + Stack, + NativeBaseProvider, + Center, +} from 'native-base'; +import { TextInput } from 'react-native'; + +function FactoryViewRefExample() { + const NBInput = Factory(TextInput); + const inputRef = React.useRef(null); + return ( + + + + + ); +} + +// Example template which wraps component with NativeBaseProvider +export default function () { + return ( + +
+ +
+ + ); +} + +``` + +## Params + +| Name | Type | Description | Default | +| -------------- | --------------- | ----------------------------------------------------------------------------- | ------- | +| component | React component | Original component to be passed on which nativebase props have to be applied. | - | +| componentTheme | Object | This object can include `baseStyle`, `sizes`, `variants`, `defaultProps` | - | diff --git a/versioned_docs/version-3.2.1/popOver.md b/versioned_docs/version-3.2.1/popOver.md new file mode 100644 index 000000000..57a4c1ed5 --- /dev/null +++ b/versioned_docs/version-3.2.1/popOver.md @@ -0,0 +1,94 @@ +--- +id: popover +title: Popover +--- + +import { ComponentTheme } from '../../src/components'; + +`Popover` is a non-modal dialog that floats around a trigger. It's used to display contextual information to the user, and should be paired with a pressable trigger element. + +## Import + +- `Popover`: The wrapper that provides props, state, and context to its children. +- `Popover.Arrow`: The popover arrow. +- `Popover.Body`: The body of the popover. +- `Popover.Content`: The popover itself. +- `Popover.CloseButton`: A button to close the popover. +- `Popover.Header`: The header of the popover. +- `Popover.Trigger`: Used to wrap the reference (or trigger) element. + +```jsx +import { Popover } from 'native-base'; +``` + +## Examples + +### Basic + +```ComponentSnackPlayer path=composites,Popover,Basic.tsx + +``` + +### initialFocusRef + +```ComponentSnackPlayer path=composites,Popover,RefEg.tsx + +``` + +### Positions + +```ComponentSnackPlayer path=composites,Popover,PopoverPositions.tsx + +``` + +:::tip Development Tip +You can pass custom backgroundColor using `bg` or `backgroundColor`, `borderColor` and `borderWidth` to Popover.Content. +::: + +## Props + +```ComponentPropTable path=composites,Popover,Popover.tsx + +``` + +### Popover.Arrow + +`Popover.Arrow` composes the [`Box`](box.md) component. + +### Popover.Content + +`Popover.Content` composes the [`Box`](box.md) component. + +### Popover.Header + +`Popover.Header` composes the [`Box`](box.md) component. + +### Popover.Footer + +`Popover.Footer` composes the [`Box`](box.md) component. + +### Popover.Body + +`Popover.Body` composes the [`Box`](box.md) component. + +### Popover.CloseButton + +`Popover.CloseButton` composes the [`Button`](button.md) component. + +## Styling + + + +## Accessibility + +Adheres to the [Dialog WAI-ARIA design pattern.](https://www.w3.org/TR/wai-aria-practices-1.2/#dialog_modal) + +### Keyboard Interactions + +| Name | Description | +| ----------- | ------------------------------------------------------ | +| Space | Opens/closes the popover. | +| Enter | Opens/closes the popover. | +| Tab | Moves focus to the next focusable element. | +| Shift + Tab | Moves focus to the previous focusable element. | +| Esc | Closes the popover and moves focus to Popover.Trigger. | diff --git a/versioned_docs/version-3.2.1/presence-transition.md b/versioned_docs/version-3.2.1/presence-transition.md new file mode 100644 index 000000000..2e725036a --- /dev/null +++ b/versioned_docs/version-3.2.1/presence-transition.md @@ -0,0 +1,63 @@ +--- +id: presence-transition +title: PresenceTransition +--- + +PresenceTransition provides a declarative API to add entry and exit transitions. + +### Fade + +```ComponentSnackPlayer path=composites,Transitions,Fade.tsx + +``` + +### ScaleFade + +```ComponentSnackPlayer path=composites,Transitions,ScaleFade.tsx + +``` + +## Props + +```ComponentPropTable path=composites,Transitions,PresenceTransition.tsx showStylingProps=true + +``` + +### ISupportedTransitions + +```js +interface ISupportedTransitions { + opacity?: number; + translateY?: number; + translateX?: number; + scale?: number; + scaleX?: number; + scaleY?: number; + rotate?: string; +} +``` + +### ITransitionStyleProps + +```js +interface ITransitionStyleProps extends ISupportedTransitions { + transition?: { + type?: 'timing' | 'spring', + easing?: (value: number) => number, + overshootClamping?: boolean, + restDisplacementThreshold?: number, + restSpeedThreshold?: number, + velocity?: number | { x: number, y: number }, + bounciness?: number, + speed?: number, + tension?: number, + friction?: number, + stiffness?: number, + mass?: number, + damping?: number, + delay?: number, + duration?: number, + useNativeDriver?: boolean, + }; +} +``` diff --git a/versioned_docs/version-3.2.1/pressable.md b/versioned_docs/version-3.2.1/pressable.md new file mode 100644 index 000000000..4f37c810d --- /dev/null +++ b/versioned_docs/version-3.2.1/pressable.md @@ -0,0 +1,32 @@ +--- +id: pressable +title: Pressable +--- + +Pressable is a lower level primitive if you need more flexibility than a button and access to hover, pressed and focus events. + +## Examples + +### Basic + +Pressable accepts most of the utility style system props. + +```ComponentSnackPlayer path=primitives,Pressable,Basic.tsx + +``` + +### Accessing events (hover, focus and pressed) + +Pressable accepts a render prop children, which receives isHovered, isFocused and isPressed props. + +```ComponentSnackPlayer path=primitives,Pressable,Events.tsx + +``` + +## Props + +### Pressable + +```ComponentPropTable path=primitives,Pressable,Pressable.tsx showStylingProps=true + +``` diff --git a/versioned_docs/version-3.2.1/progress.md b/versioned_docs/version-3.2.1/progress.md new file mode 100644 index 000000000..9fe5ee80c --- /dev/null +++ b/versioned_docs/version-3.2.1/progress.md @@ -0,0 +1,62 @@ +--- +id: progress +title: Progress +--- + +import { ComponentTheme } from '../../src/components'; + +`Progress` is used to display the progress status for a task that takes a long time or consists of several steps. + +## Import + +```jsx +import { Progress } from 'native-base'; +``` + +## Examples + +### Basic + +```ComponentSnackPlayer path=composites,Progress,Basic.tsx + +``` + +### Progress colorScheme + +```ComponentSnackPlayer path=composites,Progress,ColorScheme.tsx + +``` + +### Sizes + +```ComponentSnackPlayer path=composites,Progress,Sizes.tsx + +``` + +### Flat Progress + +```ComponentSnackPlayer path=composites,Progress,Flat.tsx + +``` + +### Custom Track Color + +```ComponentSnackPlayer path=composites,Progress,CustomBgColor.tsx + +``` + +## Props + +```ComponentPropTable path=composites,Progress,index.tsx + +``` + +## Styling + + + +## Accessibility + +- Adheres to the `progressbar` [role requirements.](https://www.w3.org/TR/wai-aria-1.2/#progressbar) +- On web, `aria-valuenow`, `aria-valuemin` and `aria-valuemax` to ensure the progress percent is visible to screen readers. +- On mobile, [accessibilityValue](https://reactnative.dev/docs/accessibility#accessibilityvalue) is used to ensure it's announced by Talkback and VoiceOver. diff --git a/versioned_docs/version-3.2.1/pseudoProps.md b/versioned_docs/version-3.2.1/pseudoProps.md new file mode 100644 index 000000000..a28fb89cc --- /dev/null +++ b/versioned_docs/version-3.2.1/pseudoProps.md @@ -0,0 +1,86 @@ +--- +id: pseudo-props-101 +title: Pseudo Props 101 +--- + +Before getting into details of all the common Pseudo Props NativeBase has to offer let's check some key points that these pseudo props follow. + +## Nesting pseudo props: + +In versions before 3.2.0 there was a set order in which pseudo props can be nested, but it had a some learning curve so we have simplified it. Pseudo props can now be nested in any combination with one small thing to keep in mind. + +Example: So assume you want to change the text color of a button on its hover state. + +### Do's + +```jsx + +``` + +### Dont's + +```jsx + +``` + +The above thing translates to a Text(not Button) when hovered changes its color to `secondary.400` . + +## Precedence Order for Pseudo Props: + +Now all the pseudo props follow a specific order that defines which pseudo prop can override the other pseudo prop. You can find the precedence values associated with each pseudo prop. Higher number means higher precedence. + +```jsx +_disabled(100); + +_pressed(70); +_hover(60); +_focus(50); +_focusVisible(55); + +_active(30); +_checked(30); +_readOnly(40); +_invalid(40); + +_web(10); +_android(10); +_ios(10); + +_light(10); +_dark(10); +``` + +```SnackPlayer name=Pseudo%20Props%20Precedence +import React from 'react'; +import { Button, NativeBaseProvider, Center } from 'native-base'; + +function Component() { + return ( + // Here you can see _hover will be overrided by _pressed + + ); +} +export default function () { + return ( + +
+ +
+ + ); +} +``` diff --git a/versioned_docs/version-3.2.1/radio.md b/versioned_docs/version-3.2.1/radio.md new file mode 100644 index 000000000..63485030b --- /dev/null +++ b/versioned_docs/version-3.2.1/radio.md @@ -0,0 +1,97 @@ +--- +id: radio +title: Radio +--- + +import { ComponentTheme } from '../../src/components'; + +`Radio` is used when only one choice may be selected in a series of options. + +## Examples + +### Controlled + +```ComponentSnackPlayer path=primitives,Radio,controlledRadio.tsx + +``` + +### Uncontrolled + +```ComponentSnackPlayer path=primitives,Radio,uncontrolledRadio.tsx + +``` + +### Disabled + +```ComponentSnackPlayer path=primitives,Radio,disabled.tsx + +``` + +### Invalid + +```ComponentSnackPlayer path=primitives,Radio,invalid.tsx + +``` + +### Size + +```ComponentSnackPlayer path=primitives,Radio,size.tsx + +``` + +### Custom Color + +```ComponentSnackPlayer path=primitives,Radio,customColor.tsx + +``` + +### Custom Icon + +```ComponentSnackPlayer path=primitives,Radio,customIcon.tsx + +``` + +### Form Controlled + +```ComponentSnackPlayer path=primitives,Radio,formControlled.tsx + +``` + +### Basic (With Ref) + +```ComponentSnackPlayer path=primitives,Radio,withRef.tsx + +``` + +## Props + +### Radio + +```ComponentPropTable path=primitives,Radio,Radio.tsx + +``` + +### Radio Group + +```ComponentPropTable path=primitives,Radio,RadioGroup.tsx + +``` + +## Accessibility + +Uses React Native ARIA [@react-native-aria/radio](https://react-native-aria.geekyants.com/docs/useRadioGroup) which follows the [Radio Group WAI-ARIA design pattern](https://www.w3.org/TR/wai-aria-practices-1.2/#radiobutton). + +### Keyboard Interactions + +| Key | Description | +| ------------ | ---------------------------------------------------------------------------------- | +| `Tab` | Moves focus to either the checked radio item or the first radio item in the group. | +| `Space` | When focus is on an unchecked radio item, checks it. | +| `ArrowDown` | Moves focus to the next radio item in the group. | +| `ArrowRight` | Moves focus to the next radio item in the group. | +| `ArrowUp` | Moves focus to the previous radio item in the group. | +| `ArrowLeft` | Moves focus to the previous radio item in the group. | + +## Styling + + diff --git a/versioned_docs/version-3.2.1/responsive.md b/versioned_docs/version-3.2.1/responsive.md new file mode 100644 index 000000000..aa66b499a --- /dev/null +++ b/versioned_docs/version-3.2.1/responsive.md @@ -0,0 +1,173 @@ +--- +id: responsive-style +title: Responsive +--- + +NativeBase v3 supports responsive styles out of the box. Instead of manually adding responsiveness to your apps, NativeBase v3 allows you provide object and array values to add responsive styles. + +Responsive syntax relies on the breakpoints defined in the theme object. + +```jsx +const breakpoints = { + base: 0, + sm: 480, + md: 768, + lg: 992, + xl: 1280, +}; +``` + +To make styles responsive, you can use either the array or object syntax. + +## The Array syntax + +All style props that arrays as values for responsive styles. + +For Example to make a `Box` width or w responsive using the array syntax, here's what you need to do: + +```SnackPlayer name=Responsive%20Usage +import React from 'react'; +import { NativeBaseProvider, Center } from 'native-base'; +function BreakpointExample () { + return ( +
+ This is a box +
+ ); +}; + +// Example template which wraps component with NativeBaseProvider +export default function () { + return ( + +
+ +
+ + ); +} +``` + +## The Object syntax + +You can also define responsive values with breakpoint aliases in an object. Any undefined alias key will define the base, non-responsive value. + +For Example to make a `Text` fontSize responsive using the object syntax, here's what you need to do: + +```SnackPlayer name=Responsive%20ObjectSyntax +import React from 'react'; +import { Text, NativeBaseProvider, Center } from 'native-base'; +function BreakpointExample () { + return ( + + This is responsive text + + ); +}; + +// Example template which wraps component with NativeBaseProvider +export default function () { + return ( + +
+ +
+ + ); +} +``` + +## Demo + +Here's a simple example of a component that uses a stacked layout on small screens, and a side-by-side layout on larger screens. + +```SnackPlayer name=Responsive%20Demo +import React from 'react'; +import { + useToken, + NativeBaseProvider, + Center, + Text, + Box, + HStack, + Image, + Stack, + Heading, +} from 'native-base'; + +function Example() { + return ( + + + image +
+ PHOTOS +
+ + + + + The Garden City + + + The Silicon Valley of India. + + + + Bengaluru (also called Bangalore) is the center of India's high-tech + industry. The city is also known for its parks and nightlife. + + + + + 6 mins ago + + + + + + ); +} + +// Example template which wraps component with NativeBaseProvider +export default function () { + return ( + +
+ +
+ + ); +} + + +``` diff --git a/versioned_docs/version-3.2.1/safe-area-view-props.md b/versioned_docs/version-3.2.1/safe-area-view-props.md new file mode 100644 index 000000000..a1b0deda8 --- /dev/null +++ b/versioned_docs/version-3.2.1/safe-area-view-props.md @@ -0,0 +1,99 @@ +--- +id: safe-area-view-props +title: SafeAreaView Props +--- + +To make your components respect the [SafeAreaView](https://reactnative.dev/docs/safeareaview) of the device, we have provided some props that you can use with Box component. They apply a safe padding to your component in the parts decided by the passed props. These props accept either a boolean or a number. If boolean is passed then component takes flexible inset and adjusts its children according to the the device. If a number is passed then it provides a fixed inset in the chosen direction. + +- `safeArea`: Apply safe padding to all edges. +- `safeAreaX`: Apply safe padding to x direction. +- `safeAreaY`: Apply safe padding to y direction. +- `safeAreaTop`: Apply safe padding to top. +- `safeAreaBottom`: Apply safe padding to bottom. +- `safeAreaLeft`: Apply safe padding to left. +- `safeAreaRight`: Apply safe padding to right. + +Internally, NativeBase uses [useSafeAreaInsets](https://docs.expo.io/versions/latest/sdk/safe-area-context/#hooks) hook of [react-native-safe-area-context](https://github.com/th3rdwave/react-native-safe-area-context). + +:::info +SafeAreaView props can only be applied on [Box](box.md) as of now. To make you App SafeArea safe, just wrap your app with a Box and pass safeArea props to it. +::: + +## Examples + +### Flexible SafeArea + +```SnackPlayer name=SafeAreaView%20Boolean +import React from 'react'; +import { NativeBaseProvider, Box, Text } from 'native-base'; +function MyComponent() { + return ( + // This would look different on devices with different insets + + NativeBase + + ); +} + +// Example template which wraps component with NativeBaseProvider +export default function () { + return ( + + + + ); +} +``` + +### Fixed SafeArea + +```SnackPlayer name=SafeAreaView%20Boolean +import React from 'react'; +import { NativeBaseProvider, Box, Text } from 'native-base'; +function MyComponent() { + return ( + // This would look same on all devices + + NativeBase + + ); +} + +// Example template which wraps component with NativeBaseProvider +export default function () { + return ( + + + + ); +} + +``` + +### Using Hook + +If you want to add the SafeAreaView props to other components, you can use the hook. Since, `SafeAreaView` props add relevant padding to the components, you will need to pass the padding manually that you are applying to the component for it to return the SafeArea adjusted padding. + +```SnackPlayer name=SafeAreaView%20Boolean +import React from 'react'; +import { NativeBaseProvider, Box, Text, useSafeArea } from 'native-base'; +function MyComponent() { + const safeAreaProps = useSafeArea({ safeAreaTop: true, pt: 2 }); + return ( + // This would look same on all devices + + NativeBase + + ); +} + +// Example template which wraps component with NativeBaseProvider +export default function () { + return ( + + + + ); +} + +``` diff --git a/versioned_docs/version-3.2.1/scrollview.md b/versioned_docs/version-3.2.1/scrollview.md new file mode 100644 index 000000000..1064515aa --- /dev/null +++ b/versioned_docs/version-3.2.1/scrollview.md @@ -0,0 +1,18 @@ +--- +id: scrollview +title: Scrollview +--- + +Provides a scrolling container that can host multiple components and views. + +## Example + +```ComponentSnackPlayer path=basic,ScrollView,Basic.tsx + +``` + +## Props + +```ComponentPropTable path=basic,ScrollView,ScrollView.tsx showStylingProps=true + +``` diff --git a/versioned_docs/version-3.2.1/sectionList.md b/versioned_docs/version-3.2.1/sectionList.md new file mode 100644 index 000000000..329206a1d --- /dev/null +++ b/versioned_docs/version-3.2.1/sectionList.md @@ -0,0 +1,18 @@ +--- +id: section-list +title: SectionList +--- + +A performant interface for rendering sectioned lists. + +## Example + +```ComponentSnackPlayer path=basic,SectionList,Basic.tsx + +``` + +## Props + +```ComponentPropTable path=basic,SectionList,SectionList.tsx showStylingProps=true + +``` diff --git a/versioned_docs/version-3.2.1/select.md b/versioned_docs/version-3.2.1/select.md new file mode 100644 index 000000000..cfecd7ead --- /dev/null +++ b/versioned_docs/version-3.2.1/select.md @@ -0,0 +1,87 @@ +--- +id: select +title: Select +--- + +import { ComponentTheme } from '../../src/components'; + +import { AndroidBadge } from "/src/components/index"; + +Select creates a dropdown list of items with the selected item in closed view. + +## Import + +```jsx +import { Select } from 'native-base'; +``` + +## Examples + +### Basic + +```ComponentSnackPlayer path=primitives,Select,Basic.tsx + +``` + +### FormControlled + +```ComponentSnackPlayer path=primitives,Select,FormControlled.tsx + +``` + +### Select + +## Props + +```ComponentPropTable path=primitives,Select,Select.tsx + +``` + +### Select.Item + +## Props + +```ComponentPropTable path=primitives,Select,SelectItem.tsx + +``` + + + + + +## Styling + + + +## Accessibility + +- use `native` variant. Accessibility improvements on styled variant is in-progress. diff --git a/versioned_docs/version-3.2.1/setup-provider.md b/versioned_docs/version-3.2.1/setup-provider.md new file mode 100644 index 000000000..91ab8c8b7 --- /dev/null +++ b/versioned_docs/version-3.2.1/setup-provider.md @@ -0,0 +1,129 @@ +--- +id: setup-provider +title: Setup NativeBase Provider +--- + +NativeBaseProvider is a component that makes the theme available throughout your app. It uses React's Context API. Add NativeBaseProvider to the root of your app and update App.js as follows: + +**App.js** + +```jsx +import React from 'react'; +// 1. import `NativeBaseProvider` component +import { NativeBaseProvider, Text, Box } from 'native-base'; + +export default function App() { + // 2. Use at the root of your app + return ( + + + Open up App.js to start working on your app! + + + ); +} +``` + +## **Add custom theme (Optional)** + +If you need to customize the default theme to match your design requirements, you can extend the `theme` from `native-base`. + +NativeBase 3.0 provides an `extendTheme` function that deep merges the default theme with your customizations. + +```jsx +// 1. Import the extendTheme function +import { extendTheme, NativeBaseProvider } from 'native-base'; +// 2. Extend the theme to include custom colors, fonts, etc +const newColorTheme = { + brand: { + 900: '#8287af', + 800: '#7c83db', + 700: '#b3bef6', + }, +}; +const theme = extendTheme({ colors: newColorTheme }); +// 3. Pass the `theme` prop to the `NativeBaseProvider` +function App() { + return ( + + + + ); +} +``` + +## Add colorModeManager (Optional) + +If you want to do something with the color modes in your app, you can use colorModeManager Prop of NativeBaseProvider to achieve it. + +In the below example we will show how to store the active ColorMode in a async storage, so it can be consistent all around our app. + +```tsx +import React from 'react'; +import { NativeBaseProvider, ColorMode } from 'native-base'; +import type { StorageManager } from 'native-base'; +import AsyncStorage from '@react-native-async-storage/async-storage'; + +export default ({ children, theme }: any) => { + const colorModeManager: StorageManager = { + get: async () => { + try { + let val = await AsyncStorage.getItem('@my-app-color-mode'); + return val === 'dark' ? 'dark' : 'light'; + } catch (e) { + console.log(e); + return 'light'; + } + }, + set: async (value: ColorMode) => { + try { + await AsyncStorage.setItem('@my-app-color-mode', value); + } catch (e) { + console.log(e); + } + }, + }; + return ( + + {/* Your App Goes Here */} + + ); +}; +``` + +## Add external dependencies (Optional) + +If you want to use [Gradient feature in Box](box#with-linear-gradient), you need to pass linear gradient dependency as a config object in NativeBaseProvider. This dependency can be either from [expo-linear-gradient](https://docs.expo.io/versions/latest/sdk/linear-gradient/) or [react-native-linear-gradient](https://www.npmjs.com/package/react-native-linear-gradient) + +```jsx +import React from 'react'; +import { NativeBaseProvider } from 'native-base'; + +const config = { + dependencies: { + // For Expo projects (Bare or managed workflow) + 'linear-gradient': require('expo-linear-gradient').LinearGradient, + // For non expo projects + // 'linear-gradient': require('react-native-linear-gradient').default, + }, +}; + +export default () => { + return ( + +
+ +
+ + ); +}; +``` + +## NativeBaseProvider Props + +| Name | Type | Description | Default | +| -------------------- | ----------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------ | ------------------------ | +| initialWindowMetrics | Object | Mock data for frame and insets. [Refer this](https://github.com/th3rdwave/react-native-safe-area-context#testing) for further information. | - | +| colorModeManager | { get : Function , set : Function } | Manage Color mode in your app | - | +| theme | Object | use custom theme in your app | NativeBase Default Theme | +| config | {dependencies: {}} | To include external dependencies. For example - [Linear gradient](box#with-linear-gradient) | - | diff --git a/versioned_docs/version-3.2.1/slide.md b/versioned_docs/version-3.2.1/slide.md new file mode 100644 index 000000000..fb8279ee1 --- /dev/null +++ b/versioned_docs/version-3.2.1/slide.md @@ -0,0 +1,38 @@ +--- +id: slide +title: Slide +--- + +Slide component provides a declarative API to add sliding transitions. + +## Import + +## Examples + +### Slide + +```ComponentSnackPlayer path=composites,Transitions,Slide.tsx + +``` + +### Slide wrapped inside parent + +```ComponentSnackPlayer path=composites,Transitions,SlideWrapped.tsx + +``` + +### Slide Composition + +```ComponentSnackPlayer path=composites,Transitions,SlideComposition.tsx + +``` + +## Props + +### Slide + +| Name | Type | Description | Default | +| --------- | -------------------------------- | ------------------------------------------------------ | -------- | +| in | boolean | Show the component; triggers the enter or exit states. | - | +| duration | number | Duration of animation in mili second. | 500 | +| placement | `top` ,`bottom`, `left`, `right` | The direction to slide drawer from. | `bottom` | diff --git a/versioned_docs/version-3.2.1/slider.md b/versioned_docs/version-3.2.1/slider.md new file mode 100644 index 000000000..b8d94b9e9 --- /dev/null +++ b/versioned_docs/version-3.2.1/slider.md @@ -0,0 +1,86 @@ +--- +id: slider +title: Slider +--- + +import { ComponentTheme } from '../../src/components'; + +The `Slider` is used to allow users to make selections from a range of values. + +## Import + +NativeBase exports 4 slider-related components: + +- `Slider`: The wrapper that provides context and functionality for all children. +- `Slider.Track`: The empty part of the slider that shows the track. +- `Slider.FilledTrack`: The filled part of the slider. +- `Slider.Thumb`: The handle that's used to change the slider value. + +```jsx +import { Slider } from 'native-base'; +``` + +## Examples + +```ComponentSnackPlayer path=primitives,Slider,usage.tsx + +``` + +### Color + +```ComponentSnackPlayer path=primitives,Slider,color.tsx + +``` + +### Value + +```ComponentSnackPlayer path=primitives,Slider,Value.tsx + +``` + +### Size + +```ComponentSnackPlayer path=primitives,Slider,Size.tsx + +``` + +### Customised + +```ComponentSnackPlayer path=primitives,Slider,Customized.tsx + +``` + +### Form Controlled + +```ComponentSnackPlayer path=primitives,Slider,FormControlled.tsx + +``` + +## Props + +### Slider + +```ComponentPropTable path=primitives,Slider,Slider.tsx + +``` + +### Children components + +- `Slider.Track`, `Slider.FilledTrack`, and `Slider.Thumb` composes the [`Box`](box.md) component. + +## Styling + + + +## Accessibility + +Adheres to the [Slider WAI-ARIA design pattern.](https://www.w3.org/TR/wai-aria-practices-1.2/#slidertwothumb) + +### Keyboard Interactions + +| Name | Description | +| ---------- | ----------------------------------------------------------------- | +| ArrowRight | Increments/decrements by the step value depending on orientation. | +| ArrowLeft | Increments/decrements by the step value depending on orientation. | +| ArrowUp | Increases the value by the step amount. | +| ArrowDown | Decreases the value by the step amount. | diff --git a/versioned_docs/version-3.2.1/spinner.md b/versioned_docs/version-3.2.1/spinner.md new file mode 100644 index 000000000..359275a20 --- /dev/null +++ b/versioned_docs/version-3.2.1/spinner.md @@ -0,0 +1,32 @@ +--- +id: spinner +title: Spinner +--- + +## Examples + +### Basic + +```ComponentSnackPlayer path=primitives,Spinner,usage.tsx + +``` + +### Colors + +```ComponentSnackPlayer path=primitives,Spinner,color.tsx + +``` + +### Sizes + +```ComponentSnackPlayer path=primitives,Spinner,size.tsx + +``` + +## Props + +```ComponentPropTable path=primitives,Spinner,index.tsx + +``` + +Spinner composes [`ActivityIndicator`](https://reactnative.dev/docs/activityindicator) so all `ActivityIndicator` Props can be passed to Spinner. diff --git a/versioned_docs/version-3.2.1/stack.md b/versioned_docs/version-3.2.1/stack.md new file mode 100644 index 000000000..12ac4ecae --- /dev/null +++ b/versioned_docs/version-3.2.1/stack.md @@ -0,0 +1,18 @@ +--- +id: stack +title: Stack +--- + +`Stack` aligns items vertically or horizontally based on the `direction` prop. + +## Example + +```ComponentSnackPlayer path=primitives,Stack,basic.tsx + +``` + +## Props + +```ComponentPropTable path=primitives,Stack,Stack.tsx + +``` diff --git a/versioned_docs/version-3.2.1/stagger.md b/versioned_docs/version-3.2.1/stagger.md new file mode 100644 index 000000000..ac8bce5c4 --- /dev/null +++ b/versioned_docs/version-3.2.1/stagger.md @@ -0,0 +1,54 @@ +--- +id: stagger +title: Stagger +--- + +Stagger component provides a declarative API to add Staggered Transitions. + +## Example + +```ComponentSnackPlayer path=composites,Transitions,Stagger.tsx + +``` + +## Props + +```ComponentPropTable path=composites,Transitions,Stagger.tsx showStylingProps=true + +``` + +## IStaggerStyleProps + +```js +interface IStaggerStyleProps extends ISupportedTransition { + transition?: { + stagger?: { + /** + * Delay to add to each child + */ + offset: number, + /** + * When true, delay is added from the last child + */ + reverse?: boolean, + }, + + type?: 'timing' | 'spring', + easing?: (value: number) => number, + overshootClamping?: boolean, + restDisplacementThreshold?: number, + restSpeedThreshold?: number, + velocity?: number | { x: number, y: number }, + bounciness?: number, + speed?: number, + tension?: number, + friction?: number, + stiffness?: number, + mass?: number, + damping?: number, + delay?: number, + duration?: number, + useNativeDriver?: boolean, + }; +} +``` diff --git a/versioned_docs/version-3.2.1/statusBar.md b/versioned_docs/version-3.2.1/statusBar.md new file mode 100644 index 000000000..c8769bda1 --- /dev/null +++ b/versioned_docs/version-3.2.1/statusBar.md @@ -0,0 +1,18 @@ +--- +id: status-bar +title: StatusBar +--- + +Component to control the app status bar. + +## Example + +```ComponentSnackPlayer path=basic,StatusBar,Basic.tsx + +``` + +## Props + +```ComponentPropTable path=basic,StatusBar,StatusBar.tsx showStylingProps=true + +``` diff --git a/versioned_docs/version-3.2.1/strict-mode.md b/versioned_docs/version-3.2.1/strict-mode.md new file mode 100644 index 000000000..690cb14fc --- /dev/null +++ b/versioned_docs/version-3.2.1/strict-mode.md @@ -0,0 +1,39 @@ +--- +id: strict-mode +title: Strict Mode +--- + +NativeBase comes with its very own Strict Mode that lets you control the level of strictness for your App and Dev environment. A really handy tool to maintain best practices through out your codebase. + +## What it does? + +Strict Mode is a config that you pass into NativeBase config. It takes 3 values `error`, `warn` and `off` by default it is set to `warn`. Based on your chosen option it checks for every prop in your project if you have used proper `token values` from theme and you are only passing `string values` to the props and if not then it throws an error or warning or does nothing. + +## Levels of Strictness + +- **error** - Choosing this mode will throw an error indicating the cause of the error. +- **warn** - Choosing this mode will show a warning indicating the issue. +- **off** - Choosing this mode simply means you want to go rogue and not follow the design system and best practices. + +## How to change the mode? + +To change the `strictMode` create a `config object` like below and choose you `strictMode` value from `error`,`warn` and `off` which ever suits your use-case : + +```jsx +import { INativebaseConfig, NativeBaseProvider } from 'native-base'; + +// ignore the INativebaseConfig if you are not using typescript + +const config: INativebaseConfig = { + // rest of the config keys like dependencies can go here + strictMode: 'warn', +}; +``` + +and pass this as a prop in your App `NativeBaseProvider` + +```jsx + + + +``` diff --git a/versioned_docs/version-3.2.1/switch.md b/versioned_docs/version-3.2.1/switch.md new file mode 100644 index 000000000..3d1f07574 --- /dev/null +++ b/versioned_docs/version-3.2.1/switch.md @@ -0,0 +1,50 @@ +--- +id: switch +title: Switch +--- + +The `Switch` component is an alternative to the Checkbox component. You can switch between enabled or disabled states. + +## Examples + +### Basic + +```ComponentSnackPlayer path=primitives,Switch,Basic.tsx + +``` + +### Sizes + +```ComponentSnackPlayer path=primitives,Switch,Sizes.tsx + +``` + +### Track & Thumb Color + +```ComponentSnackPlayer path=primitives,Switch,SwitchBgColor.tsx + +``` + +### Color Schemes + +```ComponentSnackPlayer path=primitives,Switch,ColorSchemes.tsx + +``` + +## Props + +```ComponentPropTable path=primitives,Switch,index.tsx showStylingProps=true + +``` + +## Accessibility + +- On mobile, uses native switch which is fully accessible. +- On web, it uses checkbox with a [role](https://www.w3.org/TR/wai-aria-1.2/#switch) set to `switch`. + + +### Keyboard Interactions + +| Name | Description | +| --------------------|-------------| +| Space | Toggles the component's state. | \ No newline at end of file diff --git a/versioned_docs/version-3.2.1/testing.md b/versioned_docs/version-3.2.1/testing.md new file mode 100644 index 000000000..cfd5b0139 --- /dev/null +++ b/versioned_docs/version-3.2.1/testing.md @@ -0,0 +1,25 @@ +--- +id: testing +title: Testing +--- + +NativeBase works with react-native's jest preset or expo's jest-expo preset. However, there's one thing you'll need to do for it to work as expected. + +### Adding initialWindowMetrics in NativeBaseProvider. + +- NativeBaseProvider uses [SafeAreaContext](https://github.com/th3rdwave/react-native-safe-area-context#testing) which needs initialWindowMetrics to be passed to the Provider while testing. + +Not following the above may lead to an error related to SafeAreaProvider while running `yarn test`. + +To fix the above issue, you can simply pass initialWindowMetrics to NativeBaseProvider in your tests. + +```jsx +const inset = { + frame: { x: 0, y: 0, width: 0, height: 0 }, + insets: { top: 0, left: 0, right: 0, bottom: 0 }, +}; + + + {children} +; +``` diff --git a/versioned_docs/version-3.2.1/text.md b/versioned_docs/version-3.2.1/text.md new file mode 100644 index 000000000..10d3cdfe5 --- /dev/null +++ b/versioned_docs/version-3.2.1/text.md @@ -0,0 +1,44 @@ +--- +id: text +title: Text +--- + +import { ComponentTheme } from '../../src/components'; + +`Text` is used to render text and paragraphs within an interface. + +## Examples + +### ChangingFontSize + +```ComponentSnackPlayer path=primitives,Text,ChangingFontSize.tsx + +``` + +### Truncated + +```ComponentSnackPlayer path=primitives,Text,Truncated.tsx + +``` + +### Nested + +```ComponentSnackPlayer path=primitives,Text,Nested.tsx + +``` + +### Overridden + +```ComponentSnackPlayer path=primitives,Text,Overriden.tsx + +``` + +## Props + +```ComponentPropTable path=primitives,Text,index.tsx showStylingProps=true + +``` + +## Styling + + diff --git a/versioned_docs/version-3.2.1/textArea.md b/versioned_docs/version-3.2.1/textArea.md new file mode 100644 index 000000000..31f18b444 --- /dev/null +++ b/versioned_docs/version-3.2.1/textArea.md @@ -0,0 +1,38 @@ +--- +id: textarea +title: TextArea +--- + +import { ComponentTheme } from '../../src/components'; + +The `Textarea` component allows you to easily create multi-line text inputs. + +## Examples + +### Usage + +```ComponentSnackPlayer path=primitives,TextArea,basic.tsx + +``` + +### Invalid and Disabled TextArea + +```ComponentSnackPlayer path=primitives,TextArea,invalid.tsx + +``` + +### Value Controlled TextArea + +```ComponentSnackPlayer path=primitives,TextArea,value.tsx + +``` + +## Props + +```ComponentPropTable path=primitives,TextArea,index.tsx + +``` + +## Styling + + diff --git a/versioned_docs/version-3.2.1/theme.md b/versioned_docs/version-3.2.1/theme.md new file mode 100644 index 000000000..db050174c --- /dev/null +++ b/versioned_docs/version-3.2.1/theme.md @@ -0,0 +1,205 @@ +--- +id: theme +title: Using Theme +--- + +NativeBase provides multiple tools to use the central theme defined in the app. First tool is [`useTheme`](/useTheme.md), which you can use to access the values from the current theme. + +## useTheme + +```SnackPlayer name=useTheme%20Demo +import React from 'react'; +import { + NativeBaseProvider, + useTheme, + FlatList, + Center, + Box, +} from 'native-base'; + +function ColorPalete() { + const { colors } = useTheme(); + return ( + + } + /> + + ); +} + +// Example template which wraps component with NativeBaseProvider +export default function () { + return ( + +
+ +
+ + ); +} + +``` + +## useToken + +You can also get specific values from the theme with [`useToken`](/useToken.md) hook. + +```SnackPlayer name=useToken%20Demo +import React from 'react'; +import { useToken, NativeBaseProvider, Center, Text } from 'native-base'; + +function Tokens() { + const [contrastThreshold, lightText] = useToken('colors', [ + 'contrastThreshold', + 'lightText', + ]); + return ( +
+ Contrast threshold is:{' '} + + {contrastThreshold} + +
+ ); +} + +// Example template which wraps component with NativeBaseProvider +export default function () { + return ( + +
+ +
+ + ); +} + + +``` + +## useContrastText + +If you are defining the background yourself and pass a contrasting color to the text then you can use [`useContrastText`](use-contrast-text). + +```SnackPlayer name=useContrastText + +import React from 'react'; +import { + Button, + Stack, + useContrastText, + NativeBaseProvider, + Center, +} from 'native-base'; +function UseContrastingTextHook() { + const bgDark = 'primary.700'; + const bgLight = 'primary.200'; + const colorContrastDark = useContrastText(bgDark); + const colorContrastLight = useContrastText(bgLight); + + return ( + + + + + ); +} + +// Example template which wraps component with NativeBaseProvider +export default function () { + return ( + +
+ +
+ + ); +} + +``` + +## useColorMode + +If you want to define some conditionals based on current color mode or change the color mode then you can try [useColorMode](useColorMode.md). + +```SnackPlayer name=useColorMode +import React from 'react'; +import { + NativeBaseProvider, + useColorMode, + Text, + Button, + Center, +} from 'native-base'; + +function UseColorMode() { + const { colorMode, toggleColorMode } = useColorMode(); + return ( +
+ + The active color mode is{' '} + + {colorMode} + + + +
+ ); +} + +export default Example = () => { + return ( + + + + ); +}; + +``` + +## useColorModeValue + +If you do not want to add conditionals for color mode everywhere and keep the code clean, then you can use [useColorModeValue](useColorModeValue.md) hook. It takes two parameters, light mode value as the first and dark mode value as second. + +```SnackPlayer name=useColorModeValue +import React from 'react'; +import { + NativeBaseProvider, + useColorMode, + Text, + Button, + Center, + useColorModeValue, +} from 'native-base'; + +function UseColorMode() { + const { toggleColorMode } = useColorMode(); + return ( +
+ + The active color mode is{' '} + + {useColorModeValue('Light', 'Dark')} + + + +
+ ); +} + +export default Example = () => { + return ( + + + + ); +}; + +``` diff --git a/versioned_docs/version-3.2.1/toast.md b/versioned_docs/version-3.2.1/toast.md new file mode 100644 index 000000000..af50b7379 --- /dev/null +++ b/versioned_docs/version-3.2.1/toast.md @@ -0,0 +1,88 @@ +--- +id: toast +title: Toast +--- + +import { ComponentTheme } from '../../src/components'; + +`Toast` is used to show alerts on top of an overlay. `Toast` will close itself when the close button is clicked, or after a timeout — the default is 5 seconds. The toast component is used to give feeback to users after an action has taken place. + +Toasts can be configured to appear at either the top or the bottom of an application window, and it is possible to have more than one toast onscreen at a time. + +## Import + +```jsx +import { useToast } from 'native-base'; +``` + +## Examples + +### Basic + +```ComponentSnackPlayer path=composites,Toast,Basic.tsx + +``` + +### Position + +```ComponentSnackPlayer path=composites,Toast,ToastPositions.tsx + +``` + +### Custom component + +Display a custom component instead of the default Toast UI. + +```ComponentSnackPlayer path=composites,Toast,CustomComponent.tsx + +``` + +### Closing Toasts + +Toasts can be closed imperatively, individually (via the close instance method) or all together (via the closeAll instance method). + +```ComponentSnackPlayer path=composites,Toast,CloseToast.tsx + +``` + +### Status + +You can use status to change the color of your toasts. +`Toast` uses the same variants as the [Alert](alert.md) component. + +```ComponentSnackPlayer path=composites,Toast,ToastStatus.tsx + +``` + +### Preventing Duplicate Toast + +In some cases you might need to prevent duplicate of specific toasts. To achieve you need to pass an id and use the toast.isActive method to determine when to call toast.show(...). + +```ComponentSnackPlayer path=composites,Toast,PreventDuplicate.tsx + +``` + +### Standalone Toast + +You can use standalone toast where you don't have access to `useToast` hook. e.g. in a different file, out of a React component. + +```ComponentSnackPlayer path=composites,Toast,StandaloneToast.tsx + +``` + +## Props + +Below props can be passed while calling toast.show. + +```ComponentPropTable path=composites,Toast,ToastDummy.tsx + +``` + +## Accessibility + +- On Android and Web, Toast renders under a View with accessibilityLiveRegion which announces the content rendered inside it to screen reader devices. +- On iOS, accessibilityLiveRegion is not supported yet, so we use the [accessibilityAnnouncement](https://reactnative.dev/docs/accessibilityinfo#announceforaccessibility) to announce the content. + +## Styling + + diff --git a/versioned_docs/version-3.2.1/todo-list.md b/versioned_docs/version-3.2.1/todo-list.md new file mode 100644 index 000000000..d6b9632ff --- /dev/null +++ b/versioned_docs/version-3.2.1/todo-list.md @@ -0,0 +1,135 @@ +--- +id: todo-example +title: Todo-List +--- + +A simple To Do App made using NativeBase 3.0. + +```SnackPlayer name=TodoList%20Examples +import React from 'react'; +import { + Input, + Button, + IconButton, + Checkbox, + Text, + VStack, + HStack, + Heading, + Icon, + Center, + Box, + NativeBaseProvider, +} from 'native-base'; +import { FontAwesome5, Feather, Entypo } from '@expo/vector-icons'; + +export default function () { + const instState = [ + { title: 'Code', isCompleted: true }, + { title: 'Meeting with team at 9', isCompleted: false }, + { title: 'Check Emails', isCompleted: false }, + { title: 'Write an article', isCompleted: false }, + ]; + const [list, setList] = React.useState(instState); + const [inputValue, setInputValue] = React.useState(''); + const addItem = (title: string) => { + setList([ + ...list, + { + title: title, + isCompleted: false, + }, + ]); + }; + const handleDelete = (index: number) => { + const temp = list.filter((_, itemI) => itemI !== index); + setList(temp); + }; + const handleStatusChange = (index: number) => { + const temp = list.map((item, itemI) => + itemI !== index + ? item + : { + ...item, + isCompleted: !item.isCompleted, + } + ); + setList(temp); + }; + return ( + +
+ + Wednesday + + + setInputValue(v)} + value={inputValue} + placeholder="Add Task" + /> + + } + onPress={() => { + addItem(inputValue); + setInputValue(''); + }} + /> + + + {list.map((item, itemI) => ( + + handleStatusChange(itemI)} + value={item.title}> + + {item.title} + + + + } + onPress={() => handleDelete(itemI)} + /> + + ))} + + + +
+ + ); +} + +``` diff --git a/versioned_docs/version-3.2.1/tooltip.md b/versioned_docs/version-3.2.1/tooltip.md new file mode 100644 index 000000000..5723d66e1 --- /dev/null +++ b/versioned_docs/version-3.2.1/tooltip.md @@ -0,0 +1,65 @@ +--- +id: tooltip +title: Tooltip +--- + +import { ComponentTheme } from '../../src/components'; + +A tooltip is a brief, informative message that appears when a user interacts with an element. Tooltips are usually initiated in one of two ways: through a mouse-hover gesture or through a keyboard-hover gesture. + +## Import + +```jsx +import { Tooltip } from 'native-base'; +``` + +## Examples + +### Basic + +```ComponentSnackPlayer path=composites,Tooltip,Basic.tsx + +``` + +### Positions + +```ComponentSnackPlayer path=composites,Tooltip,TooltipPositions.tsx + +``` + +### Customizing tooltip + +Tooltip is a wrapper around [Box](box.md). So, it also accepts all the [Box](box.md#props) props. + +```ComponentSnackPlayer path=composites,Tooltip,CustomTooltip.tsx + +``` + +
+ +:::tip Development Tip +You can pass custom backgroundColor using `bg` or `backgroundColor`, `borderColor` and `borderWidth` to Tooltip. +::: + +## Props + +```ComponentPropTable path=composites,Tooltip,Tooltip.tsx + +``` + +## Styling + + + +## Accessibility + +Adheres to the [Tooltip WAI-ARIA design pattern.](https://www.w3.org/TR/wai-aria-1.1/#tooltip) + +### Keyboard Interactions + +| Name | Description | +| ----- | ------------------------------------------ | +| Space | If open, closes the tooltip without delay. | +| Enter | If open, closes the tooltip without delay. | +| Tab | Moves focus to the next focusable element. | +| Esc | If open, closes the tooltip without delay. | diff --git a/versioned_docs/version-3.2.1/typescript.md b/versioned_docs/version-3.2.1/typescript.md new file mode 100644 index 000000000..33601937b --- /dev/null +++ b/versioned_docs/version-3.2.1/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 + +Typescript intellisense with custom theme tokens diff --git a/versioned_docs/version-3.2.1/useAccessibleColors.md b/versioned_docs/version-3.2.1/useAccessibleColors.md new file mode 100644 index 000000000..1fa0dfd75 --- /dev/null +++ b/versioned_docs/version-3.2.1/useAccessibleColors.md @@ -0,0 +1,64 @@ +--- +id: use-accessible-colors +title: useAccessibleColors +--- + +`useAccessibleColors` is a custom hook used to get the setting for using color with better [color and contrast accessibility](https://web.dev/color-and-contrast-accessibility/) in the app. By default, accessible colors are turned off to get better color matching the theme of the app. You can use this hook if you always want to use accessible text colors. You can also pass it in the config for [`NativeBaseProvider`](setup-provider.md) with [`extendTheme`](setup-provider.md#add-custom-theme-optional). + +## Import + +```jsx +import { useAccessibleColors } from 'native-base'; +``` + +## Example + +```SnackPlayer name=useAccessibleColors + +import React from 'react'; +import { Button, useContrastText, useTheme, NativeBaseProvider, Center, useAccessibleColors } from 'native-base'; + +const ButtonTemplate = ({ shade }: any) => { + const colorContrast = useContrastText(`yellow.${shade}`); + return ( + + ); +}; + +function UseContrastingTextHook () { + let [, , toggleAccessibleColors] = useAccessibleColors(); + const { colors } = useTheme(); + return ( + <> + {Object.keys(colors.yellow).map((key, index) => { + if (index > 2 && index < 9) return ; + })} + + + ); +} + +export default function () { + return ( + +
+ +
+ + ); +} +``` + +## Return value + +Returns an array with values `accessibleColors`, `setAccessibleColors`, `toggleAccessibleColors`. diff --git a/versioned_docs/version-3.2.1/useBreakPointValue.md b/versioned_docs/version-3.2.1/useBreakPointValue.md new file mode 100644 index 000000000..edb6501e9 --- /dev/null +++ b/versioned_docs/version-3.2.1/useBreakPointValue.md @@ -0,0 +1,133 @@ +--- +id: use-breakPoint-value +title: useBreakpointValue +--- + +`useBreakpointValue` is a custom hook which returns the value for the current breakpoint from the provided responsive values object. This hook also responds to the window resizing and returning the appropriate value for the new window size. + +## **Import** + +```jsx +import { useBreakpointValue } from 'native-base'; +``` + +## **Return value** + +The `useBreakpointValue` hook returns the value for the current breakpoint. + +## Usage + +```SnackPlayer name=useBreakpointValue + +import React from 'react'; +import { + Factory, + Button, + Stack, + NativeBaseProvider, + Center, + ScrollView +} from 'native-base'; +import { TextInput } from 'react-native'; + +import { Icon, useBreakpointValue, Text, VStack, Heading } from 'native-base'; +import { FontAwesome, Foundation, Feather } from '@expo/vector-icons'; +import { View } from 'react-native'; + +export const UseBreakpointValueExample = () => { + const flexDir = useBreakpointValue({ + base: 'column', + lg: 'row', + }); + return ( + + + Why us? + + + + + Secure Checkout + + + + + + Secure Checkout + + + + + + Fast Turn Around + + + + + + ); +}; + +// Example template which wraps component with NativeBaseProvider +export default function () { + return ( + +
+ +
+ + ); +} + +``` diff --git a/versioned_docs/version-3.2.1/useClipboard.md b/versioned_docs/version-3.2.1/useClipboard.md new file mode 100644 index 000000000..fa916f05a --- /dev/null +++ b/versioned_docs/version-3.2.1/useClipboard.md @@ -0,0 +1,73 @@ +--- +id: use-clipboard +title: useClipboard +--- + +`useClipboard` is a custom hook that handles copying content to clipboard. + +## Return Value + +The `useClipboard` hook returns an object with the following fields: + +- `value` : ( **string** ) The copied value. +- `onCopy` : ( **Function** ) Callback function to copy content. +- `hasCopied` : ( **boolean** ) If **true**, the content has been copied. + +## Import + +```jsx +import { useClipboard } from 'native-base'; +``` + +## Usage + +```SnackPlayer name=useClipboard%20Usage +import React from "react"; +import { + Button, + HStack, + VStack, + Text, + Input, + useClipboard, + NativeBaseProvider, + Center +} from "native-base"; + +function UseClipboardExample() { + const [copyText, setCopyText] = React.useState('Hello'); + const [pasteText, setPasteText] = React.useState(''); + const { value, onCopy } = useClipboard(); + return ( + + + setCopyText(v)} + value={copyText} + /> + + + + setPasteText(v)} + value={pasteText} + /> + + + + ); +} +export default function () { + return ( + +
+ +
+ + ); +} +``` diff --git a/versioned_docs/version-3.2.1/useColorMode.md b/versioned_docs/version-3.2.1/useColorMode.md new file mode 100644 index 000000000..adb23b90d --- /dev/null +++ b/versioned_docs/version-3.2.1/useColorMode.md @@ -0,0 +1,56 @@ +--- +id: use-color-mode +title: useColorMode +--- + +`useColorMode` is a custom hook used to get and set the color mode. + +## Import + +```jsx +import { useColorMode } from 'native-base'; +``` + +## Example + +```SnackPlayer name=useColorMode +import React from 'react'; +import { + NativeBaseProvider, + VStack, + useColorMode, + Text, + Button, + Center, +} from 'native-base'; + +function UseColorMode() { + const { colorMode, toggleColorMode } = useColorMode(); + return ( +
+ + The active color mode is {colorMode} + + +
+ ); +} + +export default function () { + return ( + + + + ); +} + + +``` + +## Return + +| Name | Type | Description | Default | +| --------------- | --------------- | ------------------------------------------ | ------- | +| colorMode | `light`, `dark` | The active color mode | `light` | +| setColorMode | function | Use to set color mode. | - | +| toggleColorMode | function | Use to toggle between light and dark mode. | - | diff --git a/versioned_docs/version-3.2.1/useColorModeValue.md b/versioned_docs/version-3.2.1/useColorModeValue.md new file mode 100644 index 000000000..65fad698b --- /dev/null +++ b/versioned_docs/version-3.2.1/useColorModeValue.md @@ -0,0 +1,52 @@ +--- +id: use-color-mode-value +title: useColorModeValue +--- + +`useColorModeValue` is a custom hook used to get a value from either of the parameters passed based on active color mode value. + +## Import + +```jsx +import { useColorModeValue } from 'native-base'; +``` + +## Example + +```SnackPlayer name=useColorModeValue +import React from 'react'; +import { + NativeBaseProvider, + useColorMode, + Text, + Button, + Center, + useColorModeValue, +} from 'native-base'; + +function UseColorMode() { + const { colorMode, toggleColorMode } = useColorMode(); + return ( +
+ + The active color mode is + {useColorModeValue('Light', 'Dark')} + + +
+ ); +} + +export default function () { + return ( + + + + ); +} + +``` + +## Return value + +Accepts 2 parameters and returns either of the two, based on current color-mode (first parameter for light mode and second parameter for dark mode). diff --git a/versioned_docs/version-3.2.1/useContrastText.md b/versioned_docs/version-3.2.1/useContrastText.md new file mode 100644 index 000000000..4497c3b17 --- /dev/null +++ b/versioned_docs/version-3.2.1/useContrastText.md @@ -0,0 +1,103 @@ +--- +id: use-contrast-text +title: useContrastText +--- + +`useContrastText` is a custom hook used to get a contrasting color (either `lightText` or `darkText`) to the color passed as a parameter. + +## Import + +```jsx +import { useContrastText } from 'native-base'; +``` + +## Examples + +### Basic + +```SnackPlayer name=useContrastText + +import React from 'react'; +import { Button, useContrastText, NativeBaseProvider, Center } from 'native-base'; +function UseContrastingTextHook () { + const bgDark = 'gray.900'; + const bgLight = 'gray.50'; + const colorContrastDark = useContrastText(bgDark); + const colorContrastLight = useContrastText(bgLight); + + return ( + <> + + + + ); +} + +export default function () { + return ( + +
+ +
+ + ); +} +``` + +### Using Accessible Colors + +By default, NativeBase provides contrasting color based on its theme. You can also choose to get color with better [color and contrast accessibility](https://web.dev/color-and-contrast-accessibility/) with the help of [`useAccessibleColors`](useAccessibleColors.md) hook. + +```SnackPlayer name=usingAccessibleColors + +import React from 'react'; +import { Button, useContrastText, useTheme, NativeBaseProvider, Center, useAccessibleColors } from 'native-base'; + +const ButtonTemplate = ({ shade }: any) => { + const colorContrast = useContrastText(`yellow.${shade}`); + return ( + + ); +}; + +function UseContrastingTextHook () { + let [, , toggleAccessibleColors] = useAccessibleColors(); + const { colors } = useTheme(); + return ( + <> + {Object.keys(colors.yellow).map((key, index) => { + if (index > 2 && index < 9) return ; + })} + + + ); +} + +export default function () { + return ( + +
+ +
+ + ); +} +``` + +## Return value + +Accepts and returns a color defined in the theme. diff --git a/versioned_docs/version-3.2.1/useDisclosure.md b/versioned_docs/version-3.2.1/useDisclosure.md new file mode 100644 index 000000000..4e5cd4cdd --- /dev/null +++ b/versioned_docs/version-3.2.1/useDisclosure.md @@ -0,0 +1,74 @@ +--- +id: use-disclosure +title: useDisclose +--- + +`useDisclose` is a custom hook used to help handle common `open`, `close`, or `toggle` scenarios. It can be used to control feedback component such as **Modal**, **AlertDialog**, **Drawer**, etc. + +## Import + +```jsx +import { useDisclose } from 'native-base'; +``` + +## Example + +```SnackPlayer name=useDisclose%20Usage +import React from "react"; +import { + Modal, + Button, + Center, + Input, + useDisclose, + NativeBaseProvider, +} from "native-base"; + +function UseDiscloseExample() { + const { isOpen, onOpen, onClose } = useDisclose(); + return ( + <> + + + + + Delete Customer + + + This will remove all data relating to Alex. This action cannot be reversed. Deleted data can not be recovered. + + + + + + + + + + + ); +} +export default function () { + return ( + +
+ +
+ + ); +} +``` + +## Return value + +The `useDisclosure` hook returns an object with the following fields: + +`isOpen`: ( **boolean** ) Show the component; triggers the enter or exit states. + +`onClose`: ( **function** ) Callback function to set a falsy value for the `isOpen` parameter. + +`onOpen`: ( **function** ) Callback function to set a truthy value for the `isOpen` parameter. + +`onToggle`: ( **function** ) Callback function to toggle the value of the `isOpen` parameter. diff --git a/versioned_docs/version-3.2.1/useMediaQuery.md b/versioned_docs/version-3.2.1/useMediaQuery.md new file mode 100644 index 000000000..7edf8d5fb --- /dev/null +++ b/versioned_docs/version-3.2.1/useMediaQuery.md @@ -0,0 +1,440 @@ +--- +id: use-media-query +title: useMediaQuery +--- + +`useMediaQuery` is a custom hook used to help detect whether a single media query or multiple media queries individually match. React Native does not natively support media queries, so `useMediaQuery` is still limited. + +## Import + +```jsx +import { useMediaQuery } from 'native-base'; +``` + +## Example + +### max-height + +```SnackPlayer name=useMediaQuery%20Usage(max-height) +import React from "react"; +import { Text, useMediaQuery, NativeBaseProvider, Center } from "native-base"; + +function UseMediaQueryExample() { + const [isSmallScreen] = useMediaQuery({ minHeight: 280, maxHeight: 480 }); + return ( + + {isSmallScreen ? ( + + + + image + +
+ PHOTOS +
+ + + + + The Garden City + + + The Silicon Valley of India. + + + + Bengaluru (also called Bangalore) is the center of India's + high-tech industry. The city is also known for its parks and + nightlife. + + + + + 6 mins ago + + + + + + ) : ( + + + + + The Garden City + + + The Silicon Valley of India. + + + + Bengaluru (also called Bangalore) is the center of India's + high-tech industry. The city is also known for its parks and + nightlife. + + + + + 6 mins ago + + + + + + )} + + ); +} +export default function () { + return ( + +
+ +
+ + ); +} +``` + +### min-width + +```SnackPlayer name=useMediaQuery%20Usage(min-width) +import React from "react"; +import { Text, useMediaQuery, NativeBaseProvider, Center } from "native-base"; + +function UseMediaQueryExample() { + const [isSmallScreen] = useMediaQuery({ minWidth: 280 }); + return ( + + {isSmallScreen ? ( + + + + image + +
+ PHOTOS +
+ + + + + The Garden City + + + The Silicon Valley of India. + + + + Bengaluru (also called Bangalore) is the center of India's + high-tech industry. The city is also known for its parks and + nightlife. + + + + + 6 mins ago + + + + + + ) : ( + + + + + The Garden City + + + The Silicon Valley of India. + + + + Bengaluru (also called Bangalore) is the center of India's + high-tech industry. The city is also known for its parks and + nightlife. + + + + + 6 mins ago + + + + + + )} + + ); +} +export default function () { + return ( + +
+ +
+ + ); +} +``` + +### orientation + +```SnackPlayer name=useMediaQuery%20Usage(orientation) +import React from "react"; +import { Text, useMediaQuery, NativeBaseProvider, Center } from "native-base"; + +function UseMediaQueryExample() { + const [isLandScape, isPortrait] = useMediaQuery([ + { orientation: 'landscape' }, + { orientation: 'portrait' }, + ]); + return ( + + {isPortrait ? ( + + + + image + +
+ PHOTOS +
+ + + + + The Garden City + + + The Silicon Valley of India. + + + + Bengaluru (also called Bangalore) is the center of India's + high-tech industry. The city is also known for its parks and + nightlife. + + + + + 6 mins ago + + + + + + ) : ( + <> + )} + {isLandScape ? ( + + + + + The Garden City + + + The Silicon Valley of India. + + + + Bengaluru (also called Bangalore) is the center of India's + high-tech industry. The city is also known for its parks and + nightlife. + + + + + 6 mins ago + + + + + + ) : ( + <> + )} + + ); +} +export default function () { + return ( + +
+ +
+ + ); +} +``` + +## Return value + +The `useMediaQuery` hook returns an array of booleans, indicating whether the given query matches or queries match. + +Why an array? `useMediaQuery` accepts both an object and an array of object, but will always return an array. This way, you can combine multiple media queries which will be individually matched in a single call. The options to use are still limited to `maxWidth`, `minWidth`, `maxHeight`, `minHeight`, `orientation`. diff --git a/versioned_docs/version-3.2.1/useTheme.md b/versioned_docs/version-3.2.1/useTheme.md new file mode 100644 index 000000000..71ac99174 --- /dev/null +++ b/versioned_docs/version-3.2.1/useTheme.md @@ -0,0 +1,22 @@ +--- +id: use-theme +title: useTheme +--- + +`useTheme` is a custom hook used to get the theme object from context. + +## Import + +```jsx +import { useTheme } from "native-base"; +``` + +## Example + +```jsx +function Example() { + const theme = useTheme(); + + return {/* Do something with the theme */}; +} +``` diff --git a/versioned_docs/version-3.2.1/useToken.md b/versioned_docs/version-3.2.1/useToken.md new file mode 100644 index 000000000..29b824ec2 --- /dev/null +++ b/versioned_docs/version-3.2.1/useToken.md @@ -0,0 +1,51 @@ +--- +id: use-token +title: useToken +--- + +`useToken` is a custom hook used to resolve design tokens from the theme. + +## Import + +```jsx +import { useToken } from 'native-base'; +``` + +## Example + +```SnackPlayer name=useToken%20Example +import React from "react"; +import { Box, Text, useToken, NativeBaseProvider, Center, HStack , VStack} from "native-base"; + +function UseTokenHookExample() { + const [colorPick1, colorPick2] = useToken( + // the key within the theme, in this case `theme.colors` + "colors", + // the subkey(s), resolving to `theme.colors.warning.1` + ["yellow.500", "cyan.500"] + // a single fallback or fallback array matching the length of the previous arg + ); + + return ( + + + + {colorPick1} + + + + {colorPick2} + + + ); +} +export default function () { + return ( + +
+ +
+ + ); +} +``` diff --git a/versioned_docs/version-3.2.1/utility-first.mdx b/versioned_docs/version-3.2.1/utility-first.mdx new file mode 100644 index 000000000..9de7d2ddb --- /dev/null +++ b/versioned_docs/version-3.2.1/utility-first.mdx @@ -0,0 +1,218 @@ +--- +id: utility-first +title: Utility First +--- + +import { UtilityFirstExample } from '../../src/components'; +import { KitchenSinkIframe, TileLink, NBHistory } from '../../src/components'; + +React Native has a great StyleSheet API which is optimal for component-based systems. NativeBase leverages it and adds a layer of utility props and constraint based designed tokens on top of it. + +To understand utility props, let's take an example. + + + +
+ +## With React Native + +Let's try the traditional way of building the above card in React Native. + +
+ +```jsx +import * as React from 'react'; +import { Text, View, StyleSheet, Image, Pressable } from 'react-native'; + +export default function App() { + return ( + + + + + Today @ 9PM + Let's talk about avatar! + + + Remind me + + + + + + ); +} + +const styles = StyleSheet.create({ + container: { + backgroundColor: '#0891b2', + paddingVertical: 16, + paddingHorizontal: 12, + borderRadius: 5, + alignSelf: 'center', + width: 375, + maxWidth: '100%', + }, + timings: { + color: '#fff', + fontSize: 14, + }, + metaContainer: { + justifyContent: 'space-between', + }, + topContainer: { + flexDirection: 'row', + justifyContent: 'space-between', + }, + avatar: { + height: 100, + width: 100, + borderRadius: 100, + }, + description: { + color: 'white', + marginTop: 5, + fontSize: 20, + }, + button: { + backgroundColor: '#22d3ee', + alignSelf: 'flex-start', + paddingHorizontal: 10, + paddingVertical: 5, + borderRadius: 3, + }, + buttonText: { + fontWeight: 'bold', + color: 'white', + textTransform: 'uppercase', + fontSize: 14, + }, +}); +``` + +
+ + + +
+ +## With NativeBase + +Now let's try to build the same card using NativeBase. + +With NativeBase, you can apply styles directly in the layout using shorthands. + +
+ +```jsx +import * as React from 'react'; +import { + NativeBaseProvider, + Box, + HStack, + VStack, + Text, + Pressable, + Image, +} from 'native-base'; + +export function UtilityFirstExample() { + return ( + + + + + + + Today @ 9PM + + + Let's talk about avatar! + + + + + Remind me + + + + Aang flying and surrounded by clouds + + + + ); +} +``` + +
+ +The above example demonstrates the usage of [utility props](utility-props) alongwith [VStack](vstack), [HStack](hstack) components. This approach allows us to style components without using StyleSheet API. + +Apart from productivity boost and saving time there are other benefits by styling components using utility props. +No need to name styles anymore, no need to define an object and think about naming them. + +Using utility-first props, you can focus on creating reusable components instead of reusable stylesheets. + +Once you start writing styles this way, any other way will feel cumbersome. + +> Put simply, utility first approach opens up the Avatar state within developers. + +
+ aang transitioning to avatar state +
+ +
+ +Once you had a cup of tea, let's proceed to the next section! + +
+
+ +
+ uncle iroh holding cup of tea + +
diff --git a/versioned_docs/version-3.2.1/utilityProps.md b/versioned_docs/version-3.2.1/utilityProps.md new file mode 100644 index 000000000..8cf57537b --- /dev/null +++ b/versioned_docs/version-3.2.1/utilityProps.md @@ -0,0 +1,679 @@ +--- +id: utility-props +title: Utility Props +--- + +Style props are a way to alter the style of a component by simply passing props to it. It helps to save time by providing helpful shorthand ways to style components. + +## Style Props + +The following table shows a list of every style prop and the properties within each group. + +### Margin and padding + +```SnackPlayer name=Margin%20and%20padding +import React from 'react'; +import { Box as NBBox, NativeBaseProvider, Center } from 'native-base'; + +const Box = (props) => { + return +} + +function Component() { + return ( + <> + { /* m={2} refers to the value of `theme.space[2]` */ } + + { /* You can also use custom values */ } + + { /* sets margin `8px` on all viewports and `16px` from the first breakpoint and up */ } + + + ); +} +export default function () { + return ( + +
+ +
+ + ); +} + +``` + +
+ +| Prop | CSS Equivalent | Theme Key | +| ----------------- | ------------------------------ | --------- | +| m, margin | margin | space | +| mt, marginTop | margin-top | space | +| mr, marginRight | margin-right | space | +| mb, marginBottom | margin-bottom | space | +| ml, marginLeft | margin-left | space | +| mx | margin-left and margin-right | space | +| my | margin-top and margin-bottom | space | +| p, padding | padding | space | +| pt, paddingTop | padding-top | space | +| pr, paddingRight | padding-right | space | +| pb, paddingBottom | padding-bottom | space | +| pl, paddingLeft | padding-left | space | +| px | padding-left and padding-right | space | +| py | padding-top and padding-bottom | space | + +### Color and background color + +```SnackPlayer name=Color%20and%20background%20COolor +import React from 'react'; +import { Box as NBBox, NativeBaseProvider, Center, Text } from 'native-base'; + +const Box = (props) => { + return ; +}; + +function Component() { + return ( + <> + {/* raw CSS color value */} + + {/* picks up a nested color value using dot notation */} + {/* => `theme.colors.lightBlue[300]` */} + + {/* using theme colors to set text color */} + + {' '} + I love NativeBase + + + {/* verbose prop */} + + + ); +} +export default function () { + return ( + +
+ +
+ + ); +} + + +``` + +
+ +| Prop | CSS Eqquivalent | Theme Key | +| -------------- | ---------------- | --------- | +| color | color | colors | +| bg, background | background | colors | +| bgColor | background-color | colors | +| opacity | opacity | - | + +

+ +:::tip Note + +Above props can be written in the format: {color}:alpha.{opacityToken}, this gets converted into RGBA color format and the opacityToken is mapped to [`Opacity`](default-theme#opacity) + +::: + +
+ +```SnackPlayer name=Alpha%20Opacity%20Usage + +import React from "react" +import { HStack, Stack, Center, NativeBaseProvider } from "native-base" +export function Example() { + return ( + + +
+ Box 1 +
+
+ Box 2 +
+
+ Box 3 +
+ + + ) +} + +export default () => { + return ( + +
+ +
+ + ) +} + +``` + +### Typography + +```SnackPlayer name=Typography +import React from 'react'; +import { Text as NBText, NativeBaseProvider, Center } from 'native-base'; + +const Text = (props) => { + return +} + +function Component() { + return ( + <> + { /* font-size of `theme.fontSizes.2xl` */ } + Thank You + { /* text decoration `underline` */ } + Merci Beaucoup + { /* font-size `'2em'` */ } + { /* font-weight of `theme.fontWeights.semibold i.e. 600` */ } + Danke sehr + { /* letter-spacing `0.1 em` */ } + Arigatou + + ); +} +export default function () { + return ( + +
+ +
+ + ); +} + +``` + +
+ +| Prop | CSS Eqquivalent | Theme Key | +| -------------- | --------------- | -------------- | +| fontFamily | font-family | fonts | +| fontSize | font-size | fontSizes | +| fontWeight | font-weight | fontWeights | +| lineHeight | line-height | lineHeights | +| letterSpacing | letter-spacing | letterSpacings | +| textAlign | text-align | - | +| fontStyle | font-style | - | +| textTransform | text-transform | - | +| textDecoration | text-decoration | - | + +### Layout, width and height + +```SnackPlayer name=Layout,%20width%20and%20height +import React from 'react'; +import { Box as NBBox, NativeBaseProvider, Center } from 'native-base'; + +const Box = (props) => { + return +} + +function Component() { + return ( + <> + { /* verbose */ } + + { /* shorthand */ } + + { /* use boxSizing */ } + + { /* width `50%` */ } + + { /* width `256px` h={8} */ } + + { /* width `'40px'` */ } + + + ); +} +export default function () { + return ( + +
+ +
+ + ); +} + +``` + +
+ +| Prop | CSS Eqquivalent | Theme Key | +| --------------- | --------------- | --------- | +| w, width | width | sizes | +| h, height | height | sizes | +| minW, minWidth | min-width | sizes | +| maxW, maxWidth | max-width | sizes | +| minH, minHeight | min-height | sizes | +| maxH, maxHeight | max-height | sizes | +| d, display | display | - | +| boxSize | width, height | sizes | +| verticalAlign | vertical-align | - | +| overflow | overflow | - | +| overflowX | overflowX | - | +| overflowY | overflowY | - | + +### Flexbox + +```SnackPlayer name=Flexbox +import React from 'react'; +import { Box as NBBox, Flex, NativeBaseProvider, Center } from 'native-base'; + +const Box = (props) => { + return +} + +function Component() { + return ( + <> + { /* verbose */ } + + + + + + { /* shorthand using the `Flex` component */ } + + + + + + ); +} +export default function () { + return ( + +
+ +
+ + ); +} + +``` + +
+ +| Prop | CSS Eqquivalent | Theme Key | +| ----------------------------------- | --------------- | --------- | +| alignItems, \*align | align-items | - | +| alignContent | align-content | - | +| justifyItems | justify-items | - | +| justifyContent, \*justify | justify-content | - | +| flexWrap, \*wrap | flex-wrap | - | +| flexDirection, flexDir, \*direction | flex-direction | - | +| flex | flex | - | +| flexGrow | flex-grow | - | +| flexShrink | flex-shrink | - | +| flexBasis | flex-basis | - | +| justifySelf | justify-self | - | +| alignSelf | align-self | - | +| order | order | - | + +### Borders + +```SnackPlayer name=Borders +import React from 'react'; +import { Box as NBBox, NativeBaseProvider, Center } from 'native-base'; + +const Box = (props) => { + return ; +}; + +function Component() { + return ( + <> + + + + + ); +} +export default function () { + return ( + +
+ +
+ + ); +} + + +``` + +
+ +| Prop | CSS Eququivalent | Theme Field | +| ----------------- | ------------------- | ------------ | +| border | border | borders | +| borderWidth | border-width | borderWidths | +| borderStyle | border-style | borderStyles | +| borderColor | border-color | colors | +| borderTop | border-top | borders | +| borderTopWidth | border-top-width | borderWidths | +| borderTopStyle | border-top-style | borderStyles | +| borderTopColor | border-top-color | colors | +| borderRight | border-right | borders | +| borderRightWidth | border-right-width | borderWidths | +| borderRightStyle | border-right-style | borderStyles | +| borderRightColor | border-right-color | colors | +| borderBottom | border-bottom | borders | +| borderBottomWidth | border-bottom-width | borderWidths | +| borderBottomStyle | border-bottom-style | borderStyles | +| borderBottomColor | border-bottom-color | colors | +| borderLeft | border-left | borders | +| borderLeftWidth | border-left-width | borderWidths | +| borderLeftStyle | border-left-style | borderStyles | +| borderLeftColor | border-left-color | colors | + +### Borders Radius + +```SnackPlayer name=Borders%20Radius +import React from 'react'; +import { Box as NBBox, NativeBaseProvider, Center } from 'native-base'; + +const Box = (props) => { + return +} + +function Component() { + return ( + <> + { /* picks up a nested radius value using dot notation */ } + { /* => `theme.radius.md` */ } + + + { /* partial border radius */ } + + { /* absolute value prop */ } + + + ); +} +export default function () { + return ( + +
+ +
+ + ); +} + +``` + +
+ +| Prop | CSS Eququivalent | Theme Field | +| ----------------------- | ------------------------------------------------------ | ----------- | +| borderRadius | border-radius | radii | +| borderTopLeftRadius | border-top-left-radius | radii | +| borderTopRightRadius | border-top-right-radius | radii | +| borderBottomRightRadius | border-bottom-right-radius | radii | +| borderBottomLeftRadius | border-bottom-left-radius | radii | +| borderTopRadius | border-top-left-radius & border-top-right-radius | radii | +| borderRightRadius | border-top-right-radius & border-bottom-right-radius | radii | +| borderBottomRadius | border-bottom-left-radius & border-bottom-right-radius | radii | +| borderLeftRadius | border-top-left-radius & border-bottom-left-radius | radii | + +### Position + +```SnackPlayer name=Position +import React from 'react'; +import { Box as NBBox, NativeBaseProvider, Center } from 'native-base'; + +const Box = (props) => { + return +} + +function Component() { + return ( + <> + + + + + ); +} +export default function () { + return ( + +
+ +
+ + ); +} + +``` + +
+ +| Prop | CSS Equivalent | Theme Field | +| ------------ | -------------- | ----------- | +| pos,position | position | - | +| zIndex | z-index | zIndices | +| top | top | space | +| right | right | space | +| bottom | bottom | space | +| left | left | space | + +### Shadow + +```SnackPlayer name=Shadow +import React from 'react'; +import { Box as NBBox, NativeBaseProvider, Center } from 'native-base'; + +const Box = (props) => { + return +} + +function Component() { + return ( + <> + { /* => `theme.shadows.md` */ } + + + + + + + ); +} +export default function () { + return ( + +
+ +
+ + ); +} + +``` + +
+ +| Prop | CSS Equivalent | Theme Field | +| ------ | -------------- | ----------- | +| shadow | box-shadow | shadows | + +## Underscore Props + +### Internal Props + +Provides a way to pass props to child components inside Composite componets. + +```SnackPlayer name=Internal +import React from 'react'; +import { Button, NativeBaseProvider, Center } from 'native-base'; + +function Example() { + return ( + + ); +} + +export default function () { + return ( + +
+ +
+ + ); +} + +``` + +
+ +| Prop | Type | Description | +| ------- | -------------------------- | -------------------------------------------------------- | +| \_stack | [IStackProps](stack#props) | Passed props will be provided to [`Stack`](stack) child. | +| \_text | [ITextProps](text#props) | Passed props will be provided to [`Text`](text) child. | + +### Interaction Props + +Provides a way to pass props on certain interaction. + +```SnackPlayer name=Internal +import React from 'react'; +import { Button, NativeBaseProvider, Center } from 'native-base'; + +function Example() { + return ( + + ); +} + +export default function () { + return ( + +
+ +
+ + ); +} + +``` + +
+ +| Prop | Type | Description | +| ---------- | ----------------------- | ----------------------------------------------- | +| \_disabled | _Same as the component_ | Passed props will be applied on disabled state. | +| \_focus | _Same as the component_ | Passed props will be applied on focused state. | +| \_hover | _Same as the component_ | Passed props will be applied on hovered state. | +| \_invalid | _Same as the component_ | Passed props will be applied on invalid state. | +| \_pressed | _Same as the component_ | Passed props will be applied on pressed state. | + +### Platform Props + +Provides a way to pass props bassed on Platform (_android, ios or web_). + +```SnackPlayer name=Internal +import React from 'react'; +import { Button, NativeBaseProvider, Center } from 'native-base'; + +function Example() { + return ( + + ); +} + +export default function () { + return ( + +
+ +
+ + ); +} + +``` + +
+ +| Prop | Type | Description | +| --------- | ----------------------- | ---------------------------------------- | +| \_android | _Same as the component_ | Passed props will be applied on android. | +| \_ios | _Same as the component_ | Passed props will be applied on ios. | +| \_web | _Same as the component_ | Passed props will be applied on web. | diff --git a/versioned_docs/version-3.2.1/utilityPropsSpecificity.md b/versioned_docs/version-3.2.1/utilityPropsSpecificity.md new file mode 100644 index 000000000..70e42236a --- /dev/null +++ b/versioned_docs/version-3.2.1/utilityPropsSpecificity.md @@ -0,0 +1,55 @@ +--- +id: utility-props-specificity +title: Utility Props Specificity +--- + +- If we have two similar props for a particular component, the more specific prop will be applied when the component is rendered. + + ```jsx + + ``` + + In the above example, we have two similar props for the Input component, but as you might have noticed `px={2}` is more specific than `p={0}` in terms of providing padding to the Input. This follows React Native's specificity precedence while applying utility style props to a component, order does not matter. So, `px={2}` will be applied when the Input component is rendered. + +- If we have a similar prop which is also defined in the baseStyle of that component, the value of the prop will override the value of the prop defined in the baseStyle. + + Let's take an example of `Input` to understand better. + + ```jsx + + + // baseStyle for Input component + return { + ... + px: 4, + py: 2, + ... + } + ``` + + As you can see, we have `px:2` and `py:2` defined in the baseStyle of Input component, but if we pass `p={0}` in the props of an Input, it will override the the baseStyle and apply `p={0}` to that component. **Similar happens with other utility props.** + +Now, here is an example to analyze both the cases together: + +```jsx + + +// baseStyle for Input component + return { + ... + px: 4, + py: 2, + ... + } + +``` +In the above example, what do you think should be the padding of the rendered Input component? + +Let's see. + +We have `p={0}` which will override the value of padding coming from the baseStyle of Input component, then we have `px={3}` which is a more specific prop. So, the padding of the rendered Input will be `padding : { paddingTop:0, paddingRight:3, paddingBottom:0, paddingLeft:3 }`. + + + + + diff --git a/versioned_docs/version-3.2.1/view.md b/versioned_docs/version-3.2.1/view.md new file mode 100644 index 000000000..dd1890b6f --- /dev/null +++ b/versioned_docs/version-3.2.1/view.md @@ -0,0 +1,18 @@ +--- +id: view +title: View +--- + +The most fundamental component for building a UI. + +## Example + +```ComponentSnackPlayer path=basic,View,Basic.tsx + +``` + +## Props + +```ComponentPropTable path=basic,View,View.tsx showStylingProps=true + +``` From 06b03b006a1142d996396d36ba4d709282c926d7 Mon Sep 17 00:00:00 2001 From: Nishan Bende Date: Thu, 14 Oct 2021 11:56:44 +0530 Subject: [PATCH 7/7] fix: getting started mdx layout error --- docs/getting-started.mdx | 145 +++++++++--------- .../version-3.2.1/getting-started.mdx | 145 +++++++++--------- 2 files changed, 146 insertions(+), 144 deletions(-) diff --git a/docs/getting-started.mdx b/docs/getting-started.mdx index 654d0ac26..9a78c6339 100644 --- a/docs/getting-started.mdx +++ b/docs/getting-started.mdx @@ -9,82 +9,83 @@ import TOCInline from '@theme/TOCInline';
-

- 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. -

-
-
- - -
-
- - +
+

+ 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. +

+
+
+ + +
+
+ + +
-
-
- -
-

A Brief History of NativeBase

- -
- -
- -

What's New with NativeBase v3?

- - We had clear goals in mind while building version 3. Take a look at some of the new features we added: - -
-

Multiplatform

-
- NativeBase supports multiple platforms; android, iOS and web. You can also - customise properties using platform-specific props. -
+
+
+
-
-

Inherently Beautiful

-
- NativeBase ships with a default theme that provides beautiful components, - out of the box. -
-
-

Accessible

-
- This version has out of the box accessibility including focus management, - keyboard navigation and more. -
-
+

A Brief History of NativeBase

+
+ +
+

What's New with NativeBase v3?

+We had clear goals in mind while building version 3. Take a look at some of the new +features we added: -
-

Customisable

-
- The default theme can be extended as you desire. You can also customise specific components for your app needs. -
-
+
+

Multiplatform

+
+ NativeBase supports multiple platforms; android, iOS and web. You can also + customise properties using platform-specific props. +
+
+
+

Inherently Beautiful

+
+ NativeBase ships with a default theme that provides beautiful components, + out of the box. +
+
+
+

Accessible

+
+ This version has out of the box accessibility including focus management, + keyboard navigation and more. +
+
+
+

Customisable

+
+ The default theme can be extended as you desire. You can also customise + specific components for your app needs. +
+
diff --git a/versioned_docs/version-3.2.1/getting-started.mdx b/versioned_docs/version-3.2.1/getting-started.mdx index ac2f9aac7..27701b6ee 100644 --- a/versioned_docs/version-3.2.1/getting-started.mdx +++ b/versioned_docs/version-3.2.1/getting-started.mdx @@ -9,82 +9,83 @@ import TOCInline from '@theme/TOCInline';
-

- 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. -

-
-
- - -
-
- - +
+

+ 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. +

+
+
+ + +
+
+ + +
-
-
- -
-

A Brief History of NativeBase

- -
- -
- -

What's New with NativeBase v3?

- - We had clear goals in mind while building version 3. Take a look at some of the new features we added: - -
-

Multiplatform

-
- NativeBase supports multiple platforms; android, iOS and web. You can also - customise properties using platform-specific props. -
+
+
+
-
-

Inherently Beautiful

-
- NativeBase ships with a default theme that provides beautiful components, - out of the box. -
-
-

Accessible

-
- This version has out of the box accessibility including focus management, - keyboard navigation and more. -
-
+

A Brief History of NativeBase

+
+ +
+

What's New with NativeBase v3?

+We had clear goals in mind while building version 3. Take a look at some of the new +features we added: -
-

Customisable

-
- The default theme can be extended as you desire. You can also customise specific components for your app needs. -
-
+
+

Multiplatform

+
+ NativeBase supports multiple platforms; android, iOS and web. You can also + customise properties using platform-specific props. +
+
+
+

Inherently Beautiful

+
+ NativeBase ships with a default theme that provides beautiful components, + out of the box. +
+
+
+

Accessible

+
+ This version has out of the box accessibility including focus management, + keyboard navigation and more. +
+
+
+

Customisable

+
+ The default theme can be extended as you desire. You can also customise + specific components for your app needs. +
+