[System] You are a VTEX documentation expert. You provide accurate, detailed information about VTEX platform, APIs, apps, and Store Framework development.

[User] Provide a guide on guides faststore organisms overview in VTEX.

[Assistant]
Documentation

[Feedback](https://read.calvincode.net/reader?url=https://docs.google.com/forms/d/e/1FAIpQLSfmnotPvPjw-SjiE7lt2Nt3RQgNUe10ixXZmuO2v9enOJReoQ/viewform?entry.1972292648=developers.vtex.com%26entry.1799503232=)

[GuidesLearn how to use our APIs and extend the VTEX platform.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/organisms-overview/docs/guides)

[API ReferenceExplore detailed information about our endpoints.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/organisms-overview/docs/api-reference)

[App DevelopmentLearn how to build cloud-based apps and integrations.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/organisms-overview/docs/app-development)

[Storefront DevelopmentExpress your brand identity creating unique storefronts.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/organisms-overview/docs/storefront-development)

[VTEX IO AppsFind pre-built solutions to grow your business.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/organisms-overview/docs/vtex-io-apps)

[TroubleshootingFind practical solutions to common development issues.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/organisms-overview/docs/troubleshooting)

[Release NotesStay up to date with our latest releases and bug fixes.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/organisms-overview/updates/release-notes)

Storefront Development

[Getting started with storefront solutions](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/organisms-overview/docs/guides/getting-started-with-storefront-solutions)

---

[FastStore](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/organisms-overview/docs/guides/faststore)

[FastStore versions and support levels](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/organisms-overview/docs/guides/faststore/getting-started-faststore-versions-and-support-levels)

[Getting Started](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/organisms-overview/docs/guides/faststore/getting-started-overview)

[FastStore WebOps](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/organisms-overview/docs/guides/faststore/webops-dashboard)

[Headless CMS](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/organisms-overview/docs/guides/faststore/headless-cms-overview)

[Developer tools and references](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/organisms-overview/docs/guides/faststore/developer-tools-overview)

[Styling](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/organisms-overview/docs/guides/faststore/styling-overview)

[UI components](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/organisms-overview/docs/guides/faststore/components-index)

[Atoms](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/organisms-overview/docs/guides/faststore/atoms-overview)

[Molecules](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/organisms-overview/docs/guides/faststore/molecules-overview)

[Organisms](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/organisms-overview/docs/guides/faststore/organisms-overview)

[BannerText](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/organisms-overview/docs/guides/faststore/organisms-banner-text)

[CartSidebar](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/organisms-overview/docs/guides/faststore/organisms-cart-sidebar)

[EmptyState](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/organisms-overview/docs/guides/faststore/organisms-empty-state)

[FilterSlider](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/organisms-overview/docs/guides/faststore/organisms-filter-slider)

[Filter](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/organisms-overview/docs/guides/faststore/organisms-filter)

[Hero](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/organisms-overview/docs/guides/faststore/organisms-hero)

[ImageGallery](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/organisms-overview/docs/guides/faststore/organisms-image-gallery)

[NavbarSlider](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/organisms-overview/docs/guides/faststore/organisms-navbar-slider)

[Navbar](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/organisms-overview/docs/guides/faststore/organisms-navbar)

[Newsletter](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/organisms-overview/docs/guides/faststore/organisms-newsletter)

[OutOfStock](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/organisms-overview/docs/guides/faststore/organisms-out-of-stock)

[PaymentMethods](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/organisms-overview/docs/guides/faststore/organisms-payment-methods)

[PriceRange](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/organisms-overview/docs/guides/faststore/organisms-price-range)

[ProductGrid](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/organisms-overview/docs/guides/faststore/organisms-product-grid)

[ProductShelf](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/organisms-overview/docs/guides/faststore/organisms-product-shelf)

[RegionModal](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/organisms-overview/docs/guides/faststore/organisms-region-modal)

[SearchInput](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/organisms-overview/docs/guides/faststore/organisms-search-input)

[ShippingSimulation](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/organisms-overview/docs/guides/faststore/organisms-shipping-simulation)

[SlideOver](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/organisms-overview/docs/guides/faststore/organisms-slide-over)

[Implementing storefront features](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/organisms-overview/docs/guides/faststore/storefront-features-overview)

[FastStore API](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/organisms-overview/docs/guides/faststore/faststore-api-overview)

[FastStore SDK](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/organisms-overview/docs/guides/faststore/sdk-overview)

[Developing and overriding UI components](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/organisms-overview/docs/guides/faststore/developing-and-overriding-components-overview)

[Extending the FastStore API](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/organisms-overview/docs/guides/faststore/api-extensions-overview)

[Managing URLs with redirects and rewrite paths](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/organisms-overview/docs/guides/faststore/routing-managing-urls-with-redirects-and-rewrite-paths)

[Managing performance](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/organisms-overview/docs/guides/faststore/managing-performance-overview)

[SEO](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/organisms-overview/docs/guides/faststore/seo-overview)

[Going live](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/organisms-overview/docs/guides/faststore/go-live-overview)

[Troubleshooting](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/organisms-overview/docs/guides/faststore/troubleshooting-overview)

---

[Store Framework](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/organisms-overview/docs/guides/store-framework)

---

(Legacy) CMS Portal

---

[Storefront best practices](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/organisms-overview/docs/guides/storefront-best-practices)

---

[Guides](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/organisms-overview/docs/guides)

[API Reference](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/organisms-overview/docs/api-reference)

[App Development](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/organisms-overview/docs/app-development)

[Storefront Development](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/organisms-overview/docs/storefront-development)

[VTEX IO Apps](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/organisms-overview/docs/vtex-io-apps)

[Troubleshooting](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/organisms-overview/docs/troubleshooting)

---

[Release Notes](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/organisms-overview/updates/release-notes)

Storefront Development

[Getting started with storefront solutions](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/organisms-overview/docs/guides/getting-started-with-storefront-solutions)

---

[FastStore](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/organisms-overview/docs/guides/faststore)

[FastStore versions and support levels](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/organisms-overview/docs/guides/faststore/getting-started-faststore-versions-and-support-levels)

[Getting Started](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/organisms-overview/docs/guides/faststore/getting-started-overview)

[FastStore WebOps](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/organisms-overview/docs/guides/faststore/webops-dashboard)

[Headless CMS](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/organisms-overview/docs/guides/faststore/headless-cms-overview)

[Developer tools and references](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/organisms-overview/docs/guides/faststore/developer-tools-overview)

[Styling](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/organisms-overview/docs/guides/faststore/styling-overview)

[UI components](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/organisms-overview/docs/guides/faststore/components-index)

[Atoms](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/organisms-overview/docs/guides/faststore/atoms-overview)

[Molecules](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/organisms-overview/docs/guides/faststore/molecules-overview)

[Organisms](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/organisms-overview/docs/guides/faststore/organisms-overview)

[BannerText](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/organisms-overview/docs/guides/faststore/organisms-banner-text)

[CartSidebar](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/organisms-overview/docs/guides/faststore/organisms-cart-sidebar)

[EmptyState](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/organisms-overview/docs/guides/faststore/organisms-empty-state)

[FilterSlider](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/organisms-overview/docs/guides/faststore/organisms-filter-slider)

[Filter](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/organisms-overview/docs/guides/faststore/organisms-filter)

[Hero](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/organisms-overview/docs/guides/faststore/organisms-hero)

[ImageGallery](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/organisms-overview/docs/guides/faststore/organisms-image-gallery)

[NavbarSlider](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/organisms-overview/docs/guides/faststore/organisms-navbar-slider)

[Navbar](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/organisms-overview/docs/guides/faststore/organisms-navbar)

[Newsletter](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/organisms-overview/docs/guides/faststore/organisms-newsletter)

[OutOfStock](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/organisms-overview/docs/guides/faststore/organisms-out-of-stock)

[PaymentMethods](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/organisms-overview/docs/guides/faststore/organisms-payment-methods)

[PriceRange](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/organisms-overview/docs/guides/faststore/organisms-price-range)

[ProductGrid](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/organisms-overview/docs/guides/faststore/organisms-product-grid)

[ProductShelf](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/organisms-overview/docs/guides/faststore/organisms-product-shelf)

[RegionModal](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/organisms-overview/docs/guides/faststore/organisms-region-modal)

[SearchInput](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/organisms-overview/docs/guides/faststore/organisms-search-input)

[ShippingSimulation](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/organisms-overview/docs/guides/faststore/organisms-shipping-simulation)

[SlideOver](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/organisms-overview/docs/guides/faststore/organisms-slide-over)

[Implementing storefront features](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/organisms-overview/docs/guides/faststore/storefront-features-overview)

[FastStore API](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/organisms-overview/docs/guides/faststore/faststore-api-overview)

[FastStore SDK](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/organisms-overview/docs/guides/faststore/sdk-overview)

[Developing and overriding UI components](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/organisms-overview/docs/guides/faststore/developing-and-overriding-components-overview)

[Extending the FastStore API](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/organisms-overview/docs/guides/faststore/api-extensions-overview)

[Managing URLs with redirects and rewrite paths](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/organisms-overview/docs/guides/faststore/routing-managing-urls-with-redirects-and-rewrite-paths)

[Managing performance](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/organisms-overview/docs/guides/faststore/managing-performance-overview)

[SEO](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/organisms-overview/docs/guides/faststore/seo-overview)

[Going live](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/organisms-overview/docs/guides/faststore/go-live-overview)

[Troubleshooting](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/organisms-overview/docs/guides/faststore/troubleshooting-overview)

---

[Store Framework](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/organisms-overview/docs/guides/store-framework)

---

(Legacy) CMS Portal

---

[Storefront best practices](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/organisms-overview/docs/guides/storefront-best-practices)

---

[Storefront development](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/organisms-overview/docs/storefront-development)

[FastStore](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/organisms-overview/docs/guides/faststore)

[UI components](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/organisms-overview/docs/guides/faststore/components-index)

Organisms

* [Explore more about our amazing products](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/organisms-overview/docs/guides/faststore/organisms-banner-text)[See more](/)
Banner Text
Used for advertising brands, products, and/or collections.
* [Open CartCartSidebarDisplays the summary of items added to the cart along with detailed information, and checkout option.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/organisms-overview/docs/guides/faststore/organisms-cart-sidebar)
* [Your Cart is emptyStart ShoppingEmptyStateUsed to represent an empty state.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/organisms-overview/docs/guides/faststore/organisms-empty-state)
* [FiltersPriceCategoryBrandOpen FiltersFilterFilters products inside the Product Listing Page (PLP) and Search Page.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/organisms-overview/docs/guides/faststore/organisms-filter)
* [Open FiltersFilterSliderThe mobile Filter view that is rendered inside a SlideOver component.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/organisms-overview/docs/guides/faststore/organisms-filter-slider)
* [![Controller on a table](https://read.calvincode.net/reader?url=https://storeframework.vtexassets.com/arquivos/ids/190897/Photo.jpg)Explore our productsAll the amazing products from the brands we partner with.](https://developers.vtex.com/docs/guides/faststore/organisms-overview/docs/guides/faststore/organisms-hero)[See more](/)
Hero
Full-width banner presented on the above-the-fold section of a web page.
* [![Magicwhite](https://read.calvincode.net/reader?url=https://storeframework.vtexassets.com/arquivos/ids/190902/unsplash-magic-mouse.jpg?v=637800136963870000)![Magicwhite](https://read.calvincode.net/reader?url=https://storeframework.vtexassets.com/arquivos/ids/190902/unsplash-magic-mouse.jpg?v=637800136963870000)![magicbox](https://read.calvincode.net/reader?url=https://storeframework.vtexassets.com/arquivos/ids/190923/lena-de-fanti-nQ_j5d-klVU-unsplash.jpg?v=637867501523500000)![magicblackwhite](https://read.calvincode.net/reader?url=https://storeframework.vtexassets.com/arquivos/ids/190924/anthony-choren-e7dG26YCrZU-unsplash.jpg?v=637867501835430000)![magiccombo](https://read.calvincode.net/reader?url=https://storeframework.vtexassets.com/arquivos/ids/190925/maheshkumar-painam-GZdfLeL-MDk-unsplash.jpg?v=637867502064000000)![magicback](https://read.calvincode.net/reader?url=https://storeframework.vtexassets.com/arquivos/ids/190926/math-0U9fBLGP3EY-unsplash.jpg?v=637867502325830000)![magictable](https://read.calvincode.net/reader?url=https://storeframework.vtexassets.com/arquivos/ids/190927/marek-levak-YPeqMN_wfw0-unsplash.jpg?v=637867502641430000)![magichand](https://read.calvincode.net/reader?url=https://storeframework.vtexassets.com/arquivos/ids/190928/mouse8.jpg?v=637867504048970000)![magicstyle](https://read.calvincode.net/reader?url=https://storeframework.vtexassets.com/arquivos/ids/190929/harpal-singh-KuvEVL7lXYQ-unsplash.jpg?v=637867509459130000)![magicscale](https://read.calvincode.net/reader?url=https://storeframework.vtexassets.com/arquivos/ids/190930/chris-hardy-182PzOtcmWc-unsplash.jpg?v=637867509778300000)Image GalleryUsed when you want to display a series of photos in a gallery on a post or page.](https://developers.vtex.com/docs/guides/faststore/organisms-overview/docs/guides/faststore/organisms-image-gallery)
* [Storefront](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/organisms-overview/docs/guides/faststore/organisms-navbar)[Login](#)
Set location
   * [Office](#)
   * [Home Appliances](#)
   * [Computer and Software](#)
   * [Technology](#)
Navbar
Represents the page header and groups features like Search and Regionalization.
* [Open MenuNavbar SliderAs part of the Navbar, this component is its **mobile version** used to list the navigation links through the NavbarLinks.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/organisms-overview/docs/guides/faststore/organisms-navbar-slider)
* [Get News and Special Offers!Receive our news and promotions in advance. Enjoy and get 10% off your first purchase. For more information click here.NameEmailBy subscribing to our newsletter you agree to to our Privacy Policy.SubscribeNewsletterThe Newsletter component is a section that features a text input field and an action button, allowing users to subscribe to updates and newsletters.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/organisms-overview/docs/guides/faststore/organisms-newsletter)
* [OutofStockNotify me when availableEmailNotify MeOutOfStockUsed to announce to users that the product is out of stock.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/organisms-overview/docs/guides/faststore/organisms-out-of-stock)
* [Payment MethodsAmexVisaDiners ClubMastercardElo CardPayPalPixStripeGooglePayApplePayPaymentMethodsDisplays the logos of the available payment options in a store.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/organisms-overview/docs/guides/faststore/organisms-payment-methods)
* [$0$500$100$250MinMaxPriceRangeSlider that allows users to select a maximum and minimum price from a range.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/organisms-overview/docs/guides/faststore/organisms-price-range)
* [![appleblack](https://read.calvincode.net/reader?url=https://storeframework.vtexassets.com/arquivos/ids/190932/mouse-black.jpg?v=1767729450)](https://developers.vtex.com/docs/guides/faststore/organisms-overview/docs/guides/faststore/organisms-product-grid)Apple Magic Mouse
Original price:$999Price:$950.04
* ![Monitor27](https://read.calvincode.net/reader?url=https://storeframework.vtexassets.com/arquivos/ids/190903/unsplash-monitor.jpg?v=1767729451)
### 4k Philips Monitor 27”
Original price:$490Price:$420
* ![echodotwhite](https://read.calvincode.net/reader?url=https://storeframework.vtexassets.com/arquivos/ids/190904/unsplash-smart-speaker.jpg?v=1767978734)
### Echo Dot Smart Speaker
Original price:$310Price:$280
* ![aedleheadphone](https://read.calvincode.net/reader?url=https://storeframework.vtexassets.com/arquivos/ids/190901/unsplash-headphone.jpg?v=1766352858)
### Aedle VK-1 L Headphone
Original price:$150Price:$130
* ![oculus](https://read.calvincode.net/reader?url=https://storeframework.vtexassets.com/arquivos/ids/190900/unsplash-vr-glasses.jpg?v=1765997962)
### Oculus VR Headset
Original price:$344Price:$315
* ![hic](https://read.calvincode.net/reader?url=https://storeframework.vtexassets.com/arquivos/ids/173596/est.jpg?v=1757659088)
### Apple AirPods Pro
Original price:$249Price:$229
* ![quidem](https://read.calvincode.net/reader?url=https://storeframework.vtexassets.com/arquivos/ids/179130/sint.jpg?v=1757911413)
### Anker SoundCore Liberty Air
Original price:$643.71Price:$486.34
* ![dolore](https://read.calvincode.net/reader?url=https://storeframework.vtexassets.com/arquivos/ids/171611/eius.jpg?v=1757657196)
### Fujifilm X-T1 Camera
Original price:$495.97Price:$366.11
* ![culpa](https://read.calvincode.net/reader?url=https://storeframework.vtexassets.com/arquivos/ids/159818/debitis.jpg?v=1757639123)
### SANDMARC Fisheye Lens
Original price:$946.73Price:$636.05
* ![odio](https://read.calvincode.net/reader?url=https://storeframework.vtexassets.com/arquivos/ids/181988/nulla.jpg?v=1757915578)
### Apple AirTag
Original price:$679.29Price:$426.14

ProductGrid

A section generally used on PLP pages to list the products available in the store.

* [![appleblack](https://read.calvincode.net/reader?url=https://storeframework.vtexassets.com/arquivos/ids/190932/mouse-black.jpg?v=1767729450)](https://developers.vtex.com/docs/guides/faststore/organisms-overview/docs/guides/faststore/organisms-product-shelf)Apple Magic Mouse
Original price:$999Price:$950.04
* ![Monitor27](https://read.calvincode.net/reader?url=https://storeframework.vtexassets.com/arquivos/ids/190903/unsplash-monitor.jpg?v=1767729451)
### 4k Philips Monitor 27”
Original price:$490Price:$420
* ![echodotwhite](https://read.calvincode.net/reader?url=https://storeframework.vtexassets.com/arquivos/ids/190904/unsplash-smart-speaker.jpg?v=1767978734)
### Echo Dot Smart Speaker
Original price:$310Price:$280
* ![aedleheadphone](https://read.calvincode.net/reader?url=https://storeframework.vtexassets.com/arquivos/ids/190901/unsplash-headphone.jpg?v=1766352858)
### Aedle VK-1 L Headphone
Original price:$150Price:$130
* ![oculus](https://read.calvincode.net/reader?url=https://storeframework.vtexassets.com/arquivos/ids/190900/unsplash-vr-glasses.jpg?v=1765997962)
### Oculus VR Headset
Original price:$344Price:$315
* ![hic](https://read.calvincode.net/reader?url=https://storeframework.vtexassets.com/arquivos/ids/173596/est.jpg?v=1757659088)
### Apple AirPods Pro
Original price:$249Price:$229

ProductShelf

Displays a list of products to be used as a section on the store.

* [Open Region ModalRegionModalA Modal with some region configurations. The component is part of Regionalization feature.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/organisms-overview/docs/guides/faststore/organisms-region-modal)
* [SearchInputResponsible to receive, search and display suggestions. This component is part of the Search feature.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/organisms-overview/docs/guides/faststore/organisms-search-input)
* [ShippingPostal Code](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/organisms-overview/docs/guides/faststore/organisms-shipping-simulation)[I don't know my Postal Code](/)
ShippingSimulation
Lets customers set the `PostalCode` and see the shipping options in the `PDP`.
* [RightSlideOverRepresents an aditional session that complements the screen's information.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/organisms-overview/docs/guides/faststore/organisms-slide-over)

Contributors

2

[![Photo of the contributor](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/organisms-overview/_next/image?url=https%3A%2F%2Favatars.githubusercontent.com%2Fu%2F67270558%3Fv%3D4%26w=64%26q=75)](https://github.com/mariana-caetano)

[![Photo of the contributor](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/organisms-overview/_next/image?url=https%3A%2F%2Favatars.githubusercontent.com%2Fu%2F60782333%3Fv%3D4%26w=64%26q=75)](https://github.com/carolinamenezes)

Was this helpful?

Yes

No

[Suggest Edits (GitHub)](https://read.calvincode.net/reader?url=https://github.com/vtexdocs/dev-portal-content/edit/main/docs/faststore/components/organisms/overview.mdx)

Was this helpful?

Yes

No

[Suggest Edits (GitHub)](https://read.calvincode.net/reader?url=https://github.com/vtexdocs/dev-portal-content/edit/main/docs/faststore/components/organisms/overview.mdx)

[Tooltip« Previous](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/organisms-overview/docs/guides/faststore/molecules-tooltip)[BannerTextNext »](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/organisms-overview/docs/guides/faststore/organisms-banner-text)

On this page

ON THIS PAGE

[Explore more about our amazing products](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/organisms-overview/docs/guides/faststore/organisms-overview%23)

[Filters](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/organisms-overview/docs/guides/faststore/organisms-overview%23)

[Get News and Special Offers!](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/organisms-overview/docs/guides/faststore/organisms-overview%23)

[OutofStock](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/organisms-overview/docs/guides/faststore/organisms-overview%23)

[Payment Methods](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/organisms-overview/docs/guides/faststore/organisms-overview%23payment-methods)[Apple Magic Mouse](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/organisms-overview/docs/guides/faststore/organisms-overview%23)[4k Philips Monitor 27”](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/organisms-overview/docs/guides/faststore/organisms-overview%23)[Echo Dot Smart Speaker](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/organisms-overview/docs/guides/faststore/organisms-overview%23)[Aedle VK-1 L Headphone](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/organisms-overview/docs/guides/faststore/organisms-overview%23)[Oculus VR Headset](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/organisms-overview/docs/guides/faststore/organisms-overview%23)[Apple AirPods Pro](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/organisms-overview/docs/guides/faststore/organisms-overview%23)[Anker SoundCore Liberty Air](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/organisms-overview/docs/guides/faststore/organisms-overview%23)[Fujifilm X-T1 Camera](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/organisms-overview/docs/guides/faststore/organisms-overview%23)[SANDMARC Fisheye Lens](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/organisms-overview/docs/guides/faststore/organisms-overview%23)[Apple AirTag](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/organisms-overview/docs/guides/faststore/organisms-overview%23)[Apple Magic Mouse](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/organisms-overview/docs/guides/faststore/organisms-overview%23)[4k Philips Monitor 27”](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/organisms-overview/docs/guides/faststore/organisms-overview%23)[Echo Dot Smart Speaker](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/organisms-overview/docs/guides/faststore/organisms-overview%23)[Aedle VK-1 L Headphone](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/organisms-overview/docs/guides/faststore/organisms-overview%23)[Oculus VR Headset](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/organisms-overview/docs/guides/faststore/organisms-overview%23)[Apple AirPods Pro](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/organisms-overview/docs/guides/faststore/organisms-overview%23)

[Shipping](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/organisms-overview/docs/guides/faststore/organisms-overview%23)

On this page

[Github](https://read.calvincode.net/reader?url=https://github.com/vtex-apps)[Help Center](https://read.calvincode.net/reader?url=https://help.vtex.com/)[Community](https://read.calvincode.net/reader?url=https://community.vtex.com/?%5Fga=2.198523433.743584735.1647618303-1974737580.1645714642)[Feedback](https://read.calvincode.net/reader?url=https://docs.google.com/forms/d/e/1FAIpQLSfmnotPvPjw-SjiE7lt2Nt3RQgNUe10ixXZmuO2v9enOJReoQ/viewform?entry.1972292648=developers.vtex.com%26entry.1799503232=)


[System] You are a VTEX documentation expert. You provide accurate, detailed information about VTEX platform, APIs, apps, and Store Framework development.

[User] Provide a guide on guides installing activity flow in react native apps in VTEX.

[Assistant]
Documentation

[Feedback](https://read.calvincode.net/reader?url=https://docs.google.com/forms/d/e/1FAIpQLSfmnotPvPjw-SjiE7lt2Nt3RQgNUe10ixXZmuO2v9enOJReoQ/viewform?entry.1972292648=developers.vtex.com%26entry.1799503232=)

[GuidesLearn how to use our APIs and extend the VTEX platform.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/installing-activity-flow-in-react-native-apps/docs/guides)

[API ReferenceExplore detailed information about our endpoints.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/installing-activity-flow-in-react-native-apps/docs/api-reference)

[App DevelopmentLearn how to build cloud-based apps and integrations.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/installing-activity-flow-in-react-native-apps/docs/app-development)

[Storefront DevelopmentExpress your brand identity creating unique storefronts.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/installing-activity-flow-in-react-native-apps/docs/storefront-development)

[VTEX IO AppsFind pre-built solutions to grow your business.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/installing-activity-flow-in-react-native-apps/docs/vtex-io-apps)

[TroubleshootingFind practical solutions to common development issues.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/installing-activity-flow-in-react-native-apps/docs/troubleshooting)

[Release NotesStay up to date with our latest releases and bug fixes.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/installing-activity-flow-in-react-native-apps/updates/release-notes)

Guides

[VTEX Platform Overview](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/installing-activity-flow-in-react-native-apps/docs/guides/vtex-platform-overview)

---

[API usage](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/installing-activity-flow-in-react-native-apps/docs/guides/api-usage)

---

[Getting started](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/installing-activity-flow-in-react-native-apps/docs/guides/getting-started)

---

Integration Guides

---

[Catalog](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/installing-activity-flow-in-react-native-apps/docs/guides/catalog-integration)

---

[Checkout](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/installing-activity-flow-in-react-native-apps/docs/guides/checkout-api-overview)

---

[Master Data](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/installing-activity-flow-in-react-native-apps/docs/guides/master-data)

---

Payments

---

Orders

---

Logistics

---

B2B Suite

---

VTEX Sales App

---

UI Customization

---

Message Center

---

Pricing

---

Promotions

---

Infrastructure

---

Search

---

Storefront Permissions

---

[VTEX Activity Flow](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/installing-activity-flow-in-react-native-apps/docs/guides/activity-flow)

[Installing Activity Flow in Headless stores](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/installing-activity-flow-in-react-native-apps/docs/guides/installing-activity-flow-in-headless-stores)

[Installing Activity Flow in mobile apps](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/installing-activity-flow-in-react-native-apps/docs/guides/installing-activity-flow-in-mobile-apps)

[Installing Activity Flow in Flutter apps](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/installing-activity-flow-in-react-native-apps/docs/guides/installing-activity-flow-in-flutter-apps)

[Installing Activity Flow in React Native apps](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/installing-activity-flow-in-react-native-apps/docs/guides/installing-activity-flow-in-react-native-apps)

---

[VTEX Ads](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/installing-activity-flow-in-react-native-apps/docs/guides/vtex-ads)

---

VTEX Session

---

VTEX Shield

---

[Data Protection Plus](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/installing-activity-flow-in-react-native-apps/docs/guides/data-protection-plus)

---

Weni by VTEX

---

[Guides](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/installing-activity-flow-in-react-native-apps/docs/guides)

[API Reference](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/installing-activity-flow-in-react-native-apps/docs/api-reference)

[App Development](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/installing-activity-flow-in-react-native-apps/docs/app-development)

[Storefront Development](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/installing-activity-flow-in-react-native-apps/docs/storefront-development)

[VTEX IO Apps](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/installing-activity-flow-in-react-native-apps/docs/vtex-io-apps)

[Troubleshooting](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/installing-activity-flow-in-react-native-apps/docs/troubleshooting)

---

[Release Notes](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/installing-activity-flow-in-react-native-apps/updates/release-notes)

Guides

[VTEX Platform Overview](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/installing-activity-flow-in-react-native-apps/docs/guides/vtex-platform-overview)

---

[API usage](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/installing-activity-flow-in-react-native-apps/docs/guides/api-usage)

---

[Getting started](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/installing-activity-flow-in-react-native-apps/docs/guides/getting-started)

---

Integration Guides

---

[Catalog](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/installing-activity-flow-in-react-native-apps/docs/guides/catalog-integration)

---

[Checkout](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/installing-activity-flow-in-react-native-apps/docs/guides/checkout-api-overview)

---

[Master Data](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/installing-activity-flow-in-react-native-apps/docs/guides/master-data)

---

Payments

---

Orders

---

Logistics

---

B2B Suite

---

VTEX Sales App

---

UI Customization

---

Message Center

---

Pricing

---

Promotions

---

Infrastructure

---

Search

---

Storefront Permissions

---

[VTEX Activity Flow](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/installing-activity-flow-in-react-native-apps/docs/guides/activity-flow)

[Installing Activity Flow in Headless stores](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/installing-activity-flow-in-react-native-apps/docs/guides/installing-activity-flow-in-headless-stores)

[Installing Activity Flow in mobile apps](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/installing-activity-flow-in-react-native-apps/docs/guides/installing-activity-flow-in-mobile-apps)

[Installing Activity Flow in Flutter apps](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/installing-activity-flow-in-react-native-apps/docs/guides/installing-activity-flow-in-flutter-apps)

[Installing Activity Flow in React Native apps](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/installing-activity-flow-in-react-native-apps/docs/guides/installing-activity-flow-in-react-native-apps)

---

[VTEX Ads](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/installing-activity-flow-in-react-native-apps/docs/guides/vtex-ads)

---

VTEX Session

---

VTEX Shield

---

[Data Protection Plus](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/installing-activity-flow-in-react-native-apps/docs/guides/data-protection-plus)

---

Weni by VTEX

---

[Guides](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/installing-activity-flow-in-react-native-apps/docs/guides)

[VTEX Activity Flow](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/installing-activity-flow-in-react-native-apps/docs/guides/activity-flow)

[Installing Activity Flow in mobile apps](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/installing-activity-flow-in-react-native-apps/docs/guides/installing-activity-flow-in-mobile-apps)

[Installing Activity Flow in React Native apps](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/installing-activity-flow-in-react-native-apps/docs/guides/installing-activity-flow-in-react-native-apps)

Installing Activity Flow in React Native apps

In this guide, you'll learn how to install and use the Activity Flow SDK in React Native apps for Android and iOS. By following these steps, you'll be able to track user navigation, order events, deep links, and ad events in your app.

## Before you begin

### Use React Navigation or Expo Router in your project

To manage navigation between different screens of your app, you must use either [React Navigation](https://read.calvincode.net/reader?url=https://reactnavigation.org/) or [Expo Router](https://read.calvincode.net/reader?url=https://docs.expo.dev/router/introduction/). This is important because Activity Flow relies on the `useFocusEffect` hook from React Navigation to detect changes in pages. For more information, refer to the [React Navigation guide](https://read.calvincode.net/reader?url=https://reactnavigation.org/docs/getting-started).

### Install the Activity Flow package

Activity Flow depends on [@react-native-async-storage/async-storage](https://read.calvincode.net/reader?url=https://github.com/react-native-async-storage/async-storage) to store navigation data locally. This ensures events are captured even when the device is offline.

To install the library, follow these steps:

1. In your project directory, run:

`1

yarn add @vtex/activity-flow @react-native-async-storage/async-storage

`

or

`1

npm install @vtex/activity-flow @react-native-async-storage/async-storage

`

1. For iOS, sync native dependencies:

`1

 cd ios && pod install && cd ../

`

This process installs the Activity Flow script in your app by adding a new dependency in the `package.json` file.

## Instructions

### Step 1 - Importing the Activity Flow plugin

In your app's main file (for example, `App.js` or `App.tsx`), import the plugin as follows:

`1

import { initActivityFlow } from '@vtex/activity-flow';

`

### Step 2 - Creating an Activity Flow instance

Set the account name to create an instance of the main package class:

`1

function App() {

2

 // Initialize the Activity Flow plugin with your VTEX account name

3

 initActivityFlow({

4

 accountName: 'your-account-name', // Replace with your VTEX account name

5

 });

6

 // ...rest of your app

7

}

`

## Usage

### Tracking page views automatically

To track navigation state changes, integrate the `usePageViewObserver` hook with the `NavigationContainer`, the root component of React Navigation, in your app's main file. To do so, follow these steps:

1. Import the observer hook:
`1
import { usePageViewObserver } from '@vtex/activity-flow';
`
2. Create a reference for the `NavigationContainer`:
`1
const navigationRef = useRef(null);
`
3. Pass the reference to `NavigationContainer`:
`1
<NavigationContainer ref={navigationRef}>
2
 {/* Stack configurations */}
3
</NavigationContainer>
`
4. Use the observer hook to track page views:

`1

usePageViewObserver({ navigationRef });

`

Activity Flow now automatically tracks page transitions. When you navigate between screens, it records each page view and sends event data.

### Tracking order group

The Activity Flow SDK can automatically capture order details from navigation parameters, such as `orderGroup` or `orderPlaced`, and any query parameters from the navigator stack. These parameters help validate checkout events and confirm successful purchases.

To enable this feature, include the required parameter in your page redirect configuration. See the example below:

//checkout\_screen.tsx

`1

<TouchableOpacity

2

 onPress={() =>

3

 navigation.navigate('/purchase_success', {

4

 orderGroup: '1234567890',

5

 orderId: '1234',

6

 // ...other params

7

 })

8

 }

9

>

10

 <Text>Confirm Purchase</Text>

11

</TouchableOpacity>

`

When a user completes a purchase, Activity Flow automatically captures orderGroup and other query parameters during the screen transition.

### Tracking deep links

The Activity Flow SDK automatically captures deep-link query parameters from the `usePageViewObserver` hook and includes them in page view events. To enable this feature, configure deep linking in your app according to its platform: [Android](#android) or [iOS](#ios).

#### Android

To enable deep-link handling in your Android app, add intent filters to the `AndroidManifest.xml` file for each route that can be accessed via a deep link. See the example below:

AndroidManifest.xml

`1

2

<intent-filter>

3

 <action android:name="android.intent.action.VIEW" />

4

 <category android:name="android.intent.category.DEFAULT" />

5

 <category android:name="android.intent.category.BROWSABLE" />

6

 <data

7

 android:scheme="https"

8

 android:host="mystore.com"

9

 android:pathPrefix="{APP_ROUTE}"

10

 />

11

</intent-filter>

12

13

<intent-filter>

14

 <action android:name="android.intent.action.VIEW" />

15

 <category android:name="android.intent.category.DEFAULT" />

16

 <category android:name="android.intent.category.BROWSABLE" />

17

 <data android:scheme="{YOUR_CUSTOM_SCHEME}" />

18

</intent-filter>

`

This `AndroidManifest` adds two intent filters for deep linking:

* One for HTTPS URLs starting with `"https://example.com/{APP_ROUTE}"`.
* One for a custom scheme `"{YOUR_CUSTOM_SCHEME}"`. Both use `action.VIEW`, `category_DEFAULT`, and `category_BROWSABLE`, allowing the Activity Flow to launch from browsers or other apps. The data tag for deep link via HTTP specifies the `scheme`, `host`, and an optional `pathPrefix`, matching any path that begins with that prefix (for example, **"/products/42"** if `{APP_ROUTE}` is **"/products"**). The main difference between intent filters for different routes is the `android:pathPrefix` attribute, which specifies the app route. For a deep link via a custom scheme, the data tag sets the scheme, matching any URL that starts with that scheme (for example, **myapp://...** if `{YOUR_CUSTOM_SCHEME}` is **myapp**).

#### iOS

To enable deep-link handling in your iOS app, add your URL scheme to the `Info.plist` file and handle incoming URLs in the `AppDelegate` file:

1. Register your custom URL scheme by adding the following configuration to your `Info.plist` file:

info.plist

`1

<key>CFBundleURLTypes</key>

2

<array>

3

 <dict>

4

 <key>CFBundleURLSchemes</key>

5

 <array>

6

 <string>{YOUR_BUNDLE_URL_SCHEME}</string>

7

 </array>

8

 <key>CFBundleURLName</key>

9

 <string>{YOUR_BUNDLE_URL_NAME}</string>

10

 </dict>

11

</array>

`

In the `info.plist` configuration, `{YOUR_BUNDLE_URL_SCHEME}` is the custom URL scheme your app will handle, that is, the prefix before `://` in deep links. For example, setting it to `myapp` makes links like `myapp://path` open your app. Enter only the scheme name, without `://`. The `{YOUR_BUNDLE_URL_NAME}` label is a unique identifier for this URL type entry, typically in reverse-DNS format, used to distinguish the configuration and doesn't affect routing. For example, `com.example.appname`.

1. Handle incoming deep links by modifying your `AppDelegate.swift` (or `AppDelegate.mm`) file. The following example handles deep links for cold starts, when the app isn't running, and warm starts, when the app is already running.

AppDelegate.swift

`1

import UIKit

2

import React

3

4

@UIApplicationMain

5

class AppDelegate: UIResponder, UIApplicationDelegate {

6

 func application(

7

 _ application: UIApplication,

8

 didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]? = nil

9

 ) -> Bool {

10

 // ... your existing setup code ...

11

 // Capture initial URL if app was launched with a deep link (cold start)

12

 if let initialURL = launchOptions?[UIApplication.LaunchOptionsKey.url] as? URL {

13

 NotificationCenter.default.post(

14

 name: NSNotification.Name("RCTOpenURLNotification"),

15

 object: nil,

16

 userInfo: ["url": initialURL]

17

 )

18

 }

19

 return true

20

 }

21

22

 * Handles incoming URLs from Custom URL Schemes (e.g., myapp://path)

23

 func application(

24

 _ app: UIApplication,

25

 open url: URL,

26

 options: [UIApplication.OpenURLOptionsKey : Any] = [:]

27

 ) -> Bool {

28

 // Post notification for Activity Flow's CaptureDeepLinkModule

29

 NotificationCenter.default.post(

30

 name: NSNotification.Name("RCTOpenURLNotification"),

31

 object: nil,

32

 userInfo: ["url": url]

33

 )

34

 // Pass the URL to React Native's standard linking manager

35

 return RCTLinkingManager.application(app, open: url, options: options)

36

 }

37

38

 * Handles incoming URLs from Universal Links (e.g., https://mystore.com/product)

39

 func application(

40

 _ application: UIApplication,

41

 continue userActivity: NSUserActivity,

42

 restorationHandler: @escaping ([UIUserActivityRestoring]?) -> Void

43

 ) -> Bool {

44

 // Check if the activity is a web browsing activity (Universal Link)

45

 if userActivity.activityType == NSUserActivityTypeBrowsingWeb {

46

 // Post notification for Activity Flow's CaptureDeepLinkModule

47

 if let url = userActivity.webpageURL {

48

 NotificationCenter.default.post(

49

 name: NSNotification.Name("RCTOpenURLNotification"),

50

 object: nil,

51

 userInfo: ["url": url]

52

 )

53

 }

54

 }

55

 // Pass the user activity to React Native's standard linking manager

56

 return RCTLinkingManager.application(

57

 application,

58

 continue: userActivity,

59

 restorationHandler: restorationHandler

60

 )

61

 }

62

63

 return false

64

}

`

Your Android app can now be launched from both web links (`https://mystore.com/products/42`) and custom scheme links: (`myapp://products/42`).

### Tracking ad events

> Ad tracking is available only for accounts that use [VTEX Ads](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-ads). If you're interested in this feature, open a ticket with [VTEX Support](https://read.calvincode.net/reader?url=https://support.vtex.com/hc/en-us).

To configure ad tracking, follow these steps:

1. Create the ad object

To track events, provide an object containing all information relevant to the ad event. The accountName field is mandatory.

`1

const adParams = {

2

 accountName: 'your-account-name',

3

 adId: 'main-banner-01',

4

 // ...other parameters

5

};

`

1. Integrate the ad tracker into your components

There are two methods to integrate the ad tracker into your components: Using the AFAdsTracker Wrapper component or using the useAdsTracker hook.

#### Using the AFAdsTracker wrapper component

To track ad events with the AFAdsTracker, wrap your ad component with it and provide the necessary tracking parameters. The wrapper will automatically manage all required event handlers.

Use this method when your entire child component represents a clickable ad. See the example below:

`1

<AFAdsTracker params={adParams}>

2

 <TouchableOpacity

3

 style={styles.button}

4

 onPress={() => {

5

 navigation.navigate('/checkout');

6

 }}

7

 >

8

 <Text style={styles.buttonText}>Buy</Text>

9

 </TouchableOpacity>

10

</AFAdsTracker>

`

The example below shows a React Native app that uses @vtex/activity-flow with React Navigation to track navigation across multiple screens and ad events from a single location.

`1

// App.tsx

2

import React, { useRef, useEffect } from 'react';

3

import { View, Text, Button, TouchableOpacity, StyleSheet } from 'react-native';

4

import { NavigationContainer } from '@react-navigation/native';

5

import { createNativeStackNavigator } from '@react-navigation/native-stack';

6

import {

7

 initActivityFlow,

8

 usePageViewObserver,

9

 AFAdsTracker,

10

} from '@vtex/activity-flow';

11

12

type NavProps = { navigation: any };

13

14

const HomeScreen = ({ navigation }: NavProps) => {

15

 return (

16

 <View>

17

 <Text>Home</Text>

18

 <Button title="Go to Profile" onPress={() => navigation.navigate('Profile')} />

19

 <View />

20

 <Button title="Go to Ads" onPress={() => navigation.navigate('Ads')} />

21

 </View>

22

 );

23

};

24

25

const ProfileScreen = ({ navigation }: NavProps) => (

26

 <View>

27

 <Text>Profile</Text>

28

 <Button title="Go to Details" onPress={() => navigation.navigate('Details')} />

29

 </View>

30

);

31

32

const DetailsScreen = ({ navigation }: NavProps) => {

33

 return (

34

 <View>

35

 <Text>Details</Text>

36

 <Button title="Go Back" onPress={() => navigation.goBack()} />

37

 </View>

38

 );

39

};

40

41

const AdsScreen = () => {

42

 // Include your VTEX accountName here (required for sending ad events)

43

 const adParams = {

44

 accountName: 'your-account-name',

45

 adId: '12345',

46

 campaign: 'summer_campaign',

47

 };

48

49

 return (

50

 <View>

51

 <Text>Ads</Text>

52

 {/* Wrap your ad with AFAdsTracker. The wrapper wires impression/view/click. */}

53

 <AFAdsTracker params={adParams}>

54

 <TouchableOpacity

55

 onPress={() => {

56

 // Your CTA action goes here (e.g., navigate, open link)

57

 console.log('Ad clicked — navigate or handle CTA');

58

 }}

59

 >

60

 <Text>Sponsored Ad</Text>

61

 <Text>Check out our new campaign!</Text>

62

 <Text>Buy now</Text>

63

 </TouchableOpacity>

64

 </AFAdsTracker>

65

 </View>

66

 );

67

};

68

69

const Stack = createNativeStackNavigator();

70

71

export default function App() {

72

 const navigationRef = useRef(null);

73

74

 // Initialize Activity Flow once with your VTEX account name

75

 useEffect(() => {

76

 initActivityFlow({

77

 accountName: 'your-account-name',

78

 });

79

 }, []);

80

81

 // Track page views automatically (attach to the navigation ref)

82

 usePageViewObserver({ navigationRef });

83

84

 return (

85

 <NavigationContainer ref={navigationRef as any}>

86

 <Stack.Navigator initialRouteName="Home">

87

 <Stack.Screen name="Home" component={HomeScreen} />

88

89

 <Stack.Screen name="Profile" component={ProfileScreen} />

90

91

 <Stack.Screen name="Details" component={DetailsScreen} />

92

93

 <Stack.Screen name="Ads" component={AdsScreen} />

94

 </Stack.Navigator>

95

 </NavigationContainer>

96

 );

97

}

`

The app initializes tracking via `initActivityFlow` with your VTEX account name, and enables automatic page view tracking by calling `usePageViewObserver` with a `NavigationContainer` ref.

On the Ads screen, ad parameters (including the required `accountName`) are passed to the AFAdsTracker wrapper, which wraps a fully clickable child to automatically fire impression, view, and click events without manual handler wiring.

The wrapper detects clicks via `onTouchEndCapture`. If your ad interaction isn't based on it or can't be wrapped, [use the useAdsTracker hook](#using-the-useadstracker-hook) instead.

> To use this example in your project, remember to replace `accountName` based on your scenario.

#### Using the `useAdsTracker` hook

The `useAdsTracker` hook provides more control over how events are attached. It returns handlers and a ref that you must apply manually to your components.

Use this method when:

* You can't use an extra `<View>` to wrap your component.
* The component that receives events (for example, a `TouchableOpacity`) is different from the component that defines the visibility area.
* You integrate with third-party component libraries that don’t allow a generic wrapper.
* The click property isn't `onTouchEnd`, since the **AFAdsTracker** wrapper uses `onTouchEndCapture`.

Follow the steps below to use this hook:

1. Import and call the hook:

`1

import { useAdsTracker } from '@vtex/activity-flow';

2

3

const { handleLayout, handlePress, viewRef } = useAdsTracker(adParams);

`

1. Attach the handlers and ref to your component. See the example below:

`1

<TouchableOpacity

2

 ref={viewRef} // Attach the ref to track visibility (view)

3

 onLayout={handleLayout} // Attach the layout handler (impression)

4

 onPress={handlePress} // Attach the click handler (click)

5

>

6

 <Image source={{}} />

7

</TouchableOpacity>

`

The hook returns an object with three properties:

* `handleLayout`: A function to be passed to your component's `onLayout` prop. It fires the impression event.
* `handlePress`: A function to be passed to a touch prop, like `onPress` or `onTouchEndCapture`. It fires the click event.
* `viewRef`: A `ref` that must be attached to the `ref` prop of the ad's main component. It monitors visibility and fires the view event.

Below is an implementation example of a React Native code that defines a `CustomAd` component. This component uses the `useAdsTracker` hook from the `@vtex/activity-flow` library to integrate with an ad tracking system for visibility and interaction.

`1

import { useAdsTracker } from "@vtex/activity-flow";

2

import { Image, TouchableOpacity } from "react-native";

3

4

export const CustomAd = () => {

5

 // 1. Define the parameters

6

 const adParams = {

7

accountName: 'my-company-x',

8

adId: 'sidebar-banner-02',

9

 };

10

11

// 2. Call the hook to get the handlers and the ref

12

const { handleLayout, handlePress, viewRef } = useAdsTracker(adParams);

13

14

return (

15

 // 3. Attach the handlers and ref to your component

16

 <TouchableOpacity

17

ref={viewRef} // Attach the ref to track visibility (view)

18

onLayout={handleLayout} // Attach the layout handler (impression)

19

onPress={handlePress} // Attach the click handler (click)

20

 >

21

<Image source={{}} />

22

 </TouchableOpacity>

23

 );

24

};

`

The component's purpose is to render an ad inside a touchable container and report three key events to the tracking system: **impression**, **view**, and **click**.

Contributors

1

[![Photo of the contributor](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/installing-activity-flow-in-react-native-apps/_next/image?url=https%3A%2F%2Favatars.githubusercontent.com%2Fu%2F112641072%3Fv%3D4%26w=64%26q=75)](https://github.com/barbara-celi)

Was this helpful?

Yes

No

[Suggest Edits (GitHub)](https://read.calvincode.net/reader?url=https://github.com/vtexdocs/dev-portal-content/edit/main/docs/guides/Activity-Flow/installing-activity-flow-in-react-native-apps.md)

[Installing Activity Flow in Flutter apps« Previous](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/installing-activity-flow-in-react-native-apps//docs/guides/installing-activity-flow-in-flutter-apps)[VTEX AdsNext »](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/installing-activity-flow-in-react-native-apps//docs/guides/vtex-ads)

Contributors

1

[![Photo of the contributor](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/installing-activity-flow-in-react-native-apps/_next/image?url=https%3A%2F%2Favatars.githubusercontent.com%2Fu%2F112641072%3Fv%3D4%26w=64%26q=75)](https://github.com/barbara-celi)

ON THIS PAGE

[Before you begin](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/installing-activity-flow-in-react-native-apps/docs/guides/installing-activity-flow-in-react-native-apps%23before-you-begin)

[Use React Navigation or Expo Router in your project](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/installing-activity-flow-in-react-native-apps/docs/guides/installing-activity-flow-in-react-native-apps%23use-react-navigation-or-expo-router-in-your-project)[Install the Activity Flow package](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/installing-activity-flow-in-react-native-apps/docs/guides/installing-activity-flow-in-react-native-apps%23install-the-activity-flow-package)

[Instructions](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/installing-activity-flow-in-react-native-apps/docs/guides/installing-activity-flow-in-react-native-apps%23instructions)

[Step 1 - Importing the Activity Flow plugin](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/installing-activity-flow-in-react-native-apps/docs/guides/installing-activity-flow-in-react-native-apps%23step-1-importing-the-activity-flow-plugin)[Step 2 - Creating an Activity Flow instance](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/installing-activity-flow-in-react-native-apps/docs/guides/installing-activity-flow-in-react-native-apps%23step-2-creating-an-activity-flow-instance)

[Usage](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/installing-activity-flow-in-react-native-apps/docs/guides/installing-activity-flow-in-react-native-apps%23usage)

[Tracking page views automatically](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/installing-activity-flow-in-react-native-apps/docs/guides/installing-activity-flow-in-react-native-apps%23tracking-page-views-automatically)[Tracking order group](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/installing-activity-flow-in-react-native-apps/docs/guides/installing-activity-flow-in-react-native-apps%23tracking-order-group)[Tracking deep links](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/installing-activity-flow-in-react-native-apps/docs/guides/installing-activity-flow-in-react-native-apps%23tracking-deep-links)[Tracking ad events](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/installing-activity-flow-in-react-native-apps/docs/guides/installing-activity-flow-in-react-native-apps%23tracking-ad-events)

Was this helpful?

 Send feedback

[Suggest edits (GitHub)](https://read.calvincode.net/reader?url=https://github.com/vtexdocs/dev-portal-content/edit/main/docs/guides/Activity-Flow/installing-activity-flow-in-react-native-apps.md)

Copy page

On this page

ON THIS PAGE

[Before you begin](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/installing-activity-flow-in-react-native-apps/docs/guides/installing-activity-flow-in-react-native-apps%23before-you-begin)

[Use React Navigation or Expo Router in your project](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/installing-activity-flow-in-react-native-apps/docs/guides/installing-activity-flow-in-react-native-apps%23use-react-navigation-or-expo-router-in-your-project)[Install the Activity Flow package](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/installing-activity-flow-in-react-native-apps/docs/guides/installing-activity-flow-in-react-native-apps%23install-the-activity-flow-package)

[Instructions](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/installing-activity-flow-in-react-native-apps/docs/guides/installing-activity-flow-in-react-native-apps%23instructions)

[Step 1 - Importing the Activity Flow plugin](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/installing-activity-flow-in-react-native-apps/docs/guides/installing-activity-flow-in-react-native-apps%23step-1-importing-the-activity-flow-plugin)[Step 2 - Creating an Activity Flow instance](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/installing-activity-flow-in-react-native-apps/docs/guides/installing-activity-flow-in-react-native-apps%23step-2-creating-an-activity-flow-instance)

[Usage](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/installing-activity-flow-in-react-native-apps/docs/guides/installing-activity-flow-in-react-native-apps%23usage)

[Tracking page views automatically](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/installing-activity-flow-in-react-native-apps/docs/guides/installing-activity-flow-in-react-native-apps%23tracking-page-views-automatically)[Tracking order group](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/installing-activity-flow-in-react-native-apps/docs/guides/installing-activity-flow-in-react-native-apps%23tracking-order-group)[Tracking deep links](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/installing-activity-flow-in-react-native-apps/docs/guides/installing-activity-flow-in-react-native-apps%23tracking-deep-links)[Tracking ad events](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/installing-activity-flow-in-react-native-apps/docs/guides/installing-activity-flow-in-react-native-apps%23tracking-ad-events)

On this page

[Github](https://read.calvincode.net/reader?url=https://github.com/vtex-apps)[Help Center](https://read.calvincode.net/reader?url=https://help.vtex.com/)[Community](https://read.calvincode.net/reader?url=https://community.vtex.com/?%5Fga=2.198523433.743584735.1647618303-1974737580.1645714642)[Feedback](https://read.calvincode.net/reader?url=https://docs.google.com/forms/d/e/1FAIpQLSfmnotPvPjw-SjiE7lt2Nt3RQgNUe10ixXZmuO2v9enOJReoQ/viewform?entry.1972292648=developers.vtex.com%26entry.1799503232=)