StatusBar translucent with under the image and other things ... about react-native-collapsing-toolbar HOT 11 CLOSED

Hi, i hope i understood your issue correctly,

I've successfully tested your example, and what i could understand, is that you want to show the image under the StatusBar, and to achieve that you removed the statusBar view (which was just used to add some space), right.

After run your example, i released that the toolbar didn't fit well with under the status bar, like the image bellow.

Is this your issue? if does, well, i haven't found a solution so far, i've played with adding translucent props to AppBarLayout, CollapsingToolbarLayout, CollapsingParallax respectively, and manually add some margin on the native side, but i haven't be able to adjust the parallax view under the status bar, so this would require some research and time.

Now, if doesn't, and i didn't understood what you say with I need to give the separation to the title and Icon.ToolbarAndroid., what you mean with the "separation" of the title Icon.ToolbarAndroid?

If I remove Icon.ToolbarAndroid, it gives me problems, I can not see the title anymore, how come?

Why do you want to remove the ToolbarAndroid? the ToolbarAndroid is required to work with the CollapsingToolbarLayout even though the title is set on the CollapsingToolbarLayout.

in the NestedScrollView, I put a very long text, but it puts a kind of marginbottom, how come?

Is because there's paddingBottom: 550 on the container style, which must be a better way to handle that, or maybe a dynamic padding to fits the content and be able to scroll as expected.

from react-native-collapsing-toolbar.

@cesardeazevedo :

1. Yes, the effect I want to achieve is what you see in the image, I've tried everything, so at the moment there is no solution?
2. I want to remove the side menu, ie the black points that you see, in the end I realized that just do it like this:
   <Icon.ToolbarAndroid /> But I'm not understanding if: <Icon.ToolbarAndroid iconColor = "white"
   Why do you see it in black?
3. I did not understand why there must be this PaddingBottom.

Take a look at the gif, in this case

container: {
    paddingBottom: 550,
  },

http://i.imgur.com/HN696J0.gif

As you can see there are two different cases:

1. Little text, so the whole container is not covered.
2. A lot of text, some strange events happen:

• There is a certain slowing down in sliding, both from top to bottom and from bottom to top.
• The container is not covered all.
• This I do not know how to explain it well or how you can replicate it, but I try the same.

When I scroll from bottom to top and in the meantime release / raise the finger from the scroll, I get the effect that you see in the image, that is not going forward.

I do not know if I explained myself well.

Here I put a complete example, you just have to download the zip file.
link: https://snack.expo.io/S1G1ZlHQX

from react-native-collapsing-toolbar.

Yes, the effect I want to achieve is what you see in the image, I've tried everything, so at the moment there is no solution?

No, there's no solution yet, as i already explained.

I want to remove the side menu

If you want to remove the 3 dots, just remove the actions property.

Why do you see it in black?

I don't know why they are black, ToolbarAndroid is not part of this library, so i can't help with it, refer to these issues.
oblador/react-native-vector-icons#502
facebook/react-native#5483

I did not understand why there must be this PaddingBottom.

The paddingBottom is just a way to compensate the height added by the AppBarLayout and fits the main content on the screen, it's just the they way the CollapsingToolbarLayout works behind the scenes, it keeps the height even when it collapses, or some kind of, is hard to explain.

I already tried to applying LayoutParams.WRAP_CONTENT, but didn't help that much, CoordinatorLayouts, AppBarLayout, NestedScrollView is NOT something easy to work nicely with react-native, and is not something common out there, some things are much better to play yourself than trying to explain, i don't have answers for everything

A better approach would be to set container with the height of the screen and subtracted by the HEADER_HEIGHT (height: height - HEADER_HEIGHT), that could work just fine.

Little text, so the whole container is not covered.

Use a minHeight to cover the screen.

The container is not covered all.

Please, replace the paddingBottom with this.

const HEADER_HEIGHT = 250
const { height } = Dimensions.get('window')

const styles = StyleSheet.create({
  container: {
    height: height - HEADER_HEIGHT,
  },
})

I hope it helps.

from react-native-collapsing-toolbar.

@cesardeazevedo :

