React NativeImage # | Edit on GitHub |
The other basic React Native component is the Image component. Like Text, the Image component simply renders an image.
An
Imageis analogous to usingimgwhen 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.
Image # | Edit on GitHub |
Another basic React Native component is the Image component. Like Text, the Image component simply renders an image.
An
Imageis analogous to the<img>HTML tag 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.
ListView # | Edit on GitHub |
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, but similarly structured, data.
ListView works best for possibly lengthy datasources (e.g., from an endpoint or database), where the number of items may not be known a priori.
Unlike the more generic
ScrollView, theListViewonly renders elements that are currently showing on the screen, not all the elements at once.
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
rowHasChangedfunction is required to useListView. Here we just say a row has changed if the row we are on is not the same as the previous row.
ListView # | Edit on GitHub |
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, but similarly structured, data.
ListView works best for possibly lengthy datasources (e.g., from an endpoint or database), where the number of items may not be known a priori.
Unlike the more generic
ScrollView, theListViewonly renders elements that are currently showing on the screen, not all the elements at once.
The ListView component requires two properties, dataSource and renderRow. dataSource is the source of information for the list. renderRow takes one item from the source and returns a formatted component to render.
This example creates a simple ListView of hardcoded data. It first initializes the dataSource that will be used to populate the ListView. Each item in the dataSource is then rendered as a Text component. Finally it renders the ListView and all Text components.
A
rowHasChangedfunction is required to useListView. Here we just say a row has changed if the row we are on is not the same as the previous row.
Text # | Edit on GitHub |
The most basic component in React Native is the Text component. The Text component simply renders text.
This example displays the string "Hello World!" on the device.
TextInput # | Edit on GitHub |
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.
TextInput # | Edit on GitHub |
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 Type something here as the placeholder when the TextInput is empty.
View # | Edit on GitHub |
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
Viewis analogous to using adivfor 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):
View # | Edit on GitHub |
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
Viewis analogous to using a<div>HTML tag for building websites.
It is recommended that you wrap your components in a View to style and control layout.
The example below 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):
Components # | Edit on GitHub |
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.
Core Components. #
React Native has a number of core components that are commonly used in applications, either on their own or combined to build new components.
Components # | Edit on GitHub |
Components are the building blocks for a React Native application. A React Native user interface (UI) is specified by declaring components, often nested. Those components are then mapped to the native UI on the targeted platform.
Props #
this.props #
Components can be configured by passing properties props to the constructor. You can access props from your component's methods by accessing this.props. You should not alter your props within component methods.
State #
this.state #
Components maintain their state using the state object. You can access your component state via this.state. Each component should manage its own state. Parent components should not manage children state and children components should not manage parent component state.
this.setState({key: value, ...}) #
To update or change the state of your component passing a new object representing your newly desired state to this.setState(obj). The specificed keys will be merged into this.state. Any existing keys will be overridden by new values.
Core Components. #
React Native has a number of core components that are commonly used in applications, either on their own or combined to build new components.