fix sass, sass transpiler, remove black background

App.tsx

@@ -13,7 +13,7 @@ const App = () => {
 const styles = StyleSheet.create({
   container: {
     flex: 1,
-    backgroundColor: '#121212',
+    backgroundColor: 'white',
     alignItems: 'center',
     justifyContent: 'center',
   },

app.json

@@ -16,7 +16,7 @@
     },
     "packagerOpts": {
       "config": "metro.config.js",
-      "sourceExts": ["js", "jsx", "scss", "sass"]
+      "sourceExts": ["js", "jsx", "ts", "tsx"]
     },
     "assetBundlePatterns": ["**/*"],
     "ios": {

metro.config.js

@@ -1,15 +1,11 @@
-const { getDefaultConfig } = require('metro-config');
+const { getDefaultConfig, mergeConfig } = require('@react-native/metro-config');
 
-module.exports = (async () => {
-  const {
-    resolver: { sourceExts },
-  } = await getDefaultConfig();
-  return {
-    transformer: {
-      babelTransformerPath: require.resolve('react-native-sass-transformer'),
-    },
-    resolver: {
-      sourceExts: [...sourceExts, 'scss', 'sass'],
-    },
-  };
-})();
+/**
+ * Metro configuration
+ * https://facebook.github.io/metro/docs/configuration
+ *
+ * @type {import('metro-config').MetroConfig}
+ */
+const config = {};
+
+module.exports = mergeConfig(getDefaultConfig(__dirname), config);