cesardeazevedo / react-native-collapsing-toolbar Goto Github PK
View Code? Open in Web Editor NEWreact-native wrapper for android CollapsingToolbarLayout
License: MIT License
react-native wrapper for android CollapsingToolbarLayout
License: MIT License
Hi there,
Thanks for such awesome awesome modules!! Im still learning to write java component. I did my first edits here in react-native android prompt - shimohq/react-native-prompt-android#31
But anwyays, for this module we have to update android/app.build.gradle compileSdkVersion 25. By default it is 23. I had to change to 25 otherwise I get the below errors:
:app:processDebugResources
C:\Users\Mercurius\Documents\GitHub\trustedplatform_android\android\app\build\intermediates\res\merged\debug\values-v24\values-v24.xml:3: AAPT: Error retrieving parent for item: No resource found that matches the given name 'android:TextAppearance.Material.Widget.Button.Borderless.Colored'.
C:\Users\Mercurius\Documents\GitHub\trustedplatform_android\android\app\build\intermediates\res\merged\debug\values-v24\values-v24.xml:4: AAPT: Error retrieving parent for item: No resource found that matches the given name 'android:TextAppearance.Material.Widget.Button.Colored'.
C:\Users\Mercurius\Documents\GitHub\trustedplatform_android\android\app\build\intermediates\res\merged\debug\values-v24\values-v24.xml:3: error: Error retrieving parent for item: No resource found that matches the given name 'android:TextAppearance.Material.Widget.Button.Borderless.Colored'.
C:\Users\Mercurius\Documents\GitHub\trustedplatform_android\android\app\build\intermediates\res\merged\debug\values-v24\values-v24.xml:4: error: Error retrieving parent for item: No resource found that matches the given name 'android:TextAppearance.Material.Widget.Button.Colored'.
My build fails for that. Do you know how to fix?
undefined is not an object (evaluating '_reactNative.UIManager.CTLAppBarLayout.Constants')
..\node_modules\react-native-collapsing-toolbar\lib\AppBarLayout.js:11:8
loadModuleImplementation
"react": "16.3.0-rc.0"
"react-native": "0.54.3"
Problem:
http://i.imgur.com/ZOsElB5.gifv
For the code I was based on the following example:
https://github.com/cesardeazevedo/react-native-collapsing-toolbar/blob/master/example/index.android.js
The problem happens when I click on the image, which does the function:
_onImg(row){
this.props.navigation.navigate('Img', {
data: row
});
}
Then when I go back, the problem happens.
Hi there,
I was having a hard time figuring out how to "tint" the actions in ToolbarAndroid
. Is this possible? Or does it rely on the color of the png provided?
Is it possible to supply our own <View>
as component to toolbar. I tried this but it broke the collapsing. :(
error: RNCollapsingToolbarPackage is not abstract and does not override abstract method createJSModules() in ReactPackage
Getting this error when I tried to build
Hi I am facing an error in ios build in AppBarLayout.js. The error is
Undefined is not an object(Evaluating '_reactNative.UiManager.CTLAppBarLayout.Constants.
Please let me know how to fix this.
Thanks
is this support for iOS?
thanks for advance
I make a bridge of CoordinatorLayout + AppBarLayout to React-Native port in a quite different way compared with yours. But I encountered a serious problem recently: In some cases: the scrollableTabView won't follow with the AppBarLayout when scrolling. and I have upload my source code blow, I will be very appreciated if you could give me some advice.
SkeletonDemo.zip
Because I don't know how to contact you in a private way, so I raised an issue here, I'm sorry.
I live in China, and my email address is [email protected]. Thank you very much!
keep getting a build error when i try to build the app:
Task :app:transformDexArchiveWithExternalLibsDexMergerForDebug FAILED
The Stacktrace is as follows:
`
What went wrong:
Execution failed for task ':app:transformDexArchiveWithExternalLibsDexMergerForDebug'.
com.android.builder.dexing.DexArchiveMergerException: Error while merging dex archives:
D:\Projects\REACT-NATIVE\App\android\app\build\intermediates\transforms\dexBuilder\debug\0.jar, D:\Projects\REACT-NATIVE\App\android\app\build\intermediates\transforms\dexBuilder\debug\7.jar, D:\Projects\REACT-NATIVE\App\android\app\build\intermediates\transforms\dexBuilder\debug\8.jar, D:\Projects\REACT-NATIVE\App\android\app\build\intermediates\transforms\dexBuilder\debug\12.jar, D:\Projects\REACT-NATIVE\App\android\app\build\intermediates\transforms\dexBuilder\debug\13.jar, D:\Projects\REACT-NATIVE\App\android\app\build\intermediates\transforms\dexBuilder\debug\14.jar, D:\Projects\REACT-NATIVE\App\android\app\build\intermediates\transforms\dexBuilder\debug\15.jar, D:\Projects\REACT-NATIVE\App\android\app\build\intermediates\transforms\dexBuilder\debug\16.jar, D:\Projects\REACT-NATIVE\App\android\app\build\intermediates\transforms\dexBuilder\debug\17.jar, D:\Projects\REACT-NATIVE\App\android\app\build\intermediates\transforms\dexBuilder\debug\23.jar, D:\Projects\REACT-NATIVE\App\android\app\build\intermediates\transforms\dexBuilder\debug\24.jar, D:\Projects\REACT-NATIVE\App\android\app\build\intermediates\transforms\dexBuilder\debug\25.jar, D:\Projects\REACT-NATIVE\App\android\app\build\intermediates\transforms\dexBuilder\debug\26.jar, D:\Projects\REACT-NATIVE\App\android\app\build\intermediates\transforms\dexBuilder\debug\27.jar, D:\Projects\REACT-NATIVE\App\android\app\build\intermediates\transforms\dexBuilder\debug\28.jar, D:\Projects\REACT-NATIVE\App\android\app\build\intermediates\transforms\dexBuilder\debug\29.jar, D:\Projects\REACT-NATIVE\App\android\app\build\intermediates\transforms\dexBuilder\debug\30.jar, D:\Projects\REACT-NATIVE\App\android\app\build\intermediates\transforms\dexBuilder\debug\31.jar, D:\Projects\REACT-NATIVE\App\android\app\build\intermediates\transforms\dexBuilder\debug\32.jar, D:\Projects\REACT-NATIVE\App\android\app\build\intermediates\transforms\dexBuilder\debug\34.jar, D:\Projects\REACT-NATIVE\App\android\app\build\intermediates\transforms\dexBuilder\debug\35.jar, D:\Projects\REACT-NATIVE\App\android\app\build\intermediates\transforms\dexBuilder\debug\41.jar, D:\Projects\REACT-NATIVE\App\android\app\build\intermediates\transforms\dexBuilder\debug\45.jar, D:\Projects\REACT-NATIVE\App\android\app\build\intermediates\transforms\dexBuilder\debug\49.jar, D:\Projects\REACT-NATIVE\App\android\app\build\intermediates\transforms\dexBuilder\debug\51.jar, D:\Projects\REACT-NATIVE\App\android\app\build\intermediates\transforms\dexBuilder\debug\52.jar, D:\Projects\REACT-NATIVE\App\android\app\build\intermediates\transforms\dexBuilder\debug\53.jar, D:\Projects\REACT-NATIVE\App\android\app\build\intermediates\transforms\dexBuilder\debug\55.jar, D:\Projects\REACT-NATIVE\App\android\app\build\intermediates\transforms\dexBuilder\debug\57.jar, D:\Projects\REACT-NATIVE\App\android\app\build\intermediates\transforms\dexBuilder\debug\128.jar, D:\Projects\REACT-NATIVE\App\android\app\build\intermediates\transforms\dexBuilder\debug\129.jar, D:\Projects\REACT-NATIVE\App\android\app\build\intermediates\transforms\dexBuilder\debug\130.jar, D:\Projects\REACT-NATIVE\App\android\app\build\intermediates\transforms\dexBuilder\debug\137.jar, D:\Projects\REACT-NATIVE\App\android\app\build\intermediates\transforms\dexBuilder\debug\138.jar, D:\Projects\REACT-NATIVE\App\android\app\build\intermediates\transforms\dexBuilder\debug\139.jar, D:\Projects\REACT-NATIVE\App\android\app\build\intermediates\transforms\dexBuilder\debug\140.jar, D:\Projects\REACT-NATIVE\App\android\app\build\intermediates\transforms\dexBuilder\debug\141.jar, D:\Projects\REACT-NATIVE\App\android\app\build\intermediates\transforms\dexBuilder\debug\145.jar, D:\Projects\REACT-NATIVE\App\android\app\build\intermediates\transforms\dexBuilder\debug\146.jar, D:\Projects\REACT-NATIVE\App\android\app\build\intermediates\transforms\dexBuilder\debug\147.jar, D:\Projects\REACT-NATIVE\App\android\app\build\intermediates\transforms\dexBuilder\debug\148.jar, D:\Projects\REACT-NATIVE\App\android\app\build\intermediates\transforms\dexBuilder\debug\156.jar, D:\Projects\REACT-NATIVE\App\android\app\build\intermediates\transforms\dexBuilder\debug\157.jar, D:\Projects\REACT-NATIVE\App\android\app\build\intermediates\transforms\dexBuilder\debug
164.jar, D:\Projects\REACT-NATIVE\App\android\app\build\intermediates\transforms\dexBuilder\debug\175.jar, D:\Projects\REACT-NATIVE\App\android\app\build\intermediates\transforms\dexBuilder\debug\176.jar, D:\Projects\REACT-NATIVE\App\android\app\build\intermediates\transforms\dexBuilder\debug\177.jar, D:\Projects\REACT-NATIVE\App\android\app\build\intermediates\transforms\dexBuilder\debug\178.jar, D:\Projects\REACT-NATIVE\App\android\app\build\intermediates\transforms\dexBuilder\debug\182.jar, D:\Projects\REACT-NATIVE\App\android\app\build\intermediates\transforms\dexBuilder\debug\184.jar, D:\Projects\REACT-NATIVE\App\android\app\build\intermediates\transforms\dexBuilder\debug\185.jar, D:\Projects\REACT-NATIVE\App\android\app\build\intermediates\transforms\dexBuilder\debug\186.jar, D:\Projects\REACT-NATIVE\App\android\app\build\intermediates\transforms\dexBuilder\debug\187.jar, D:\Projects\REACT-NATIVE\App\android\app\build\intermediates\transforms\dexBuilder\debug\188.jar, D:\Projects\REACT-NATIVE\App\android\app\build\intermediates\transforms\dexBuilder\debug\189.jar, D:\Projects\REACT-NATIVE\App\android\app\build\intermediates\transforms\dexBuilder\debug\190.jar, D:\Projects\REACT-NATIVE\App\android\app\build\intermediates\transforms\dexBuilder\debug\191.jar, D:\Projects\REACT-NATIVE\App\android\app\build\intermediates\transforms\dexBuilder\debug\192.jar, D:\Projects\REACT-NATIVE\App\android\app\build\intermediates\transforms\dexBuilder\debug\193.jar, D:\Projects\REACT-NATIVE\App\android\app\build\intermediates\transforms\dexBuilder\debug\194.jar, D:\Projects\REACT-NATIVE\App\android\app\build\intermediates\transforms\dexBuilder\debug\195.jar, D:\Projects\REACT-NATIVE\App\android\app\build\intermediates\transforms\dexBuilder\debug\196.jar, D:\Projects\REACT-NATIVE\App\android\app\build\intermediates\transforms\dexBuilder\debug\197.jar, D:\Projects\REACT-NATIVE\App\android\app\build\intermediates\transforms\dexBuilder\debug\198.jar, D:\Projects\REACT-NATIVE\App\android\app\build\intermediates\transforms\dexBuilder\debug\199.jar, D:\Projects\REACT-NATIVE\App\android\app\build\intermediates\transforms\dexBuilder\debug\200.jar, D:\Projects\REACT-NATIVE\App\android\app\build\intermediates\transforms\dexBuilder\debug\201.jar, D:\Projects\REACT-NATIVE\App\android\app\build\intermediates\transforms\dexBuilder\debug\202.jar, D:\Projects\REACT-NATIVE\App\android\app\build\intermediates\transforms\dexBuilder\debug\203.jar, D:\Projects\REACTNATIVE\App\android\app\build\intermediates\transforms\dexBuilder\debug\204.jar, D:\Projects\REACT-NATIVE\App\android\app\build\intermediates\transforms\dexBuilder\debug\205.jar, D:\Projects\REACT-NATIVE\App\android\app\build\intermediates\transforms\dexBuilder\debug\206.jar, D:\Projects\REACT-NATIVE\App\android\app\build\intermediates\transforms\dexBuilder\debug\207.jar, D:\Projects\REACT-NATIVE\App\android\app\build\intermediates\transforms\dexBuilder\debug\208.jar, D:\Projects\REACT-NATIVE\App\android\app\build\intermediates\transforms\dexBuilder\debug\209.jar, D:\Projects\REACT-NATIVE\App\android\app\build\intermediates\transforms\dexBuilder\debug\214.jar, D:\Projects\REACT-NATIVE\App\android\app\build\intermediates\transforms\dexBuilder\debug\215.jar, D:\Projects\REACT-NATIVE\App\android\app\build\intermediates\transforms\dexBuilder\debug\216.jar, D:\Projects\REACT-NATIVE\App\android\app\build\intermediates\transforms\dexBuilder\debug\218.jar, D:\Projects\REACT-NATIVE\App\android\app\build\intermediates\transforms\dexBuilder\debug\219.jar, D:\Projects\REACT-NATIVE\App\android\app\build\intermediates\transforms\dexBuilder\debug\220.jar, D:\Projects\REACT-NATIVE\App\android\app\build\intermediates\transforms\dexBuilder\debug\222.jar, D:\Projects\REACT-NATIVE\App\android\app\build\intermediates\transforms\dexBuilder\debug\223.jar, D:\Projects\REACT-NATIVE\App\android\app\build\intermediates\transforms\dexBuilder\debug\224.jar
Try:
Run with --stacktrace option to get the stack trace. Run with --info or --debug option to get more log output. Run with --scan to get full insights.
Get more help at https://help.gradle.org
BUILD FAILED in 1m 15s
229 actionable tasks: 1 executed, 228 up-to-date
Could not install the app on the device, read the error above for details.
Make sure you have an Android emulator running or a device connected and have
set up your Android development environment:
https://facebook.github.io/react-native/docs/getting-started.html
Done in 155.51s.
`
What could be the issue?
I have integrated this into a react native project of mine inside a modal. However, as I try to collapse the toolbar, it doesn't collapse and proceeds off screen. I was wondering if there is any way to fix this issue.
I was trying to use AppBarLayout
like this:
<AppBarLayoutAndroid
layoutWidthAndroid="matchParent"
layoutHeightAndroid="wrapContent"
>
{/* Elements directily in <AppBarLayoutAndroid> can have an */}
{/* additional scrollFlagsAndroid prop. This must be an array */}
{/* of strings, specifying the scroll flags of this element. */}
{/* see https://goo.gl/RiAyDX for reference. */}
<View scrollFlagsAndroid={['scroll']}>
<Text style={{ fontSize: 18 }}>Hi, I will be collapsed when scrolling down, and show again when scrolled to top.</Text>
</View>
<View scrollFlagsAndroid={['scroll', 'enterAlways']}>
<Text style={{ fontSize: 18 }}>Hi, I will be collapsed when scrolling down, and show again when scrolling up.</Text>
</View>
<View scrollFlagsAndroid={[]}>
<Text style={{ fontSize: 18 }}>Hi, I will not be collapsed.</Text>
</View>
</AppBarLayoutAndroid>
From this discontinued repo - https://github.com/zetavg/react-native-android-design-support#coordinatorlayout
I was hoping to mimic the playstore behavior:
HD screen recording: https://gfycat.com/ShockingQuickGalapagosdove
GIF screen recording:
Thanks, your project helped me add a collapsing toolbar to my navigation library for React Native. I thought I’d let you know about a couple of things I learnt along the way.
NestedScrollView
component because React Native’s ScrollView component supports nested scrollingCoordinatorLayout
doesn’t work when the scrolled content is too short (height + toolbar height < screen height). It’s because React Native doesn’t bubble the touch event. I intercepted the touch event and manually applied the nested scrollingHello, I found a bug.. When the phone is turned off in the application and then the phone is turned on again then the collapsing component no longer works, is there any way to solve this? I add a video of the problem: https://streamable.com/7e3g8
Regards,
I have this problem, when building Android project on react native, can you help me please.
I am sorry for my english. i am speak spanish.
:react-native-nested-scroll-view:compileReleaseJavaWithJavac :react-native-nested-scroll-view:compileReleaseJavaWithJavac - is not incremental (e.g. outputs have changed, no previous execution, etc.). C:\Users\frankito\Documents\ReactNative\AwesomeProject\node_modules\react-native-nested-scroll-view\android\src\main\java\com\rnnestedscrollview\ReactHorizontalNestedScrollContainerViewManager.java:3: error: cannot find symbol import com.facebook.react.views.scroll.ReactHorizontalScrollContainerViewManager; ^ symbol: class ReactHorizontalScrollContainerViewManager location: package com.facebook.react.views.scroll C:\Users\frankito\Documents\ReactNative\AwesomeProject\node_modules\react-native-nested-scroll-view\android\src\main\java\com\rnnestedscrollview\ReactHorizontalNestedScrollContainerViewManager.java:6: error: cannot find symbol extends ReactHorizontalScrollContainerViewManager { ^ symbol: class ReactHorizontalScrollContainerViewManager C:\Users\frankito\Documents\ReactNative\AwesomeProject\node_modules\react-native-nested-scroll-view\android\src\main\java\com\rnnestedscrollview\ReactNestedScrollView.java:40: error: cannot find symbol import com.facebook.react.views.view.ReactViewBackgroundManager; ^ symbol: class ReactViewBackgroundManager location: package com.facebook.react.views.view C:\Users\frankito\Documents\ReactNative\AwesomeProject\node_modules\react-native-nested-scroll-view\android\src\main\java\com\rnnestedscrollview\ReactNestedScrollView.java:72: error: cannot find symbol private ReactViewBackgroundManager mReactBackgroundManager; ^ symbol: class ReactViewBackgroundManager location: class ReactNestedScrollView C:\Users\frankito\Documents\ReactNative\AwesomeProject\node_modules\react-native-nested-scroll-view\android\src\main\java\com\rnnestedscrollview\ReactHorizontalNestedScrollContainerViewManager.java:10: error: method does not override or implement a method from a supertype @Override ^ C:\Users\frankito\Documents\ReactNative\AwesomeProject\node_modules\react-native-nested-scroll-view\android\src\main\java\com\rnnestedscrollview\ReactNestedScrollView.java:81: error: cannot find symbol mReactBackgroundManager = new ReactViewBackgroundManager(this); ^ symbol: class ReactViewBackgroundManager location: class ReactNestedScrollView C:\Users\frankito\Documents\ReactNative\AwesomeProject\node_modules\react-native-nested-scroll-view\android\src\main\java\com\rnnestedscrollview\ReactNestedScrollViewManager.java:145: error: method does not override or implement a method from a supertype @Override ^ C:\Users\frankito\Documents\ReactNative\AwesomeProject\node_modules\react-native-nested-scroll-view\android\src\main\java\com\rnnestedscrollview\RNNestedScrollViewPackage.java:21: error: method asList in class Arrays cannot be applied to given types; return Arrays.<ViewManager>asList( ^ required: T[] found: ReactNestedScrollViewManager,ReactHorizontalNestedScrollViewManager,ReactHorizontalNestedScrollContainerViewManager reason: varargs mismatch; ReactHorizontalNestedScrollContainerViewManager cannot be converted to ViewManager where T is a type-variable: T extends Object declared in method <T>asList(T...) Note: C:\Users\frankito\Documents\ReactNative\AwesomeProject\node_modules\react-native-nested-scroll-view\android\src\main\java\com\rnnestedscrollview\ReactNestedScrollViewManager.java uses unchecked or unsafe operations. Note: Recompile with -Xlint:unchecked for details. 8 errors :react-native-nested-scroll-view:compileReleaseJavaWithJavac FAILED
here my package.json
{ "name": "AwesomeProject", "version": "0.0.1", "private": true, "scripts": { "start": "node node_modules/react-native/local-cli/cli.js start", "test": "jest" }, "dependencies": { "react": "16.0.0-alpha.12", "react-native": "0.47.1", "react-native-collapsing-toolbar": "^1.0.0-beta.8", "react-native-elements": "^0.18.5", "react-native-nested-scroll-view": "^6.0.1", "react-native-progress": "^3.4.0", "react-native-scrollable-tab-view": "^0.8.0", "react-native-vector-icons": "^4.4.2", "react-navigation": "^1.0.0-beta.21", "react-redux": "^5.0.6", "redux": "^3.7.2" }, "devDependencies": { "babel-jest": "20.0.3", "babel-preset-react-native": "2.1.0", "jest": "20.0.4", "react-test-renderer": "16.0.0-alpha.12" }, "jest": { "preset": "react-native" } }
As shown in the figure, I have to rotate the screen before I can use it properly. Otherwise, the module below will be separated from the module above.
In addition to rotating the screen, I click on the input box, it can also be used normally, otherwise it will be the same.
I tried to change the code into your example, and the result is the same, not the react-native-scrollable-tab-view problem.
Hi @cesardeazevedo :
I have an example: https://github.com/cesardeazevedo/react-native-collapsing-toolbar/blob/master/example/index.android.js
<StatusBar backgroundColor={'rgba(255, 255, 255, 0.15)'} translucent />
and I removed the height of the statusBar:
So under the status bar you could see the image, but the problem I need to give the separation to the title and Icon.ToolbarAndroid, there is a way?
If I remove Icon.ToolbarAndroid, it gives me problems, I can not see the title anymore, how come?
in the NestedScrollView, I put a very long text, but it puts a kind of marginbottom, how come?
Code:
import React, { Component } from 'react';
import {
Text,
View,
Image,
Animated,
FlatList,
TextInput,
StatusBar,
ScrollView,
StyleSheet,
Dimensions,
} from 'react-native';
import Icon from 'react-native-vector-icons/Ionicons';
import {
AppBarLayout,
CoordinatorLayout,
CollapsingToolbarLayout,
CollapsingParallax,
} from 'react-native-collapsing-toolbar';
import NestedScrollView from 'react-native-nested-scroll-view';
const HEADER_HEIGHT = 250;
const { width } = Dimensions.get('window');
var text =
'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec placerat, neque vitae accumsan tempus, enim lectus viverra metus, id lacinia magna lorem sed velit. Sed at turpis diam. Integer semper feugiat tempor. Vivamus sit amet ante quis nulla interdum iaculis. Mauris in justo odio. Fusce molestie mi purus, ac suscipit lorem finibus et. Phasellus sed rutrum ligula. Sed at tellus maximus, dignissim mi vitae, tristique magna.Proin laoreet porta condimentum. Ut lorem risus, sagittis ac tortor a, vehicula dapibus erat. Vivamus sit amet vestibulum velit, eu sodales nisl. Donec eget elit ut felis euismod accumsan. In id ligula et ex congue malesuada id at ligula. In ut neque in neque lobortis scelerisque. Morbi at purus non lorem euismod ultricies sed eu arcu. Aliquam non metus finibus, aliquam augue vel, tincidunt lorem. Integer luctus risus aliquet erat condimentum, eu fringilla magna hendrerit.Quisque vel lectus vel odio commodo sodales sit amet in lacus. Donec nec interdum magna, et rutrum velit. Phasellus leo est, posuere a mauris quis, facilisis mattis quam. Integer sodales quam metus, et finibus lorem rutrum vitae. Mauris quis urna ac ligula pellentesque lobortis pretium eget enim. Nulla convallis placerat erat in euismod. Nulla facilisi. Mauris sodales ipsum nec vehicula finibus. Cras eu volutpat quam. Duis maximus finibus ornare. Quisque sapien enim, pretium vel magna a, egestas feugiat sapien. Proin ornare risus ut est pellentesque congue. Proin vestibulum velit sit amet nunc molestie, quis lobortis lorem fermentum. Donec eget arcu et enim tincidunt hendrerit. In convallis leo tincidunt, tincidunt sapien sit amet, mattis elit. Morbi pellentesque orci non nisi sollicitudin congue.In vulputate urna ex, eget egestas sapien dapibus at. Nulla sed mattis augue. Sed scelerisque ut est et ultrices. Vestibulum ut nisl ac quam euismod luctus ac id lectus. Curabitur dolor neque, blandit quis fringilla sit amet, malesuada nec ante. Nulla facilisi. Nullam egestas, tortor sed accumsan ullamcorper, lacus est hendrerit elit, sed luctus arcu sapien vel quam. Aliquam sollicitudin sed tellus fringilla convallis. Vestibulum vitae tincidunt tellus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Vestibulum lacinia eros purus, vel varius eros eleifend porttitor. Nam mollis leo in laoreet ultrices. In pellentesque lorem in sagittis vehicula. Duis ullamcorper, diam pellentesque dictum luctus, erat diam elementum justo, non ornare massa dui sollicitudin enim.Curabitur sed tempor mauris, id viverra nibh. Nullam cursus ante eget odio consequat ullamcorper. Nulla ac mollis lectus. Aliquam porttitor nec sapien dapibus ultrices. Morbi auctor ante in orci consequat feugiat. Duis sit amet viverra libero. Pellentesque et massa sit amet diam bibendum consectetur sit amet vitae tellus. Duis viverra ex eget vehicula posuere. Fusce quis accumsan magna. Nunc cursus bibendum turpis, ac consectetur nulla viverra vel. Ut varius faucibus quam, sed interdum nunc euismod in. Ut interdum tempus odio, in euismod magna tincidunt sit amet. Phasellus convallis justo aliquet, vestibulum magna eget, finibus lorem. Nam blandit sit amet nisi vitae gravida. Donec tempus pharetra odio et vestibulum. Nunc nec neque odio.';
export default class RNCollapsingToolbar extends Component {
state = {
icon: null,
scrollY: new Animated.Value(0),
};
componentDidMount() {
// Load icon from react-native-vector-icons manually
Icon.getImageSource('md-menu', 24, '#ffffff').then(source => {
this.setState({ icon: source });
});
}
captureAppBarRef = ref => {
this.appBar = ref;
};
handleActionSelected = action => {
return action === 0
? this.appBar.show()
: action === 1
? this.appBar.hide()
: null;
};
handleOffsetChanged = e => {
Animated.event([{ nativeEvent: { offset: this.state.scrollY } }])(
e,
this.state
);
};
render() {
const { scrollY, icon } = this.state;
return (
<View style={styles.container}>
<StatusBar backgroundColor={'rgba(255, 255, 255, 0.15)'} translucent />
<View style={styles.statusBar} />
<CoordinatorLayout>
<AppBarLayout
ref={this.captureAppBarRef}
onOffsetChanged={this.handleOffsetChanged}
style={styles.appbar}>
<CollapsingToolbarLayout
title="Le 3 regole fondamentali per un primo incontro"
contentScrimColor="#ff5bc5"
expandedTitleColor="white"
collapsedTitleTextColor="white"
expandedTitleGravity="BOTTOM"
scrimVisibleHeightTrigger={100}
scrimAnimationDuration={400}
expandedTitleMarginStart={22}
expandedTitleMarginBottom={22}
scrollFlags={
AppBarLayout.SCROLL_FLAG_SCROLL |
AppBarLayout.SCROLL_FLAG_EXIT_UNTIL_COLLAPSED
}>
<CollapsingParallax parallaxMultiplier={0.6}>
<View collapsable={false} style={styles.parallaxView}>
<Image
source={{
uri:
'https://imgix.bustle.com/elite-daily/2017/06/20162256/man-woman-first-date-smiling.jpg',
}}
style={styles.image}
/>
</View>
</CollapsingParallax>
<Icon.ToolbarAndroid
iconColor="white"
onActionSelected={this.handleActionSelected}
actions={[{ title: 'Show' }, { title: 'Hide' }]}
/>
</CollapsingToolbarLayout>
</AppBarLayout>
<NestedScrollView>
<View style={styles.box}>
<Text style={styles.text}>{text}</Text>
</View>
</NestedScrollView>
</CoordinatorLayout>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
paddingBottom: 550,
},
appbar: {
height: HEADER_HEIGHT,
backgroundColor: 'black',
},
parallaxView: {
height: HEADER_HEIGHT,
alignItems: 'center',
justifyContent: 'center',
},
box: {
//alignItems: 'center',
//justifyContent: 'center',
//height: 100,
flex: 1,
borderRadius: 2,
//marginVertical: 8,
// marginHorizontal: 10,
backgroundColor: '#fff',
elevation: 2,
padding: 5,
},
image: {
width,
height: HEADER_HEIGHT,
position: 'absolute',
backgroundColor: '#000',
opacity: 0.65,
},
statusBar: {
// height: 24,
//marginTop: 24
},
});
Here I put a complete example, you just have to download the zip file.
link: https://snack.expo.io/S1G1ZlHQX
@cesardeazevedo : Hi,
I am given the following error:
* What went wrong:
A problem occurred configuring project ':app'.
> Could not resolve all dependencies for configuration ':app:_debugApk'.
> A problem occurred configuring project ':react-native-nested-scroll-view'.
> The SDK Build Tools revision (23.0.1) is too low for project ':react-native-nested-scroll-view'. Minimum required is 25.0.0
ext {
buildToolsVersion = "26.0.3"
minSdkVersion = 16
compileSdkVersion = 26
targetSdkVersion = 26
supportLibVersion = "26.1.0"
}
minSdkVersion rootProject.ext.minSdkVersion
targetSdkVersion rootProject.ext.targetSdkVersion
versionCode 1
versionName "1.0"
ndk {
abiFilters "armeabi-v7a", "x86"
}
dependencies {
compile project(':react-native-nested-scroll-view')
compile project(':react-native-vector-icons')
compile project(':react-native-collapsing-toolbar')
compile project(':react-native-linear-gradient')
compile fileTree(dir: "libs", include: ["*.jar"])
compile "com.android.support:appcompat-v7:${rootProject.ext.supportLibVersion}"
compile "com.facebook.react:react-native:+" // From node_modules
}
"dependencies": {
"react": "16.3.1",
"react-native": "0.55.4",
"react-native-collapsing-toolbar": "^1.0.0-beta.8",
"react-native-linear-gradient": "^2.4.0",
"react-native-nested-scroll-view": "^6.0.1",
"react-native-vector-icons": "^4.6.0",
"react-navigation": "^2.6.2"
},
"devDependencies": {
"babel-jest": "23.2.0",
"babel-preset-react-native": "4.0.0",
"jest": "23.2.0",
"react-test-renderer": "16.3.1"
},
The title in the react native collapsing toolbar is not showing up. I have the title enabled as true.
The support library version (and design library version) is hardcoded. This forces the host project to use the same version.
compile 'com.android.support:appcompat-v7:26.1.0'
compile 'com.android.support:design:26.1.0'
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.