1. I thought of something like this:
   Since the status bar is about 24 as a dimension, add the size of the toolbar (56) to 24.
   So I tried to put in CollapsingToolbarLayout: height = {80}
   but it seems that the props do not work.

So I modified the file: CollapsingToolbarLayoutManager
  private int height = 80; This means that the height changes.

56:

80:

Now the problems are these:
a) to outline the title, the probable solution even if a little dirty, to put to the title a paddingTop: 24
b) <Icon.ToolbarAndroid it does not move, I did a test but it does not seem to work, maybe I'm wrong.

I'm trying to find official documentation, but I find nothing useful.

2. I think I found a solution, I did so:

<Icon.ToolbarAndroid
iconColor = "white"
overflowIconName = "md-more"
.... />

3. I tried as you say, it does not work, on the contrary the situation worsens.

Let's try to solve problem 1 first.
What do you think about it?

from react-native-collapsing-toolbar.

Trying to push the Toolbar with paddingTop or marginTop won't work on the react-native side, this is how you can achieve that (https://github.com/cesardeazevedo/react-native-bottom-sheet-behavior/blob/master/android/src/main/java/com/bottomsheetbehavior/MergedAppBarLayoutManager.java#L50-L57).

But doesn't work at all, the problem is related to the CollapsingParallax that is not rendering behind the statusbar, which would require a better investigation playing around with the margins and maybe with setFitsSystemWindows, but i really don't have much time to investigate it, sorry.

Try to search about CollapsingToolbar + translucent, maybe you will find something more quickly than me.

from react-native-collapsing-toolbar.

@cesardeazevedo : How did you do this?

I did it, but it's a dirty solution.

  handleOffsetChanged = e => {
    Animated.event([{ nativeEvent: { offset: this.state.scrollY } }])(
      e,
      this.state
    );
    this.setState({ value: this.state.scrollY._value });
  };

  render() {
    const { value, scrollY, icon } = this.state;
    const { data } = this.props.navigation.state.params;
    let status = (<StatusBar backgroundColor={'#2196F3'} barStyle="light-content" />);
    let status2 = (<StatusBar backgroundColor={'rgba(255, 255, 255, 0.15)'} translucent />);
    return (
      <View style={[styles.container,{}]}>
        {value<-380 ? status : status2 }

What do you think about it?

from react-native-collapsing-toolbar.

Deleting your comment and posting again won't make me answer your issue quickly, quite the opposite, so be patient.

How did you do this?

I pointed a link on my previous comment, but as i already explained, doesn't solved CollapsingParallax issue.

I really don't what to think about your "dirty solution", if it's a dirty solution, is not something that i am interesting at looking at, i prefer to look at better solutions that scale for the library, but if your "solution" solves your problem in the short term, i am totally fine with it.

My suggestion is just use a background on the statusBar like the example, and back the statusBar height that you removed, that things just work fine.

Right now i am more focused on keeping the library working on new react-native versions, and translucent statusBar is just a very small detail that i am not really interested for now.

When I scroll from bottom to top and in the meantime release / raise the finger from the scroll, I get the effect that you see in the image, that is not going forward.

Regarding the scroll issue when scrolling upwards, it will be fixed on the next version of the react-native-nested-scroll-view

from react-native-collapsing-toolbar.

@cesardeazevedo :

params.setCollapseMode(CollapsingToolbarLayout.LayoutParams.COLLAPSE_MODE_PIN);

CollapsingToolbarLayoutView, AppBarLayoutView, CoordinatorLayoutView;
this.setFitsSystemWindows(true);

I do not understand why this happens?

from react-native-collapsing-toolbar.

Well, maybe because of your "dirty solution"? 🤣

I am sorry, but i can't help you further, i really don't know what you doing or trying to do.

Translucent statusBar is not supported yet, and there's no plan to implement it anytime soon, and i won't and can't help you with any work around.

I am going to close the issue, and i recommend you to ask for help on stackoverflow or some other place.

I also recommend you update the react-native-nested-scroll-view to 7.0.0 to avoid any issues when scrolling with support library 26.

from react-native-collapsing-toolbar.

@cesardeazevedo : What software or app do you use to record the device screen?

from react-native-collapsing-toolbar.

I use Licecap

from react-native-collapsing-toolbar.