Poppins Font for React Native

Poppins font, packaged for React Native. Exports a typed weight map (PostScript names) that resolves correctly on both iOS and Android — no Platform.select, no manual fontFamily string guessing.

| | | |---|---| | React Native | 0.60+ | | iOS | ✓ | | Android | ✓ |

Install

npm install @devraj-labs/rn-font-poppins

Then add (or update) react-native.config.js in your app root to include the font assets:

module.exports = {
  assets: [
    './node_modules/@devraj-labs/rn-font-poppins/assets/fonts',
    // ...other font packages
  ],
};

Then link the fonts into your native projects:

npx react-native-asset

Re-run npx react-native-asset and rebuild your app whenever you add or update a font package.

Usage

With Vajra UI

Register the font in your theme and use it via the font prop:

import { poppinsFonts } from '@devraj-labs/rn-font-poppins';

createVajraTheme({
  typography: {
    fonts: {
      families: {
        ...poppinsFonts,
      },
    },
  },
});

<Text font="poppins" fontWeight="100">Sample text</Text>
<Text font="poppins" fontWeight="200">Sample text</Text>

Without Vajra UI

The export is a plain object — use it however your app resolves fonts:

import { poppinsFonts } from '@devraj-labs/rn-font-poppins';

const styles = StyleSheet.create({
  // poppinsFonts.poppins['100'] → 'Poppins-Thin'
  heading: { fontFamily: poppinsFonts.poppins['100'], fontSize: 24 },
  body:    { fontFamily: poppinsFonts.poppins['900'], fontSize: 16 },
});

Font map

| Family | Weight | PostScript name | |--------|--------|-----------------| | poppins | '100' | 'Poppins-Thin' | | poppins | '200' | 'Poppins-ExtraLight' | | poppins | '300' | 'Poppins-Light' | | poppins | '400' | 'Poppins-Regular' | | poppins | '500' | 'Poppins-Medium' | | poppins | '600' | 'Poppins-SemiBold' | | poppins | '700' | 'Poppins-Bold' | | poppins | '800' | 'Poppins-ExtraBold' | | poppins | '900' | 'Poppins-Black' |

Docs

• Using a font package — full usage guide including Vajra UI and standalone examples
• Creating a font package — how this package was built from the template
• README generation — how this file is auto-generated

License

MIT