mirror of
https://github.com/status-im/react-native.git
synced 2025-01-14 03:26:07 +00:00
6ad5e2fa7c
Summary: We're focusing the React Native core on a set of high quality essential components and will be removing any modules that do not belong in that set. If you're currently using AdSuppportIOS, it will remain available in the react-native-deprecated-modules archive. There's also alternative implementations such as https://github.com/ptomasroos/react-native-idfa/. Reviewed By: hramos Differential Revision: D5388632 fbshipit-source-id: ce6204512b61242a0ba8c731836f3b3b7239b4b0
236 lines
9.4 KiB
Markdown
236 lines
9.4 KiB
Markdown
---
|
|
id: components
|
|
title: Components and APIs
|
|
layout: docs
|
|
category: Guides
|
|
permalink: docs/components-and-apis.html
|
|
next: platform-specific-code
|
|
previous: more-resources
|
|
---
|
|
|
|
React Native provides a number of built-in components. You will find a full list of components and APIs on the sidebar to the left. If you're not sure where to get started, take a look at the following categories:
|
|
|
|
- [Basic Components](docs/components-and-apis.html#basic-components)
|
|
- [User Interface](docs/components-and-apis.html#user-interface)
|
|
- [Lists Views](docs/components-and-apis.html#lists-views)
|
|
- [iOS-specific](docs/components-and-apis.html#ios-components-and-apis)
|
|
- [Android-specific](docs/components-and-apis.html#android-components-and-apis)
|
|
- [Others](docs/components-and-apis.html#others)
|
|
|
|
You're not limited to the components and APIs bundled with React Native. React Native is a community of thousands of developers. If you're looking for a library that does something specific, search the npm registry for packages mentioning [react-native](https://www.npmjs.com/search?q=react-native&page=1&ranking=optimal), or check out [Awesome React Native](http://www.awesome-react-native.com/) for a curated list.
|
|
|
|
## Basic Components
|
|
|
|
Most apps will end up using one of these basic components. You'll want to get yourself familiarized with all of these if you're new to React Native.
|
|
|
|
<div class="component-grid component-grid-border">
|
|
<div class="component">
|
|
<h3><a href="docs/view.html">View</a></h3>
|
|
<p>The most fundamental component for building a UI.</p>
|
|
</div>
|
|
<div class="component">
|
|
<h3><a href="docs/text.html">Text</a></h3>
|
|
<p>A component for displaying text.</p>
|
|
</div>
|
|
<div class="component">
|
|
<h3><a href="docs/image.html">Image</a></h3>
|
|
<p>A component for displaying images.</p>
|
|
</div>
|
|
<div class="component">
|
|
<h3><a href="docs/textinput.html">TextInput</a></h3>
|
|
<p>A component for inputting text into the app via a keyboard.</p>
|
|
</div>
|
|
<div class="component">
|
|
<h3><a href="docs/scrollview.html">ScrollView</a></h3>
|
|
<p>Provides a scrolling container that can host multiple components and views.</p>
|
|
</div>
|
|
<div class="component">
|
|
<h3><a href="docs/stylesheet.html">StyleSheet</a></h3>
|
|
<p>Provides an abstraction layer similar to CSS stylesheets.</p>
|
|
</div>
|
|
</div>
|
|
|
|
## User Interface
|
|
|
|
Render common user interface controls on any platform using the following components. For platform specific components, keep reading.
|
|
|
|
<div class="component-grid component-grid-border">
|
|
<div class="component">
|
|
<h3><a href="docs/button.html">Button</a></h3>
|
|
<p>A basic button component for handling touches that should render nicely on any platform.</p>
|
|
</div>
|
|
<div class="component">
|
|
<h3><a href="docs/picker.html">Picker</a></h3>
|
|
<p>Renders the native picker component on iOS and Android.</p>
|
|
</div>
|
|
<div class="component">
|
|
<h3><a href="docs/slider.html">Slider</a></h3>
|
|
<p>A component used to select a single value from a range of values.</p>
|
|
</div>
|
|
<div class="component">
|
|
<h3><a href="docs/switch.html">Switch</a></h3>
|
|
<p>Renders a boolean input.</p>
|
|
</div>
|
|
</div>
|
|
|
|
## List Views
|
|
|
|
Unlike the more generic `ScrollView`, the following list view components only render elements that are currently showing on the screen. This makes them a great choice for displaying long lists of data.
|
|
|
|
<div class="component-grid component-grid-border">
|
|
<div class="component">
|
|
<h3><a href="docs/flatlist.html">FlatList</a></h3>
|
|
<p>A component for rendering performant scrollable lists.</p>
|
|
</div>
|
|
<div class="component">
|
|
<h3><a href="docs/sectionlist.html">SectionList</a></h3>
|
|
<p>Like <code>FlatList</code>, but for sectioned lists.</p>
|
|
</div>
|
|
</div>
|
|
|
|
## iOS Components and APIs
|
|
|
|
Many of the following components provide wrappers for commonly used UIKit classes.
|
|
|
|
<div class="component-grid component-grid-border">
|
|
<div class="component">
|
|
<h3><a href="docs/actionsheetios.html">ActionSheetIOS</a></h3>
|
|
<p>API to display an iOS action sheet or share sheet.</p>
|
|
</div>
|
|
<div class="component">
|
|
<h3><a href="docs/alertios.html">AlertIOS</a></h3>
|
|
<p>Create an iOS alert dialog with a message or create a prompt for user input.</p>
|
|
</div>
|
|
<div class="component">
|
|
<h3><a href="docs/datepickerios.html">DatePickerIOS</a></h3>
|
|
<p>Renders a date/time picker (selector) on iOS.</p>
|
|
</div>
|
|
<div class="component">
|
|
<h3><a href="docs/imagepickerios.html">ImagePickerIOS</a></h3>
|
|
<p>Renders a image picker on iOS.</p>
|
|
</div>
|
|
<div class="component">
|
|
<h3><a href="docs/navigatorios.html">NavigatorIOS</a></h3>
|
|
<p>A wrapper around <code>UINavigationController</code>, enabling you to implement a navigation stack.</p>
|
|
</div>
|
|
<div class="component">
|
|
<h3><a href="docs/progressviewios.html">ProgressViewIOS</a></h3>
|
|
<p>Renders a <code>UIProgressView</a></code> on iOS.</p>
|
|
</div>
|
|
<div class="component">
|
|
<h3><a href="docs/pushnotificationios.html">PushNotificationIOS</a></h3>
|
|
<p>Handle push notifications for your app, including permission handling and icon badge number.</p>
|
|
</div>
|
|
<div class="component">
|
|
<h3><a href="docs/segmentedcontrolios.html">SegmentedControlIOS</a></h3>
|
|
<p>Renders a <code>UISegmentedControl</code> on iOS.</p>
|
|
</div>
|
|
<div class="component">
|
|
<h3><a href="docs/tabbarios.html">TabBarIOS</a></h3>
|
|
<p>Renders a <code>UITabViewController</code> on iOS. Use with <a href="docs/tabbarios-item.html">TabBarIOS.Item</a>.</p>
|
|
</div>
|
|
</div>
|
|
|
|
## Android Components and APIs
|
|
|
|
Many of the following components provide wrappers for commonly used Android classes.
|
|
|
|
<div class="component-grid component-grid-border">
|
|
<div class="component">
|
|
<h3><a href="docs/backhandler.html">BackHandler</a></h3>
|
|
<p>Detect hardware button presses for back navigation.</p>
|
|
</div>
|
|
<div class="component">
|
|
<h3><a href="docs/datepickerandroid.html">DatePickerAndroid</a></h3>
|
|
<p>Opens the standard Android date picker dialog.</p>
|
|
</div>
|
|
<div class="component">
|
|
<h3><a href="docs/drawerlayoutandroid.html">DrawerLayoutAndroid</a></h3>
|
|
<p>Renders a <code>DrawerLayout</code> on Android.</p>
|
|
</div>
|
|
<div class="component">
|
|
<h3><a href="docs/permissionsandroid.html">PermissionsAndroid</a></h3>
|
|
<p>Provides access to the permissions model introduced in Android M.</p>
|
|
</div>
|
|
<div class="component">
|
|
<h3><a href="docs/progressbarandroid.html">ProgressBarAndroid</a></h3>
|
|
<p>Renders a <code>ProgressBar</code> on Android.</p>
|
|
</div>
|
|
<div class="component">
|
|
<h3><a href="docs/timepickerandroid.html">TimePickerAndroid</a></h3>
|
|
<p>Opens the standard Android time picker dialog.</p>
|
|
</div>
|
|
<div class="component">
|
|
<h3><a href="docs/toastandroid.html">ToastAndroid</a></h3>
|
|
<p>Create an Android Toast alert.</p>
|
|
</div>
|
|
<div class="component">
|
|
<h3><a href="docs/toolbarandroid.html">ToolbarAndroid</a></h3>
|
|
<p>Renders a <code>Toolbar</code> on Android.</p>
|
|
</div>
|
|
<div class="component">
|
|
<h3><a href="docs/viewpagerandroid.html">ViewPagerAndroid</a></h3>
|
|
<p>Container that allows to flip left and right between child views.</p>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
## Others
|
|
|
|
These components may come in handy for certain applications. For an exhaustive list of components and APIs, check out the sidebar to the left.
|
|
|
|
<div class="component-grid">
|
|
<div class="component">
|
|
<h3><a href="docs/activityindicator.html">ActivityIndicator</a></h3>
|
|
<p>Displays a circular loading indicator.</p>
|
|
</div>
|
|
<div class="component">
|
|
<h3><a href="docs/alert.html">Alert</a></h3>
|
|
<p>Launches an alert dialog with the specified title and message.</p>
|
|
</div>
|
|
<div class="component">
|
|
<h3><a href="docs/animated.html">Animated</a></h3>
|
|
<p>A library for creating fluid, powerful animations that are easy to build and maintain.</p>
|
|
</div>
|
|
<div class="component">
|
|
<h3><a href="docs/cameraroll.html">CameraRoll</a></h3>
|
|
<p>Provides access to the local camera roll / gallery.</p>
|
|
</div>
|
|
<div class="component">
|
|
<h3><a href="docs/clipboard.html">Clipboard</a></h3>
|
|
<p>Provides an interface for setting and getting content from the clipboard on both iOS and Android.</p>
|
|
</div>
|
|
<div class="component">
|
|
<h3><a href="docs/dimensions.html">Dimensions</a></h3>
|
|
<p>Provides an interface for getting device dimensions.</p>
|
|
</div>
|
|
<div class="component">
|
|
<h3><a href="docs/keyboardavoidingview.html">KeyboardAvoidingView</a></h3>
|
|
<p>Provides a view that moves out of the way of the virtual keyboard automatically.</p>
|
|
</div>
|
|
<div class="component">
|
|
<h3><a href="docs/linking.html">Linking</a></h3>
|
|
<p>Provides a general interface to interact with both incoming and outgoing app links.</p>
|
|
</div>
|
|
<div class="component">
|
|
<h3><a href="docs/modal.html">Modal</a></h3>
|
|
<p>Provides a simple way to present content above an enclosing view.</p>
|
|
</div>
|
|
<div class="component">
|
|
<h3><a href="docs/pixelratio.html">PixelRatio</a></h3>
|
|
<p>Provides access to the device pixel density.</p>
|
|
</div>
|
|
<div class="component">
|
|
<h3><a href="docs/refreshcontrol.html">RefreshControl</a></h3>
|
|
<p>This component is used inside a <code>ScrollView</code> to add pull to refresh functionality.</p>
|
|
</div>
|
|
<div class="component">
|
|
<h3><a href="docs/statusbar.html">StatusBar</a></h3>
|
|
<p>Component to control the app status bar.</p>
|
|
</div>
|
|
<div class="component">
|
|
<h3><a href="docs/webview.html">WebView</a></h3>
|
|
<p>A component that renders web content in a native view.</p>
|
|
</div>
|
|
</div>
|