Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Allow passing custom `containerStyle` for StackItem or add ability to override default behaviour #209

Open
Simek opened this issue Sep 9, 2019 · 5 comments

Comments

@Simek
Copy link

commented Sep 9, 2019

Currently due to implementation when user is using headerTransparent: true and custom header (headerBackground) it's not possible to retain top margin (safe area) under header element.

containerStyle={
headerMode === 'float' && !headerTransparent && !hasCustomHeader
? { marginTop: floatingHeaderHeight }
: null
}

It will be nice if we can pass headerContainerStyle object or alternatively headerMode === 'float' && !headerTransparent && !hasCustomHeader logic could be overridden by flag.

@Simek Simek changed the title Allow passing custom `containerStyle` for stack card or add ability to override default behaviour Allow passing custom `containerStyle` for StackItem or add ability to override default behaviour Sep 9, 2019

@Simek

This comment has been minimized.

Copy link
Author

commented Sep 11, 2019

I would like to create PR for that. It will be nice if one of contributors selects or points the preferred way of fixing this issue.

@satya164

This comment has been minimized.

Copy link
Member

commented Sep 11, 2019

What'd be the point of having a transparent header if you don't have content underneath?

@Simek

This comment has been minimized.

Copy link
Author

commented Sep 11, 2019

At the beginning I want to admit that I'm using version 1.5.5 and I have use code snipppet from master which is 2.0.0-alpha.13, my mistake.

Current V1 code looks like:

floatingContainerStyle = {
...Platform.select({
web: {} as ViewStyle,
default: StyleSheet.absoluteFillObject,
}),
paddingTop: this.state.floatingHeaderHeight,
};

So it makes more sense since you will have content under Header even when { paddingTop: floatingHeaderHeight } is set, for example, when scrolling FlatList or ScrollView (especially combined with react-native-community/react-native-blur BlurView as header background).

Currently without this fix initial position of FlatList (when using custom transparent header) is under header. Of course I can add some styling to each View/Card but I'm looking for global solution.

I have also tested 2.0.0-alpha.13 but not much changed here in this particular case. Additionally I have encountered following issues (iOS):

  • I have to add react-native-community/masked-view to my app dependencies and rebuild (since it's a peer dependency) otherwise Metro Bundler crashed on app launch
  • when undefined is assigned to headerLeft or headerRight app crashes (left/right not a function) - passing dummy function () => null instead fixed that
  • setting headerBackTitle to empty string or null do not affect label and "Back" title appears with every back arrow
@Simek

This comment has been minimized.

Copy link
Author

commented Sep 12, 2019

I have created simple Snack which should help understand the problem - https://snack.expo.io/@simek/42dcec - (unfortunately ATM V4 and react-native-community/blur not working on Expo).

I want archive following effect: initial position of ScrollView should be right beneath Header and when scrolling content it should overflow under Header and be still visible:

https://user-images.githubusercontent.com/719641/64758639-666e5300-d535-11e9-8ea1-918f3aad28ae.PNG

@Simek

This comment has been minimized.

Copy link
Author

commented Sep 17, 2019

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
2 participants
You can’t perform that action at this time.