react-native/docs/Tutorial-CoreComponents.md

id	title	layout	category	permalink	next
tutorial-core-components	Core Components	docs	Tutorials	docs/tutorial-core-components.html	sample-application-movies

Components are the building blocks for a React Native application. A React Native user interface (UI) is specified by declaring components, possibly nested, and then those components are mapped to the native UI on the targeted platform.

React Native has a number of core components that are commonly used in applications, either on their own or combined to build new components.

Text

The most basic component in React Native is the Text component. The Text component simply renders text.

This example displays the string "Hello" on the device.

import React from 'react';
import { AppRegistry, Text } from 'react-native';

const App = () => {
  return (
    <Text>Hello World!</Text>
  );
}

// App registration and rendering
AppRegistry.registerComponent('MyApp', () => App);

Image

The other basic React Native component is the Image component. Like Text, the Image component simply renders an image.

An Image is analogous to using img when building websites.

The simplest way to render an image is to provide a source file to that image via the source attribute.

This example displays a checkbox Image on the device.

import React from 'react';
import { AppRegistry, Image } from 'react-native';

const App = () => {
  return (
    <Image source={require('./img/check.png')} />
  );
}

// App registration and rendering
AppRegistry.registerComponent('MyApp', () => App);

View

A View is the most basic building block for a React Native application. The View is an abstraction on top of the target platform's native equivalent, such as iOS's UIView.

A View is analogous to using a div for building websites.

While basic components such as Text and Image, can be displayed without a View, this is not generally recommended since the View gives you the control for styling and layout of those components.

This example creates a View that aligns the string Hello in the top center of the device, something which could not be done with a Text component alone (i.e., a Text component without a View would place the string in a fixed location in the upper corner):

import React from 'react';
import { AppRegistry, Text, View } from 'react-native';

const App = () => {
  return (
    <View style={{alignItems: 'center'}}>
      <Text>Hello!</Text>
    </View>
  );
}

// App registration and rendering
AppRegistry.registerComponent('MyApp', () => App);

TextInput

Direct text-based user input is a foundation for many apps. Writing a post or comment on a page is a canonical example of this. TextInput is a basic component that allows the user to enter text.

This example creates a simple TextInput box with the string Hello as the placeholder when the TextInput is empty.

import React from 'react';
import { AppRegistry, TextInput, View } from 'react-native';

const App = () => {
  return (
      <View>
        <TextInput placeholder="Hello" />
      </View>
  );
}

// App registration and rendering
AppRegistry.registerComponent('MyApp', () => App);

ListView

On mobile devices, lists are a core element in many applications. The ListView component is a special type of View that displays a vertically scrolling list of changing data.

The ListView component requires two properties, dataSource and renderRow. dataSource is the actual source of information that will be part of the list. renderRow takes the data and returns a renderable component to display.

This example creates a simple ListView of hardcoded data. It first initializes the datasource that will be used to populate the ListView. Then it renders that ListView with that data.

A rowHasChanged function is required to use ListView. Here we just say a row has changed if the row we are on is not the same as the previous row.

import React from 'react';
import { AppRegistry, Text, View, ListView} from 'react-native';

var SimpleList = React.createClass({
  // Initialize the hardcoded data
  getInitialState: function() {
    var ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
    return {
      dataSource: ds.cloneWithRows(['John', 'Joel', 'James', 'Jimmy', 'Jackson', 'Jillian', 'Julie'])
    };
  },
  render: function() {
    return (
      <View>
        <ListView
          dataSource={this.state.dataSource}
          renderRow={(rowData) => <Text>{rowData}</Text>}
        />
      </View>
    );
  }
});

// App registration and rendering
AppRegistry.registerComponent('MyApp', () => SimpleList);