How to install react-native-collapsing-toolbar in a React Native Android project?

Install both this library and react-native-nested-scroll-view via npm, then manually add packages to MainApplication.java and update build.gradle and settings.gradle files, as shown in the Getting Started section—it's more involved than typical React Native libraries.

react-native-collapsing-toolbar or JavaScript-based collapsing header libraries: which is better?

This library offers superior performance and authentic Material Design by using native Android APIs, but it's limited to Android. JavaScript alternatives like react-native-animated-header might be cross-platform but can lack smoothness and native feel.

How to add a parallax effect to a collapsing toolbar in React Native?

Use the CollapsingParallax component inside CollapsingToolbarLayout and set the parallaxMultiplier prop—values above 1 create a parallax scroll effect, as explained in the API section with example code.

Can I use react-native-collapsing-toolbar with React Navigation?

Integration is tricky because this library relies on native CoordinatorLayout, which may conflict with React Navigation's header management. You'll likely need custom coordination or avoid combining them, as the README doesn't address navigation libraries.

Why is my FlatList not scrolling properly with the collapsing toolbar?

Ensure you're using the renderScrollComponent prop to wrap FlatList in NestedScrollView, and follow the exact component order from the README—deviations can break the scrolling coordination due to the fragile structure.

How to animate an image while the toolbar collapses?

Use the onOffsetChanged event from AppBarLayout with Animated.Event to drive custom animations, like rotating an image based on scroll offset, as demonstrated in the Animated.Events usage example with interpolation.

react-native-collapsing-toolbar — Android CollapsingToolbar for React Native

What is react-native-collapsing-toolbar?

react-native-collapsing-toolbar is a React Native library that provides a wrapper for Android's native CollapsingToolbarLayout, enabling developers to implement collapsible toolbar animations in React Native Android applications. It integrates with React Native's animation system and scrollable components to deliver a native-like Material Design experience. The library solves the problem of bringing complex Android-specific UI patterns, like collapsing toolbars with parallax effects, to React Native with minimal abstraction.

Target Audience

React Native developers building Android applications who need to implement Material Design patterns, specifically collapsible toolbars with coordinated scrolling behaviors. It is suited for those requiring deep integration with native Android UI components like CoordinatorLayout and NestedScrollView.

Value Proposition

Developers choose this library because it provides direct access to Android's native CollapsingToolbarLayout APIs, ensuring high performance and authentic Material Design behavior. Its seamless integration with Animated.Event and FlatList, along with support for custom animations and parallax effects, offers a more native and flexible solution compared to JavaScript-only alternatives.

react-native wrapper for android CollapsingToolbarLayout

Use Cases

Best For

Implementing collapsible toolbars with Material Design animations in React Native Android apps.
Creating parallax scrolling effects within collapsing headers using the CollapsingParallax component.
Integrating collapsible toolbars with FlatList by wrapping content in a NestedScrollView via renderScrollComponent.
Building custom animations during toolbar collapse/expand using onOffsetChanged events with Animated.Event.
Following Android's CoordinatorLayout pattern for proper scrolling coordination between toolbars and content.
Developing React Native Android applications that require native-like UI performance and direct access to Android UI APIs.

Not Ideal For

Cross-platform React Native apps requiring identical toolbar behavior on both Android and iOS.
Projects seeking plug-and-play UI components without manual Android native code integration.
Applications needing integrated pull-to-refresh functionality with FlatList in collapsing toolbars.
Teams avoiding dependencies on multiple native modules for basic UI effects.

Pros & Cons

Pros

Native Android Performance

Directly wraps Android's CollapsingToolbarLayout, ensuring authentic Material Design animations and smooth scrolling, as emphasized in the project's philosophy of minimal abstraction.

Seamless Animation Integration

Supports Animated.Event via onOffsetChanged events, allowing custom animations during collapse/expand without nested scroll conflicts, demonstrated in the usage examples.

