I saw a package for bottom navigation for Flutter which looks very nice.
Curved Navigation Bar (Flutter)
Basically, it will look like this
I am trying to replicate it in React Native (UI first, then will work on Animation) but not successful. Is it actually possible to replicate this in React Native?
The closest I can get is as shown in this image. However I used 4 different shapes positioned as absolute to achieve this.
This image differentiates the shapes I used (Gray, Orange, Red and Blue) to form the navigation bar.
Please advice me if there is a way to make this perfect (better without the workarounds like I did).
Thank you very much.
The close approach is to use Views like this.
Mask off the red part on yellow or do apply same background color to red. It will look like this.
Since I couldn't found how to mask it, I just applied background color to the red color View.
Then you can use animations and interpolation to move the entire shape on the click event.
And the final product will look like this.
I've published the same on https://www.npmjs.com/package/rn-curved-navigation-bar
Or you can check out and clone the project on github
There is library react-native-tabbar-interaction , you can have a try with it. Look similar as you need
Related
I am new to react-native. I want a toggle button with 2 text blocks. How this can be achieved with react native?.
The toggler should animate when clicking buy and sell texts respectively.
Following is the image reference for the design.
You can try this library.
This does not match the design exactly but it's a toggle with two text blocks. If you want something that looks exactly like your image I'm afraid you will have to build it yourself. You could use the mentioned library as a starting point.
After long searching for that how to customise the back button on the react-native-navigation I finally gave up. So my idea is to use custom back button if it is possible because it will be the easiest option I think. For example ....
backButton: {
id: "backButton",
icon: require("../../assets/logo.png"),
}
But what happens here is that the icon gets coloured in blue like it is a back arrow. The problem is that is in fact text which have different colours on some chars and I don't want the colour of the png to be changed at all. And the biggest problem is that if it gets changed there is absolutely no way to revert it.
So my question is: Is there any way this logo.png when I put it for icon of the backButton it not to get colour changed? Or if there is no way that to happen this way is there any way this to be done at all?
Thanks in advance. :)
The back button can be customised with a backButton option as described in the docs
I am trying to implement a UI layout similar to google maps "explore" on Android, (see gif) in React Native.
In my UI design I have app navigation tabs at the bottom of the screen, with a full page map background, overlaid with a "bottom sheet" coming from above the tabs, and a search box component at the top. See UI sketch below.
I have found various react-native ui components which look useful, but I can't figure out the styling to arrange them in the layout I want.
Several of the bottomsheet components I'm looking at, for example, rn-bottom-drawer show gifs similar to what I'm trying to create, e.g this animation, but I can't find an actual code example of how that UI was created. For example, the same library example just shows the bottom drawer over an empty screen.
What combination of wrapping elements and styles would allow me to create the layout described? I come from a XAML background and this kind of layout is very easy to create, but I can't get my head around how to do it in react native.
It is halfway possible with the component "react-native-swipe-up-down".
The swipe up above the App works, but it is really buggy. Had the same problem as you and couldn't find anything better than swipe-up-down til today.
react native, like the pictures below, the left part and right part is both scrollable, and when left tab is tab and right part follows, it's like 'react-native-scrollable-tab-view', but vertically, any suggestions will be helpful, thanks~
example pic1
example pic2
Have a look as this PR which gives vertical tab bar capability to react-native-tab-view.
Since it's created long ago and not merged, you might have to apply those changes on top of the current master branch to start using.
Maybe how you break down the UI in mind is clouding your judgement.
Seeing the example pics, I think they are more like two components.
The right component is a SectionList.
The left component is a ScrollView with just buttons with labels of section titles of the right component. The onPress() of these buttons just calls scrollToLocation() of the SectionList to programmatically scroll to the the respective section.
I need a chat bubble design as shown in image:
Can anyone tell me how to do using view I tried but it doen't work
If this was the web I'd say use CSS to create the box with a pseudo-element for the triangle.
Since React Native doesn't support CSS pseudo-elements, I'd do a regular <View> for the chat bubble (adding borderRadius to it) with <Text> inside, then try something like: https://github.com/Jpoliachik/react-native-triangle to make the triangle and, use position: 'absolute' to align it to the bottom of your container View.
If you absolutely need a border, that might be a bit trickier since now you're using two different elements, and the bottom border would continue where you want a space. I'd suggest trying to use slightly different background colors for the views instead?