I want to show one card at a time on screen in mobile when swipe on screen then get next card I implement it using react Swappable Views but with this I am only able to swipe in left -right I want to get new card when I swipe up-down for reference I like something (https://inshorts.com/m).Open the site in mobile. Please Help me to show card somthing like this
Thanks in Advance
First need to install "react swipeable view" using command
npm i react-swipeable-views
then use the code
`<SwipeableViews
index={0}
containerStyle={{ height: 100%}}
axis="y" resistance>
// your content with each content full height
</SwipeableViews>`
Related
In react native, devices with virtual navigation keys do not have any problems, while on phones with manual keys (e.g. Samsung A5,) the background and components are behind the bottom bar. When I give flex:1 or height:heightPercentageToDP(100) to my View, I have the same problem. how can i solve it? I'll be happy if you can help me.
i want to components and background start from the top of the bottom bar
You should add your code so it's easier to help you, or even an example screenshot to show your issue... but I will try to answer.
React Native has the Dimensions API which you can import in with your Views and Texts like so:
import { View, Text, Dimensions } from "react-native";
If you grab the height like this: const deviceHeight = Dimensions.get("window").height; using window as the param will give you the height excluding the bar you mentioned. Using screen there would provide the entire height.
You could use the windows Dimension to calculate any margin or padding you might need based on your use case.
I am using React Native with Expo and i am attempting to use Gorhom's Bottom Sheet component to display a bottom sheet when a user clicks on a button. Everything works fine except the bottom sheet insists to always pop up on screen mount, which is obviously bad, it should only pop up when user clicks on a trigger like a button.
Here's my component:
import BottomSheet, { BottomSheetScrollView } from '#gorhom/bottom-sheet'
<BottomSheet
ref={sheetRef}
enableOverDrag
handleIndicatorStyle={styles.handleIndicator}
snapPoints={snapPoints}
enablePanDownToClose
>
<BottomSheetScrollView>
{children}
</BottomSheetScrollView>
</BottomSheet>
I've tried to toggle a display none/flex but that makes the popup not smooth and very sudden:
containerStyle={[styles.container, {display: showSheet ? 'flex' : 'none'}]}
I've went through the entire docs twice but found nothing that can help me.
If the expected behavior is to only show the bottom sheet when the user clicks a button, then it's looking more like a modal. There's the BottomSheetModal wrapper/decorator for that.
Instead of importing BottomSheet, import BottomSheetModal. Then get its reference and call the methods bottomSheetRef.current.present() and bottomSheetRef.current.close(). Doing it this way, all the show/hide up/down animations will work right off the bet.
Take a look at the documentation for a full example.
I want to create slider in carousel in react native like the example image below
I want three View to be displayed on each slide And the middle slide is bigger than another and show my Text in the middle slide
Does anyone have a solution for creating this slider with FlatList?
enter image description here
It seems you can use https://github.com/meliorence/react-native-snap-carousel for the carousel view.
I am using React with ant design. I am trying to create a page with a list of cards. In each card, there is an image carousel. I would like that when the user clicks on and image, the preview opens and they can swipe (or click on the arrows) to see all the images as a big, fullscreen preview.
I tried this:
<Image.PreviewGroup>
<Carousel autoplay>
{this.images.map(
(image: string, index: number) => {
return <Image key={index} src={image} preview={{ getContainer: '#root' }} />;
}
)}
</Carousel>
</Image.PreviewGroup>
But what happens here is that when the preview is opened, instead of showing 5 images, it is showing 11 (the images are shown twice, one of the images is shown 3 times).
If I place <Image.PreviewGroup> inside the <Carousel>, then instead of having an image carousel, I have multiple images stacked under each other.
How can I get it to show a clickable carousel, which when clicked, opens a fullscreen preview with the correct number of images that can be seen by swiping/clicking on arrows?
Thanks in advance.
just got into same issue and solved it. for the code structure, the first one you tried was fine
MAIN PROBLEM:
the main issue is on the carousel, which is using slick lib. if you inspect your page, you will find that inside the carousel wrapper tag, it generates 2-3 images for each <img> we declare in our code. so automatically, the Image.PreviewGroup that wraps the carousel, will detect more <img> than it should have
SOLUTION:
add infinite={false} props to your carousel component. for more detail , please refer to slick docs
I am writing a Single Web App with material ui, that needs to be responsive, but I do not know which is the control where I must allocate the mains component, if it is a grid or a box.
The next image show the main components arrangement in md,lg,xl
The next image show the main components arrangement in sm,xs when width < 960
In the web I found many complex and very difficult to understand layouts, but not find a basic example. Some like "material ui responsive for dummies".
The mobile version, will have a breakpage between the Appbar and Sidenav, both will occupy the full height, and the Map in the second page will fill the screen.
I did it for you with MU Grids and media queries, if you have questions, ask. I am always ready to help. This is codesandbox link. Let me know if it help you.
https://codesandbox.io/s/charming-shirley-oq6l5
Show my codesandbox answering your problem : https://codesandbox.io/s/amazing-sound-1nj87
It display your layout for md lg xl correctly. For xs and sm screens, sidenav & map take full height with a break page between sidenav and appBar
Thanks to both, it solved the main part o what i need.
Also need to implement a change of page.
I forget to mention that the map will be React-Leaflet,
so need to implement a flap button over the map for the mobile version.
The button is for scroll to up, because any finger movement in the map area only will affect the map content.
Do not will have effect in the scroll.
Another thing to implement is the break page concept:
The behaviour of the break page is like when you see a pdf in presentation mode and press
the keyboard button Repag - Avpag, it change all the content and never see the half top and the half down.
Grettings