can-it-be-done-in-react-native icon indicating copy to clipboard operation
can-it-be-done-in-react-native copied to clipboard

Published 20 hours ago • verified publisher icon wcandillon

Instagram stories various problems

Open Angelk90 opened this issue 5 years ago • 12 comments

Hi @wcandillon , I was testing your project, but I'm having some problems.

I'm trying it on snack.expo.io, here is the link: https://snack.expo.io/SJls1_mk94

  1. A first error I get is: import Story, {type StoryModel} from './Story'; It seems like it's not going well.

  2. On android it doesn't seem to work well the cube transaction, which seems to work on ios. The problems are that between one story and another there seems to be some space, so the two stories are not adjacent. During the cube transaction, instead of expanding the image especially in the right part, it would be better if it retracts as I believe the original version does.

Let me know what you think.

Angelk90 avatar Apr 13 '19 09:04 Angelk90

@Angelk90 Thanks for looking into it :) Unfortunately, the example is built with flow, maybe this is why it doesn't work so well on Snack.

Regarding the perspective issue that you are mentioning, I filed a bug at https://github.com/facebook/react-native/issues/22280. It's really a thought issue :(

wcandillon avatar Apr 13 '19 19:04 wcandillon

The issue does not exist on "Stories3" which is build with "react-native-reanimated" but sadly, the performance of react-native-animated is ~2 times slower on my iPhone XS then the "Stories2". I don't know why, as reanimated should be (in theory) much quicker - but it isnt. But the weird cube transform is gone with reanimated on android. I will make a condition and use reanmiated on android I guess.

@wcandillon do you have any clue why the animation isn't quite as smooth (on real device, tested with and without production)? Animated is muuuuch smoother then reanimated, even though perf monitor shows 60 fps for both. But the reanimated example feels like 40 fps (specially when it comes to deceleration and easing out)

hirbod avatar May 13 '19 18:05 hirbod

Stories2 uses "setNativeProps" while Stories3 manipulates "style" directly. This is where the performance loss is coming from I guess.

hirbod avatar May 13 '19 19:05 hirbod

@Hirbod : Could you post a video / gif to see what happens? Both on android and on ios. What are you using on android exactly?

Angelk90 avatar May 15 '19 08:05 Angelk90

@wcandillon by this code, I am using screens instead of images I added pointerEvents to story ScrollView for enabling touches but screens have own horizontal scroll that is not touchable now. have you any solution?

numandev1 avatar May 17 '19 01:05 numandev1

I have fixed thanks

numandev1 avatar May 17 '19 02:05 numandev1

@nomi9995 how did you fix it?

wcandillon avatar May 17 '19 05:05 wcandillon

@wcandillon here is a different scenario. I am not using scrollview with touch. I am using scrollTo. for insta story animation. pointEvents="none" to scrollview pointEvents="box-none" to other story parent view

numandev1 avatar May 17 '19 06:05 numandev1

@nomi9995 : Can you post a screen of what you did?

Angelk90 avatar May 17 '19 07:05 Angelk90

@Angelk90 sorry, I have not permission to see any design of the app.

numandev1 avatar May 19 '19 15:05 numandev1

@nomi9995, how about the Chang’s to the code? I have precisely the same useCase but I don’t know much about points and scroll to.

Essentially I’d like to use components instead of images and I only want the rotation to happen when I attempt change it by swiping the bottom edge.

smooJitter avatar Jun 04 '19 01:06 smooJitter

I found out that setting pagingEnabled=(true} finally works as desired, so its better then "snapToInterval". And it does not "overscroll" anymore, it goes one slide by one slide

hirbod avatar Nov 21 '19 22:11 hirbod