𝗪𝗵𝘆 𝗬𝗼𝘂 𝗦𝗵𝗼𝘂𝗹𝗱 𝗦𝘄𝗶𝘁𝗰𝗵 𝗜𝗰𝗼𝗻 𝗟𝗶𝗯𝗿𝗮𝗿𝗶𝗲𝘀
@expo/vector-icons થી સત્તાવાર @react-native-vector-icons પેકેજ પર સ્વિચ કરવાથી તમારા બંડલ સાઈઝમાં 4MB કે તેથી વધુનો ઘટાડો થાય છે. Expo હવે આ ફેરફારની ભલામણ કરે છે.
જૂનું @expo/vector-icons એક wrapper હતું. તે આઇકન્સને Expo Go અને over-the-air અપડેટ્સ સાથે કામ કરવામાં મદદ કરતું હતું. જોકે, આ wrapper ને કારણે જટિલતા વધી હતી. તેને કાર્યરત કરવા માટે Expo એ Babel transforms નો ઉપયોગ કરવો પડતો હતો. આના કારણે વધારાનું મેન્ટેનન્સ કામ ઊભું થતું હતું.
નવા પેકેજ અલગ રીતે કામ કરે છે. તેઓ સીધા expo-font સાથે ઇન્ટિગ્રેટ થાય છે. તેઓ native font loading APIs નો ઉપયોગ કરે છે. આનો અર્થ એ છે કે તેઓ Expo Go, development builds અને production apps માં કામ કરે છે.
સ્વિચ કરવાના ફાયદા:
- નાનું બંડલ: ઇમ્પોર્ટ્સ બદલ્યા પછી અમારી ટેસ્ટ એપ 4MB ના પ્રમાણમાં નાની થઈ ગઈ.
- નવા આઇકન સેટ્સ: તમને Lucide જેવા સેટ્સનો ઉપયોગ કરવાની સુવિધા મળે છે.
- બહેતર સાધનો: તમે આઇકન નામોનું type-check કરી શકો છો.
- ક્લીન સેટઅપ: હવે તમારે જટિલ aliasing configurations ની જરૂર નથી.
કેવી રીતે માઇગ્રેટ કરવું:
- codemod ચલાવો: તમારા પ્રોજેક્ટ રૂટમાં
npx @react-native-vector-icons/codemodનો ઉપયોગ કરો. - ફેરફારની ચકાસણી કરો: જૂના પેકેજ શોધવા માટે
npx expo doctorચલાવો. - expo-font તપાસો: ખાતરી કરો કે તે ઇન્સ્ટોલ કરેલું અને કોન્ફિગર કરેલું છે. node_modules માંથી ફોન્ટ પાથને સીધા જ config plugin માં ઉમેરશો નહીં.
આ સમસ્યાઓથી સાવધ રહો:
- ફોન્ટ સંઘર્ષ (Font conflicts): જૂના અને નવા પેકેજ મિક્સ કરવાથી ખાલી ચોરસ અથવા પ્રશ્નચિહ્નો દેખાઈ શકે છે.
- ડિપેન્ડન્સી સમસ્યાઓ: કેટલીક લાઇબ્રેરીઓ જૂના નામોની અપેક્ષા રાખે છે. જો તમને ભૂલો દેખાય, તો તમારી ડિપેન્ડન્સી તપાસો.
Expo ભવિષ્યના રિલીઝમાં @expo/vector-icons ને deprecate કરી દેશે. અત્યારે જ આ ફેરફાર કરવાથી તમારો પ્રોજેક્ટ સરળ બનશે અને પરફોર્મન્સમાં સુધારો થશે.
સ્ત્રોત: https://dev.to/expo/why-you-should-drop-expovector-icons-for-react-native-vector-icons-3m1n