Comments (8)
I have found a workaround for this, to add content story with image like this:
const stories = [
'/images/0.jpeg',
'/images/1.jpeg'
].map(story => ({
content: () => (
<img src={story} style={{width: 'auto', maxWidth: '100%', maxHeight: '100%', margin: 'auto'}}/>
)
}));
from react-insta-stories.
in my case even in desktop its not working
from react-insta-stories.
How to solve this?
from react-insta-stories.
Hey, can you please add your component code here? I'll need to replicate it. Also @mjchamoures as you mentioned that the order of declaring the props might be an issue here, I don't believe that's the case as React components accept props irrespective of the order.
from react-insta-stories.
Hey, any update on this?
This is happening for me using the default example code, especially when viewing on mobile web. In particular, I've noticed that this happens always consistently for the images, but the videos work fine.
Thanks!
from react-insta-stories.
+1
from react-insta-stories.
Simple usage:
import './App.css';
import React from 'react';
import Stories from 'react-insta-stories';
const stories = [
'/images/0.jpeg',
'/images/1.jpeg',
'/images/2.jpeg',
'/images/3.jpeg',
'/images/4.jpeg',
'/images/5.jpeg',
'/images/6.jpeg',
'/images/7.jpeg',
'/images/8.jpeg',
'/images/9.jpeg',
'/images/10.jpeg',
'/images/11.jpeg',
'/images/12.jpeg',
'/images/13.jpeg',
'/images/14.jpeg',
'/images/15.jpeg',
'/images/16.jpeg',
'/images/17.jpeg',
'/images/18.jpeg',
];
function App() {
const { innerWidth: width, innerHeight: height } = window;
return (
<Stories
stories={stories}
defaultInterval={3500}
width={width}
height={height}
/>
);
}
export default App;
from react-insta-stories.
Hello all! Have included an internal change that should fix this issue. Thanks for making note of this! You may have a look at the PR here: #80
If using custom content, you will have to make a small change after updating to the newer version as mentioned in the 'Breaking' section of the description.
from react-insta-stories.
Related Issues (20)
- Feature Request: Access to currentIndex from within onNext and onPrevious callbacks
- Shows Loading Spinner Constantly HOT 6
- Is the project abandoned? HOT 4
- drag to left or right for load new stoies object
- Not able to Mute the Video File
- Is Paused prop not working HOT 3
- Videos do not load/play on safari
- Warning: ReactInstaStories: Support for defaultProps will be removed HOT 1
- Support HLS format
- Typings for `width` and `height` props HOT 2
- Storystyles not working
- IOS: after a pause the next story is played HOT 1
- how can i pass the content to the video, like for images we use content prop?
- I got some doubts about the project
- Progress style not rounded properly on early time HOT 2
- the video doesn't work is i give youtube link as source
- Video doesn't work on IOS, never loads HOT 1
- ios device design issue on first time video story load
- react-insta-stories support for Arabic directional styling
- Change "hitbox" of the tap to go forward/back HOT 2
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from react-insta-stories.