In my app, I have two screens, home and search. I have to show search on top of home. The background of search will be the blurred image of whatever is on home. I have tried using react-navigation method push to ddo this. But it is not working. How do I do this?
this.props.navigation.push('search');
If i have understood well, you need to use Modals. You have the basic documentation here. But i recommend you to use the react-native-modals library. Hope it works.
Related
I'm having some trouble figuring out if creating an absolutely positioned view that blurs the content behind is even possible in React Native. I couldn't find anything related to blurring in the documentation aside from the fact that you can apply blur to the ImageBackground element.
My initial goal was to make the status bar of Android go on top of the content and have it be transparent and blurry, and I was able to make it transparent, but it seems that the React Native StatusBar component doesn't support any sort of blur so I had to figure out a different way.
This is why I decided to create an absolutely positioned View that would stay under the status bar and give that View a blur, but I didn't find any examples on blurring Views.
Basically 2 approaches:
No external library ->
If want to go ahead with no external library , then you have to use ImageBackground with a blur
And it looks something like this:
With library you need to use react native community blur view :
https://github.com/Kureev/react-native-blur#react-native-communityblur
This package is actually what you want i believe. its better to go with this rather than no package , since there it requires an Image.
Do lemme know in case of any concerns :)
It's used on all the demos, the clickable blurred expand/collapse button. Is there a component for doing this for you or a demo that shows the code/styles used to do it? Would figure since they use it for all their demos and they have variations of it, they must have one in there.
https://www.iviewui.com/components/card-en
I'm hoping there's a wrapper component that does it for you. The blurring effect and the auto-expanding button. I've had to implement my own by hooking into the element and using scrollHeight/clientHeight. Hoping for a component that does the blurring and expansion for you. I'm open to other libraries.
Created my own using $refs and checking scrollHeight and clientHeight.
In the website I am currently creating, I am using Angular 8 (not sure whether the component paradigm has an influence on my troubles with scrollbars).
Like most websites, I need to implement a scrollbar in case the data does not fit the screen. But as I added more and more components, I realized that the way I used scrollbars was confusing and I ended up not being able to implement the behaviour I wanted.
I looked on the Internet but most ressources explain how to customize scrollbars, which is not what I am looking for. The article explaining the few CSS overflow properties were not very useful as well, because I did not have what I wanted, even though I kind of have tried every possibility (at least most I could think of).
Do you have any piece of advice to manage scrollbars ? Good practices & so on.
Currently the behaviour I am trying to implement is the following :
I have a home component containing a navbar and a router-outlet. The navbar is actually overflowing (because of box-shadow and an icon).
The router-outlet contains (if on the right page) a sidebar on the left side which represent a list of emails, and the content on the right. I don't want a global scrolling because I would have a empty space above the sidebar (where the navbar should have been but is gone because of scroll). I would need a scroll for the sidebar, and a scroll for the content.
So if you have any ressource which could help me understand how to use these scrollbars and manage them elegantly, that would be super appreciated :)
Try this perfect-scrollbar which is used for Angular 8.
Recently I am creating a page with a small menu in the content, just to switch between different content topics. Nearly similar to a small slideshow, just with a simple line navigation above the content with the different topics.
So I am just looking through the web to find some alternative ideas for the typicall hamburger icon for the mobile version, since I am using it already for the main navigation.
I found this:
'http://codepen.io/fbrz/pen/bNdMwZ'
I dont want to use the pull-down function, but I love how the different menuitems appear and come from outside the content area in focus.
So I had the Idea of maybe just using the swipe menu-items, without the pull down function.
So my question is, did anybody of you have found or even created a similar navigation somewhere, and if yes where? I would love to find some more options/ideas?
Thanks as always for your input!
I think this could be something useful for you
Scroll Overflow Menu
RN currently has 2 official and a few community developed NavigationBars.
After reading the Navigator comparison it seems that Navigator is the favoured navigation controller implementation (superseding NavigatorIOS), as it allows decoupling the bar from the navigation logic.
But which navigation bar to use with it?
To my knowledge the main contenders are:
Navigator.NavigationBar
https://github.com/Kureev/react-native-navbar.js
Both get the job done, but what are the pros/cons of using one over the other?
Cheers :)
Here is what i've come to find out after playing with the Navigator.
Kureev's react-native-navbar is good if you want to quickly implement a navigation bar that looks similar to NavigatorIOS but with more functionality. The only thing you have to watch out for is the way that he has implemented the actual navbar. You'll notice in his example that he renders the navbar above the content and wraps it in a view, which makes the navbar a "per page basis." So when you push or pop a view the nav bar will change with the view. Currenty there is an issue addressing this thought (#62)
The Navigator component is pretty simple to use. Using the prop navigationBar you can create a consistent navbar that persists on state changes. The one pain i've found, is the navigation bar gets put below the rendered content, so you'll have to use some styling to get it to the top if thats where you want it.
To Sum up:
if you want quick and easy navigation use Kureev's
If you want more flexibility and the ability to do control more of you navigation bar, create a navbar component and use Navigators navigationBar prop.
And dont underestimate the examples from the React Native Team. Navigator examples