feat: introduce expo config plugin (#94)

* feat: introduce expo config plugin

* docs: update getting started

Author: okwasniewski

app.plugin.js

@@ -0,0 +1 @@
+module.exports = require('./lib/commonjs/expo');

docs/docs/docs/getting-started/quick-start.mdx

@@ -6,7 +6,8 @@ import { PackageManagerTabs } from '@theme';
 
 <PackageManagerTabs command="install react-native-bottom-tabs" />
 
-If you use React Native version 0.75 or lower:
+<details>
+  <summary>If you use React Native <b>version 0.75 or lower</b></summary>
 
 - For `@react-native-community/cli` users, open Podfile in ios folder and change minimum iOS version to `14.0` before `pod install`
 
@@ -34,6 +35,44 @@ If you use React Native version 0.75 or lower:
 }
 ```
 
+</details>
+
+
+
+### Expo
+
+Add the library plugin in your `app.json` config file and [create a new build](https://docs.expo.dev/develop/development-builds/create-a-build/):
+
+```diff
+  "expo": {
++   "plugins": ["react-native-bottom-tabs"]
+  }
+}
+```
+
+:::warning
+
+This library is not supported in [Expo Go](https://expo.dev/go).
+
+:::
+
+### React Native Community CLI users
+
+Edit `android/app/src/main/res/values/styles.xml` to inherit from provided theme in order to customize the appearance of the native bottom tabs.
+
+
+```diff
+<resources>
+- <style name="AppTheme" parent="Theme.AppCompat.DayNight.NoActionBar">
++ <style name="AppTheme" parent="Theme.Material3.DayNight.NoActionBar">
+    <!-- … -->
+  </style>
+</resources>
+```
+
+Here you can read more about [Android Native Styling](/docs/guides/android-native-styling).
+
+
 ## Example usage
 
 :::warning

docs/docs/docs/guides/android-native-styling.md

@@ -2,53 +2,47 @@
 
 ## Expo users
 
-TODO: Add instructions for Expo users
+Use Expo Config Plugin for Material 3 styling:
 
-## React Native Community CLI users
+```diff
+  "expo": {
++   "plugins": ["react-native-bottom-tabs"]
+  }
+}
+```
 
-Inside of your `android/app/src/main/res/values/styles.xml` file you can customize the appearance of the native bottom tabs.
+If you want to use Material2 styling, you can pass `theme` option to the plugin:
 
-Here is how the file looks by default:
 
-```xml
-<resources>
-    <!-- Base application theme. -->
-    <style name="AppTheme" parent="Theme.AppCompat.DayNight.NoActionBar">
-        <!-- Customize your theme here. -->
-        <item name="android:editTextBackground">@drawable/rn_edit_text_material</item>
-    </style>
-</resources>
+```diff
+  "expo": {
++   "plugins": [["react-native-bottom-tabs", { "theme": "material2" }]]
+  }
+}
 ```
 
-In order to use the native bottom tabs, you need to change `AppTheme` to extend from `Theme.MaterialComponents.DayNight.NoActionBar`:
+## React Native Community CLI users
+
+Inside of your `android/app/src/main/res/values/styles.xml` file you can customize the appearance of the native bottom tabs.
+
 
-```xml
+```diff
 <resources>
-    <!-- Base application theme. -->
-    <style name="AppTheme" parent="Theme.MaterialComponents.DayNight.NoActionBar">
-        <!-- Customize your theme here. -->
-        <item name="android:editTextBackground">@drawable/rn_edit_text_material</item>
-    </style>
+- <style name="AppTheme" parent="Theme.AppCompat.DayNight.NoActionBar">
++ <style name="AppTheme" parent="Theme.Material3.DayNight.NoActionBar">
+    <!-- … -->
+  </style>
 </resources>
 ```
 
-:::warning
-This is required for the native bottom tabs to work correctly.
-
-You might see this error if you don't change the theme:
-
-`The style on this component requires your app theme to be Theme.MaterialComponents (or a descendant).`
+If you want to use Material Design 2, you can extend from `Theme.MaterialComponents.DayNight.NoActionBar`:
 
-:::
-
-If you want to use Material Design 3, you can extend from `Theme.Material3.DayNight.NoActionBar`:
-
-```xml
+```diff
 <resources>
-    <!-- Base application theme. -->
-    <style name="AppTheme" parent="Theme.Material3.DayNight.NoActionBar">
-        <!-- Customize your theme here. -->
-        <item name="android:editTextBackground">@drawable/rn_edit_text_material</item>
-    </style>
+- <style name="AppTheme" parent="Theme.AppCompat.DayNight.NoActionBar">
++ <style name="AppTheme" parent="Theme.MaterialComponents.DayNight.NoActionBar">
+    <!-- … -->
+  </style>
 </resources>
 ```
+

package.json

@@ -27,7 +27,8 @@
         "default": "./lib/commonjs/react-navigation/index.js"
       }
     },
-    "./package.json": "./package.json"
+    "./package.json": "./package.json",
+    "./app.plugin.js": "./app.plugin.js"
   },
   "files": [
     "src",
@@ -38,6 +39,7 @@
     "ios",
     "cpp",
     "react-native.config.js",
+    "app.plugin.js",
     "*.podspec",
     "!ios/build",
     "!android/build",
@@ -81,6 +83,7 @@
   "devDependencies": {
     "@commitlint/config-conventional": "^17.0.2",
     "@evilmartians/lefthook": "^1.5.0",
+    "@expo/config-plugins": "^7.0.0 || ^8.0.0",
     "@react-native/babel-preset": "0.75.3",
     "@react-native/eslint-config": "^0.73.1",
     "@react-navigation/native": "^6.1.18",

src/expo.ts

@@ -0,0 +1,42 @@
+import {
+  ConfigPlugin,
+  createRunOncePlugin,
+  withAndroidStyles,
+} from '@expo/config-plugins';
+
+const MATERIAL3_THEME = 'Theme.Material3.DayNight.NoActionBar';
+const MATERIAL2_THEME = 'Theme.MaterialComponents.DayNight.NoActionBar';
+
+type ConfigProps = {
+  /*
+   * Define theme that should be used.
+   * @default 'material3'
+   */
+  theme: 'material2' | 'material3';
+};
+
+const withMaterial3Theme: ConfigPlugin<ConfigProps> = (config, options) => {
+  const theme = options?.theme;
+
+  return withAndroidStyles(config, (stylesConfig) => {
+    stylesConfig.modResults.resources.style =
+      stylesConfig.modResults.resources.style?.map((style) => {
+        if (style.$.name === 'AppTheme') {
+          if (theme === 'material2') {
+            style.$.parent = MATERIAL2_THEME;
+          } else {
+            style.$.parent = MATERIAL3_THEME;
+          }
+        }
+
+        return style;
+      });
+
+    return stylesConfig;
+  });
+};
+
+export default createRunOncePlugin(
+  withMaterial3Theme,
+  'react-native-bottom-tabs'
+);