Cómo utilizar imágenes SVG en React Native

Los gráficos vectoriales escalables, o gráficos vectoriales redimensionables (del inglés Scalable Vector Graphics) o SVG es un formato de gráficos vectoriales bidimensionales, tanto estáticos como animados, en formato XML.

Paso 01: Instalación

npm install react-native-svg --save

npm install react-native-svg-transformer --save

Paso 02: Modificación de archivo metro.config.js

const {getDefaultConfig} = require('metro-config');

module.exports = (async () => {
  const {
    resolver: {sourceExts, assetExts},
  } = await getDefaultConfig();

  return {
    transformer: {
      babelTransformerPath: require.resolve("react-native-svg-transformer"),
      getTransformOptions: async () => ({
        transform: {
          experimentalImportSupport: false,
          inlineRequires: false,
        },
      }),
    },
    resolver: {
      assetExts: assetExts.filter(ext => ext !== "svg"),
      sourceExts: [...sourceExts, "svg"]    
    }
  };
})();

Paso 03: Code

import React from 'react';
import {StyleSheet, View} from 'react-native';

import Rutinas from '../assets/images/rutinas.svg';

function DashboardScreen(props) {
  return (
    <View style={styles.container}>
      <Rutinas height={200} width={200} />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

export default DashboardScreen;

simplemente nos queda ejecutar la aplicación para observar los resultados