Issue related to horizontal scroll in react-native-snap-carousel - react-native-snap-carousel

I am using carousel from react-native-snap-carousel module to scroll images horizontally from remote urls. it is working fine in android but in case of iOS sometimes the image is getting scrolled, most of the times not.
It is detecting my slide action but the image is not getting scrolled.
I have tried on iOS 13.1.3, react-native 0.59.8, react-native-snap-carousel 3.8.2
Following code is for Carousel
<Carousel
borderTopRightRadius={2}
borderTopLeftRadius={2}
ref={c => (this._ref = c)}
data={images}
renderItem={item => this.renderItem(item)}
onSnapToItem={index => {
this.setState({ currentImage: index });
onSliderMove(index);
}}
layout={"default"}
sliderWidth={parentWidth || width}
itemWidth={parentWidth || width}
loop={circleLoop || false}
contentContainerCustomStyle={{}}
scrollEnabled={scrollable}
onStartShouldSetResponderCapture={() => {
return scrollable;
}}
onMoveShouldSetResponderCapture={() => {
return scrollable;
}}
layoutCardOffset={20}
/>
I am using a custom component to load an image.
renderItem = ({ item, index }) => {
return (
<View style={{ width, height }}>
<LoadableImage
url={item}
index={index}
/>
</View>
)
}
Expected results: Horizontal scrolling should work on iOS smoothly.
Actual results: Horizontal scrolling is not working most of the time.
Help me solve this issue

I was also facing an issue in scroll with this carousel. I looked into the library and tried the below attributes. You can try after adding the given attributes, they make the scroll smooth. I am not facing any issue after using the below attributes.
Try the last two attributes.
<Carousel
ref={isCarousel}
data={options}
renderItem={renderItem}
sliderWidth={SLIDER_WIDTH}
itemWidth={itemWidth || ITEM_WIDTH}
useScrollView
activeSlideAlignment="start"
inactiveSlideScale={1}
inactiveSlideOpacity={1}
onSnapToItem={(index) => {console.log(index); setIndex(index)}}
*enableMomentum={true}
decelerationRate={0.9}*
/>

Related

Testing new element shown when user scrolls (onWheel) RTL

Was trying to perform a unit test where if a user scrolls on a specific container, new information is shown as seen in the code below.
test("'Confirm Design Templates' info shown after user scrolls", () => {
render(
<BrowserRouter>
<UpgradeJourneyOverview />
</BrowserRouter>
);
const scrollWrapper = screen.getByTestId("overviewWrapper");
fireEvent.wheel(scrollWrapper, {
deltaY: 30,
});
const designTemplatesHeading = screen.getByRole("heading", {
name: /Confirm Design Templates/i,
});
expect(designTemplatesHeading).toBeTruthy();
});
This does not seem to work as the new header 'designTemplatesHeading' is not being read.Wheel event has to be used instead of scroll as my page cannot have a vertical scroll bar. Any suggestions will be much appreciated.

Material-ui collapse with horizontal orientation does not work like expected

i am building an app targeted to tablet devices,
basically the main layout is :
Where the central area have three columns: navigation, header list, items details.
I want to give the user the possibility to horizontal collapse the header list
so then items details will expand.
Setting the prop orientation={'horizontal'}, it dont change the behaviour and keep collapsing in vertical.
Desired:
Reality:
Reading the code
https://github.com/mui-org/material-ui/blob/cce45deec3125c1f0dd6c1c74616b5e63b027026/packages/material-ui/src/Collapse/Collapse.js
Show that orientation can be horizontal:
orientation: PropTypes.oneOf(['horizontal', 'vertical']),
Even there is a collapsedHeight, but not a collapsedWidth
function CollapsePanel(props) {
const [collapsed, setCollapse] = React.useState(true);//
//orientation: PropTypes.oneOf(['horizontal', 'vertical']),
return (
<Collapse in={collapsed} collapsedHeight={0} orientation={'horizontal'} >
<div style={{border:'5px solid blue',
display:"flex",flexDirection: "column", alignItems:"center",
minWidth:'180px', alignItems:"stretch", height:'calc(100vh - 40px)',}} >
<IconButton onClick={ ()=>setCollapse(!collapsed)}><ChevronLeftIcon/> Collapse</IconButton>
<div style={{display:"flex",flexDirection: "column", alignItems:"center", justifyContent: "space-around", flexGrow:'1', }} >
Headers List
</div>
</div>
</Collapse>
)
};
The package version is:
npm list --depth=0
#material-ui/core#4.11.3
What am i doing wrong?
4.11.3 doesn't have the orientation prop:
https://github.com/mui-org/material-ui/blob/v4.11.3/packages/material-ui/src/Collapse/Collapse.js
The link in your question points to the v5-alpha branch where orientation was added.

svelte-tiny-virtual-list + svelte-infinite-loading crashing on page load

