From 4f3da461462952e5da49ad6fd72ed35842046813 Mon Sep 17 00:00:00 2001 From: Hector Ramos Date: Wed, 7 Jun 2017 08:04:12 -0700 Subject: [PATCH] Add Components and APIs Overview Guide Summary: Essential components such as View, Text, and Button are easily overlooked amongst the long list of components and APIs due to a lack of categorization. The basic components are already introduced as part of the tutorial, but they may be missed by people who prefer scanning over the docs. Built website on localhost. Preview of the website as seem on Chrome on macOS: ![screencapture-localhost-8079-react-native-docs-components-and-apis-html-1496357491473](https://cloud.githubusercontent.com/assets/165856/26704237/902d0986-46e2-11e7-9624-17db692ae11e.png) Preview as seen on an iPhone Plus (via Chrome console): ![screen shot 2017-06-01 at 3 57 00 pm](https://cloud.githubusercontent.com/assets/165856/26704309/05c8ff7e-46e3-11e7-99ff-b7402f5265d4.png) Closes https://github.com/facebook/react-native/pull/14265 Differential Revision: D5192597 Pulled By: hramos fbshipit-source-id: f281a14230468458f3da674a82df263fb9f064f4 --- docs/ComponentsAndAPIs.md | 235 ++++++++++++++++++ docs/HandlingTouches.md | 2 +- docs/MoreResources.md | 4 +- website/src/react-native/css/react-native.css | 45 ++++ 4 files changed, 283 insertions(+), 3 deletions(-) create mode 100644 docs/ComponentsAndAPIs.md diff --git a/docs/ComponentsAndAPIs.md b/docs/ComponentsAndAPIs.md new file mode 100644 index 000000000..ca2af1bdd --- /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 597857c40..c295b1253 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 0a1957024..2671682bc 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 8c4a8b133..6a5756c9d 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;