I use react-native-snap-carousel and I want to have this style:
but in android z-index cannot be animated.
What should I do?
Related
I have a Flatlist with Vertical Scrolling and inside each item of the Flatlist I have a SwipeListView from react-native-swipe-list-view.
Whenever I Swipe horizontally inside the SwipeListView, it gets cancelled if i also start scrolling vertically and then it starts vertically scrolling the Flatlist. I tried using useState to manage the scrollEnabled but this only works when the User slowly slides inside the SwipeListView. With increased velocity there are messed up animations. Also i feel like there must be a cleaner way of achieving this. Anyone know a way to basically disable FlatList scroll while scrolling inside of child component?
For starters, replace react-native-swipe-list-view with the swipable component that react native gesture handler exports. This is far more performant as it uses the UI thread to perform all animations. You can then import Flatlist as well from react-native-gesture-handler.
Generally, things should work as is. But if there is any glitchy behaviour you can wrap flatlist with a gestureHandlerRootView and pass RNGH ScrollView to the flatlist renderScrollComponent.
import Swipeable from 'react-native-gesture-handler/Swipeable';
import {Flatlist} from 'react-native-gesture-handler'
import {
GestureHandlerRootView,
PanGestureHandler,
ScrollView,
} from 'react-native-gesture-handler';
export default function App(){
<GestureHandlerRootView>
<Flatlist renderItem={<Swipeable />}
renderScrollComponent={ScrollView}/>
</GestureHandlerRootView>
}
You can try implementing the swipeableRow which can be used to disable scrolling in flatlist.
disableScroll() {
this.list.getScrollResponder().setNativeProps({
scrollEnabled: false
})
}
enableScroll() {
this.list.getScrollResponder().setNativeProps({
scrollEnabled: true
})
}
Then in your place of your swipeable component, add this:
<SwipeableRow onSwipeStart={disableScroll} onSwipeEnd={enableScroll} />
Also you can try adding this to the FlatList
scrollEnabled={false}
I am using Bottom Tab of react navigation and I am using borderWidth:1 and elevation:0 in tabBarStyle property of Tab.Navigator. How can I make top border visible?
I'm using a SnackBar from React Native Paper that is displayed at the bottom of my app:
But I want to display this snackbar at the top of the screen. I tried to do it using styled components:
export const ConfirmSnack = styled(Snackbar)`
top: 0;
`;
But that does not do the trick, even when adding position: absolute; I've read the docs but can't find anything on positioning the snackbar. How can I show this snackbar at the top of the screen?
Here's what worked for me.
<Snackbar wrapperStyle={{ top: 0 }} visible={true}>Casis added to basket</Snackbar>
wrapperStyle
Style for the wrapper of the snackbar
Here's expo link which would toggle the vertical alignment
Link to [documentation] of React Native Paper Snackbar (https://callstack.github.io/react-native-paper/snackbar.html#wrapperStyle)
I have a materialTopTabNavigator in my app and one of the screens needs to have the swiping between tabs gesture enabled on only part of the screen (for example, from the bottom of the screen to 200 from bottom). I think I should be able to do this with gestureHandlerProps prop of the materialTopTabNavigator, but it doesn't seem to work. This prop allows you to pass props to the underlying PanGestureHandler. Here is what I am passing as gestureHandlerProps and the link to the PanGestureHandler docs:
gestureHandlerProps={{
maxPointers:1,
failOffsetY:height-200,
hitSlop: {left:0, right:0, top:0, bottom:200}
}}
//height is height of screen
Link to PanGestureHandler Docs: https://docs.swmansion.com/react-native-gesture-handler/docs/handler-pan
I figured out how to do this using the common handler props listed in the react-native-gesture-handler docs. I used the hitSlop prop and passed it an object with height and top properties as follows. This was passed to my material top tabs navigator gestureHandlerProps prop.
gestureHandlerProps={{
maxPointers: 1,
hitSlop: {height: 100, top: 0}
}}
This allows the underlying PanGestureHandler of the material top tabs navigator to only be activated from 100 points from the bottom of the screen.
Link to common handler props: https://docs.swmansion.com/react-native-gesture-handler/docs/handler-common
I just upgraded Bootstrap from 2.x to 3.x and found that modal dialog(http://getbootstrap.com/javascript/#modals) do not have vertical scroll bar anymore for large content body. How to set modal body max height and enable scroll bar?
You can set a height and enable the scrollbar using:
#myModal .modal-content
{
height:200px;
overflow:auto;
}
If you don't want the scroll bar on the entire modal, use modal-body instead:
#myModal .modal-body
{
height:200px;
overflow:auto;
}
Demo: http://bootply.com/88983