diff --git a/docs/ComponentsAndAPIs.md b/docs/ComponentsAndAPIs.md new file mode 100644 index 00000000000..ca2af1bdd20 --- /dev/null +++ b/docs/ComponentsAndAPIs.md @@ -0,0 +1,235 @@ +--- +id: components +title: Components and APIs +layout: docs +category: Guides +permalink: docs/components-and-apis.html +next: handling-touches +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. + +
+
+

View

+

The most fundamental component for building a UI.

+
+
+

Text

+

A component for displaying text.

+
+
+

Image

+

A component for displaying images.

+
+
+

TextInput

+

A component for inputting text into the app via a keyboard.

+
+
+

ScrollView

+

Provides a scrolling container that can host multiple components and views.

+
+
+

Button

+

A basic button component for handling touches that should render nicely on any platform.

+
+
+ +## User Interface + +Render common user interface controls on any platform using the following components. For platform specific components, keep reading. + +
+
+

Picker

+

Renders the native picker component on iOS and Android.

+
+
+

Slider

+

A component used to select a single value from a range of values.

+
+
+

Switch

+

Renders a boolean input.

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

FlatList

+

A component for rendering performant scrollable lists.

+
+
+

SectionList

+

Like FlatList, but for sectioned lists.

+
+
+ +## iOS Components and APIs + +Many of the following components provide wrappers for commonly used UIKit classes. + +
+
+

ActionSheetIOS

+

API to display an iOS action sheet or share sheet.

+
+
+

AdSupportIOS

+

API to access the "advertising identifier" on iOS.

+
+
+

AlertIOS

+

Create an iOS alert dialog with a message or create a prompt for user input.

+
+
+

DatePickerIOS

+

Renders a date/time picker (selector) on iOS.

+
+
+

ImagePickerIOS

+

Renders a image picker on iOS.

+
+
+

NavigatorIOS

+

A wrapper around UINavigationController, enabling you to implement a navigation stack.

+
+
+

ProgressViewIOS

+

Renders a UIProgressView on iOS.

+
+
+

PushNotificationIOS

+

Handle push notifications for your app, including permission handling and icon badge number.

+
+
+

SegmentedControlIOS

+

Renders a UISegmentedControl on iOS.

+
+
+

TabBarIOS

+

Renders a UITabViewController on iOS. Use with TabBarIOS.Item.

+
+
+ +## Android Components and APIs + +Many of the following components provide wrappers for commonly used Android classes. + +
+
+

BackHandler

+

Detect hardware button presses for back navigation.

+
+
+

DatePickerAndroid

+

Opens the standard Android date picker dialog.

+
+
+

DrawerLayoutAndroid

+

Renders a DrawerLayout on Android.

+
+
+

PermissionsAndroid

+

Provides access to the permissions model introduced in Android M.

+
+
+

ProgressBarAndroid

+

Renders a ProgressBar on Android.

+
+
+

TimePickerAndroid

+

Opens the standard Android time picker dialog.

+
+
+

ToastAndroid

+

Create an Android Toast alert.

+
+
+

ToolbarAndroid

+

Renders a Toolbar on Android.

+
+
+

ViewPagerAndroid

+

Container that allows to flip left and right between child views.

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

ActivityIndicator

+

Displays a circular loading indicator.

+
+
+

Alert

+

Launches an alert dialog with the specified title and message.

+
+
+

CameraRoll

+

Provides access to the local camera roll / gallery.

+
+
+

Clipboard

+

Provides an interface for setting and getting content from the clipboard on both iOS and Android.

+
+
+

Dimensions

+

Provides an interface for getting device dimensions.

+
+
+

KeyboardAvoidingView

+

Provides a view that moves out of the way of the virtual keyboard automatically.

+
+
+

Linking

+

Provides a general interface to interact with both incoming and outgoing app links.

+
+
+

Modal

+

Provides a simple way to present content above an enclosing view.

+
+
+

PixelRatio

+

Provides access to the device pixel density.

+
+
+

RefreshControl

+

This component is used inside a ScrollView to add pull to refresh functionality.

+
+
+

StatusBar

+

Component to control the app status bar.

+
+
+

StyleSheet

+

Provides an abstraction layer similar to CSS stylesheets.

+
+
+

WebView

+

A component that renders web content in a native view.

+
+
diff --git a/docs/HandlingTouches.md b/docs/HandlingTouches.md index 597857c4069..c295b125371 100644 --- a/docs/HandlingTouches.md +++ b/docs/HandlingTouches.md @@ -5,7 +5,7 @@ layout: docs category: Guides permalink: docs/handling-touches.html next: animations -previous: more-resources +previous: components --- Users interact with mobile apps mainly through touch. They can use a combination of gestures, such as tapping on a button, scrolling a list, or zooming on a map. diff --git a/docs/MoreResources.md b/docs/MoreResources.md index 0a1957024fa..2671682bc7b 100644 --- a/docs/MoreResources.md +++ b/docs/MoreResources.md @@ -4,7 +4,7 @@ title: More Resources layout: docs category: The Basics permalink: docs/more-resources.html -next: handling-touches +next: components previous: networking --- @@ -16,7 +16,7 @@ If you're using React Native, you probably already know about [React](https://fa One common question is how to handle the "state" of your React Native application. The most popular library for this is [Redux](http://redux.js.org/). Don't be afraid of how often Redux uses the word "reducer" - it's a pretty simple library, and there's also a nice [series of videos](https://egghead.io/courses/getting-started-with-redux) explaining it. -If you're looking for a library that does a specific thing, check out [Awesome React Native](https://github.com/jondot/awesome-react-native), a curated list of components that also has demos, articles, and other stuff. +If you're looking for a library that does a specific thing, check out [Awesome React Native](http://www.awesome-react-native.com/), a curated list of components that also has demos, articles, and other stuff. ## Example Apps diff --git a/website/src/react-native/css/react-native.css b/website/src/react-native/css/react-native.css index 8c4a8b13389..6a5756c9de4 100644 --- a/website/src/react-native/css/react-native.css +++ b/website/src/react-native/css/react-native.css @@ -1699,6 +1699,51 @@ input#algolia-doc-search:focus { .buttons-unit.downloads { margin: 30px 0; } +.component-grid { + max-width: 800px; +} + +.component { + border: 1px solid #05A5D1; + border-radius: 3px; + margin: 0 auto 10px; + width: 100%; + display: inline-block; + background-color: white; +} + +.component h3 { + font-size: 16px; + margin: 0; + padding: 0 10px; + background-color: #05A5D1; + color: white; +} + +.component h3 a { + color: white; +} + +.component p { + padding: 10px; + margin: 2px; +} + +@media only screen and (min-device-width: 768px) { + .component-grid { + width: 768px; + } + .component-grid.component-grid-border { + border-bottom: 1px solid #f1eff0; + } + .component { + width: 30%; + height: 150px; + margin: 0 22px 22px auto; + vertical-align: top; + } +} + /** Showcase **/ .home-showcase-section { max-width: 800px;