rn-glue-flower

UI Components and graphql for react native.

Before installation

In your .npmrc file, add the following line to avoid dependency conflicts:

legacy-peer-deps=true

📦 Installation

npm i rn-glue-flower

🛠️ Configuration

global.css

@tailwind base;
@tailwind components;
@tailwind utilities;

babel.config.js

// eslint-disable-next-line @typescript-eslint/no-require-imports
const { babelConfig } = require('rn-glue-flower/babel-config');

module.exports = function (api) {
    api.cache(true);

    return babelConfig(process.env)
};

metro.config.js

// eslint-disable-next-line @typescript-eslint/no-require-imports
const { getDefaultConfig } = require('expo/metro-config');
// eslint-disable-next-line @typescript-eslint/no-require-imports
const { withNativeWind } = require('nativewind/metro');

const config = getDefaultConfig(__dirname);

module.exports = withNativeWind(config, { input: './global.css' });

tsconfig.json

{
  "extends": "expo/tsconfig.base",
  "compilerOptions": {
    "strict": true,
    "paths": {
      "@/*": [
        "./*"
      ],
      "tailwind.config": [
        "./tailwind.config.js"
      ]
    }
  },
  "include": [
    "**/*.ts",
    "**/*.tsx",
    ".expo/types/**/*.ts",
    "expo-env.d.ts"
  ]
}

optional

// "@HOST_CONFIG": ["./configs/HOST_CONFIG.ts"],
// "@APP_CONFIG": ["./configs/APP_CONFIG.ts"],

tailwind.config.js

// eslint-disable-next-line @typescript-eslint/no-require-imports
import { tailwindConfig } from 'rn-glue-flower/tailwind-config';

/** @type {import('tailwindcss').Config} */
module.exports = tailwindConfig(process.env);

Lingui

npm i -D @lingui/babel-plugin-lingui-macro @lingui/cli

update babel.config.js

// ...
return babelConfig(process.env, {plugins: ["@lingui/babel-plugin-lingui-macro"]});

update package.json

{
  "scripts": {
    "extract": "lingui extract",
    "compile": "lingui compile --typescript"
  }
}

lingui.config.js

import { defineConfig } from "@lingui/cli";

export default defineConfig({
    locales: ['en', 'mn'],
    sourceLocale: 'en',
    fallbackLocales: { default: 'en' },
    catalogs: [{ path: 'locales/{locale}/messages', include: ['app', 'components'] }],
    format: 'po',
    orderBy: 'message',
});

_layout.ts

import { GluestackUIProvider } from 'rn-glue-flower/ui';
import { useColorScheme } from '@/hooks/use-color-scheme';
import { Stack } from 'expo-router';
import { SafeAreaProvider } from 'react-native-safe-area-context';
import { i18n } from '@lingui/core';

import '@/global.css';

i18n.loadAndActivate({ locale: 'en', messages: en });

export default function RootLayout() {
    const colorScheme = useColorScheme();
    
    return (
        <GluestackUIProvider getTheme={() => new Promise((resolve) => resolve(colorScheme === 'dark' ? 'dark' : 'light'))}>
            <SafeAreaProvider>
                <Stack />
            </SafeAreaProvider>
        </GluestackUIProvider>
    )
}