Add breakpoints support

examples/expo-example/app.json

@@ -27,9 +27,7 @@
 		},
 		"web": {
 			"build": {
-				"babel": {
-					"include": ["@yoshiki/native", "@yoshiki/core"]
-				}
+				"bundler": "metro"
 			},
 			"favicon": "./assets/favicon.png"
 		}

examples/expo-example/metro.config.js

@@ -14,7 +14,10 @@ const workspaceRoot = path.resolve(projectRoot, "../..");
 const config = getDefaultConfig(projectRoot);
 
 // 1. Watch all files within the monorepo
-config.watchFolders = [workspaceRoot];
+config.watchFolders = [
+	path.resolve(workspaceRoot, "examples/expo-example"),
+	path.resolve(workspaceRoot, "packages"),
+];
 // 2. Let Metro know where to resolve packages and in what order
 config.resolver.nodeModulesPaths = [
 	path.resolve(projectRoot, "node_modules"),

examples/expo-example/src/app.tsx

@@ -18,7 +18,7 @@ const CustomBox = ({ color, ...props }: { color: string }) => {
 
 const BoxWithoutProps = (props: object) => {
 	return (
-		<View {...css({ backgroundColor: "#999999" }, props)}>
+		<View {...css({ backgroundColor: { xs: "00ff00", md: "#ff0000"} }, props)}>
 			<Text>Text inside the box without props</Text>
 		</View>
 	);

examples/expo-example/webpack.config.js

@@ -0,0 +1,18 @@
+//
+// Copyright (c) Zoe Roux and contributors. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for details.
+//
+const createExpoWebpackConfigAsync = require("@expo/webpack-config");
+
+module.exports = async function (env, argv) {
+	const config = await createExpoWebpackConfigAsync(
+		{
+			...env,
+			babel: {
+				dangerouslyAddModulePathsToTranspile: ["@yoshiki"],
+			},
+		},
+		argv,
+	);
+	return config;
+};