🖐️♥️question posted in StackoverFlow link below stackoverflow.com/questions/61948148/react-native-swiper-in-android-screen-rotate-from-potrait-to-landscape-the-scro
I am actually implementing the profile image viewing of whatsapp in my app (when the image is viewed in the fullscreen and we can zoom in or out, we can pan etc). Though I implemented all the features (single tap, double tap to zoom, pan, pinch), but i am just stuck at calculating the boundaries. The formula which you gave is the first thing which came to my mind too as it is pretty simple but it didn't worked. So after some tries, for the x axis, i used this formulla to limit the translationX; (width / (2 * scale)) * (scale - 1) I came with this one from hit and trial (actually tried width / 4 for scale = 2 and generalised that thing). Though it works for the horisonatal boundary but how and also nothing is working for the vertical booundary (i dont want the user to pull the image down into view if it has already touched the boudary).
@@MarlonEnglemam I don't remember exactly tbh, but i think i just reduced the zoom, i didn't allowed users to zoom too much (same as whatsapp) and it was working fine.
Can you please make an instructional video that shows how to make a WhatsApp voice recording button animations(slide to lock & slide to cancel & delete)?
Great video once more. I understand that useValue and useVector are using internally the useRef for persisting the values along the lifecycle however I don't understand where should I use them instead of simply using new Value or vec.create? Since for example using panOffesetX = new Value(0) and by setting its value inside a use code block is still persisting the values between rerenders. I'm missing a point here probably.
We kind of did already: github.com/Shopify/react-native-skia/pull/1399/files#diff-136c71d770a73012e26e72cb9c93095f12b80e9410df3ea28f9aa35bfb79db76 this will be a full youtube tutorial very soon
@@wcandillon this is great, I love it. But I mean more like an image gallery with a parallax effect on swiping through images, smooth continuous paning on zoomed view, pinch and double tap to zoom. Similar to what we have in Apple Photos app. So it's more complex, but wouldn't be great if you can cover this in new video.
Awesome! Is there a specific reason why you prefer Expo over pure React Native? I find Expo to be quite limiting (no native modules) and with few upsides. Care to share? :)
I was just thinking about the name “Vector”. You use it to describe a (x, y) coordinate. Would “Coordinate” or “Point” not be a better name in stead of Vector? I think a Vector means from (x1, y1) to (x2, y2). How do you think about this?
Can anyone here suggest me a best Image compressor library for react native except "react-native-resizer".Or some efficient way to compress the image for implementing feeds in my RNproject
Hi William I am ashir from kerala India , I am stuck on this issue in react-native-swiper ,in android the screen rotate to landscape from potrait, or from potrait to landscape, the slides size is recalculate with Dimensions. Window width and height, and it resized, but the scroll position is not re rendering it shows the 1/3 of previous slide , how I solve this , thanks thanks for advance , I attach the code below import React, {useEffect, useState} from 'react'; import {View, Dimensions, StyleSheet, Text} from 'react-native'; import Swiper from 'react-native-swiper'; const styles = StyleSheet.create({ container: { flex: 1, backgroundColor: '#fff', alignItems: 'center', justifyContent: 'center', }, containerLandscape: { backgroundColor: '#000', }, box: { backgroundColor: 'red', height: 100, }, slide: { flex: 1, justifyContent: 'center', alignItems: 'center', backgroundColor: '#9DD6EB', padding: 15, }, text: { color: '#fff', fontSize: 30, fontWeight: 'bold', }, }); // const screen = Dimensions.get('screen'); const App = () => { const useScreenDimensions = () => { const [screenData, setScreenData] = useState(Dimensions.get('screen')); useEffect(() => { const onChange = result => { setScreenData(result.screen); }; Dimensions.addEventListener('change', onChange); return () => Dimensions.removeEventListener('change', onChange); }); return { ...screenData, isLandscape: screenData.width > screenData.height, }; }; const screenData = useScreenDimensions(); console.log('ghfghfghj', screenData); return (
I also had the same issue with react-native-swiper (Android to be specific ) until i decided to create my own swiper thanks to the guidance from William's videos.
My dream and my goal was to invent a visual framework with jelly-like animation, to make it visually fun, but I could never bring it to reality because I did not encourage at that level,
Move something, make it appear to disappear, effects, but physical I have never been able to do, hopefully one day you could bring something like that.
Hi William, is it possible that you could make a new repo and paste this code there, so we can simply add the repo, and use it in our code, like a npm module
@@DerkJanKarrenbeld I wish I had enough knowledge of animation & all the libraries used, to write one myself without error, there is one thing to watch and another thing to understand :)
![NLE Choppa - Or What ft. 41 (Orchestra Mix) [Official Music Video]](http://i.ytimg.com/vi/biOFASEgSOM/mqdefault.jpg)
Also video on edit photo like WhatsApp in react native plzz
🖐️♥️question posted in StackoverFlow link below
stackoverflow.com/questions/61948148/react-native-swiper-in-android-screen-rotate-from-potrait-to-landscape-the-scro
Nice! But I have 0 experience if the package you are using unfortunately :(
@@wcandillon enthanu bhai😦
@@wcandillon try , it will new experience for you
I am actually implementing the profile image viewing of whatsapp in my app (when the image is viewed in the fullscreen and we can zoom in or out, we can pan etc). Though I implemented all the features (single tap, double tap to zoom, pan, pinch), but i am just stuck at calculating the boundaries. The formula which you gave is the first thing which came to my mind too as it is pretty simple but it didn't worked. So after some tries, for the x axis, i used this formulla to limit the translationX;
(width / (2 * scale)) * (scale - 1)
I came with this one from hit and trial (actually tried width / 4 for scale = 2 and generalised that thing). Though it works for the horisonatal boundary but how and also nothing is working for the vertical booundary (i dont want the user to pull the image down into view if it has already touched the boudary).
did you ever find a way to achieve that?
@@MarlonEnglemam I don't remember exactly tbh, but i think i just reduced the zoom, i didn't allowed users to zoom too much (same as whatsapp) and it was working fine.
This channel deserves 50 million subs.❤️ He's awesome!!! Inspiring !!!
Can you please make an instructional video that shows how to make a WhatsApp voice recording button animations(slide to lock & slide to cancel & delete)?
Great video once more.
I understand that useValue and useVector are using internally the useRef for persisting the values along the lifecycle however I don't understand where should I use them instead of simply using new Value or vec.create?
Since for example using panOffesetX = new Value(0) and by setting its value inside a use code block is still persisting the values between rerenders.
I'm missing a point here probably.
And the point I'm missing is the rerender of JS thread. William your "start-react-native.dev" simply rocks!!
@William I would like to do your course but would prefer something based on reanimated v2. Do you have plans to publish a course based on that?
Yes I'm currently working on v2 videos for the course.
Count me in
Great ❤️😍
Can you post a video on making apple music interest selection ui?
Please make it in reanimated v2...thank you so much for your awsome video
sir how to set photo view once like in WhatsApp features in react native?
Can you try do google street view in react native ? Their system to create 360 IMAGE ? I'm working on it but look impossible you have idea ?
Is it possible with Skia and Reanimated 3 though? ;)
We kind of did already: github.com/Shopify/react-native-skia/pull/1399/files#diff-136c71d770a73012e26e72cb9c93095f12b80e9410df3ea28f9aa35bfb79db76
this will be a full youtube tutorial very soon
@@wcandillon this is great, I love it. But I mean more like an image gallery with a parallax effect on swiping through images, smooth continuous paning on zoomed view, pinch and double tap to zoom. Similar to what we have in Apple Photos app. So it's more complex, but wouldn't be great if you can cover this in new video.
He did it again. Awesome!!!
Awesome! Is there a specific reason why you prefer Expo over pure React Native? I find Expo to be quite limiting (no native modules) and with few upsides. Care to share? :)
So excited! Can’t wait!
Let's do it 😎
Everything is fine but there is a problem, when i put this project into a scrollview I can't scroll up or down by tap and holding to the image
I was just thinking about the name “Vector”. You use it to describe a (x, y) coordinate. Would “Coordinate” or “Point” not be a better name in stead of Vector? I think a Vector means from (x1, y1) to (x2, y2).
How do you think about this?
here the (x1, y1) is simply (0, 0) ie., origin
Can anyone here suggest me a best Image compressor library for react native except "react-native-resizer".Or some efficient way to compress the image for implementing feeds in my RNproject
Hi William I am ashir from kerala India , I am stuck on this issue in react-native-swiper ,in android the screen rotate to landscape from potrait, or from potrait to landscape, the slides size is recalculate with Dimensions. Window width and height, and it resized, but the scroll position is not re rendering it shows the 1/3 of previous slide , how I solve this , thanks thanks for advance , I attach the code below
import React, {useEffect, useState} from 'react';
import {View, Dimensions, StyleSheet, Text} from 'react-native';
import Swiper from 'react-native-swiper';
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center',
},
containerLandscape: {
backgroundColor: '#000',
},
box: {
backgroundColor: 'red',
height: 100,
},
slide: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#9DD6EB',
padding: 15,
},
text: {
color: '#fff',
fontSize: 30,
fontWeight: 'bold',
},
});
// const screen = Dimensions.get('screen');
const App = () => {
const useScreenDimensions = () => {
const [screenData, setScreenData] = useState(Dimensions.get('screen'));
useEffect(() => {
const onChange = result => {
setScreenData(result.screen);
};
Dimensions.addEventListener('change', onChange);
return () => Dimensions.removeEventListener('change', onChange);
});
return {
...screenData,
isLandscape: screenData.width > screenData.height,
};
};
const screenData = useScreenDimensions();
console.log('ghfghfghj', screenData);
return (
Page 1
Page 2
Page 3
Page 4
);
};
export default App;
Did you post your question on stackoverflow? I might be able to answer it there.
I also had the same issue with react-native-swiper (Android to be specific ) until i decided to create my own swiper thanks to the guidance from William's videos.
@@toel_ hi how to solve that
@@toel_ can you help me
@@wcandillon I will try to post this question on stack over flow
Wow great video like others please make one video for whats modal animation, I mean when we click on file icon and a wave modal animates and opens
So impressed
❤️
My dream and my goal was to invent a visual framework with jelly-like animation, to make it visually fun, but I could never bring it to reality because I did not encourage at that level,
Move something, make it appear to disappear, effects, but physical I have never been able to do, hopefully one day you could bring something like that.
Hello sir can u pls share a video on half screen modal open, when click on bottom tab icons in react native ..
Hi William, is it possible that you could make a new repo and paste this code there, so we can simply add the repo, and use it in our code, like a npm module
And then he has to support it.
If you follow along, you can create this yourself. William literally spells it out for ya :)
@@DerkJanKarrenbeld I wish I had enough knowledge of animation & all the libraries used, to write one myself without error, there is one thing to watch and another thing to understand :)
@@sanjeevakaalex William had this in a repository on GitHub! Perhaps that will help?
Sir pleas help me i have already upload data(videos) on firebase but i don't know how to fetch videos into my app . Videos from firebase to app
The UX looks nice, however, the spaghetti that got cooked up in the process isn't...
William William William Please make a video on how to make whats app stories feature along with progress bar. I will be waiting for that man
Je l’aime à mourir, omg
Next video don't using library challenge 😂