How to Add SVGs to Expo React Native Apps using react-native-svg and react-native-svg-transformer

Ғылым және технология

Hi everyone!
Today I am going to show you how to add SVGs to your Expo React Native using the react-native-svg npm package and the react-native-svg-transformer package. This will allow you to add SVGs to your in two different ways; directly from assets as a component if using the react-native-svg-transformer package or as a component if using the online SVG to react native tool.
If you are interested in my source code from the tutorial today, you can find it on GitHub:
github.com/chelseafarley/expo...
Documentation for the react-native-svg-transformer package can be found here:
github.com/kristerkari/react-...
You can also find the svg to react native component tool here:
react-svgr.com/playground/?na...
And the full expo guide here:
docs.expo.dev/ui-programming/...
You’ve clearly come here to learn and a free audible trial allows you to increase your learning potential in situations where you may be hands free like at the gym or on your commute. It allows you to spend more time on theory when you aren’t able to watch a screen, so that you can maximise your screen time to pick up technical skills. Try it for free today:
amzn.to/3ECMsom
// ABOUT ME
My name is Chelsea and I started studying software engineering in 2010. I have been working commercially full time since 2014 and have been in various positions from graduate developer to tech lead to solution architect.
I'm a full stack developer with a lot of experience in C# and Javascript but my passion is for mobile development; specifically native iOS development and cross platform using React Native.
I always have many things on the go and am always trying out a new side hustle and failing at it; perhaps you can learn from my mistakes!
Please like and subscribe if you enjoyed this video and want to see more like it!
Have any suggestions on topics you would like to learn more about? Please suggest them in the comments... I would love to help you out while doing a bit of learning myself!
// PRODUCTS USED
I use the following products in the creation of my videos:
Boya MM1 Microphone - amzn.to/3m6kif7
A reasonable quality and reasonably sturdy but cost effective microphone that can be used by both DSLR cameras, mobile phones and laptops
Canon 18-55mm Lens - amzn.to/3IwscFR
A kit lens but a decent quality lens for beginners getting used to a DSLR
Canon EOS Rebel T7 with 18-55mm Lens - amzn.to/3XZauAL
This is the kit I started with it includes the lens linked above and is a great starter camera.
I love Apple devices... These are the ones I use for my channel content creation:
Apple iPhone 13 - amzn.to/3KAUba4
A good all round phone, good for Apple development and recording videos with enough high quality features but at a cheaper price point than the pro versions.
Apple MacBook Pro - amzn.to/3KxrE5q
A nice portable computer for working from anywhere and perfect for iOS development
Apple iPad Air - amzn.to/3xU2k21
Really easy to use for graphic design if required for logos as part of my app development or editing the videos on the go.
Apple Pencil (2nd Generation) - amzn.to/3EBSwNS
For logo and icon design in Affinity Designer app for iPad
Logitech Folio Keyboard Touch - amzn.to/3XUYBM1
Adds keyboard and touchpad to iPad Air, making it easier to use for writing code/eBooks etc. on the go!
DISCLAIMER: Links included in this description might be affiliate links. If you purchase a product or service with the links that I provide I may receive a small commission. There is no additional charge to you! Thank you for supporting my channel so I can continue to provide you with free content each week!
//CONTACT:
Please contact me at: hello@tripwiretech.com
//CRAVING MORE:
You can find links to all my different sites and social media over on Linktree: linktr.ee/misscoding

Пікірлер: 15

  • @LynxBaretta
    @LynxBaretta10 ай бұрын

    Thanks a lot for this video I am new in React Native development and I didnt know what was happaning that I was trying to display an image in this case an SVG and it was not working until a found this information and followed the steps and bingo!!! Thanks!!!

  • @ejikeezekwunem4162
    @ejikeezekwunem4162 Жыл бұрын

    This is really helpful. Thank you so much.

  • @Pra-La
    @Pra-La Жыл бұрын

    You are a life saver. Thank you

  • @fabianoCSouza
    @fabianoCSouza Жыл бұрын

    Very good thanks for the tips!

  • @guilhermenunes6524
    @guilhermenunes6524 Жыл бұрын

    Thanks!

  • @tiagorodrigues3f
    @tiagorodrigues3f Жыл бұрын

    Amazing, Trank for you, my from brazil ♥

  • @MissCoding

    @MissCoding

    Жыл бұрын

    Thank you for watching!

  • @user-fs6of1hl6q
    @user-fs6of1hl6q2 ай бұрын

    Please how can i get the iphone 13pro emulator. Thanks

  • @saminurrahman8244
    @saminurrahman8244 Жыл бұрын

    I didn't know height adjusts the width also! I gave up trying to fix width manually a few ago.

  • @maycofaciolo8768
    @maycofaciolo8768 Жыл бұрын

    You are amazing! I'm learning a lot with you!

  • @MissCoding

    @MissCoding

    Жыл бұрын

    Thank you! Glad it has helped 😊

  • @kaushik8918
    @kaushik8918 Жыл бұрын

    Hey can u make tutorial for uploading multiple images and showing the file names.

  • @kaushik8918

    @kaushik8918

    Жыл бұрын

    Your tutorial videos are so good.

  • @KaitoAoki
    @KaitoAoki10 ай бұрын

    Can the following objects also be displayed?

  • @KaitoAoki

    @KaitoAoki

    10 ай бұрын

    const svgImages = [ { id: 0, svg: , title: 'svg' }, ]

Келесі