wcandillon / can-it-be-done-in-react-native

⚛️ 📺 Projects from the “Can it be done in React Native?” YouTube series
https://www.youtube.com/wcandillon
MIT License
4.05k stars 1.3k forks source link

Instagram stories various problems #14

Open Angelk90 opened 5 years ago

Angelk90 commented 5 years ago

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.

wcandillon commented 5 years ago

@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 :(

hirbod commented 5 years ago

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 commented 5 years ago

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

Angelk90 commented 5 years ago

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

numandev1 commented 5 years ago

@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 commented 5 years ago

I have fixed thanks

wcandillon commented 5 years ago

@nomi9995 how did you fix it?

numandev1 commented 5 years ago

@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

Angelk90 commented 5 years ago

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

numandev1 commented 5 years ago

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

smooJitter commented 5 years ago

@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.

hirbod commented 4 years ago

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