@drivekyte/surfer-mobile-components

DriveKyte Surfer Mobile Components

Installation

yarn add @drivekyte/surfer-mobile-components

Install dependencies

yarn add @expo-google-fonts/ibm-plex-mono @expo-google-fonts/ibm-plex-sans @expo-google-fonts/poppins expo-font
@react-native-picker/picker expo-haptics react-native-fast-image react-native-gesture-handler react-native-safe-area-context react-native-svg react-native-svg-transformer

Add SVG Transformer config

Merge the contents of your metro.config.js with the config below

For Expo SDK:

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

module.exports = (() => {
  const config = getDefaultConfig(__dirname);

  const { transformer, resolver } = config;

  config.transformer = {
    ...transformer,
    babelTransformerPath: require.resolve('react-native-svg-transformer'),
  };
  config.resolver = {
    ...resolver,
    assetExts: resolver.assetExts.filter((ext) => ext !== 'svg'),
    sourceExts: [...resolver.sourceExts, 'svg'],
  };

  return config;
})();

For Bare React Native Projects:

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

module.exports = (async () => {
  const {
    resolver: { sourceExts, assetExts },
  } = await getDefaultConfig();
  return {
    transformer: {
      babelTransformerPath: require.resolve('react-native-svg-transformer'),
    },
    resolver: {
      assetExts: assetExts.filter((ext) => ext !== 'svg'),
      sourceExts: [...sourceExts, 'svg'],
    },
  };
})();

Add reanimated plugin to babel.config.js

module.exports = {
    ...
    plugins: [
        ...
        'react-native-reanimated/plugin',
    ],
};

Typescript

If you are planning to use .svg files into your project, add this to a declaration.d.ts file:

declare module '*.svg' {
  import React from 'react';
  import { SvgProps } from 'react-native-svg';
  const content: React.FC<SvgProps>;
  export default content;
}

Usage

Wrap your applicaiton with KyteProvider

// app.tsx
import { KyteProvider } from '@drivekyte/surfer-mobile-components';

const App = ({ children }) => {
  return <KyteProvider>{children}</KyteProvider>;
};

Usage into components/screens:

// src/screens/my-page.tsx
import { Box } from '@drivekyte/surfer-mobile-components';

const MyPage = () => <Box />;

License

MIT