https://www.svgator.com/component---src-pages-create-react-native-animation-js-619b267a22167eeff40c.js

1(self.webpackChunkwww_svgator=self.webpackChunkwww_svgator||[]).push([[8168],{227:function(e,t,a){"use strict";a.d(t,{A:function(){return s}});var n=a(6540),i="cS_q",o=a(2505),r=a(6942),l=a.n(r);function s(e){let t=e.alt,a=e.src,r=e.className;return n.createElement(o.A,{alt:t,className:l()(i,r),size:[218,450],skipLazy:!0,src:a})}},1691:function(e,t,a){var n=a(6540);function i(e){return e={width:"587",height:"409",viewBox:"0 0 587 409",...e},n.createElement("svg",e,[n.createElement("g",{fill:"#3D5376",key:0},[n.createElement("path",{d:"M524.08 350.868C520.857 345.886 522.127 339.146 527.304 335.727C537.071 329.378 543.714 322.345 545.179 311.894C532.09 311.698 521.638 302.321 521.638 289.232C521.638 273.31 536.778 265.008 550.356 268.329C557.193 269.989 568.719 276.338 569.501 297.73C570.282 320.001 560.026 340.611 539.318 354.091C534.239 357.314 527.401 356.045 524.08 350.868Z",key:0}),n.createElement("path",{d:"M460.003 350.868C456.779 345.886 458.049 339.146 463.226 335.727C472.994 329.378 479.636 322.345 481.101 311.894C468.012 311.698 457.561 302.321 457.561 289.232C457.561 273.31 472.701 265.008 486.278 268.329C493.116 269.989 504.642 276.338 505.423 297.73C506.205 320.001 495.948 340.611 475.24 354.091C470.161 357.314 463.324 356.045 460.003 350.868Z",key:1}),n.createElement("path",{d:"M53.4623 4.98579C56.6857 9.96742 55.4159 16.7073 50.2389 20.126C40.471 26.4752 33.8288 33.5081 32.3636 43.9597C45.4526 44.1551 55.9043 53.5323 55.9043 66.6213C55.9043 82.543 40.764 90.8457 27.1866 87.5246C20.3491 85.8641 8.82295 79.5149 8.04152 58.1232C7.26009 35.8524 17.5164 15.2421 38.2244 1.76238C43.206 -1.46103 50.0435 -0.191204 53.4623 4.98579Z",key:2}),n.createElement("path",{d:"M117.54 4.98579C120.763 9.96742 119.494 16.7073 114.317 20.126C104.549 26.4752 97.9064 33.5081 96.4412 43.9597C109.53 44.1551 119.982 53.5323 119.982 66.6213C119.982 82.543 104.842 90.8457 91.2643 87.5246C84.4267 85.8641 72.9006 79.5149 72.1192 58.1232C71.3377 35.8524 81.594 15.2421 102.302 1.76238C107.284 -1.46103 114.121 -0.191204 117.54 4.98579Z",key:3})]),n.createElement("g",{stroke:"#3D5376",strokeWidth:"17.2012",strokeMiterlimit:"10",strokeLinecap:"round",strokeLinejoin:"round",fill:"none",key:1},[n.createElement("path",{d:"M142.936 29.7959H490.869C538.732 29.7959 577.608 68.1838 577.608 115.656V252.113",key:0}),n.createElement("path",{d:"M430.992 334.849H262.3L162.375 400.001L163.156 334.849H96.0505C48.1878 334.849 9.31152 296.461 9.31152 248.989V115.657",key:1})])])}e.exports=i,i.default=i},4053:function(e,t,a){"use strict";a.d(t,{A:function(){return C}});var n=a(6540),i="bB_hV",o="bB_hT",r="bB_hW",l="bB_hX",s="bB_hS",c="bB_cj",m="bB_hY",u=a(6942),d=a.n(u);function C(e){let t=e.className,a=e.shadow,u=e.children,C=e.style,p=e.reverse;if(t=[s,t],a&&t.push(m),p&&t.push(c),u.length<4)return"object"==typeof console&&console.error("GridFold should have at least 4 children"),null;const y=u.slice(4);return n.createElement("div",{className:d()(t),style:C},n.createElement("div",{className:i},u[0]),n.createElement("div",{className:o},u[1]),n.createElement("div",{className:r},u[2]),n.createElement("div",{className:l},u[3]),y)}},4187:function(e,t,a){var n=a(6540);function i(e){return e={width:"152",height:"203",viewBox:"0 0 152 203",fill:"none",...e},n.createElement("svg",e,[n.createElement("defs",{key:0},n.createElement("linearGradient",{id:"paint0_linear_739_3414",x1:"152",y1:"202.667",x2:"6.19041e-06",y2:"-4.6428e-06",gradientUnits:"userSpaceOnUse"},[n.createElement("stop",{stopColor:"#027CAF",key:0}),n.createElement("stop",{offset:"1",stopColor:"#84E4FF",key:1})])),n.createElement("path",{d:"M25.3333 0H90.8399C97.5587 0 104.002 2.66903 108.753 7.41995L144.58 43.2467C149.331 47.9976 152 54.4413 152 61.1601V177.333C152 191.325 140.658 202.667 126.667 202.667H25.3333C11.3421 202.667 0 191.325 0 177.333V25.3333C0 11.3421 11.3421 0 25.3333 0Z",fill:"url(#paint0_linear_739_3414)",key:1}),n.createElement("path",{d:"M76.0571 111.171C81.1854 111.171 85.3426 107.103 85.3426 102.086C85.3426 97.0679 81.1854 93.0002 76.0571 93.0002C70.9288 93.0002 66.7715 97.0679 66.7715 102.086C66.7715 107.103 70.9288 111.171 76.0571 111.171Z",fill:"white",key:2}),n.createElement("path",{d:"M111.085 86.8419C109.464 86.2322 107.782 85.6834 106.037 85.1956C106.473 83.4273 106.785 81.7199 107.096 80.0736C108.716 69.5857 106.722 62.1466 101.425 59.1588C96.1279 56.171 88.5249 58.1832 80.0495 64.8296C78.7408 65.8662 77.3697 67.0247 76.061 68.2442C74.7523 67.0247 73.3813 65.8662 72.0726 64.8296C63.5971 58.1832 55.9942 56.171 50.697 59.1588C45.3999 62.1466 43.4056 69.5857 45.0259 80.0736C45.2752 81.7199 45.6491 83.4273 46.0854 85.1956C44.3404 85.6834 42.6578 86.2931 41.0375 86.9029C30.8794 90.7444 25.333 96.1713 25.333 102.147C25.333 108.123 30.9417 113.549 41.0375 117.391C42.6578 118.001 44.3404 118.549 46.0854 119.098C45.6491 120.867 45.3375 122.574 45.0259 124.22C43.4056 134.708 45.3999 142.147 50.697 145.135C52.3173 146.05 54.1246 146.476 56.0565 146.476C60.6058 146.476 66.0899 144.098 72.0103 139.464C73.319 138.428 74.69 137.269 75.9987 136.05C77.3074 137.269 78.6784 138.428 79.9872 139.464C85.9075 144.098 91.3916 146.476 95.9409 146.476C97.9352 146.476 99.7424 146.05 101.3 145.135C106.598 142.147 108.592 134.708 106.971 124.22C106.722 122.574 106.348 120.867 105.912 119.098C107.657 118.61 109.34 118.001 110.96 117.452C121.118 113.61 126.664 108.184 126.664 102.208C126.789 96.1103 121.18 90.7444 111.085 86.8419ZM83.1654 68.6101C88.151 64.7076 92.638 62.6344 96.0033 62.6344C97.125 62.6344 98.1221 62.8783 98.9946 63.3661C102.36 65.2564 103.544 71.1101 102.235 79.4028C101.986 80.8663 101.674 82.4516 101.3 83.976C97.1873 83.0614 92.7003 82.3297 88.0264 81.9029C85.2843 78.1833 82.4799 74.7687 79.5509 71.7199C80.735 70.5613 81.9191 69.5247 83.1654 68.6101ZM90.2075 110.135C88.5872 112.8

118 86.9669 115.379 85.2843 117.757C82.293 118.001 79.177 118.123 76.061 118.123C72.8827 118.123 69.7668 118.001 66.8377 117.757C65.1551 115.318 63.4725 112.757 61.9145 110.135C60.3565 107.452 58.9232 104.83 57.6145 102.147C58.9232 99.464 60.3565 96.842 61.9145 94.159C63.4725 91.4761 65.1551 88.9151 66.8377 86.4761C69.8291 86.2322 72.9451 86.1102 76.061 86.1102C79.2393 86.1102 82.3553 86.2322 85.2843 86.4761C86.9669 88.9151 88.6495 91.4761 90.2075 94.159C91.8278 96.842 93.2612 99.5249 94.5076 102.147C93.1989 104.769 91.7655 107.452 90.2075 110.135ZM97.125 107.818C98.2467 110.501 99.1815 113.123 99.9917 115.623C97.3743 116.232 94.5699 116.72 91.6409 117.086C92.638 115.623 93.5728 114.098 94.5076 112.513C95.3801 110.988 96.2525 109.403 97.125 107.818ZM76.061 129.159C74.1915 127.208 72.3842 125.074 70.5769 122.818C72.3842 122.879 74.1915 122.94 76.061 122.94C77.9306 122.94 79.7379 122.879 81.5451 122.818C79.6756 125.135 77.8683 127.208 76.061 129.159ZM60.4812 117.086C57.5522 116.72 54.7478 116.171 52.1304 115.623C52.9405 113.062 53.8753 110.501 54.997 107.818C55.8072 109.403 56.6797 110.927 57.6145 112.513C58.5493 114.098 59.4841 115.623 60.4812 117.086ZM54.997 96.4152C53.8753 93.7932 52.9405 91.1712 52.1304 88.6102C54.7478 88.0005 57.5522 87.5127 60.4812 87.1468C59.4841 88.6102 58.5493 90.1956 57.6145 91.72C56.6797 93.2444 55.8072 94.8298 54.997 96.4152ZM76.061 75.0735C77.9306 77.0248 79.7379 79.1589 81.5451 81.415C79.7379 81.3541 77.9306 81.2931 76.061 81.2931C74.1915 81.2931 72.3842 81.3541 70.5769 81.415C72.3842 79.1589 74.1915 77.0248 76.061 75.0735ZM94.4453 91.72C93.5105 90.1346 92.5757 88.6102 91.5786 87.1468C94.5076 87.5127 97.312 88.0614 99.9294 88.6102C99.1192 91.1712 98.1844 93.7322 97.0627 96.4152C96.2525 94.8298 95.3801 93.2444 94.4453 91.72ZM49.8869 79.3419C48.5782 71.0491 49.7622 65.1954 53.1275 63.3052C53.9999 62.8174 54.9971 62.5735 56.1188 62.5735C59.4841 62.5735 63.9711 64.6466 68.9566 68.5491C70.1407 69.4637 71.3871 70.5003 72.5711 71.6589C69.6421 74.7077 66.8377 78.1223 64.0957 81.8419C59.4217 82.2687 54.9971 83.0004 50.8217 83.9151C50.4477 82.3907 50.1361 80.8053 49.8869 79.3419ZM30.2562 102.086C30.2562 98.3054 34.8055 94.342 42.8448 91.3541C44.2781 90.8054 45.7738 90.3176 47.3941 89.8297C48.6405 93.7932 50.2608 97.9396 52.1927 102.086C50.2608 106.232 48.6405 110.379 47.3941 114.342C36.6751 111.232 30.2562 106.537 30.2562 102.086ZM53.1275 140.928C49.7622 139.037 48.5782 133.184 49.8869 124.891C50.1361 123.428 50.4477 121.842 50.8217 120.318C54.9347 121.232 59.4217 121.964 64.0957 122.391C66.8377 126.11 69.6421 129.525 72.5711 132.574C64.4073 140.013 57.0536 143.123 53.1275 140.928ZM98.9323 140.928C95.567 142.818 89.8336 140.928 83.1031 135.684C81.9191 134.769 80.6727 133.732 79.4886 132.574C82.4176 129.525 85.222 126.11 87.9641 122.391C92.638 121.964 97.0627 121.232 101.238 120.318C103.793 130.928 102.858 138.733 98.9323 140.928ZM109.277 112.879C107.844 113.427 106.348 113.915 104.728 114.403C103.482 110.44 101.861 106.293 99.9294 102.147C101.861 98.0005 103.482 93.8542 104.728 89.8907C115.447 93.0615 121.804 97.7566 121.804 102.147C121.804 105.927 117.254 109.83 109.277 112.879Z",fill:"white",key:3}),n.createElement("path",{d:"M63.0196 182.117C62.4103 182.117 61.888 181.912 61.4527 181.503C61.0174 181.073 60.7998 180.535 60.7998 179.889C60.7998 179.265 61.0174 178.748 61.4527 178.339C61.888 177.909 62.4103 177.693 63.0196 177.693C63.629 177.693 64.1404 177.898 64.5539 178.307C64.9674 178.716 65.1742 179.243 65.1742 179.889C65.1742 180.535 64.9565 181.073 64.5213 181.503C64.1078 181.912 63.6072 182.117 63.0196 182.117Z",fill:"white",key:4}),n.createElement("path",{d:"M67.7638 188.38C67.0021 188.38 66.2948 188.294 65.6419 188.122C64.989 187.95 64.4449 187.692 64.0097 187.347L65.0217 184.958C65.6746 185.496 66.5233 185.765 67.5679 185.765C68.3949 185.765 69.0261 185.507 69.4613 184.99C69.9184 184.495 70.1469 183.753 70.1469 182.762V164.811H73.2808V182.698C73.2808 184.463 72.802 185.851 71.8444 186.863C70.8868 187.874 69.5266 188.38 67.7638 188.38ZM71.7138 161.518C71.1044 161.518 70.593 161.324 70.1795 160.937C69.7878 160.549 69.5919 160.076 69.5919 159.516C69.5919 158.956 69.7878 158.483 70.1795 158.095C70.593 157.686 71.1044 157.482 71.7138 157.482C72.3232 157.482 72.8237 157.676 73.2155 158.063C73.629 158.429 73.8357 158.892 73.8357 159.451C73.8357 160.033 73.629 160.528 73.2155 160.937C72.8237 161.324 72.3232 161.518 71.7138 161.518Z",fill:"white",key:5}),n.createElement("path",{d:"M84.2226 182.117C82.808 182.117 81.4478 181.934 80.142 181.568C78.8362 181.18 77.8133 180.696 77.0734 180.115L78.3792 177.661C79.1409 178.199 80.0658 178.63 81.154 178.953C82.2421 179.275 83.3412 179.437 84.4511 179.437C87.1932 179.437 88.5643 178.662 88.5643 177.112C88.5643 176.596 88.3793 176.187 88.0093 175.885C87.6394 175.584 87.1714 175.369 86.6056 175.24C86.0615 175.089 85.2781 174.928 84.2552 174.755C82.8624 174.54 81.7198 174.293 80.8275 174.013C79.957 173.733 79.2062 173.259 78.575 172.592C77.9439 171.925 77.6283 170.989 77.6283 169.783C77.6283 168.233 78.2812 166.996 79.587 166.07C80.8928 165.123 82.6447 164.65 84.8428 164.65C85.9962 164.65 87.1497 164.789 88.3031 165.069C89.4566 165.349 90.4033 165.726 91.1432 166.199L89.8048 168.653C88.3902 167.749 86.7253 167.297 84.8102 167.297C83.4826 167.297 82.4706 167.512 81.7742 167.943C81.0778 168.373 80.7296 168.944 80.7296 169.654C80.7296 170.214 80.9254 170.655 81.3172 170.978C81.7089 171.301 82.1877 171.537 82.7535 171.688C83.3411 171.839 84.1573 172.011 85.2019 172.205C86.5947 172.441 87.7155 172.7 88.5643 172.98C89.4348 173.238 90.1748 173.69 90.7841 174.336C91.3935 174.981 91.6982 175.885 91.6982 177.048C91.6982 178.597 91.0235 179.835 89.6742 180.761C88.3467 181.665 86.5294 182.117 84.2226 182.117Z",fill:"white",key:6}),n.createElement("path",{fillRule:"evenodd",clipRule:"evenodd",d:"M91.4247 0.00672601C97.9319 0.15663 104.141 2.80687 108.754 7.41995L144.581 43.2467C149.279 47.9452 151.942 54.2994 152 60.938V69.6667C1

152 59.5333 143.555 57 139.333 57H120.334C104.501 57 95.0006 47.5 94.9997 31.6667V12.6667C94.9997 2.88379 87.1292 0.184319 82.7857 0.0092999L91.4247 0.00672601Z",fill:"white",fillOpacity:"0.5",key:7})])}e.exports=i,i.default=i},5142:function(e,t,a){"use strict";a.d(t,{A:function(){return c}});var n=a(6540),i=a(1691),o=a.n(i),r="bQ_jt",l=a(6942),s=a.n(l);function c(e){let t=e.className,a=(e.style,e.children);return n.createElement("div",{className:s()(r,t)},n.createElement(o(),null),a)}},6690:function(e,t,a){"use strict";a.d(t,{A:function(){return i}});var n=a(6540);function i(){return n.createElement(n.Fragment,null,n.createElement("p",null,'"Just found out about SVGator. I love you guys! What a hidden gem for anyone who is developing a mobile app!"'),n.createElement("span",null,"M. N. - Software Engineer"))}},7732:function(e,t,a){"use strict";a.r(t),a.d(t,{Head:function(){return V},default:function(){return G}});var n=a(6540),i=a(6874),o=a(423),r=a(2157),l=a(8439),s=a(4053),c=a(975),m=a(8151),u=a(8248),d=a(229),C=a(776),p=a(1664),y=a(227),v=a(8107),h=a(4187),f=a.n(h),w=a(1904),E=a(8089),g=a(5142),A=a(9810),b=a(6690);function N(){return n.createElement(r.A,null,n.createElement(l.A,{styling:l.A.styling.DARK,section:"React Native Animation Was Never This Easy"},n.createElement(s.A,{shadow:!0},n.createElement("h1",null,"React Native Animation was never this easy"),n.createElement(p.A,{alt:"Animation react native",src:{png:p.A.LP_CDN+"rn-animation/f1-animation-react-native.png",webp:p.A.LP_CDN+"rn-animation/f1-animation-react-native.webp"},size:[736,460]},n.createElement(y.A,{src:p.A.LP_CDN+"rn-animation/f1-react-native-animation.svg",alt:"React native animation example"}),n.createElement(v.A,null,n.createElement(f(),null))),n.createElement("p",null,"Create React Native SVG animations on a friendly and intuitive interface. Export a ready to implement SVG file for both Android and iOS!"),n.createElement(w.A,{text:"Animate now"}))),n.createElement(l.A,{section:"Full-Featured React Native Animation Generator"},n.createElement(c.A,{title:n.createElement("h2",null,"A full-featured React Native animation generator"),cols:[{alt:"React native animation generator",image:"rn-animation/f2.1-react-native-animation-generator.svg",title:"A single app for cross-platform solutions",text:"Improve your workflow with a versatile React Native animation tool that lets you create animations with ease, for all Android and iOS versions."},{alt:"React native vector icons animated",image:"rn-animation/f2.2-react-native-vector-icons.svg",title:"Time-saving, fast, and reliable",text:"Take a shortcut and get a single animated file faster than ever. Set up animators and keyframes on a timeline, and your animation is done."},{alt:"React native svg animation",image:"rn-animation/f2.3-react-native-svg-animation.svg",title:"Advanced animations without coding",text:"Create clipping paths, morphing, path animations, and more without hours of programming. Set your SVG to animate on load or on tap."}].map((e,t)=>n.createElement(m.A,Object.assign({key:t},e)))})),n.createElement(l.A,{styling:l.A.styling.DARK,className:"S_dV",section:"What You See Is What You Get"},n.createElement(u.A,{reverse:!0},n.createElement("div",null,n.createElement("h2",null,"What you see is what you get"),n.createElement("p",null,"Rest assured that your smooth React Native web animation will look the same in your mobile app as it will on a website."),n.createElement("p",null,"There are no third-party apps or plug-ins needed! Get the best out of your limited screen estate with interactive animations and provide visual feedback in a creative way."),n.createElement("p",null,"Create advanced React Native animations that you can fully control programmatically using our Player JS API.")),n.createElement(p.A,{className:"S_cr",src:p.A.LP_CDN+"rn-animation/f3-react-native-web-animation.svg",alt:"React native web animation generator",size:[1396,930],skipLazy:!0}))),n.createElement(l.A,{section:"Create, Animate And Integrate"},n.createElement(u.A,null,n.createElement("div",null,n.createElement("h2",null,"Create, animate and integrate"),n.createElement("p",null,"Skip the time-consuming development process and get exactly what you need: advanced custom React Native animation in a few minutes, ready to implement right away."),n.createElement("p",null,"All you have to do is export your SVG, install React Native webview, and embed your file.")),n.createElement(p.A,{alt:"Create animated component react native",src:p.A.LP_CDN+"rn-animation/f4-create-react-native-animation.svg",size:[280,580]}))),n.createElement(l.A,{styling:l.A.styling.GRAYISH,className:"S_dW",section:"Test How Our Animations Work!"},n.createElement(u.A,{reverse:!0},n.createElement("div",null,n.createElement("h2",null,"Test how our animations work!"),n.createElement("p",null,"Download this demo file with a React Native animation example and test it in your framework."),n.createElement("a",{href:"https://cdn.svgator.com/samples/Demo.js.zip",className:"S_dX"},"Download Demo.js"),n.createElement("p",{className:"S_dY"},n.createElement("strong",null,"Requirements"),n.createElement("br",null),"Get the",n.createElement("a",{href:"https://www.npmjs.com/package/@svgator/react-native"}," player "),"and the",n.createElement("a",{href:"https://www.npmjs.com/package/react-native-webview"}," Web View module "),"for React Native")),n.createElement(p.A,{alt:"Animation react native",src:p.A.LP_CDN+"rn-animation/f5-animation-react-native.svg",size:[480,435]},n.createElement(f(),{className:"S_dZ"})))),n.createElement(l.A,{styling:l.A.styling.DARK,section:"Single Player Node Module"},n.createElement(u.A,null,n.createElement("div",null,n.createElement("h2",null,"Single player node module"),n.createElement("p",null,"Use SVGator’s own external player to achieve better performance."),n.createElement("p",null,"Feel free to choose between embedded or single player modules, depending on your individual needs when exp

1orting your React Native SVG animations.")),n.createElement(p.A,{alt:"React native rocket animation example",size:[600,487],src:p.A.LP_CDN+"rn-animation/f6-react-native-rocket-animation.svg"}))),n.createElement(l.A,{section:"Take Advantage Of Our Assets"},n.createElement(u.A,{reverse:!0},n.createElement("div",null,n.createElement("h2",null,"Take advantage of our assets"),n.createElement("p",null,"Enjoy a seamless workflow by using SVGator’s assets library, which allows you to jump right into the animation process. Choose an asset from the library, import it to your canvas, and start to animate it right away."),n.createElement("p",null,"You can also upload your own assets, or turn one of your newly created animations into an asset, so you can reuse it whenever you need. You just have to select the animated elements, right click, and save them to the library.")),n.createElement(p.A,{alt:"React native animation examples",size:[600,500],src:p.A.LP_CDN+"rn-animation/f7-react-native-animation-example.svg"}))),n.createElement(l.A,{styling:l.A.styling.DARK,section:"How To Add Your Animation In React Native Apps"},n.createElement(c.A,{title:n.createElement("h2",null,"How to add your animation in React Native apps"),cols:[{alt:"How to add animation in react native",image:"rn-animation/f8.1-add-animation-in-react-native.svg",title:"Export your animation",text:"Choose React Native as the framework, and set player type along other animation options."},{alt:"React native animation tutorial",image:"rn-animation/f8.2-react-native-animation-tutorial.svg",title:"Install dependencies",text:"Simply follow the instructions in the export window to install Webview and the SVGator Player."},{alt:"Advanced animations in react native",image:"rn-animation/f8.3-advanced-animations-react-native.svg",title:"Embed your file",text:"Embed your React Native SVG animation into your Flutter application."}].map((e,t)=>n.createElement(m.A,Object.assign({key:t},e)))},n.createElement(E.A,null,"Create SVG Now"),n.createElement(g.A,null,n.createElement(b.A,null)))),n.createElement(l.A,{styling:l.A.styling.BLUE,section:"FAQ"},n.createElement(d.A,{questions:[{title:"How can I move my React Native web animation to my mobile application?",p:"If you’re using SVGator, you no longer need to worry about how to use the same animation in your application and on your website. Your exported file will retain the same quality and will work in the same way in both cases. Choose the right export options and get a ready-to-use SVG file that is easily accessible to both designers and developers."},{title:"Will my animation run on every mobile device?",p:"Yes, definitely! Your React Native animation will load on all Android and iOS versions. When you export your file, you can also make your animation interactive by choosing to play on tap instead of loading when you enter the app. Animate onboarding illustrations, icons, logos, buttons, and more for your React Native app."},{title:"Do my animations run on offline devices as well?",p:"Yes! There is no internet connection required to make your React Native animation animation work. Make your app complete and flawless with bright SVG animations that will work in every situation."}]})),n.createElement(l.A,{section:"Start To Create Your React Native Animation"},n.createElement(C.A,null,n.createElement("h2",null,"Start to create your React Native animation"),n.createElement("p",null,"Forget about coding when it comes to SVG animation in React Native. Sign up now for free to animate as you’ve always wanted: with zero effort and maximum productivity."),n.createElement(E.A,null,"Try it now"),n.createElement(A.A,null))))}var k=a(9849),R=a.n(k),S=a(4086),x=a(1121),_=a(1649);var M=function(e){return{hasPart:[(0,_.A)("How to add your animation in React Native apps","3 easy steps to add your animation in React Native apps",[{name:"Export your animation",text:"Choose React Native as the framework, and set player type along other animation options."},{name:"Install dependencies",text:"Simply follow the instructions in the export window to install Webview and the SVGator Player."},{name:"Embed your file",text:"Embed your React Native SVG animation into your Flutter application."}]),(0,x.A)([{question:"How can I move my React Native web animation to my mobile application?",answer:"If you’re using SVGator, you no longer need to worry about how to use the same animation in your application and on your website. Your exported file will retain the same quality and will work in the same way in both cases. Choose the right export options and get a ready-to-use SVG file that is easily accessible to both designers and developers."},{question:"Will my animation run on every mobile device?",answer:"Yes, definitely! Your React Native animation will load on all Android and iOS versions. When you export your file, you can also make your animation interactive by choosing to play on tap instead of loading when you enter the app. Animate onboarding illustrations, icons, logos, buttons, and more for your React Native app."},{question:"Do my animations run on offline devices as well?",answer:"Yes! There is no internet connection required to make your React Native animation work. Make your app complete and flawless with bright SVG animations that will work in every situation."}],e+"#FAQPage")]}};const V=e=>{let t=e.location;const a="Create React Native Animations - Ready-to-Implement SVGs",i="Create React Native Animations with ease. Use our no-code tool and bring life to your mobile app.";return n.createElement(o.A,{title:a,description:i,canonical:t.pathname,image:R().cdnLink+"/assets/landing-pages/rn-animation/cover.png"},n.createElement(S.A,{name:a,description:i,published:"2022-05-04",modified:"2025-09-08",location:t,pageSpecificLD:M}))};var G=function(){return n.createElement(i.A,null,n.createElement(N,null))}},8107:function(e,t,a){"use strict";a.d(t,{A:function(){return l}});var n=a(6540),i="cT_md",o=a(6942),r=a.n(o);function l(e){let t=e.children,a=e.className,o=e.style;return n.createElement("div",{className:r()(i,a),style:o},t)}},8151:function(e,t,a){"use strict";a.d(t,{A:function(){return m}});var n=a(6540),i=a(1664),o=a(2505),r="bw_hH",l=a(6942),s=a.n(l),c=a(2800);function m(e){let t=e.alt,a=e.image,l=e.size,m=e.title,u=e.text,d=e.className,C=e.style;l=(0,c.M7)(l,200,200);const p=(0,i.J)(a,i.A.LP_CDN);return n.createElement("div",{className:s()(r,d),style:C},n.createElement(o.A,{alt:t,size:l,src:p,skipLazy:!0}),n.createElement("h3",null,m),n.createElement("p",null,u))}},9810:function(e,t,a){"use strict";a.d(t,{A:function(){return s}});var n=a(6540),i="bL_jj",o=a(6942),r=a.n(o),l=a(7642);function s(e){let t=e.className,a=e.style;return n.createElement(l.A,{className:r()(i,t),style:a},"No credit card required")}}}]);