FlatList Compatibility

Works with FlatList by using renderScrollComponent to wrap content in NestedScrollView, enabling efficient list rendering within the collapsing layout, as detailed in the README.

Built-in Parallax Effects

Includes CollapsingParallax component with parallaxMultiplier prop for easy implementation of parallax scrolling effects in headers, showcased in the example GIF.

Cons

Platform Exclusivity

Only supports Android, making it useless for iOS development and requiring separate solutions for cross-platform apps, a significant limitation not addressed in the library.

Fragile Implementation

The README explicitly warns that the component is 'very easy to break' and requires strict adherence to component order, increasing debugging time and risk of layout issues.

Complex Native Setup

Installation demands manual edits to MainApplication.java, build.gradle, and settings.gradle, which is error-prone and complicates project maintenance compared to pure JavaScript libraries.

Missing RefreshControl Support

Does not support RefreshControl when used with FlatList, as noted in the README, limiting functionality for apps that need pull-to-refresh features in scrolling lists.

Frequently Asked Questions

What is react-native-collapsing-toolbar?

Target Audience

Value Proposition

Use Cases

Best For

Implementing collapsible toolbars with Material Design animations in React Native Android apps.
Creating parallax scrolling effects within collapsing headers using the CollapsingParallax component.
Integrating collapsible toolbars with FlatList by wrapping content in a NestedScrollView via renderScrollComponent.
Building custom animations during toolbar collapse/expand using onOffsetChanged events with Animated.Event.
Following Android's CoordinatorLayout pattern for proper scrolling coordination between toolbars and content.
Developing React Native Android applications that require native-like UI performance and direct access to Android UI APIs.

Not Ideal For

Cross-platform React Native apps requiring identical toolbar behavior on both Android and iOS.
Projects seeking plug-and-play UI components without manual Android native code integration.
Applications needing integrated pull-to-refresh functionality with FlatList in collapsing toolbars.
Teams avoiding dependencies on multiple native modules for basic UI effects.

Pros & Cons

Pros

Native Android Performance

Directly wraps Android's CollapsingToolbarLayout, ensuring authentic Material Design animations and smooth scrolling, as emphasized in the project's philosophy of minimal abstraction.

Seamless Animation Integration

Supports Animated.Event via onOffsetChanged events, allowing custom animations during collapse/expand without nested scroll conflicts, demonstrated in the usage examples.

FlatList Compatibility

Works with FlatList by using renderScrollComponent to wrap content in NestedScrollView, enabling efficient list rendering within the collapsing layout, as detailed in the README.

Built-in Parallax Effects

Includes CollapsingParallax component with parallaxMultiplier prop for easy implementation of parallax scrolling effects in headers, showcased in the example GIF.

Cons

Platform Exclusivity

Only supports Android, making it useless for iOS development and requiring separate solutions for cross-platform apps, a significant limitation not addressed in the library.

Fragile Implementation

The README explicitly warns that the component is 'very easy to break' and requires strict adherence to component order, increasing debugging time and risk of layout issues.

Complex Native Setup

Installation demands manual edits to MainApplication.java, build.gradle, and settings.gradle, which is error-prone and complicates project maintenance compared to pure JavaScript libraries.

Missing RefreshControl Support

Does not support RefreshControl when used with FlatList, as noted in the README, limiting functionality for apps that need pull-to-refresh features in scrolling lists.

Frequently Asked Questions

react-native-collapsing-toolbar

What is react-native-collapsing-toolbar?

Overview

Use Cases

Best For

Not Ideal For

Pros & Cons

Pros

Cons

Frequently Asked Questions

Related Projects

Found a gem we're missing?

react-native-collapsing-toolbar

What is react-native-collapsing-toolbar?

Overview

Use Cases

Best For

Not Ideal For

Pros & Cons

Pros

Cons

Frequently Asked Questions

Related Projects

Found a gem we're missing?