I have used svelte-infinite-loading, and it worked fine at first,
but as the list got very long, my web app started using substantial amounts of memory, using as much as 2gb.
So, I needed to virtualize this infinite list.
I used svelte-tiny-virtual-list as recommended by svelte-infinite-loading's author:
<script>
....
function onInfinite({ detail }) {
const skip = items !== undefined ? items.length : 0;
fetchItems(skip).then((data) => {
if (data.length === 0) {
items = [];
detail.complete();
return;
}
if (items === undefined) items = data;
else items = [...items, ...data];
detail.loaded();
});
}
onMount(() => {
fetchItems(0).then((data) => {
Items = data;
});
});
</script>
{#if items !== undefined}
{#if items.length === 0}
<p><i>No items found</i></p>
{:else}
<VirtualList
itemCount={items.length}
itemSize={200}
height="100%">
<div slot="item" let:index>
<Item
item={items[index]} />
</div>
<div slot="footer">
<InfiniteLoading on:infinite={onInfinite} />
</div>
</VirtualList>
{/if}
{/if}
The problem comes when the page loads:
The first few items are fetched and displayed correctly, but then the page grows to abnormal lengths, then the list disappears and I get the following error:
InfiniteLoading.svelte:103 executed the callback function more than 10 times for a short time, it looks like searched a wrong scroll wrapper that doest not has fixed height or maximum height, please check it.
What have I done wrong?
A VirtualList creates items until the height of the list exceed the height of the parent. It then fakes a scrollbar to select which items it should render.
Apparently, you have placed the VirtualList in a container without height/max-height and it can't determine how many items it should create.
You have to set a max-height or a height on the parent element.

Unable to find a way to customize the spinner and clearButton in asyncTypeHead in react-bootstrap-typehead <AsyncTypehead>

Spinner refers to the spinner that appears on the input on the right corner when isLoading = {true}.
clearButton refers to the clearButton to clear data in input box.
You can customize those items by passing your own components via the typeahead's child render prop:
<Typeahead ... >
{({ onClear, selected }) => (
<div className="rbt-aux">
{!!selected.length && <MyClearButton onClick={onClear} />}
{!selected.length && isLoading && <MySpinner />}
</div>
)}
</Typeahead>
Working example: https://codesandbox.io/s/rbt-custom-aux-components-gn3kn
Note that the .rbt-aux classname is used internally to position the built-in clear button and loader components and can be re-used. You may also add your own styles to position the custom components however you want.

Delay on the capture of an image with React Native Camera / Expo Camera, set 'processing message'?

I have a huge delay in my app from when a user takes a photo to when android processes the image.
The issue of delay in Expo with android camera has been answered here: Delay on the capture of an image - React Native Camera / Expo Camera.
I am trying to see if, as well as see skipProcessing on takePictureAsync, is there a way to set a callback for on processing? I would like to let the user know something is happening, or they may try to take another photo (the camera stays open until the image has been processed, which is not ideal).
Here is my code:
export default class CameraComponent extends Component{
constructor(props) {
super(props)
}
render() {
<Camera
ref={(ref) => {
this.camera = ref;
}}
type={Camera.Constants.Type.back}
>
<TouchableOpacity
onPress={this.takePicture}
>
<View>
<FontAwesome
name="camera"
/>
</View>
</TouchableOpacity>
</Camera>;
}
takePicture = async () => {
const photo = await this.camera.takePictureAsync({
skipProcessing: true,
});
this.props.navigation.navigate("CameraConfirm", {
img_url: photo.img_url,
img_base64: photo.img_base64,
});
}
}
I can't see anything in the docs, is there maybe a way around in React Native? I tried setting state, but that still happens after takePictureAsync so has no effect.
I found one workaround which uses camera2API and onPictureSaved. The docs say there could be issues with camera2API, although I did not see anything weird going on (as yet).
The code now looks like this:
export default class CameraComponent extends Component{
constructor(props) {
super(props)
this.state = {
is_photo_taken: false,
};
}
render() {
<Camera
ref={(ref) => {
this.camera = ref;
}}
type={Camera.Constants.Type.back}
// add styling to show/hide camera:
style={{
display: this.state.is_photo_taken ? "none" : null,
}}
useCamera2Api={true} // add this line
>
<TouchableOpacity
onPress={this.takePicture}
>
<View>
<FontAwesome
name="camera"
/>
</View>
</TouchableOpacity>
</Camera>;
// add loading element with conditional show/hide:
<Text
style={{
display: !this.state.is_photo_taken ? "none" : null,
}}
>
Loading image...
</Text>
}
takePicture = async () => {
const photo = await this.camera.takePictureAsync({
onPictureSaved: this.setState({ is_photo_taken: true }), // add this line
// remove skipProcessing
});
this.props.navigation.navigate("CameraConfirm", {
img_url: photo.img_url,
img_base64: photo.img_base64,
});
}
}
Also, since onPictureSaved is now being used, it means that skipProcesssing can now be omitted, if not needed.
I used show/hide instead of ternaries or && around the entire block to avoid losing the camera element from the page. If the camera element were to be lost as soon as a photo was taken, then it could not continue and process the image.
I hope this helps someone.