React NativeImage # | 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.
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 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.
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.
ScrollView # | Edit on GitHub |
Given the screen sizes of mobile devices, the ability to scroll through data is generally paramount for a proper usability experience.
The ScrollView is a generic scrolling container that can host multiple components and views. The scrollable items need not be homogenous, and you can scroll both vertically and horizontally (by setting the horizontal property).
ScrollView works best to present a list of short, static items of a known quantity. All the elements and views of a ScrollView are rendered a priori, even if they are not currently shown on the screen. Contrast this with a ListView, which render only those views that are on the screen and remove views that go off-screen.
TextViewandListVieware specialized scrollable containers.
This contrived example creates a horizontal ScrollView with a static amount of heterogenous elements (images and text).
ScrollView # | Edit on GitHub |
Given the screen sizes of mobile devices, the ability to scroll through data is generally paramount for a proper usability experience.
The ScrollView is a generic scrolling container that can host multiple components and views. The scrollable items need not be homogenous, and you can scroll both vertically and horizontally (by setting the horizontal property).
ScrollView works best to present a list of short, static items of a known quantity. All the elements and views of a ScrollView are rendered a priori, even if they are not currently shown on the screen. Contrast this with a ListView, which render only those views that are on the screen and remove views that go off-screen.
TextViewandListVieware specialized scrollable containers.
This contrived example creates a horizontal ScrollView with a static amount of heterogenous elements (images and text).
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.
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 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):
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):