{"id":29443410,"url":"https://github.com/murat-mehmet/react-native-design-mode","last_synced_at":"2025-07-13T16:07:59.727Z","repository":{"id":57688604,"uuid":"475413573","full_name":"murat-mehmet/react-native-design-mode","owner":"murat-mehmet","description":"A Lightweight Storybook Alternative for Effortless View Design.","archived":false,"fork":false,"pushed_at":"2024-03-06T15:36:07.000Z","size":1192,"stargazers_count":6,"open_issues_count":0,"forks_count":1,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-06-28T03:39:50.314Z","etag":null,"topics":["alternative","design","react-native","storybook"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/murat-mehmet.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2022-03-29T11:35:22.000Z","updated_at":"2024-03-31T16:48:38.000Z","dependencies_parsed_at":"2024-09-26T02:20:04.163Z","dependency_job_id":null,"html_url":"https://github.com/murat-mehmet/react-native-design-mode","commit_stats":{"total_commits":6,"total_committers":2,"mean_commits":3.0,"dds":"0.16666666666666663","last_synced_commit":"33ce3513ec6f42eb5e981fbc0b95ea7fdc1b87bc"},"previous_names":[],"tags_count":3,"template":false,"template_full_name":null,"purl":"pkg:github/murat-mehmet/react-native-design-mode","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/murat-mehmet%2Freact-native-design-mode","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/murat-mehmet%2Freact-native-design-mode/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/murat-mehmet%2Freact-native-design-mode/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/murat-mehmet%2Freact-native-design-mode/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/murat-mehmet","download_url":"https://codeload.github.com/murat-mehmet/react-native-design-mode/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/murat-mehmet%2Freact-native-design-mode/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":264390708,"owners_count":23600562,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["alternative","design","react-native","storybook"],"created_at":"2025-07-13T16:07:56.955Z","updated_at":"2025-07-13T16:07:59.722Z","avatar_url":"https://github.com/murat-mehmet.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# 🛠️ React Native Design Mode - Simplify Creating Views\n\n[![npm version](https://badge.fury.io/js/react-native-design-mode.svg)](https://badge.fury.io/js/react-native-design-mode)\n[![License: MIT](https://img.shields.io/badge/License-MIT-blue.svg)](https://opensource.org/licenses/MIT)\n\n\n\u003ch4 align=\"center\"\u003e\n    A Lightweight Storybook Alternative for Effortless View Design.\n\u003c/h4\u003e\n\u003cdiv align=\"center\"\u003e\n    \u003cimg src=\"https://raw.github.com/murat-mehmet/react-native-design-mode/master/images/basic.png\" width=\"250px\" /\u003e \n    \u003cimg src=\"https://raw.github.com/murat-mehmet/react-native-design-mode/master/images/search.png\" width=\"250px\" /\u003e \n\u003c/div\u003e\n\n# Table of Contents\n\n1. \u0026#128196; [Description](#-description)\n2. \u0026#128640; [Features](#-features)\n3. \u0026#9881; [Installation](#-installation)\n4. \u0026#127937; [Getting Started](#-getting-started)\n5. \u0026#128161; [Usage](#-usage)\n  - \u0026#127912; [Creating Designs](#-creating-designs)\n  - \u0026#128260; [Moving Between Designs](#-moving-between-designs)\n  - \u0026#128295; [Creating Designs with Variants](#-creating-designs-with-variants)\n  - \u0026#128193; [Categorized List View](#-categorized-list-view)\n  - \u0026#127880; [Draggable Floating Button](#-draggable-floating-button)\n6. \u0026#9881; [Configuration](#-configuration)\n  - \u0026#128196; [`main.js`](#-mainjs)\n  - \u0026#128196; [`index.js`](#-indexjs)\n  - \u0026#128196; [`designer.requires.js`](#-designerrequiresjs)\n  - \u0026#128196; [`preview.js`](#-previewjs)\n7. \u0026#128074; [Contributing](#-contributing)\n8. \u0026#128219; [License](#-license)\n9. \u0026#128231; [Contact](#-contact)\n\n## \u0026#128196; Description\nReact Native Design Mode is a developer-friendly package that streamlines the process of creating views without the need to navigate through the entire app flow. If you've found Storybook to be a bit heavy for your simple projects, this package offers a lightweight alternative with all the features you need.\n\nHeavily inspired by storybook project so most things are similar.\n\n## \u0026#128640; Features\n\n- Effortless design mode toggle with a floating button\n- Allows developer to focus more on quickly designing views\n- Lightweight and efficient implementation\n- Familiar structure that is inspired by Storybook\n\n## \u0026#9881; Installation\n\nYou can install the package via npm or yarn:\n\n```bash\nnpm install react-native-design-mode\n# or\nyarn add react-native-design-mode\n```\n\n## \u0026#127937; Getting Started\nRun CLI to quickly install designer into your project.\n```bash\ndesigner install\n```\n\n\nIt does two things:\n1. Creates a `.designer` folder in your project root with required files in it.\n2. Adds `designer update` command to the prestart script.\n+ Note:\n  You can use `-c` flag to change the designer folder. Run `designer help install` for details.\n\nAfter running the command you will have the following folder structure\n```\n├── project root\n│   └── 📁 .designer\n│       ├── 📄 designer.requires.js\n│       ├── 📄 index.js\n│       ├── 📄 main.js\n│       └── 📄 preview.js\n```\n## \u0026#128161; Usage\nImport the designer file\n```js\nimport Designer from \"./.designer\";\n```\nAdd `Designer` component in your `App.tsx`\n```jsx\nconst App = () =\u003e {\n  return (\n    \u003c\u003e\n      \u003cSafeAreaProvider\u003e\n        \u003cAppContainer /\u003e\n      \u003c/SafeAreaProvider\u003e\n      \u003cDesigner /\u003e\n    \u003c/\u003e\n  );\n}\n```\nOr use it directly in your `index.js` file\n```js\nAppRegistry.registerComponent(appName, () =\u003e Designer);\n```\n\n#### Now you are ready to create your first design!\n\n### \u0026#127912; Creating designs\nImagine you have a `Login.tsx` screen that you want to design. \n\nTo achieve this, all you have to do is create a new file named `Login.design.tsx` right next to the `Login.tsx`.\n```typescript jsx\n// src/Login.design.tsx\n\nimport Login from './Login';\n\nexport default {\n  title: 'Login',\n  component: Login,\n}\n```\nOnce you've added the new design file, you'll need to update the design list. \n\nYou can do this in two ways:\n- Use the command-line interface (CLI) to manually update the list. (Recommended)\n```bash\ndesigner update\n```\n- Restart the bundler, which will automatically trigger the prestart script\n```bash\nnpm start\n```\n\nGreat news! You're all set! Open the app, and you'll see the Login screen right in design mode. Now you can start designing and refining the layout with ease.\n\n### \u0026#128260; Moving between designs\n\nWhile we are on the design selection screen, floating button works like a toggle to switch design mode on/off.\n\nAfter you select a design, we can click on floating button to go back to design list.\n\n\u003cdiv\u003e\n    \u003cimg src=\"https://raw.github.com/murat-mehmet/react-native-design-mode/master/images/predesign.jpg\" width=\"250px\" /\u003e\n    \u003cimg src=\"https://raw.github.com/murat-mehmet/react-native-design-mode/master/images/design.jpg\" width=\"250px\" /\u003e\n\u003c/div\u003e\n\n### \u0026#128295; Creating designs with variants\n\nWe can easily create different variants of a design by exporting more design objects.\n```typescript jsx\n// src/Login.design.tsx\n\nimport Login from './Login';\n\nexport default {\n  title: 'Login',\n  component: Login,\n}\n\n// export default variant\nexport const Basic = {}\n\n// export another variant\nexport const Dark = () =\u003e \u003cLogin theme={'dark'} /\u003e\n```\n\n### \u0026#128193; Categorized list view\n\nWe can categorize our views infinitely by adding group names in titles\n\n\u003cdiv\u003e\n    \u003cimg src=\"https://raw.github.com/murat-mehmet/react-native-design-mode/master/images/category.png\" width=\"250px\" /\u003e\n\u003c/div\u003e\n\n```typescript jsx\n// src/Login.design.tsx\n\nimport Login from './Login';\n\nexport default {\n  title: 'Authentication/Login',\n  component: Login,\n}\n```\n\n### \u0026#127880; Draggable floating button\n\nWe have the flexibility to position the floating button on the screen edges, ensuring it won't obstruct our view design process.\n\n\u003cdiv\u003e\n    \u003cimg src=\"https://raw.github.com/murat-mehmet/react-native-design-mode/master/images/floating1.png\" width=\"250px\" /\u003e\n    \u003cimg src=\"https://raw.github.com/murat-mehmet/react-native-design-mode/master/images/floating2.png\" width=\"250px\" /\u003e\n\u003c/div\u003e\n\n- Note: To make the floating button draggable on android,\nmake sure you use either `GestureHandlerRootView` or `gestureHandlerRootHOC`. Check [installation docs for RNGH](https://docs.swmansion.com/react-native-gesture-handler/docs/installation#js)\n\n## \u0026#9881; Configuration\n### \u0026#128196; `main.js`\n```js\nmodule.exports = {\n  designs: [\"../src/**/*.design.@(js|jsx|ts|tsx)\"],\n};\n```\n- `designs`: This is an array that defines the location of our design files. By default, we use a glob pattern to load all *.design.js files inside the src directory and its subdirectories. You may need to adjust the path based on your project structure.\n- `excludePaths`: This is an array of path patterns that will be excluded from loading. By default it is `['**/node_modules']`\n\n### \u0026#128196; `index.js`\n```js\nimport { getDesignModeUI } from \"react-native-design-mode\";\n\nif (__DEV__) {\n  require('./designer.requires');\n}\n\nconst Designer = getDesignModeUI();\n\nexport default Designer;\n```\nAll designs are imported here. Designs are stripped out by bundler when building for production so you dont have to worry about it.\n\n### \u0026#128196; `designer.requires.js`\n```js\n/* do not change this file, it is auto generated by design mode. */\n\nimport { context } from \"react-native-design-mode\";\n\ncontext.initialize();\n// ...\n```\nThis is an auto generated file by `design update` command which will be automatically executed on every `npm run start`.\n\nIt is imported in `.designer/index.js` and contains all designs of your project.\n\nYou shouldn't modify this file as it will be overwritten.\n\n### \u0026#128196; `preview.js`\n```js\nimport React from \"react\";\nimport { SafeAreaProvider } from \"react-native-safe-area-context\";\n\nexport const decorators = [\n  // Add SafeAreaProvider to all designs\n  (Component, ctx) =\u003e (\n    \u003cSafeAreaProvider\u003e\n      \u003cComponent /\u003e\n    \u003c/SafeAreaProvider\u003e\n  ),\n];\n```\nThis file is completely optional but it will help us create global declarations for all of our designs.\n- `decorators`: This is an array of functions of Elements or Components that will be applied on every design.\nWe can use it to create wrappers like `SafeAreaProvider` or `Navigator`\n\nCheck this example where we apply navigator conditionally.\n```js\n// .designer/preview.js\n\nconst Stack = createStackNavigator();\n\nexport const decorators = [\n  (Component, ctx) =\u003e {\n    if (ctx.parameters.withNavigation)\n      return (\n        \u003cNavigationContainer\u003e\n          \u003cStack.Navigator initialRouteName=\"design\" screenOptions={{headerShown: false}}\u003e\n            \u003cStack.Screen name=\"design\" component={Component} /\u003e\n          \u003c/Stack.Navigator\u003e\n        \u003c/NavigationContainer\u003e\n      );\n    return Component;\n  },\n];\n\n// src/Login.design.tsx\n\nexport default {\n  title: \"Login\",\n  component: Login,\n  parameters: {\n    withNavigation: true\n  }\n};\n```\n- `parameters`: Global parameters that will be applied on all designs.\n#### Parameter: `designer`\nThis is a special parameter which can config features of our designer. \nCurrently there is only one feature:\n  \n##### Theme Switcher\n\nTo enable theme switcher feature, add a `themeSwitcher` parameter like in example:\n```js\nexport const parameters = {\n  designer: {\n    themeSwitcher: {\n      set: (ctx, value) =\u003e {\n        // here you can set your theme\n        // value is true for dark, false for light\n      },\n      value: false, // initial value\n    }\n  }\n}\n\n```\n\n- `loaders`: This is an object of promise functions that will be executed before displaying any design. The loaded results can be accessed from `ctx.loaded` field.\n\nExample\n```js\n// .designer/preview.js\n\nexport const loaders = {\n  stores: async () =\u003e getStores(),\n};\n\n// example of accesing \"loaded\" field in decorators\nexport const decorators = [\n  (Component, ctx) =\u003e {\n      return (\n        \u003cProvider {...ctx.loaded.stores}\u003e {/* \u003c-- */} \n          \u003cComponent /\u003e\n        \u003c/Provider\u003e\n      );\n  },\n];\n\n// src/Login.design.tsx\n\n// example of accessing \"loaded\" field in designs\nexport default {\n  title: \"Login\",\n  component: Login,\n  prepare: (ctx) =\u003e { \n    // Do something with ctx.loaded.stores \n  }\n};\n```\n\n## \u0026#128074; Contributing\nContributions are welcome! If you find a bug or want to add a new feature, feel free to submit a pull request. For major changes, please open an issue first to discuss the proposed changes.\n\n## \u0026#128219; License\nThis project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.\n\n## \u0026#128231; Contact\nIf you have any questions or need assistance, feel free to open an issue.\n\nHappy coding!\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmurat-mehmet%2Freact-native-design-mode","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmurat-mehmet%2Freact-native-design-mode","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmurat-mehmet%2Freact-native-design-mode/lists"}