website/versioned_docs/version-0.81/components-and-apis.md
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:
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 this guide about finding libraries.
Most apps will end up using one or more of these basic components.
<div className="component-grid component-grid-border"> <div className="component"> <a href="./view"> <h3>View</h3> <p>The most fundamental component for building a UI.</p> </a> </div> <div className="component"> <a href="./text"> <h3>Text</h3> <p>A component for displaying text.</p> </a> </div> <div className="component"> <a href="./image"> <h3>Image</h3> <p>A component for displaying images.</p> </a> </div> <div className="component"> <a href="./textinput"> <h3>TextInput</h3> <p>A component for inputting text into the app via a keyboard.</p> </a> </div> <div className="component"> <a href="./pressable"> <h3>Pressable</h3> <p>A wrapper component that can detect various stages of press interactions on any of its children.</p> </a> </div> <div className="component"> <a href="./scrollview"> <h3>ScrollView</h3> <p>Provides a scrolling container that can host multiple components and views.</p> </a> </div> <div className="component"> <a href="./stylesheet"> <h3>StyleSheet</h3> <p>Provides an abstraction layer similar to CSS stylesheets.</p> </a> </div> </div>These common user interface controls will render on any platform.
<div className="component-grid component-grid-border"> <div className="component"> <a href="./button"> <h3>Button</h3> <p>A basic button component for handling touches that should render nicely on any platform.</p> </a> </div> <div className="component"> <a href="./switch"> <h3>Switch</h3> <p>Renders a boolean input.</p> </a> </div> </div>Unlike the more generic 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.
Many of the following components provide wrappers for commonly used Android classes.
<div className="component-grid component-grid-border"> <div className="component"> <a href="./backhandler"> <h3>BackHandler</h3> <p>Detect hardware button presses for back navigation.</p> </a> </div> <div className="component"> <a href="./drawerlayoutandroid"> <h3>DrawerLayoutAndroid</h3> <p>Renders a <code>DrawerLayout</code> on Android.</p> </a> </div> <div className="component"> <a href="./permissionsandroid"> <h3>PermissionsAndroid</h3> <p>Provides access to the permissions model introduced in Android M.</p> </a> </div> <div className="component"> <a href="./toastandroid"> <h3>ToastAndroid</h3> <p>Create an Android Toast alert.</p> </a> </div> </div>Many of the following components provide wrappers for commonly used UIKit classes.
<div className="component-grid component-grid-border"> <div className="component"> <a href="./actionsheetios"> <h3>ActionSheetIOS</h3> <p>API to display an iOS action sheet or share sheet.</p> </a> </div> </div>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).
<div className="component-grid"> <div className="component"> <a href="./activityindicator"> <h3>ActivityIndicator</h3> <p>Displays a circular loading indicator.</p> </a> </div> <div className="component"> <a href="./alert"> <h3>Alert</h3> <p>Launches an alert dialog with the specified title and message.</p> </a> </div> <div className="component"> <a href="./animated"> <h3>Animated</h3> <p>A library for creating fluid, powerful animations that are easy to build and maintain.</p> </a> </div> <div className="component"> <a href="./dimensions"> <h3>Dimensions</h3> <p>Provides an interface for getting device dimensions.</p> </a> </div> <div className="component"> <a href="./keyboardavoidingview"> <h3>KeyboardAvoidingView</h3> <p>Provides a view that moves out of the way of the virtual keyboard automatically.</p> </a> </div> <div className="component"> <a href="./linking"> <h3>Linking</h3> <p>Provides a general interface to interact with both incoming and outgoing app links.</p> </a> </div> <div className="component"> <a href="./modal"> <h3>Modal</h3> <p>Provides a simple way to present content above an enclosing view.</p> </a> </div> <div className="component"> <a href="./pixelratio"> <h3>PixelRatio</h3> <p>Provides access to the device pixel density.</p> </a> </div> <div className="component"> <a href="./refreshcontrol"> <h3>RefreshControl</h3> <p>This component is used inside a <code>ScrollView</code> to add pull to refresh functionality.</p> </a> </div> <div className="component"> <a href="./statusbar"> <h3>StatusBar</h3> <p>Component to control the app status bar.</p> </a> </div> </div>