https://reactnative.dev/assets/js/30931ae2.8d5b44d0.js

1"use strict";(self.webpackChunkreact_native_website=self.webpackChunkreact_native_website||[]).push([["13510"],{41371(e,n,s){s.r(n),s.d(n,{metadata:()=>i,default:()=>h,frontMatter:()=>t,contentTitle:()=>a,toc:()=>d,assets:()=>c});var i=JSON.parse('{"id":"components-and-apis","title":"Core Components and APIs","description":"React Native provides a number of built-in Core Components ready for you to use in your app. You can find them all in the left sidebar (or menu above, if you are on a narrow screen). If you\'re not sure where to get started, take a look at the following categories:","source":"@site/../docs/components-and-apis.md","sourceDirName":".","slug":"/components-and-apis","permalink":"/docs/next/components-and-apis","draft":false,"unlisted":false,"editUrl":"[{\\"label\\":\\"Edit this page\\",\\"href\\":\\"https://github.com/facebook/react-native-website/edit/main/docs/components-and-apis.md\\"}]","tags":[],"version":"current","lastUpdatedAt":1789062105000,"frontMatter":{"id":"components-and-apis","title":"Core Components and APIs"},"sidebar":"components","next":{"title":"ActivityIndicator","permalink":"/docs/next/activityindicator"}}'),o=s(62540),r=s(43023);let t={id:"components-and-apis",title:"Core Components and APIs"},a,c={},d=[{value:"Basic Components",id:"basic-components",level:2},{value:"User Interface",id:"user-interface",level:2},{value:"List Views",id:"list-views",level:2},{value:"Android Components and APIs",id:"android-components-and-apis",level:2},{value:"iOS Components and APIs",id:"ios-components-and-apis",level:2},{value:"Others",id:"others",level:2}];function l(e){let n={a:"a",code:"code",h2:"h2",li:"li",p:"p",ul:"ul",...(0,r.R)(),...e.components};return(0,o.jsxs)(o.Fragment,{children:[(0,o.jsxs)(n.p,{children:["React Native provides a number of built-in ",(0,o.jsx)(n.a,{href:"intro-react-native-components",children:"Core Components"})," ready for you to use in your app. You can find them all in the left sidebar (or menu above, if you are on a narrow screen). If you're not sure where to get started, take a look at the following categories:"]}),"\n",(0,o.jsxs)(n.ul,{children:["\n",(0,o.jsx)(n.li,{children:(0,o.jsx)(n.a,{href:"components-and-apis#basic-components",children:"Basic Components"})}),"\n",(0,o.jsx)(n.li,{children:(0,o.jsx)(n.a,{href:"components-and-apis#user-interface",children:"User Interface"})}),"\n",(0,o.jsx)(n.li,{children:(0,o.jsx)(n.a,{href:"components-and-apis#list-views",children:"List Views"})}),"\n",(0,o.jsx)(n.li,{children:(0,o.jsx)(n.a,{href:"components-and-apis#android-components-and-apis",children:"Android-specific"})}),"\n",(0,o.jsx)(n.li,{children:(0,o.jsx)(n.a,{href:"components-and-apis#ios-components-and-apis",children:"iOS-specific"})}),"\n",(0,o.jsx)(n.li,{children:(0,o.jsx)(n.a,{href:"components-and-apis#others",children:"Others"})}),"\n"]}),"\n",(0,o.jsxs)(n.p,{children:["You're not limited to the components and APIs bundled with React Native. React Native has a community of thousands of developers. If you're looking for a library that does something specific, please refer to ",(0,o.jsx)(n.a,{href:"libraries#finding-libraries",children:"this guide about finding libraries"}),"."]}),"\n",(0,o.jsx)(n.h2,{id:"basic-components",children:"Basic Components"}),"\n",(0,o.jsx)(n.p,{children:"Most apps will end up using one or more of these basic components."}),"\n",(0,o.jsxs)("div",{className:"component-grid component-grid-border",children:[(0,o.jsx)("div",{className:"component",children:(0,o.jsxs)("a",{href:"./view",children:[(0,o.jsx)("h3",{children:"View"}),(0,o.jsx)("p",{children:"The most fundamental component for building a UI."})]})}),(0,o.jsx)("div",{className:"component",children:(0,o.jsxs)("a",{href:"./text",children:[(0,o.jsx)("h3",{children:"Text"}),(0,o.jsx)("p",{children:"A component for displaying text."})]})}),(0,o.jsx)("div",{className:"component",children:(0,o.jsxs)("a",{href:"./image",children:[(0,o.jsx)("h3",{children:"Image"}),(0,o.jsx)("p",{children:"A component for displaying images."})]})}),(0,o.jsx)("div",{className:"component",children:(0,o.jsxs)("a",{href:"./textinput",children:[(0,o.jsx)("h3",{children:"TextInput"}),(0,o.jsx)("p",{children:"A component for inputting text into the app via a keyboard."})]})}),(0,o.jsx)("div",{className:"component",children:(0,o.jsxs)("a",{href:"./pressable",children:[(0,o.jsx)("h3",{children:"Pressable"}),(0,o.jsx)("p",{children:"A wrapper component that can detect various stages of press interactions on any of its children."})]})}),(0,o.jsx)("div",{className:"component",children:(0,o.jsxs)("a",{href:"./scrollview",children:[(0,o.jsx)("h3",{children:"ScrollView"}),(0,o.jsx)("p",{children:"Provides a scrolling container that can host multiple components and views."})]})}),(0,o.jsx)("div",{className:"component",children:(0,o.jsxs)("a",{href:"./stylesheet",children:[(0,o.jsx)("h3",{children:"StyleSheet"}),(0,o.jsx)("p",{children:"Provides an abstraction layer similar to CSS 

1stylesheets."})]})})]}),"\n",(0,o.jsx)(n.h2,{id:"user-interface",children:"User Interface"}),"\n",(0,o.jsx)(n.p,{children:"These common user interface controls will render on any platform."}),"\n",(0,o.jsxs)("div",{className:"component-grid component-grid-border",children:[(0,o.jsx)("div",{className:"component",children:(0,o.jsxs)("a",{href:"./button",children:[(0,o.jsx)("h3",{children:"Button"}),(0,o.jsx)("p",{children:"A basic button component for handling touches that should render nicely on any platform."})]})}),(0,o.jsx)("div",{className:"component",children:(0,o.jsxs)("a",{href:"./switch",children:[(0,o.jsx)("h3",{children:"Switch"}),(0,o.jsx)("p",{children:"Renders a boolean input."})]})})]}),"\n",(0,o.jsx)(n.h2,{id:"list-views",children:"List Views"}),"\n",(0,o.jsxs)(n.p,{children:["Unlike the more generic ",(0,o.jsx)(n.a,{href:"./scrollview",children:(0,o.jsx)(n.code,{children:"ScrollView"})}),", the following list view components only render elements that are currently showing on the screen. This makes them a performant choice for displaying long lists of data."]}),"\n",(0,o.jsxs)("div",{className:"component-grid component-grid-border",children:[(0,o.jsx)("div",{className:"component",children:(0,o.jsxs)("a",{href:"./flatlist",children:[(0,o.jsx)("h3",{children:"FlatList"}),(0,o.jsx)("p",{children:"A component for rendering performant scrollable lists."})]})}),(0,o.jsx)("div",{className:"component",children:(0,o.jsxs)("a",{href:"./sectionlist",children:[(0,o.jsx)("h3",{children:"SectionList"}),(0,o.jsxs)("p",{children:["Like ",(0,o.jsx)("code",{children:"FlatList"}),", but for sectioned lists."]})]})})]}),"\n",(0,o.jsx)(n.h2,{id:"android-components-and-apis",children:"Android Components and APIs"}),"\n",(0,o.jsx)(n.p,{children:"Many of the following components provide wrappers for commonly used Android classes."}),"\n",(0,o.jsxs)("div",{className:"component-grid component-grid-border",children:[(0,o.jsx)("div",{className:"component",children:(0,o.jsxs)("a",{href:"./backhandler",children:[(0,o.jsx)("h3",{children:"BackHandler"}),(0,o.jsx)("p",{children:"Detect hardware button presses for back navigation."})]})}),(0,o.jsx)("div",{className:"component",children:(0,o.jsxs)("a",{href:"./drawerlayoutandroid",children:[(0,o.jsx)("h3",{children:"DrawerLayoutAndroid"}),(0,o.jsxs)("p",{children:["Renders a ",(0,o.jsx)("code",{children:"DrawerLayout"})," on Android."]})]})}),(0,o.jsx)("div",{className:"component",children:(0,o.jsxs)("a",{href:"./permissionsandroid",children:[(0,o.jsx)("h3",{children:"PermissionsAndroid"}),(0,o.jsx)("p",{children:"Provides access to the permissions model introduced in Android M."})]})}),(0,o.jsx)("div",{className:"component",children:(0,o.jsxs)("a",{href:"./toastandroid",children:[(0,o.jsx)("h3",{children:"ToastAndroid"}),(0,o.jsx)("p",{children:"Create an Android Toast alert."})]})})]}),"\n",(0,o.jsx)(n.h2,{id:"ios-components-and-apis",children:"iOS Components and APIs"}),"\n",(0,o.jsx)(n.p,{children:"Many of the following components provide wrappers for commonly used UIKit classes."}),"\n",(0,o.jsx)("div",{className:"component-grid component-grid-border",children:(0,o.jsx)("div",{className:"component",children:(0,o.jsxs)("a",{href:"./actionsheetios",children:[(0,o.jsx)("h3",{children:"ActionSheetIOS"}),(0,o.jsx)("p",{children:"API to display an iOS action sheet or share sheet."})]})})}),"\n",(0,o.jsx)(n.h2,{id:"others",children:"Others"}),"\n",(0,o.jsx)(n.p,{children:"These components may be useful for certain applications. For an exhaustive list of components and APIs, check out the sidebar to the left (or menu above, if you are on a narrow screen)."}),"\n",(0,o.jsxs)("div",{className:"component-grid",children:[(0,o.jsx)("div",{className:"component",children:(0,o.jsxs)("a",{href:"./activityindicator",children:[(0,o.jsx)("h3",{children:"ActivityIndicator"}),(0,o.jsx)("p",{children:"Displays a circular loading indicator."})]})}),(0,o.jsx)("div",{className:"component",children:(0,o.jsxs)("a",{href:"./alert",children:[(0,o.jsx)("h3",{children:"Alert"}),(0,o.jsx)("p",{children:"Launches an alert dialog with the specified title and message."})]})}),(0,o.jsx)("div",{className:"component",children:(0,o.jsxs)("a",{href:"./animated",children:[(0,o.jsx)("h3",{children:"Animated"}),(0,o.jsx)("p",{children:"A library for creating fluid, powerful animations that are easy to build and maintain."})]})}),(0,o.jsx)("div",{className:"component",children:(0,o.jsxs)("a",{href:"./dimensions",children:[(0,o.jsx)("h3",{children:"Dimensions"}),(0,o.jsx)("p",{children:"Provides an interface for getting device dimensions."})]})}),(0,o.jsx)("div",{className:"component",children:(0,o.jsxs)("a",{href:"./keyboardavoidingview",children:[(0,o.jsx)("h3",{children:"KeyboardAvoidingView"}),(0,o.jsx)("p",{children:"Provides a view that moves out of the way of the virtual keyboard automatically."})]})}),(0,o.jsx)("div",{className:"component",children:(0,o.jsxs)("a",{href:"./linking",children:[(0,o.jsx)("h3",{children:"Linking"}),(0,o.jsx)("p",{children:"Provides a general interface to interact with both incoming and outgoing app links."})]})}),(0,o.jsx)("div",{className:"component",children:(0,o.jsxs)("a",{href:"./modal",children:[(0,o.jsx)("h3",{children:"Modal"}),(0,o.jsx)("p",{children:"Provides a simple way to present content above an enclosing view."})]})}),(0,o.jsx)("div",{className:"component",children:(0,o.jsxs)("a",{href:"./pixelratio",children:[(0,o.jsx)("h3",{children:"PixelRatio"}),(0,o.jsx)("p",{children:"Provides access to the device pixel density."})]})}),(0,o.jsx)("div",{className:"component",children:(0,o.jsxs)("a",{href:"./reactnativeversion",children:[(0,o.jsx)("h3",{children:"ReactNativeVersion"}),(0,o.jsx)("p",{children:"Exposes the resolved React Native package version on the JS side."})]})}),(0,o.jsx)("div",{className:"component",children:(0,o.jsxs)("a",{href:"./refreshcontrol",children:[(0,o.jsx)("h3",{children:"RefreshControl"}),(0,o.jsxs)("p",{children:["This component is used inside a ",(0,o.jsx)("code",{children:"ScrollView"})," to add pull to refresh functionality."]})]})}),(0,o.jsx)("div",{className:"component",children:(0,o.jsxs)("a",{href:"./statusbar",children:[(0,o.jsx)("h3",{children:"StatusBar"}),(0,o.jsx)("p",{children:"Component to control the app status bar."})]})})]})]})}function h(e={}){let{wrapper:n}={...(0,r.R)(),...e.components};return n?(0,o.jsx)(n,{...e,children:(0,o.jsx)(l,{...e})}):l(e)}},43023(e,n,s){s.d(n,{R:()=>t,x:()=>a});var i=s(63696);let o={},r=i.createContext(o);function t(e){let n=i.useContext(r);return i.useMemo(function(){return"function"==typeof e?e(n):{...n,...e}},[n,e])}function a(e){let n;return n=e.disableParentContext?"function"==typeof e.components?e.components(o):e.components||o:t(e.components),i.createElement(r.Provider,{value:n},e.children)}}}]);