Getting Started | NativeBase

about 500~20000

82

The right time and place. Get personality again Ji

2

76.76.21.21

NativeBase:UniversalComponentsforReact&ReactNativeWorld’slargestReactNativexModernWebConference-Berlin,25July|PoweredbyGeekyAntsVisitWebsiteIfyouarestartinganewproject,werecommendusinggluestack-ui.Foryourexistingprojects,youcanutilize@gluestack-ui/themed-native-base(beta).Pleaseoptintoourenterpriseplan(comingsoon)forprioritysupportwithNativeBase.Pleaseoptintoourenterpriseplan(comingsoon)forprioritysupportwithNativeBase.3.4.xDocsResourcesTryHireReactNativeDevelopersVersionsnext3.4.x3.3.x3.2.x3.1.x3.0.xDocsResourcesDesignKitKitchenSinkBlogsMadeWithNativeBaseVSCodeExtensionGithubFigmaDiscordHireReactNativeDevelopersUniversalComponentsforReact&ReactNativeNativeBaseisanaccessible,utility-firstcomponentlibrarythathelpsyoubuildconsistentUIacrossAndroid,iOSandWeb.Stars20,041Interactwithme!Interactwithme!Interactwithme!Interactwithme!Interactwithme!Interactwithme!Interactwithme!MobileTabletDesktopGetStartedTryonCodeSandboxWhatarepeoplesaying?Herex27;swhatotherReactdevshetosayaboutNativeBase.AmanMittal@amanhimselfIx27;veneverbeenmoreimpressedbyaUIcomponentlibrarythan@NativeBaseIOrightnow.FirstclasssupportforSkeletoncomponents!🤯MaziJuls@AAjulibeNativebase3.0🔥🔥.NowIcangetthechakraUIfeelingonreactnativetoo.Lovelyworkguys!@NativeBaseIONerdjfpb:MuhammadTheBugKing@nerdjfpbWorkinginaclientprojectwith@reactnativeUsing@nativebaseandreallylovingit!Anyothersuggestion?Willliketoseeotheroptionstoo!Sandeep#NativeBase@nativebaseisthebestuilibrary_mayi@Mayi_CervantesViewOriginalsakaba@sakaba_devViewOriginalIchiroKimura|anectCEO@k_webBytheway,NativeBasev3isreallyamazing.EspeciallywelovethatwecanbuildcustomUIcomponentswithconstraint-basedutility-styleprops.Thankyouforcreatingthiswonderfuldesignsystem:)AmanMittal@amanhimselfIx27;veneverbeenmoreimpressedbyaUIcomponentlibrarythan@NativeBaseIOrightnow.FirstclasssupportforSkeletoncomponents!🤯MaziJuls@AAjulibeNativebase3.0🔥🔥.NowIcangetthechakraUIfeelingonreactnativetoo.Lovelyworkguys!@NativeBaseIONerdjfpb:MuhammadTheBugKing@nerdjfpbWorkinginaclientprojectwith@reactnativeUsing@nativebaseandreallylovingit!Anyothersuggestion?Willliketoseeotheroptionstoo!Sandeep#NativeBase@nativebaseisthebestuilibrary_mayi@Mayi_CervantesViewOriginalsakaba@sakaba_devViewOriginalIchiroKimura|anectCEO@k_webBytheway,NativeBasev3isreallyamazing.EspeciallywelovethatwecanbuildcustomUIcomponentswithconstraint-basedutility-styleprops.Thankyouforcreatingthiswonderfuldesignsystem:)AmanMittal@amanhimselfIx27;veneverbeenmoreimpressedbyaUIcomponentlibrarythan@NativeBaseIOrightnow.FirstclasGetting Started | NativeBasessupportforSkeletoncomponents!🤯MaziJuls@AAjulibeNativebase3.0🔥🔥.NowIcangetthechakraUIfeelingonreactnativetoo.Lovelyworkguys!@NativeBaseIONerdjfpb:MuhammadTheBugKing@nerdjfpbWorkinginaclientprojectwith@reactnativeUsing@nativebaseandreallylovingit!Anyothersuggestion?Willliketoseeotheroptionstoo!Sandeep#NativeBase@nativebaseisthebestuilibraryMOBILETABLETDESKTOP<Boxshadow="2"rounded="lg"w={{base:"64",md:"80",lg:"md"}}_light={{bg:"coolGray.50"}}_dark={{bg:"gray.700"}}><AspectRatiow="100%"ratio={ratio}><Imesource={HeroImg}alt="imebase"/></AspectRatio><Textboldposition="absolute"color="coolGray.50"top="0"m="4">NEWS</Text><Stackspace="2"p="4"><Textcolor="gray.400">May24,2024</Text><Headingsize={["md","lg","md"]}fontWeight="medium">TheGardenCity</Heading><TextisTruncatednoOfLines={["4","4","4"]}>Bengaluru(alsocalledBangalore)isthecenterofIndiax27;shigh-techindustry.ItislocatedinsouthernIndiaontheDeccanPlateau.Thecityisalsoknownforitsparksandnightlife.BangaloreisthemajorcenterofIndiax27;sITindustry,popularlyknownastheSiliconValleyofIndia.</Text></Stack><HStackspace="3"px="4"pb="4"><MoreIcon_light={{color:"emerald.800"}}_dark={{color:"emerald.300"}}/><Text_light={{color:"emerald.800"}}_dark={{color:"emerald.300"}}>Findoutmore</Text></HStack></Box>HighlyThemeable.TheOnlyLimitIsYourIminationThemeabilityisoneofthecoreelementsofNativeBase.Customiseyourappthemeandcomponentstylestoyourheartx27;scontent.KnowMoreCOLORSIZINGTYPOGRAPHYconstcolors={rose:{50:x27;#fff1f2x27;,100:x27;#ffe4e6x27;,200:x27;#fecdd3x27;,300:x27;#fda4afx27;,400:x27;#fb7185x27;,500:x27;#f43f5ex27;,600:x27;#e11d48x27;,700:x27;#be123cx27;,800:x27;#9f1239x27;,900:x27;#x27;,},pink:{50:x27;#fdf2f8x27;,100:x27;#fce7f3x27;,200:x27;#fbcfe8x27;,300:x27;#f9a8d4x27;,400:x27;#f472b6x27;,500:x27;#ec4899x27;,600:x27;#db2777x27;,700:x27;#be185dx27;,800:x27;#9d174dx27;,900:x27;#x27;,},};OutoftheBoxAccessibilityPoweredbyReactNativeARIAPoweredbyReactNativeARIA,whichprovidesReacthooksthatenableyoutobuildaccessibledesignsystemsinnotime.KnowMoreKeyboardInteractionsNativeBaseprimitivesprovidebasickeyboardsupportforyourappssothatuserscannigateitwithoutamouse.ScreenReadersScreenreadersfacilitatetext-to-speechconversionanddetectcrucGetting Started | NativeBaseialcontenttobeconveyedtopeoplewithvisualdisabilities.CoGetting Started | NativeBasentrastRatioNativeBasegivesyouacontrastingcolourbasedonyourtheme.YoucanalsocustomiseitusingtheuseAccessibleColorshook.NowSupportingUtilityPropsInspiredbyStyledSystemInspiredbyStyledSystemsoyoucanrapidlybuildcustomUIcomponentswithconstraint-basedutilitystyleprops.KnowMoreHeyThere!<Boxpx="3"py="2"mb={["4","5"]}bg="primary.400"rounded="lg"><TextfontWeight="medium"color="white"fontSize="sm">HeyThere!</Text></Box>KitchenSinkKitchenSinkisacomprehensivedemoappshowcasingalltheNativeBasecomponentsinaction.Itincludesbuttons,forms,iconsandmuchmore!TryitonwebScanwiththeExpoapponyourAndroiddevicetoseethespecialdishwecookedforyou!GithubScanwiththeExpoapponyourAndroiddevicetoseethespecialdishwecookedforyou!GithubScanwiththeExpoapponyourAndroiddevicetoseethespecialdishwecookedforyou!GithubNativeBaseforDesignersAFigmadesignkitthatemulatesalloftheutilitypropsfromNativeBase.Seamlesslyintegratestyleguides,UIcomponents,andpesintoyourwebandmobileapps.TryNowRichComponentLibraryNativeBaseoffersnearly40componentssoyoucanbuildseamlessly.Itincludesactionsheets,menus,spinners,popovers,breadcrumbsandmore.StorybookFORMSINTERACTIONSTGER<BoxalignItems="flex-end"p="8"><VStackalignItems="flex-end"space="5"><FormControl><FormControl.Labelmb="3">Whatx27;syoureventcalled?</FormControl.Label><Inputplaceholder="Eventx27;sName"/></FormControl><FormControl><FormControl.Labelmb="3">WhenisyourEvent?</FormControl.Label><Radio.GroupnativeID="patani"name="day_night"><VStackspace="3"><Radiovalue="day">Day</Radio><Radiovalue="night">Night</Radio></VStack></Radio.Group></FormControl><Divider/><Checkboxsize="sm"value="tnc"justifyContent="center"mb="4">IreetoTermsandconditions</Checkbox></VStack><Buttonmt="2"endIcon={<AddIconsize="3"/>}>CreateEvent</Button></Box>ResponsivenessMadeEasyInsteadofmanuallyaddingresponsiveness,NativeBaseV3allowsyoutoprovideobjectandarrayvaluestoaddresponsivestyles.KnowMore<Centerflex={1}p="4"><Stackm="4"w="100%"h="100%"direction={{base:"column",md:"row"}}rounded="xl"><VStackspace={{base:"2",md:"4"}}flex={{base:"none",md:1}}p="4"bg="blueGray.500">{}<VStackdisplay={{base:"none",md:"flex"}}space="6"mt="8">{sidebarItems.map((sidebarItem)=>{return({sidebarItem});})}</VStack></VStack><Boxflex={{base:1,md:3}}bg="blueGray.50"><VStackpx="8"my="6"space="6"><DashboardTitle/><HStackmt="4"space="4"><UserProfile/><VStackflex={1}><DashboardTable/></VStack></HStack></VStack></Box></Stack></Center>NowwithDarkModeBuildingappswithadarkmodesettingjustgotawholeloteasier.NativeBaseisnowoptimisedforlightanddarkmodes.KnowMoreEnablenotifications<Stackspace="4"><FormControl><Inputvariant="filled"placeholder="ChatRoomID"/></FormControl><ButtoncolorScheme="indigo"endIcon={<ArrowForwardIconsize="4"/>}>JoinIn</Button></Stack>PremiumScreenstobuildyournextprojectKickstartyournextbigideawithour100+responsiveandrigorouslytestedscreensbuiltusingNativeBase.BuynowTryNativeBaseStarterKitTestDriveNativeBaseStartup+withafreetemplatecreatedbytheNativeBaseteam.ScanwithExpoappTryonBrowserDownloadNowYourbrowserdoesnotsupportthevideot.Yourbrowserdoesnotsupportthevideot.ConsistentacrossWeb,Android&iOSWhetheryoux27;rebuildingfortheweb,AndroidoriOS,wex27;vegotyoucovered.Fast-trackyourdevprocesswithuniversalcomponents.KnowMoreWeAreGrowingNativeBaseisapopularcomponentlibraryamongdevs&wex27;reconstantlyimprovingit.33K+Downloads20KStars299Contributors50K+DependentsOurCommunityWehealivelycommunitybuiltonoursharedloveforReact&ReactNative.Joinus!DiscordGithubStackoverflowTwitterVSCodeExtensionTalksandArticlesCheckoutSanketSahux27;stalkonbuildinganaccessiblecomponentlibraryfornativeandwebatReactDayBangalore.InviteustospeakatyournexteventWelovesharingknowledgeandmeetingotherpassionatedevs.InviteaNativeBasecreatortospeakatyournextevent,wepromisetokeepthingsinteresting!SendInviteCreatedbyGeekyAntsAnOSS-loving,community-driventeamofReactNativegeeks!GeekyAntsisateamofReactNativeexpertswholoveopen-sourceandsolvingdeveloperproblems.We’vebeenworkingonReactNativesince2015andhedesignedandbuiltReactNativeappsforalmost200+clientsacrosstheglobe.Ourclientsincludestartupstobigenterprises!NeedhelpwithyourReactNativeapp?VisitGeekyAntsNativeBase3.0hascometofruitiononlyduetotheamazingteamthatworkedtirelesslyonit.Kudostoourcreators!OurSponsorsWeareverygratefultothosewhobelieveinwhatwedo.Herex27;stoallourwonderfulsponsors!BecomeasponsorMorefromtheAuthorsCuriousaboutwhatelsewex27;veworkedon?Wearedelighted!Takealookatafewofourotherprojects.ReactNativeAriaSyncStateFormstReactPluggableFlutterStarterJoinOurNewsletter,TabsandSpacesGetregularupdatesonNativeBase,ourcommunityandmore!GettingStartedIntroductionExamplesBlogsContributionGuidelinesCommunityTwitterStackOverflowDiscordYoutubeGitHubMorePrivacyPolicyCookiePolicyForEnterpriseContactSupportRoadmapAnnualReturnBuiltwith❤️atGeekyAnts.Createdbypotrace1.16,writtenbyPeterSelinger2001-2019©2024NativeBase