With React Native, the most important thing is to understand the ecosystem and how it comes together to create an app. By understanding the overall architecture, we will be able to take the full of advantage the platform.

The course will start by covering the fundamentals like setting up the navigation, setting up the screens, styles, and the UI elements, before moving on to more advanced topics such as state management, crash/error reporting, setting up analytics and middlewares, debugging, and performance optimizations. We will also learn how to avoid/fix frame drops - possibly the most watched parameter of any UI application.

We will also build a Design System and will follow the [Atomic Design Pattern](https://atomicdesign.bradfrost.com/chapter-2/) of building layouts. A Design System primarily consists of three parts:
- UI Inventory and Patterns
- Typography
- Spacing and Styles

We will cover these in detail through the modules of the course. We will also learn about the React Native best practices, how to avoid rabbit holes, and focus on building a performant app.

**This is an opinionated way of building apps with React Native**. The fundamentals discussed in the course, like Atomic Design Pattern and Design System, can be applied to building any UI application, not just ones using React Native.

## One Complete App

The course comes with one complete eCommerce sample app that is discussed through the modules of the course.

## Up-to-date

The course builds on an open-source boilerplate template and is kept up to date with React, React Native and dependent library versions. It is also updated with the latest APIs and libraries that are introduced, like Hooks, hermes, flipper etc.

## Why this course

React Native for JavaScript Developers using TypeScript is based on years of experience in building React Native apps on production. The open-source boilerplate code discussed in the course is the platform for multiple apps on App Store and Play Store today. One of them being a Unicorn.

We will take a **Product** based development approach to building apps. React Native abstracts out a lot of platform specific nuances, so wouldn't focusing on building the app as an experience make the most sense. The design pattern will help us exactly with that, and we will put together a structure that is both scalable and extensible. This architecture also helps keep the design separate from the development.

At the end of this course, you will not only be able to build real-world apps with React Native, but also have the fundamentals of building any enterprise UI application.

Discord [channel](https://discord.gg/fz43pNnh)

Code along, and learn to build scalable and performant apps with React Native, from a Product perspective.

The newline Guide to React Native for JavaScript Developers using TypeScript

---
title: "SVG vs PNG: Which Image Format to Use in a React Native App"
slug: images-and-svgs
privateVideoUrl: https://fullstack.wistia.com/medias/xaq2mnjriv
isPublicLesson: false
playerCode: #1D5C72
role: LESSON
description: Should we use images or SVGs? Should we be putting them in the React Native bundle, or on native and save OTA bandwidth? Let's look at the best practices.
---

## Images and SVGs

One important decision while building a React Native app is whether you should put an image in a React Native bundle and serve it over-the-air (OTA), i.e. with the React Native bundle, or put it in native and save bundle size. The answer depends on the use case, and we'll look at some pointers that can help us come to that decision.

## SVGs

> SVG or Scalable Vector Graphics is an Extensible Markup Language-based vector image format for two-dimensional graphics with support for interactivity and animation. 

SVGs play an important part in getting that pixel-perfect rendering on any device resolution. In React Native, SVGs help with a lot more than just rendering icons, and can help render micro-animations too. We'll see how to do that in the Bonus [Lottie](lottie) section.

Be careful though; SVGs are XMLs and can require a lot of computation, so in complex cases, they may render well on high-end devices but have performance issues on low spec ones, especially Android devices. Remember to test on the devices of your user base before pushing to them.

SVGs are not natively supported by React Native. We will be using the library [`react-native-svg`](https://www.npmjs.com/package/react-native-svg) for the same. Details of its implementations are covered in the Bonus Content's [React Native SVG](react-native-svg) section. For now, we can safely assume that these will be used as simple React components.

```tsx { actualFilename=./protected/src/assets.js endLine=32 startLine=16 statedFilename=svgs.tsx url=https&#x3A;//gitlab.com/fullstackio/books/newline-guide-to-react-native-for-javascript-developers/module_03/lesson_01.03/protected/src/assets.js#L16 }
// Declaration - assets/svgs/index.ts
import Svg, { Path, G, Circle } from 'react-native-svg';

const HomeActive = ({ style, color }) => (
  <Svg viewBox="0 0 1190 1000" style={style}>
    <Path
      fill={color}
      d="M1148 609L952 414v562c0 15-9 24-23 24H262c-14 0-24-9-24-24V414L43 609c-10 10-24 10-33 0s-10-23 0-33L576 9c5-9 10-9 19-9 5 0 15 0 19 5l572 571c9 10 9 24 0 33-15 10-29 10-38 0z"
    />
  </Svg>
);

// Usage - someComponent.tsx
import SVGIcons from '../../icons/svgs/index';
.
.
<SVGIcons.HomeActive style={{ width: 12, height: 12 }} />
```

Should we use images or SVGs? Should we be putting them in the React Native bundle, or on native and save OTA bandwidth? Let's look at the best practices.