I have coded swiper button and navigation insider the swiper container but the buttons and the bullets are showing in the wrong place(at the top of the page).... I would like them to show inside the swiper container...
I also faced the same issue when I used Swiper.
Try to use this
::ng-deep .swiper-pagination { `bottom: 10px;`}
You can modify it like you want by using some id or class for swiper.
<swiper class="bulletsAtBottom">some code...<swiper>
.bulletsAtbottom {bottom:10px;}
Related
I try to add shoutem to other app but when i work with NaviagtionBar and #shoutem/animation i got issue like picture below here:
this i got when using props style NavigationBar 'inline',
and here is my code:
<NavigationBar
styleName="inline"
animationName="solidify"
title={restaurant.name}
share={{
title: restaurant.name,
link: restaurant.url,
}}
/>
but i dont want like that. I want props style is 'clear' for make tranparent navigationbar when start app, i still want show it when scroll down like this:
but when i change props style of NavigationBar to 'clear' i got this issue(when scroll down, NavigationBar still not show up):
Anyone can help me to resolve it?
I can't t seem to find any complete examples for creating your own navBar component and then wiring it up to react-native-router-flux. Can anyone help me out? Looking at the github issues it seems like this is a big need for the library. What I'm looking to do is:
Create a new component with a left button and an image to the right.
Have the button icon change depending on the scene, but use the same image to the right.
Wire it to react-native-router-flux so that the navBar displays properly and keeps track of the users position in the same way that the default navBar does.
Thanks!
This a similar problem I faced. No tutorials online that tell you how to use custom navbar. I have found a way that works for me. Try this:
<Router navBar = {MainNavBar}>
<Scene key = "home" component = {HomeScreenContainer} title = "Home" initial = {true} />
</Router>
This is the code for main Root component where you define scene. You have to pass the Nav bar component in router or in any scene where you want your navbar.
And your Navbar will be something like this:
<NavigationBar
leftComponent = {<TouchableOpacity><Icon name="sidebar" /></TouchableOpacity>}
centerComponent = {<Title>{props.title}</Title>}
/>
Hope this helps :)
I couldn't figure out a way to scroll swiper when a button pressed inside a drawer.
To be exact: One component has a full screen swiper. When user clicks on hamburger button, drawer shows up with an array of swiper datasource items. I would like to navigate to clicked datasource item inside my component. Swiper already has a scrollBy function for this. I just need to know how can I possibly trigger my swiper to scroll x indexes.
I'm using Redux model in my application. I've tried to pass the reference of swiper via reducers but it just seemed wrong.
i 've a NavigationAnimatedView which rendering a ListView with pushed DetailsView.
In the NavigationHeader, on the rightComponent, i have a button and i want to display a view with NavigationCardStack from bottomToTop. How can i combine the two modes of navigation ?
Like the filters button on the F8 app on the home screen.
i don't understand how with a dispatch action (navigatePush ?) on the FiltersButton, i can't switch with a navigationCardStack to display a FilterViews from BottomToTop.
You can provide props to NavigationCard when you render it:
_renderScene(props) {
return (
<NavigationCard
style={NavigationCardStackStyleInterpolator.forVertical(props)}
...
Sorry that part isn't documented very well right now!
I am using the iDangerous Swiper plugin. I need to periodically change all the slides in an ajax method. What would be the best method to do the same.
call destroy() on Swiper
remove/replace all you slides with new ones
clear style attribute on .swiper-wrapper
initialize swiper again