diff --git a/.babelrc.cjs.json b/.babelrc.cjs.json
new file mode 100644
index 0000000..d26df3b
--- /dev/null
+++ b/.babelrc.cjs.json
@@ -0,0 +1,27 @@
+{
+ "presets": [
+ [
+ "@babel/env",
+ {
+ "modules": "commonjs",
+ "browserslistEnv": "node"
+ }
+ ],
+ "@babel/flow",
+ "@babel/react",
+ "@babel/typescript"
+ ],
+ "plugins": [
+ [
+ "module-resolver",
+ {
+ "root": ["."],
+ "alias": {
+ "@utils": "./src/utils/",
+ "@assets": "./assets/"
+ }
+ }
+ ],
+ "@babel/plugin-transform-runtime"
+ ]
+}
diff --git a/.babelrc.esm.json b/.babelrc.esm.json
new file mode 100644
index 0000000..7954701
--- /dev/null
+++ b/.babelrc.esm.json
@@ -0,0 +1,27 @@
+{
+ "presets": [
+ [
+ "@babel/env",
+ {
+ "modules": false,
+ "browserslistEnv": "modern"
+ }
+ ],
+ "@babel/flow",
+ "@babel/react",
+ "@babel/typescript"
+ ],
+ "plugins": [
+ [
+ "module-resolver",
+ {
+ "root": ["."],
+ "alias": {
+ "@utils": "./src/utils/",
+ "@assets": "./assets/"
+ }
+ }
+ ],
+ "@babel/plugin-transform-runtime"
+ ]
+}
diff --git a/.browserslistrc b/.browserslistrc
index 3119c2f..2824bf1 100644
--- a/.browserslistrc
+++ b/.browserslistrc
@@ -1,32 +1,12 @@
[postcss]
-last 3 versions
-> 5%
-not dead
+last 4 versions
[modern]
last 1 chrome version
last 1 edge version
last 1 firefox version
last 1 safari version
-node 14
+node 16
-# snapshot of `npx browserslist "maintained node versions"`
-# On update check all #stable-snapshot markers
[node]
-node 12.0
-
-# same as `node`
-[coverage]
-node 12.0
-
-# same as `node`
-[development]
-node 12.0
-
-# same as `node`
-[test]
-node 12.0
-
-# same as `node`
-[benchmark]
-node 12.0
+node 12
diff --git a/.env.example b/.env.example
new file mode 100644
index 0000000..083ee74
--- /dev/null
+++ b/.env.example
@@ -0,0 +1,2 @@
+GH_TOKEN=
+GH_PAGES_BRANCH=example
diff --git a/.eslintignore b/.eslintignore
index a804767..be1a748 100644
--- a/.eslintignore
+++ b/.eslintignore
@@ -1,5 +1,4 @@
-build/
-dist/
+lib/
+examples/
node_modules/
.snapshots/
-*.min.js
\ No newline at end of file
diff --git a/.eslintrc b/.eslintrc
index 8970240..e5aeae9 100644
--- a/.eslintrc
+++ b/.eslintrc
@@ -12,13 +12,6 @@
"env": {
"node": true
},
- "parserOptions": {
- "ecmaVersion": 2020,
- "ecmaFeatures": {
- "legacyDecorators": true,
- "jsx": true
- }
- },
"settings": {
"react": {
"version": "16"
diff --git a/.gitignore b/.gitignore
index 9a00414..610231a 100644
--- a/.gitignore
+++ b/.gitignore
@@ -11,41 +11,42 @@
# testing
/coverage
-# Android
-**/.gradle
-**/local.properties
-**/*.iml
-**/*.tgz
-
# BUCK
**/buck-out/
**/\.buckd/
-**/*.keystore
-!debug.keystore
# production
+**/lib/
**/dist/
**/build/
+# Android/IntelliJ
+#
+**/.gradle
+**/local.properties
+**/*.iml
+**/*.hprof
+**/.cxx/
+**/*.keystore
+!**/debug.keystore
+
+# Ruby / CocoaPods
+**/ios/Pods/
+**/vendor/bundle/
+
# misc
-.DS_Store
-*.pem
+**/.DS_Store
+**/*.pem
# debug
-npm-debug.log*
-yarn-debug.log*
-yarn-error.log*
+**/npm-debug.log*
+**/yarn-debug.log*
+**/yarn-error.log*
# local env files
-.env
-.env.local
-.env.development.local
-.env.test.local
-.env.production.local
+**/.env
+**/.env*
+!**/.env.example
# typescript
*.tsbuildinfo
-
-# CocoaPods
-**/ios/Pods/
-
diff --git a/.prettierrc b/.prettierrc
index 443de53..2833df4 100644
--- a/.prettierrc
+++ b/.prettierrc
@@ -2,7 +2,6 @@
"singleQuote": true,
"jsxSingleQuote": false,
"semi": false,
- "tabWidth": 2,
"bracketSpacing": true,
"arrowParens": "always",
"trailingComma": "none"
diff --git a/NATIVE_README.md b/NATIVE_README.md
index dd8e413..1dd99be 100644
--- a/NATIVE_README.md
+++ b/NATIVE_README.md
@@ -2,20 +2,6 @@
MUI Tabs is now available with React Native. [See example](https://snack.expo.dev/@bilaleren/mui-tabs?platform=android).
-### Installation of requirements
-
-The **color** package is required for the RippleButton. You don't need to install this package if you don't want to use [RippleButton](#ripple-button-example-only-android).
-
-```shell
-yarn add react-native-svg
-```
-
-if you want to use the RippleButton
-
-```shell
-yarn add color react-native-svg
-```
-
### Examples
#### Basic example
@@ -41,7 +27,7 @@ const App = () => {
```tsx
import * as React from 'react'
import { Tab, Tabs } from 'mui-tabs/native'
-import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons'
+import IonIcon from 'react-native-vector-icons/Ionicons'
const App = () => {
const [value, setValue] = React.useState(0)
@@ -49,28 +35,27 @@ const App = () => {
return (
setValue(value)}
+ variant="scrollable"
+ onChange={onChange}
>
}
- iconPosition="top"
+ icon={}
+ label="Top (Default)"
/>
}
- iconPosition="start"
+ icon={}
+ label="Bottom"
+ iconPosition="bottom"
/>
}
label="End"
- icon={}
iconPosition="end"
/>
}
- iconPosition="bottom"
+ icon={}
+ label="Start"
+ iconPosition="start"
/>
)
@@ -79,6 +64,14 @@ const App = () => {
#### Ripple Button example (only android)
+You need to install the **color** package.
+
+```bash
+yarn add color
+```
+
+**Example**
+
```tsx
import * as React from 'react'
import { Tab, Tabs } from 'mui-tabs/native'
@@ -101,41 +94,11 @@ const App = () => {
}
```
-#### Custom tab width example
-
-```tsx
-import * as React from 'react'
-import { Tab, Tabs } from 'mui-tabs/native'
-
-const App = () => {
- const [value, setValue] = React.useState(0)
-
- return (
- setValue(value)}
- >
-
-
-
-
-
-
-
- )
-}
-```
-
#### Custom indicator example
```tsx
import * as React from 'react'
import { Tab, Tabs } from 'mui-tabs/native'
-import RippleButton from 'mui-tabs/native/RippleButton'
const App = () => {
const [value, setValue] = React.useState(0)
@@ -143,50 +106,38 @@ const App = () => {
return (
setValue(value)}
- scrollButtons={true}
style={{
backgroundColor: '#f2f2f2',
- borderRadius: 99,
- maxHeight: 58
+ borderRadius: 99
+ }}
+ tabProps={{
+ color: '#000000',
+ selectedColor: '#000000'
}}
indicatorProps={{
- color: '#fff',
- size: '100%', // indicator height
+ color: '#ffffff',
+ size: '100%',
style: {
- borderRadius: 99,
- bottom: 5,
- zIndex: 1
+ zIndex: -1,
+ borderRadius: 99
}
}}
- tabProps={{
- color: '#000',
- selectedColor: '#000',
+ scrollButtons={true}
+ scrollViewContainerProps={{
style: {
- borderRadius: 99,
- zIndex: 2
- }
- }}
- scrollViewProps={{
- contentContainerStyle: {
- paddingHorizontal: 10,
paddingVertical: 5
}
}}
- scrollButtonsProps={{
- iconColor: '#000',
- iconSize: 21
- }}
- ScrollButtonComponent={RippleButton}
>
-
-
-
-
-
-
+
+
+
+
+
+
+
)
}
diff --git a/README.md b/README.md
index 64c3281..940349e 100644
--- a/README.md
+++ b/README.md
@@ -27,19 +27,10 @@ This package was developed based on the [Material UI Tabs](https://mui.com/compo
## Installation
-- If you want to use it for the web, you need to install the **clsx** package.
-- If you want to use a [RippleButton](#ripple-effect-example), you need to install the **react-transition-group** package.
-
```bash
yarn add mui-tabs
```
-if you want to use the RippleButton
-
-```bash
-yarn add mui-tabs react-transition-group
-```
-
## Examples
#### Basic example
@@ -48,8 +39,8 @@ yarn add mui-tabs react-transition-group
import * as React from 'react'
import { Tab, Tabs } from 'mui-tabs'
-import 'mui-tabs/dist/main.css'
-// or import 'mui-tabs/dist/scss/main.scss'
+import 'mui-tabs/styles/main.css'
+// or import 'mui-tabs/styles/scss/main.scss'
const App = () => {
const [value, setValue] = React.useState(1)
@@ -65,15 +56,23 @@ const App = () => {
#### Ripple effect example
+You need to install the **react-transition-group** package.
+
+```bash
+yarn add react-transition-group
+```
+
+**Example**
+
```tsx
import * as React from 'react'
import { Tab, Tabs } from 'mui-tabs'
import RippleButton from 'mui-tabs/RippleButton'
-import 'mui-tabs/dist/main.css'
-import 'mui-tabs/dist/ripple.css'
-// or import 'mui-tabs/dist/all.css'
-// or import 'mui-tabs/dist/scss/all.scss'
+import 'mui-tabs/styles/main.css'
+import 'mui-tabs/styles/ripple.css'
+// or import 'mui-tabs/styles/all.css'
+// or import 'mui-tabs/styles/scss/all.scss'
const App = () => {
const [value, setValue] = React.useState(1)
diff --git a/app.d.ts b/app.d.ts
new file mode 100644
index 0000000..1e92736
--- /dev/null
+++ b/app.d.ts
@@ -0,0 +1,16 @@
+export {}
+
+declare global {
+ import { SinonStatic } from 'sinon'
+ import { expect as chaiExpect } from 'chai'
+
+ export let sinon: SinonStatic
+ export let expect: typeof chaiExpect
+
+ namespace NodeJS {
+ interface ProcessEnv {
+ NODE_ENV: 'test' | 'development' | 'production' | string
+ [key: string]: string | undefined
+ }
+ }
+}
diff --git a/babel.config.js b/babel.config.js
index e41f26a..2e835e0 100644
--- a/babel.config.js
+++ b/babel.config.js
@@ -1,30 +1,22 @@
-module.exports = function (api) {
- const useESModules = api.env(['legacy', 'modern'])
-
- return {
- presets: [
- [
- '@babel/preset-env',
- {
- bugfixes: true,
- browserslistEnv: process.env.BABEL_ENV || process.env.NODE_ENV,
- modules: useESModules ? false : 'commonjs',
- shippedProposals: api.env('modern')
+module.exports = {
+ presets: [
+ '@babel/preset-env',
+ '@babel/preset-flow',
+ '@babel/preset-react',
+ '@babel/preset-typescript'
+ ],
+ plugins: [
+ [
+ 'module-resolver',
+ {
+ root: ['.'],
+ alias: {
+ '@utils': './src/utils',
+ '@assets': './src/assets',
+ 'test-utils': './utils/test-utils.ts'
}
- ],
- '@babel/preset-flow',
- '@babel/preset-react',
- '@babel/preset-typescript'
+ }
],
- plugins: [
- [
- 'babel-plugin-replace-imports',
- {
- test: /^@mui-tabs\/utils\/src/,
- replacer: useESModules ? '../../utils/esm' : '../utils'
- }
- ],
- ['@babel/plugin-transform-runtime', { useESModules, version: '^7.4.4' }]
- ]
- }
+ '@babel/plugin-transform-runtime'
+ ]
}
diff --git a/deploy-gh-pages.sh b/deploy-gh-pages.sh
deleted file mode 100755
index 93d20bb..0000000
--- a/deploy-gh-pages.sh
+++ /dev/null
@@ -1,17 +0,0 @@
-#!/usr/bin/env bash
-
-if [ -f .env ]; then
- export "$(grep -v '^#' .env | xargs)"
-fi
-
-if [ -z "$GH_TOKEN" ]; then
- echo "The GH_TOKEN environment variable could not be provided. Check the .env file."
- exit 1
-fi
-
-BRANCH="example"
-DIST="$PWD/packages/web/example/build"
-REPO_PATH="$(node -p 'require("./package.json").repository.split("/").slice(-2).join("/")')"
-REPO="https://$GH_TOKEN@github.com/$REPO_PATH"
-
-gh-pages --dist "$DIST" --repo "$REPO" --branch "$BRANCH"
diff --git a/packages/native/Example/.bundle/config b/examples/native-example/.bundle/config
similarity index 100%
rename from packages/native/Example/.bundle/config
rename to examples/native-example/.bundle/config
diff --git a/examples/native-example/.eslintrc.js b/examples/native-example/.eslintrc.js
new file mode 100644
index 0000000..e3b922f
--- /dev/null
+++ b/examples/native-example/.eslintrc.js
@@ -0,0 +1,7 @@
+module.exports = {
+ root: true,
+ extends: '@react-native',
+ rules: {
+ 'comma-dangle': 'off'
+ }
+};
diff --git a/packages/native/Example/.prettierrc.js b/examples/native-example/.prettierrc.js
similarity index 58%
rename from packages/native/Example/.prettierrc.js
rename to examples/native-example/.prettierrc.js
index 2ed5b70..0047886 100644
--- a/packages/native/Example/.prettierrc.js
+++ b/examples/native-example/.prettierrc.js
@@ -1,8 +1,8 @@
module.exports = {
- semi: false,
- arrowParens: 'always',
- bracketSameLine: false,
- bracketSpacing: true,
singleQuote: true,
- trailingComma: 'none',
+ jsxSingleQuote: false,
+ semi: true,
+ bracketSpacing: true,
+ arrowParens: 'always',
+ trailingComma: 'none'
};
diff --git a/examples/native-example/.ruby-version b/examples/native-example/.ruby-version
new file mode 100644
index 0000000..4a36342
--- /dev/null
+++ b/examples/native-example/.ruby-version
@@ -0,0 +1 @@
+3.0.0
diff --git a/examples/native-example/.watchmanconfig b/examples/native-example/.watchmanconfig
new file mode 100644
index 0000000..0967ef4
--- /dev/null
+++ b/examples/native-example/.watchmanconfig
@@ -0,0 +1 @@
+{}
diff --git a/packages/native/Example/Gemfile b/examples/native-example/Gemfile
similarity index 56%
rename from packages/native/Example/Gemfile
rename to examples/native-example/Gemfile
index 5efda89..6a7d5c7 100644
--- a/packages/native/Example/Gemfile
+++ b/examples/native-example/Gemfile
@@ -1,6 +1,7 @@
source 'https://rubygems.org'
# You may use http://rbenv.org/ or https://rvm.io/ to install and use this version
-ruby '2.7.5'
+ruby ">= 2.6.10"
-gem 'cocoapods', '~> 1.11', '>= 1.11.2'
+gem 'cocoapods', '~> 1.13'
+gem 'activesupport', '>= 6.1.7.3', '< 7.1.0'
diff --git a/examples/native-example/Gemfile.lock b/examples/native-example/Gemfile.lock
new file mode 100644
index 0000000..67eae1d
--- /dev/null
+++ b/examples/native-example/Gemfile.lock
@@ -0,0 +1,99 @@
+GEM
+ remote: https://rubygems.org/
+ specs:
+ CFPropertyList (3.0.6)
+ rexml
+ activesupport (7.0.8)
+ concurrent-ruby (~> 1.0, >= 1.0.2)
+ i18n (>= 1.6, < 2)
+ minitest (>= 5.1)
+ tzinfo (~> 2.0)
+ addressable (2.8.6)
+ public_suffix (>= 2.0.2, < 6.0)
+ algoliasearch (1.27.5)
+ httpclient (~> 2.8, >= 2.8.3)
+ json (>= 1.5.1)
+ atomos (0.1.3)
+ claide (1.1.0)
+ cocoapods (1.14.3)
+ addressable (~> 2.8)
+ claide (>= 1.0.2, < 2.0)
+ cocoapods-core (= 1.14.3)
+ cocoapods-deintegrate (>= 1.0.3, < 2.0)
+ cocoapods-downloader (>= 2.1, < 3.0)
+ cocoapods-plugins (>= 1.0.0, < 2.0)
+ cocoapods-search (>= 1.0.0, < 2.0)
+ cocoapods-trunk (>= 1.6.0, < 2.0)
+ cocoapods-try (>= 1.1.0, < 2.0)
+ colored2 (~> 3.1)
+ escape (~> 0.0.4)
+ fourflusher (>= 2.3.0, < 3.0)
+ gh_inspector (~> 1.0)
+ molinillo (~> 0.8.0)
+ nap (~> 1.0)
+ ruby-macho (>= 2.3.0, < 3.0)
+ xcodeproj (>= 1.23.0, < 2.0)
+ cocoapods-core (1.14.3)
+ activesupport (>= 5.0, < 8)
+ addressable (~> 2.8)
+ algoliasearch (~> 1.0)
+ concurrent-ruby (~> 1.1)
+ fuzzy_match (~> 2.0.4)
+ nap (~> 1.0)
+ netrc (~> 0.11)
+ public_suffix (~> 4.0)
+ typhoeus (~> 1.0)
+ cocoapods-deintegrate (1.0.5)
+ cocoapods-downloader (2.1)
+ cocoapods-plugins (1.0.0)
+ nap
+ cocoapods-search (1.0.1)
+ cocoapods-trunk (1.6.0)
+ nap (>= 0.8, < 2.0)
+ netrc (~> 0.11)
+ cocoapods-try (1.2.0)
+ colored2 (3.1.2)
+ concurrent-ruby (1.2.2)
+ escape (0.0.4)
+ ethon (0.16.0)
+ ffi (>= 1.15.0)
+ ffi (1.16.3)
+ fourflusher (2.3.1)
+ fuzzy_match (2.0.4)
+ gh_inspector (1.1.3)
+ httpclient (2.8.3)
+ i18n (1.14.1)
+ concurrent-ruby (~> 1.0)
+ json (2.7.1)
+ minitest (5.20.0)
+ molinillo (0.8.0)
+ nanaimo (0.3.0)
+ nap (1.1.0)
+ netrc (0.11.0)
+ public_suffix (4.0.7)
+ rexml (3.2.6)
+ ruby-macho (2.5.1)
+ typhoeus (1.4.1)
+ ethon (>= 0.9.0)
+ tzinfo (2.0.6)
+ concurrent-ruby (~> 1.0)
+ xcodeproj (1.23.0)
+ CFPropertyList (>= 2.3.3, < 4.0)
+ atomos (~> 0.1.3)
+ claide (>= 1.0.2, < 2.0)
+ colored2 (~> 3.1)
+ nanaimo (~> 0.3.0)
+ rexml (~> 3.2.4)
+
+PLATFORMS
+ ruby
+
+DEPENDENCIES
+ activesupport (>= 6.1.7.3, < 7.1.0)
+ cocoapods (~> 1.13)
+
+RUBY VERSION
+ ruby 3.0.0p0
+
+BUNDLED WITH
+ 2.2.3
diff --git a/examples/native-example/README.md b/examples/native-example/README.md
new file mode 100644
index 0000000..12470c3
--- /dev/null
+++ b/examples/native-example/README.md
@@ -0,0 +1,79 @@
+This is a new [**React Native**](https://reactnative.dev) project, bootstrapped using [`@react-native-community/cli`](https://github.com/react-native-community/cli).
+
+# Getting Started
+
+>**Note**: Make sure you have completed the [React Native - Environment Setup](https://reactnative.dev/docs/environment-setup) instructions till "Creating a new application" step, before proceeding.
+
+## Step 1: Start the Metro Server
+
+First, you will need to start **Metro**, the JavaScript _bundler_ that ships _with_ React Native.
+
+To start Metro, run the following command from the _root_ of your React Native project:
+
+```bash
+# using npm
+npm start
+
+# OR using Yarn
+yarn start
+```
+
+## Step 2: Start your Application
+
+Let Metro Bundler run in its _own_ terminal. Open a _new_ terminal from the _root_ of your React Native project. Run the following command to start your _Android_ or _iOS_ app:
+
+### For Android
+
+```bash
+# using npm
+npm run android
+
+# OR using Yarn
+yarn android
+```
+
+### For iOS
+
+```bash
+# using npm
+npm run ios
+
+# OR using Yarn
+yarn ios
+```
+
+If everything is set up _correctly_, you should see your new app running in your _Android Emulator_ or _iOS Simulator_ shortly provided you have set up your emulator/simulator correctly.
+
+This is one way to run your app — you can also run it directly from within Android Studio and Xcode respectively.
+
+## Step 3: Modifying your App
+
+Now that you have successfully run the app, let's modify it.
+
+1. Open `App.tsx` in your text editor of choice and edit some lines.
+2. For **Android**: Press the R key twice or select **"Reload"** from the **Developer Menu** (Ctrl + M (on Window and Linux) or Cmd ⌘ + M (on macOS)) to see your changes!
+
+ For **iOS**: Hit Cmd ⌘ + R in your iOS Simulator to reload the app and see your changes!
+
+## Congratulations! :tada:
+
+You've successfully run and modified your React Native App. :partying_face:
+
+### Now what?
+
+- If you want to add this new React Native code to an existing application, check out the [Integration guide](https://reactnative.dev/docs/integration-with-existing-apps).
+- If you're curious to learn more about React Native, check out the [Introduction to React Native](https://reactnative.dev/docs/getting-started).
+
+# Troubleshooting
+
+If you can't get this to work, see the [Troubleshooting](https://reactnative.dev/docs/troubleshooting) page.
+
+# Learn More
+
+To learn more about React Native, take a look at the following resources:
+
+- [React Native Website](https://reactnative.dev) - learn more about React Native.
+- [Getting Started](https://reactnative.dev/docs/environment-setup) - an **overview** of React Native and how setup your environment.
+- [Learn the Basics](https://reactnative.dev/docs/getting-started) - a **guided tour** of the React Native **basics**.
+- [Blog](https://reactnative.dev/blog) - read the latest official React Native **Blog** posts.
+- [`@facebook/react-native`](https://github.com/facebook/react-native) - the Open Source; GitHub **repository** for React Native.
diff --git a/packages/native/Example/__tests__/App-test.tsx b/examples/native-example/__tests__/App.test.tsx
similarity index 73%
rename from packages/native/Example/__tests__/App-test.tsx
rename to examples/native-example/__tests__/App.test.tsx
index 1784766..3413ac1 100644
--- a/packages/native/Example/__tests__/App-test.tsx
+++ b/examples/native-example/__tests__/App.test.tsx
@@ -6,6 +6,9 @@ import 'react-native';
import React from 'react';
import App from '../App';
+// Note: import explicitly to use the types shiped with jest.
+import {it} from '@jest/globals';
+
// Note: test renderer must be required after react-native.
import renderer from 'react-test-renderer';
diff --git a/examples/native-example/android/app/build.gradle b/examples/native-example/android/app/build.gradle
new file mode 100644
index 0000000..8a6c3ff
--- /dev/null
+++ b/examples/native-example/android/app/build.gradle
@@ -0,0 +1,129 @@
+apply plugin: "com.android.application"
+apply plugin: "com.facebook.react"
+
+project.ext.vectoricons = [
+ iconFontNames: [ 'Ionicons.ttf' ]
+]
+
+
+/**
+ * This is the configuration block to customize your React Native Android app.
+ * By default you don't need to apply any configuration, just uncomment the lines you need.
+ */
+react {
+ /* Folders */
+ // The root of your project, i.e. where "package.json" lives. Default is '..'
+ // root = file("../")
+ // The folder where the react-native NPM package is. Default is ../node_modules/react-native
+ // reactNativeDir = file("../node_modules/react-native")
+ // The folder where the react-native Codegen package is. Default is ../node_modules/@react-native/codegen
+ // codegenDir = file("../node_modules/@react-native/codegen")
+ // The cli.js file which is the React Native CLI entrypoint. Default is ../node_modules/react-native/cli.js
+ // cliFile = file("../node_modules/react-native/cli.js")
+
+ /* Variants */
+ // The list of variants to that are debuggable. For those we're going to
+ // skip the bundling of the JS bundle and the assets. By default is just 'debug'.
+ // If you add flavors like lite, prod, etc. you'll have to list your debuggableVariants.
+ // debuggableVariants = ["liteDebug", "prodDebug"]
+
+ /* Bundling */
+ // A list containing the node command and its flags. Default is just 'node'.
+ // nodeExecutableAndArgs = ["node"]
+ //
+ // The command to run when bundling. By default is 'bundle'
+ // bundleCommand = "ram-bundle"
+ //
+ // The path to the CLI configuration file. Default is empty.
+ // bundleConfig = file(../rn-cli.config.js)
+ //
+ // The name of the generated asset file containing your JS bundle
+ // bundleAssetName = "MyApplication.android.bundle"
+ //
+ // The entry file for bundle generation. Default is 'index.android.js' or 'index.js'
+ // entryFile = file("../js/MyApplication.android.js")
+ //
+ // A list of extra flags to pass to the 'bundle' commands.
+ // See https://github.com/react-native-community/cli/blob/main/docs/commands.md#bundle
+ // extraPackagerArgs = []
+
+ /* Hermes Commands */
+ // The hermes compiler command to run. By default it is 'hermesc'
+ // hermesCommand = "$rootDir/my-custom-hermesc/bin/hermesc"
+ //
+ // The list of flags to pass to the Hermes compiler. By default is "-O", "-output-source-map"
+ // hermesFlags = ["-O", "-output-source-map"]
+}
+
+/**
+ * Set this to true to Run Proguard on Release builds to minify the Java bytecode.
+ */
+def enableProguardInReleaseBuilds = false
+
+/**
+ * The preferred build flavor of JavaScriptCore (JSC)
+ *
+ * For example, to use the international variant, you can use:
+ * `def jscFlavor = 'org.webkit:android-jsc-intl:+'`
+ *
+ * The international variant includes ICU i18n library and necessary data
+ * allowing to use e.g. `Date.toLocaleString` and `String.localeCompare` that
+ * give correct results when using with locales other than en-US. Note that
+ * this variant is about 6MiB larger per architecture than default.
+ */
+def jscFlavor = 'org.webkit:android-jsc:+'
+
+android {
+ ndkVersion rootProject.ext.ndkVersion
+
+ compileSdkVersion rootProject.ext.compileSdkVersion
+
+ namespace "com.muitabs.example"
+ defaultConfig {
+ applicationId "com.muitabs.example"
+ minSdkVersion rootProject.ext.minSdkVersion
+ targetSdkVersion rootProject.ext.targetSdkVersion
+ versionCode 1
+ versionName "1.0"
+ }
+ signingConfigs {
+ debug {
+ storeFile file('debug.keystore')
+ storePassword 'android'
+ keyAlias 'androiddebugkey'
+ keyPassword 'android'
+ }
+ }
+ buildTypes {
+ debug {
+ signingConfig signingConfigs.debug
+ }
+ release {
+ // Caution! In production, you need to generate your own keystore file.
+ // see https://reactnative.dev/docs/signed-apk-android.
+ signingConfig signingConfigs.debug
+ minifyEnabled enableProguardInReleaseBuilds
+ proguardFiles getDefaultProguardFile("proguard-android.txt"), "proguard-rules.pro"
+ }
+ }
+}
+
+dependencies {
+ // The version of react-native is set by the React Native Gradle Plugin
+ implementation("com.facebook.react:react-android")
+
+ debugImplementation("com.facebook.flipper:flipper:${FLIPPER_VERSION}")
+ debugImplementation("com.facebook.flipper:flipper-network-plugin:${FLIPPER_VERSION}") {
+ exclude group:'com.squareup.okhttp3', module:'okhttp'
+ }
+
+ debugImplementation("com.facebook.flipper:flipper-fresco-plugin:${FLIPPER_VERSION}")
+ if (hermesEnabled.toBoolean()) {
+ implementation("com.facebook.react:hermes-android")
+ } else {
+ implementation jscFlavor
+ }
+}
+
+apply from: file("../../node_modules/@react-native-community/cli-platform-android/native_modules.gradle"); applyNativeModulesAppBuildGradle(project)
+apply from: file("../../node_modules/react-native-vector-icons/fonts.gradle")
diff --git a/packages/native/Example/android/app/debug.keystore b/examples/native-example/android/app/debug.keystore
similarity index 100%
rename from packages/native/Example/android/app/debug.keystore
rename to examples/native-example/android/app/debug.keystore
diff --git a/packages/native/Example/android/app/proguard-rules.pro b/examples/native-example/android/app/proguard-rules.pro
similarity index 100%
rename from packages/native/Example/android/app/proguard-rules.pro
rename to examples/native-example/android/app/proguard-rules.pro
diff --git a/packages/native/Example/android/app/src/debug/AndroidManifest.xml b/examples/native-example/android/app/src/debug/AndroidManifest.xml
similarity index 100%
rename from packages/native/Example/android/app/src/debug/AndroidManifest.xml
rename to examples/native-example/android/app/src/debug/AndroidManifest.xml
diff --git a/packages/native/Example/android/app/src/debug/java/com/example/ReactNativeFlipper.java b/examples/native-example/android/app/src/debug/java/com/muitabs/example/ReactNativeFlipper.java
similarity index 93%
rename from packages/native/Example/android/app/src/debug/java/com/example/ReactNativeFlipper.java
rename to examples/native-example/android/app/src/debug/java/com/muitabs/example/ReactNativeFlipper.java
index 9ffdd88..9d327f9 100644
--- a/packages/native/Example/android/app/src/debug/java/com/example/ReactNativeFlipper.java
+++ b/examples/native-example/android/app/src/debug/java/com/muitabs/example/ReactNativeFlipper.java
@@ -4,7 +4,7 @@
*
This source code is licensed under the MIT license found in the LICENSE file in the root
* directory of this source tree.
*/
-package com.example;
+package com.muitabs.example;
import android.content.Context;
import com.facebook.flipper.android.AndroidFlipperClient;
@@ -17,7 +17,6 @@
import com.facebook.flipper.plugins.inspector.InspectorFlipperPlugin;
import com.facebook.flipper.plugins.network.FlipperOkhttpInterceptor;
import com.facebook.flipper.plugins.network.NetworkFlipperPlugin;
-import com.facebook.flipper.plugins.react.ReactFlipperPlugin;
import com.facebook.flipper.plugins.sharedpreferences.SharedPreferencesFlipperPlugin;
import com.facebook.react.ReactInstanceEventListener;
import com.facebook.react.ReactInstanceManager;
@@ -25,13 +24,16 @@
import com.facebook.react.modules.network.NetworkingModule;
import okhttp3.OkHttpClient;
+/**
+ * Class responsible of loading Flipper inside your React Native application. This is the debug
+ * flavor of it. Here you can add your own plugins and customize the Flipper setup.
+ */
public class ReactNativeFlipper {
public static void initializeFlipper(Context context, ReactInstanceManager reactInstanceManager) {
if (FlipperUtils.shouldEnableFlipper(context)) {
final FlipperClient client = AndroidFlipperClient.getInstance(context);
client.addPlugin(new InspectorFlipperPlugin(context, DescriptorMapping.withDefaults()));
- client.addPlugin(new ReactFlipperPlugin());
client.addPlugin(new DatabasesFlipperPlugin(context));
client.addPlugin(new SharedPreferencesFlipperPlugin(context));
client.addPlugin(CrashReporterPlugin.getInstance());
diff --git a/packages/native/Example/android/app/src/main/AndroidManifest.xml b/examples/native-example/android/app/src/main/AndroidManifest.xml
similarity index 96%
rename from packages/native/Example/android/app/src/main/AndroidManifest.xml
rename to examples/native-example/android/app/src/main/AndroidManifest.xml
index ef3c312..4122f36 100644
--- a/packages/native/Example/android/app/src/main/AndroidManifest.xml
+++ b/examples/native-example/android/app/src/main/AndroidManifest.xml
@@ -1,5 +1,4 @@
-
+
diff --git a/examples/native-example/android/app/src/main/java/com/muitabs/example/MainActivity.java b/examples/native-example/android/app/src/main/java/com/muitabs/example/MainActivity.java
new file mode 100644
index 0000000..36d081c
--- /dev/null
+++ b/examples/native-example/android/app/src/main/java/com/muitabs/example/MainActivity.java
@@ -0,0 +1,32 @@
+package com.muitabs.example;
+
+import com.facebook.react.ReactActivity;
+import com.facebook.react.ReactActivityDelegate;
+import com.facebook.react.defaults.DefaultNewArchitectureEntryPoint;
+import com.facebook.react.defaults.DefaultReactActivityDelegate;
+
+public class MainActivity extends ReactActivity {
+
+ /**
+ * Returns the name of the main component registered from JavaScript. This is used to schedule
+ * rendering of the component.
+ */
+ @Override
+ protected String getMainComponentName() {
+ return "MUI Tabs Example";
+ }
+
+ /**
+ * Returns the instance of the {@link ReactActivityDelegate}. Here we use a util class {@link
+ * DefaultReactActivityDelegate} which allows you to easily enable Fabric and Concurrent React
+ * (aka React 18) with two boolean flags.
+ */
+ @Override
+ protected ReactActivityDelegate createReactActivityDelegate() {
+ return new DefaultReactActivityDelegate(
+ this,
+ getMainComponentName(),
+ // If you opted-in for the New Architecture, we enable the Fabric Renderer.
+ DefaultNewArchitectureEntryPoint.getFabricEnabled());
+ }
+}
diff --git a/examples/native-example/android/app/src/main/java/com/muitabs/example/MainApplication.java b/examples/native-example/android/app/src/main/java/com/muitabs/example/MainApplication.java
new file mode 100644
index 0000000..b1d2537
--- /dev/null
+++ b/examples/native-example/android/app/src/main/java/com/muitabs/example/MainApplication.java
@@ -0,0 +1,62 @@
+package com.muitabs.example;
+
+import android.app.Application;
+import com.facebook.react.PackageList;
+import com.facebook.react.ReactApplication;
+import com.facebook.react.ReactNativeHost;
+import com.facebook.react.ReactPackage;
+import com.facebook.react.defaults.DefaultNewArchitectureEntryPoint;
+import com.facebook.react.defaults.DefaultReactNativeHost;
+import com.facebook.soloader.SoLoader;
+import java.util.List;
+
+public class MainApplication extends Application implements ReactApplication {
+
+ private final ReactNativeHost mReactNativeHost =
+ new DefaultReactNativeHost(this) {
+ @Override
+ public boolean getUseDeveloperSupport() {
+ return BuildConfig.DEBUG;
+ }
+
+ @Override
+ protected List getPackages() {
+ @SuppressWarnings("UnnecessaryLocalVariable")
+ List packages = new PackageList(this).getPackages();
+ // Packages that cannot be autolinked yet can be added manually here, for example:
+ // packages.add(new MyReactNativePackage());
+ return packages;
+ }
+
+ @Override
+ protected String getJSMainModuleName() {
+ return "index";
+ }
+
+ @Override
+ protected boolean isNewArchEnabled() {
+ return BuildConfig.IS_NEW_ARCHITECTURE_ENABLED;
+ }
+
+ @Override
+ protected Boolean isHermesEnabled() {
+ return BuildConfig.IS_HERMES_ENABLED;
+ }
+ };
+
+ @Override
+ public ReactNativeHost getReactNativeHost() {
+ return mReactNativeHost;
+ }
+
+ @Override
+ public void onCreate() {
+ super.onCreate();
+ SoLoader.init(this, /* native exopackage */ false);
+ if (BuildConfig.IS_NEW_ARCHITECTURE_ENABLED) {
+ // If you opted-in for the New Architecture, we load the native entry point for this app.
+ DefaultNewArchitectureEntryPoint.load();
+ }
+ ReactNativeFlipper.initializeFlipper(this, getReactNativeHost().getReactInstanceManager());
+ }
+}
diff --git a/packages/native/Example/android/app/src/main/res/drawable/rn_edit_text_material.xml b/examples/native-example/android/app/src/main/res/drawable/rn_edit_text_material.xml
similarity index 99%
rename from packages/native/Example/android/app/src/main/res/drawable/rn_edit_text_material.xml
rename to examples/native-example/android/app/src/main/res/drawable/rn_edit_text_material.xml
index f35d996..73b37e4 100644
--- a/packages/native/Example/android/app/src/main/res/drawable/rn_edit_text_material.xml
+++ b/examples/native-example/android/app/src/main/res/drawable/rn_edit_text_material.xml
@@ -20,7 +20,7 @@
android:insetBottom="@dimen/abc_edit_text_inset_bottom_material">
-
-
-
-
- Material UI Tabs
-
-
-
-
-
-
-
-
-
-
-