Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/BhushanBadhe39/SkinFirts/llms.txt

Use this file to discover all available pages before exploring further.

SkinFirts uses the standard React Native 0.86 toolchain with a small number of intentional customisations: the Metro bundler is extended with react-native-svg-transformer so that .svg files can be imported as React components, react-native.config.js registers the local fonts directory, and the project ships with consistent code-quality tooling through ESLint and Prettier. This page documents every configuration file so you can understand the build pipeline or adapt it for a new contributor environment.

​
Node / Engine Requirement

The engines field in package.json enforces a minimum Node version:
package.json (excerpt)
"engines": {
  "node": ">= 22.11.0"
}
Ensure your local Node version meets this requirement before installing dependencies. You can check with node --version.

​
Babel

Babel is configured with the official React Native preset, which handles JSX transformation, Flow stripping, and all other syntax features required by the React Native runtime.
babel.config.js
module.exports = {
  presets: ['module:@react-native/babel-preset'],
};
No additional plugins are required for the current feature set. If you add a library that needs a Babel plugin (such as react-native-reanimated), add it to the plugins array in this file.

​
Metro Bundler

Metro is the JavaScript bundler for React Native. SkinFirts extends the default Metro configuration to add support for importing .svg files directly as React components using react-native-svg-transformer.
metro.config.js
const { getDefaultConfig, mergeConfig } = require('@react-native/metro-config');

const defaultConfig = getDefaultConfig(__dirname);
const { assetExts, sourceExts } = defaultConfig.resolver;

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

module.exports = mergeConfig(defaultConfig, config);
The two key changes are:
ChangeReason
assetExts removes 'svg'Prevents Metro treating SVGs as static file assets
sourceExts adds 'svg'Tells Metro to process SVG files through the Babel transformer
babelTransformerPath → react-native-svg-transformerConverts SVG XML into React component code at bundle time

​
SVG Imports

Because of the transformer configuration above, any .svg file in the project can be imported as a default React component and rendered like any other JSX element: 
import Logo from '../assets/icons/Logo.svg';

// Use as a component with standard props
<Logo width={40} height={40} />
Props such as width, height, fill, and stroke are forwarded to the underlying react-native-svg elements, so you can theme SVG icons at the call site without modifying the asset file.

​
react-native.config.js

react-native.config.js registers the project’s local font directory so that the React Native CLI can link font assets to the native projects (iOS bundle resources and Android assets).
react-native.config.js
module.exports = {
  assets: ['./src/assets/fonts/'],
};
After adding a new font file to src/assets/fonts/, run the following command to link it: 
npx react-native-asset

​
ESLint

ESLint is configured to extend the @react-native shared config, which bundles rules for React, React Native, React Hooks, and accessibility best practices.
.eslintrc.js
module.exports = {
  root: true,
  extends: '@react-native',
};
Run the linter across the whole project with: 
npm run lint

​
Prettier

Prettier enforces a consistent code style. The project’s .prettierrc.js sets three rules that differ from Prettier’s defaults:
.prettierrc.js
module.exports = {
  arrowParens: 'avoid',
  singleQuote: true,
  trailingComma: 'all',
};
OptionValueEffect
arrowParens'avoid'Omits parentheses around single arrow-function parameters: x => x instead of (x) => x
singleQuotetrueUses single quotes for strings instead of double quotes
trailingComma'all'Adds trailing commas in multi-line objects, arrays, and function parameters

​
Jest

The project uses the @react-native/jest-preset which configures the Jest environment, module name mapper, and setup files appropriate for React Native component testing.
jest.config.js
module.exports = {
  preset: '@react-native/jest-preset',
};
Run the test suite with: 
npm test
react-test-renderer is listed as a dev dependency at the same version as react (19.2.3). When writing component tests, import from react-test-renderer to render components in the Jest environment.

​
Available npm Scripts

All commands should be run from the project root directory.
ScriptCommandDescription
startreact-native startStart the Metro bundler dev server
androidreact-native run-androidBuild and run the app on a connected Android device or emulator
iosreact-native run-iosBuild and run the app on iOS Simulator or a connected device
linteslint .Run ESLint across all project files
testjestRun the full Jest test suite

Build docs developers (and LLMs) love

Get started for freeTalk to us