0.15.0 • Published 19 days ago
@drivekyte/surfer-mobile-components v0.15.0
@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
0.15.0
19 days ago
0.14.4
20 days ago
0.14.3
22 days ago
0.14.2
23 days ago
0.14.1
28 days ago
0.14.0
1 month ago
0.13.0
1 month ago
0.12.2
2 months ago
0.12.0
5 months ago
0.12.1
5 months ago
0.10.0
7 months ago
0.11.0
7 months ago
0.9.0
8 months ago
0.8.1
8 months ago
0.8.0
9 months ago
0.7.1
9 months ago
0.7.0
9 months ago
0.5.4
1 year ago
0.5.3
1 year ago
0.6.0
1 year ago
0.4.5
1 year ago
0.4.4
1 year ago
0.5.0
1 year ago
0.5.1
1 year ago
0.4.3
2 years ago
0.4.2
2 years ago
0.4.1
2 years ago
0.4.0
2 years ago
0.3.0
2 years ago
0.2.0
2 years ago
0.1.0
2 years ago