babel-config.js getConfig

[Malberee]

Is there a specific reason for the current order of elements in the overrides array inside the getConfig function? If not, I’d like to propose a PR that changes the order, since doing so resolves an issue where NativeWind styles are only applied inside the example app, but not to components imported from the library.
@satya164

[satya164]

The babel config mimics how the library will work in an app after being published.

By default the library is compiled for better compatibility with various tools. However, nativewind needs uncompiled JSX, so the compiled code won't work with nativewind. You see the same behavior in the example app.

If you want the library to be uncompiled, you'd need to use the configFile option to customize the babel config, and adjust the example's babel config accordingly.

[Malberee]

Thank you for your reply. I solved this problem by making some kind of wrapper over babel-preset and getConfig to exclude @babel/preset-react.

babel-preset.js

const bobPresetFactory = require('react-native-builder-bob/babel-preset')

module.exports = function (api, options, cwd) {
  const bobPreset = bobPresetFactory(api, options, cwd)

  return {
    ...bobPreset,
    presets: bobPreset.presets.filter(
      (preset) =>
        !(
          Array.isArray(preset) &&
          typeof preset[0] === 'string' &&
          preset[0].includes('preset-react')
        )
    ),
  }
}

babel-config.js

const {
  getConfig: originalGetConfig,
} = require('react-native-builder-bob/babel-config')

const getConfig = (defaultConfig, { root }) => {
  const config = originalGetConfig(defaultConfig, { root })

  config.overrides = config.overrides?.map((override) => {
    if (!override.presets) return override

    return {
      ...override,
      presets: override.presets.map((preset) => {
        if (
          Array.isArray(preset) &&
          typeof preset[0] === 'string' &&
          preset[0].includes('babel-preset')
        ) {
          return [require.resolve('./babel-preset'), ...preset.slice(1)]
        }

        return preset
      }),
    }
  })

  return config
}

exports.getConfig = getConfig

babel.config.js

const path = require('path')
const { getConfig } = require('./babel-config')
const pkg = require('../package.json')

const root = path.resolve(__dirname, '..')

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

  return getConfig(
    {
      presets: [
        ['babel-preset-expo', { jsxImportSource: 'nativewind' }],
        'nativewind/babel',
      ],
      plugins: [
        [
          'module-resolver',
          {
            extensions: ['.tsx', '.ts', '.jsx', '.js', '.json'],
            alias: {
              '@': '../src',
            },
          },
        ],
        'react-native-reanimated/plugin',
      ],
    },
    { root, pkg }
  )
}