🔵 Custom Navigation Transition | Card Transition Animation | React-Navigation v6/5

[Music] hello guys today i'm gonna show you how to change stack navigation transition let's get start first of all download all the required dependencies then go to the app.js file and remove unusable stuff configure react navigation and stack navigation [Music] then create some screens [Music] [Music] so [Music] now add them into the stack navigator [Music] [Applause] let's go ahead and run that [Music] [Music] [Music] create home screen through which we can navigate to other screen [Music] [Music] [Music] this screen use default navigation transition [Music] [Applause] [Music] we can change stack navigator transition from screen options inside the screen option first we add gesture enable to true by this we can swipe the current screen horizontally and vertically and go back to the previous screen [Music] create config for opening and closing the screen [Music] [Music] so [Music] [Music] [Music] this screen option work for all the screen which present in the stack navigator now add transition specs in that add open and close config [Music] create close conflict [Music] [Music] [Applause] [Music] now add card style interpolators import card style interpreter from stack navigation for horizontal ios from card style interpolators [Music] you can see by default gesture direction is vertical you can change it to horizontal by adding guest direction horizontal this is official drop for react navigation you can check out and read other options there are some more pre-made card style interpolators you can try other card style interpreter also let's try some other card style interpolators [Music] [Music] [Music] you can change header mode it has three type of header modes none load and screen [Music] so now we will create custom transition [Music] [Applause] [Music] do [Music] we've transformed the card style [Music] translate the x-axis from screen width to zero [Music] then rotate it from 180 degree to 0. then scale the screen we shift current screen we wrote that current screen scale next screen now apply this custom transition to screen options and connect other stuff [Music] [Applause] now we will apply different transition to different screen by adding options on his tag screen tag [Music] [Music] [Music] let's go ahead and test the app now you can see each screen has different transition [Music] you can check out the source code get the link from description thanks for watching

Channel: Vishal Pawar

Views: 24,278

Keywords: React native, navigation, animation, transition, stack, mobile, screen, how to, v5.x, react-navigation, react navigation, app, ios, android, custom, interpolate, rotate, scale, card style, card, navigator, nav, stack navigator, cardstyleinterpolator, card animation, cardstyle, different, header mode, screen options, options, navigation container, screen switch, switch between screens, create, create navigation, customize, component, custom component, react component, animated, beginner, expo

Id: Opu3nfusnMo

Length: 15min 3sec (903 seconds)

Published: Mon Apr 26 2021