Skip to content

Commit

Permalink
Add Components and APIs Overview Guide
Browse files Browse the repository at this point in the history 
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 #14265

Differential Revision: D5192597

Pulled By: hramos

fbshipit-source-id: f281a14230468458f3da674a82df263fb9f064f4
  • Loading branch information
@hramos @facebook-github-bot
hramos authored and facebook-github-bot committed Jun 7, 2017
1 parent 236e9e4 commit 4f3da46
Show file tree
Hide file tree
Showing 4 changed files with 283 additions and 3 deletions.
235 changes: 235 additions & 0 deletions docs/ComponentsAndAPIs.md
View file
Original file line number Diff line number Diff line change
@@ -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.

<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/button.html">Button</a></h3>
<p>A basic button component for handling touches that should render nicely on any platform.</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/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/adsupportios.html">AdSupportIOS</a></h3>
<p>API to access the "advertising identifier" on iOS.</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/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/stylesheet.html">StyleSheet</a></h3>
<p>Provides an abstraction layer similar to CSS stylesheets.</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>
2 changes: 1 addition & 1 deletion docs/HandlingTouches.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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.
Expand Down
4 changes: 2 additions & 2 deletions docs/MoreResources.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ title: More Resources
layout: docs
category: The Basics
permalink: docs/more-resources.html
next: handling-touches
next: components
previous: networking
---

Expand All @@ -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

Expand Down
45 changes: 45 additions & 0 deletions website/src/react-native/css/react-native.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down

1 comment on commit 4f3da46

@scarlac
Copy link
Contributor

@scarlac scarlac commented on 4f3da46 Aug 2, 2017

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Nice work - Looks great!

Please sign in to comment.