cicatrizdev/poc-next-rnw-tailwind

Next.js App with React Native Web and TailwindCSS

Easy mode

• yarn create next-app --example with-react-native-web YOUR-APP-NAME;
• cd YOUR-APP-NAME
• yarn add twrnc next-transpile-modules next-compose-plugins
• go to next.config.js and change the content to:

const withPlugins = require('next-compose-plugins');
const withTM = require('next-transpile-modules')(['twrnc']);

module.exports = withPlugins([withTM], {
	webpack: (config) => {
		config.resolve.alias = {
			...(config.resolve.alias || {}),
			// Transform all direct `react-native` imports to `react-native-web`
			'react-native$': 'react-native-web',
		};
		config.resolve.extensions = ['.web.js', '.web.ts', '.web.tsx', ...config.resolve.extensions];
		return config;
	},
});

• run `yarn next``
• enjoy your Next.js app with React Native Web components and tailwindcss (with twrnc)