├── .eslintrc.js ├── .gitignore ├── .npmignore ├── LICENSE ├── README.md ├── app.plugin.js ├── custom.js ├── docs ├── .gitignore ├── README.md ├── babel.config.js ├── docs │ ├── components │ │ ├── _category_.json │ │ ├── button.md │ │ ├── contentunavailableview.md │ │ ├── contextmenu.md │ │ ├── controlgroup.md │ │ ├── custom.md │ │ ├── divider.md │ │ ├── group.md │ │ ├── hstack.md │ │ ├── image.md │ │ ├── label.md │ │ ├── lazyhstack.md │ │ ├── lazyvstack.md │ │ ├── list_folder │ │ │ ├── _category_.json │ │ │ ├── list.md │ │ │ └── section.md │ │ ├── maskview.md │ │ ├── navigationlink.md │ │ ├── navigationsplitview.md │ │ ├── navigationview.md │ │ ├── popoverview.md │ │ ├── reactchildview.md │ │ ├── rootview.md │ │ ├── scrollview.md │ │ ├── shapes │ │ │ ├── _category_.json │ │ │ ├── circle.md │ │ │ ├── ellipse.md │ │ │ └── rectangle.md │ │ ├── sheetview.md │ │ ├── spacer.md │ │ ├── text.md │ │ ├── toolbaritemgroup.md │ │ ├── vstack.md │ │ └── zstack.md │ ├── custom.md │ ├── events.md │ ├── installation.md │ ├── intro.md │ ├── props.md │ └── usage.md ├── docusaurus.config.ts ├── package-lock.json ├── package.json ├── search.patch ├── sidebars.ts ├── src │ ├── components │ │ └── HomepageFeatures │ │ │ ├── index.tsx │ │ │ └── styles.module.css │ ├── css │ │ └── custom.css │ └── pages │ │ ├── index.module.css │ │ └── index.tsx ├── static │ ├── .nojekyll │ └── img │ │ ├── banner.PNG │ │ ├── component.svg │ │ ├── docs │ │ ├── button.png │ │ ├── contentunavailableview.png │ │ ├── contextmenu.png │ │ ├── controlgroup.png │ │ ├── hstack.png │ │ ├── image.png │ │ ├── label.png │ │ ├── list.png │ │ ├── mask.png │ │ ├── navlink.gif │ │ ├── navsplitview.gif │ │ ├── popover.png │ │ ├── sections.png │ │ └── vstack.png │ │ ├── documented.svg │ │ ├── expandable.svg │ │ ├── favicon.ico │ │ ├── icon.png │ │ ├── integrate.svg │ │ ├── mit.svg │ │ ├── native.svg │ │ └── react.svg └── tsconfig.json ├── example ├── .gitignore ├── App.tsx ├── README.md ├── app.json ├── assets │ ├── adaptive-icon.png │ ├── example_app_banner.png │ ├── favicon.png │ ├── icon.png │ └── splash.png ├── babel.config.js ├── metro.config.js ├── package-lock.json ├── package.json ├── swiftui │ └── example.swift ├── tsconfig.json └── webpack.config.js ├── expo-module.config.json ├── ios ├── AxisBasedStack.swift ├── CustomViews │ ├── example.swift │ └── index.swift ├── ErrorMessage.swift ├── Extensions │ ├── Color+Extensions.swift │ └── View+Extensions.swift ├── Factories │ ├── Modifiers.swift │ └── Views.swift ├── JSONDataView.swift ├── Protocols.swift ├── ReactNativeRenderSwiftUi.podspec ├── ReactNativeRenderSwiftUi.podspec.config ├── ReactNativeRenderSwiftUiModule.swift ├── ReactNativeRenderSwiftUiView.swift ├── UIKitWrapperView.swift ├── controls.swift └── types.swift ├── package-lock.json ├── package.json ├── src ├── CONSTS.ts ├── ReactNativeRenderSwiftUi.types.ts ├── ReactNativeRenderSwiftUiModule.ts ├── ReactNativeRenderSwiftUiView.tsx ├── index.ts ├── serialize.ts └── views │ ├── button.tsx │ ├── circle.tsx │ ├── contentunavailableview.tsx │ ├── contextmenu.tsx │ ├── controlgroup.tsx │ ├── custom.tsx │ ├── disclosuregroup.tsx │ ├── divider.tsx │ ├── ellipse.tsx │ ├── group.tsx │ ├── hstack.tsx │ ├── image.tsx │ ├── index.tsx │ ├── label.tsx │ ├── lazyhstack.tsx │ ├── lazyvstack.tsx │ ├── list.tsx │ ├── maskview.tsx │ ├── navigationlink.tsx │ ├── navigationsplitview.tsx │ ├── navigationview.tsx │ ├── popoverview.tsx │ ├── reactchildview.tsx │ ├── rectangle.tsx │ ├── root.tsx │ ├── scrollview.tsx │ ├── section.tsx │ ├── sheetview.tsx │ ├── spacer.tsx │ ├── text.tsx │ ├── toolbaritemgroup.tsx │ ├── vstack.tsx │ └── zstack.tsx ├── tsconfig.json └── withRNRenderSwiftUI.js /.eslintrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | root: true, 3 | extends: ['universe/native', 'universe/web'], 4 | ignorePatterns: ['build'], 5 | }; 6 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # OSX 2 | # 3 | .DS_Store 4 | 5 | # VSCode 6 | .vscode/ 7 | jsconfig.json 8 | 9 | # Xcode 10 | # 11 | build/ 12 | *.pbxuser 13 | !default.pbxuser 14 | *.mode1v3 15 | !default.mode1v3 16 | *.mode2v3 17 | !default.mode2v3 18 | *.perspectivev3 19 | !default.perspectivev3 20 | xcuserdata 21 | *.xccheckout 22 | *.moved-aside 23 | DerivedData 24 | *.hmap 25 | *.ipa 26 | *.xcuserstate 27 | project.xcworkspace 28 | 29 | # Android/IJ 30 | # 31 | .classpath 32 | .cxx 33 | .gradle 34 | .idea 35 | .project 36 | .settings 37 | local.properties 38 | android.iml 39 | android/app/libs 40 | android/keystores/debug.keystore 41 | 42 | # Cocoapods 43 | # 44 | example/ios/Pods 45 | 46 | # Ruby 47 | example/vendor/ 48 | 49 | # node.js 50 | # 51 | node_modules/ 52 | npm-debug.log 53 | yarn-debug.log 54 | yarn-error.log 55 | 56 | # Expo 57 | .expo/* 58 | 59 | 60 | -------------------------------------------------------------------------------- /.npmignore: -------------------------------------------------------------------------------- 1 | # Exclude all top-level hidden directories by convention 2 | /.*/ 3 | 4 | # Exclude tarballs generated by `npm pack` 5 | /*.tgz 6 | 7 | __mocks__ 8 | __tests__ 9 | 10 | /babel.config.js 11 | /android/src/androidTest/ 12 | /android/src/test/ 13 | /android/build/ 14 | /example/ 15 | /docs/ 16 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2024 Pflaumenbaum 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | 23 | --- 24 | 25 | Attribution: 26 | 27 | Some parts of the iOS implementation in this repository are based on code from the following repository: 28 | 29 | JSONDrivenUI -> (https://github.com/EnesKaraosman/JSONDrivenUI) by EnesKaraosman -> (https://github.com/EnesKaraosman). 30 | 31 | The files that are based on this work include: 32 | - ios/Factories/Views.swift 33 | - ios/Factories/Modifiers.swift 34 | - ios/Extensions/Color+Extensions.swift 35 | - ios/Extensions/View+Extensions.swift 36 | - ios/JSONDataView.swift 37 | - ios/Protocols.swift 38 | - ios/types.swift 39 | - ios/AxisBasedStack.swift 40 | 41 | 42 | The following is the original license from the repository JSONDrivenUI: 43 | 44 | --- 45 | 46 | MIT License 47 | 48 | Copyright (c) 2020 Enes Karaosman 49 | 50 | Permission is hereby granted, free of charge, to any person obtaining a copy 51 | of this software and associated documentation files (the "Software"), to deal 52 | in the Software without restriction, including without limitation the rights 53 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 54 | copies of the Software, and to permit persons to whom the Software is 55 | furnished to do so, subject to the following conditions: 56 | 57 | The above copyright notice and this permission notice shall be included in all 58 | copies or substantial portions of the Software. 59 | 60 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 61 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 62 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 63 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 64 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 65 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 66 | SOFTWARE. 67 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | ![banner](./docs/static/img/banner.PNG) 4 | 5 | Native Swift UI components for React Native 6 | 7 | - Super easy to install thanks to Expo modules and config plugins 8 | - Fully native, true Swift UI 9 | - JSX syntax with live reload 10 | - Over 20 components already implemented 11 | - Possibility to add React views to a Swift UI view. 12 | - Implement your own custom Swift UI views using native Swift code in your React Native app. 13 | 14 | And more ... 15 | 16 | # Documentation 17 | 18 | - [Overview](https://rn-render-swift-ui.netlify.app/docs/intro) 19 | - [Installation](https://rn-render-swift-ui.netlify.app/docs/installation) 20 | - [Components](https://rn-render-swift-ui.netlify.app/docs/category/components) 21 | - [Example Project](./example/) 22 | 23 | # License 24 | 25 | This project is licensed under the MIT License. Parts of the iOS implementation are based on the GitHub repository [JSONDrivenUI](https://github.com/EnesKaraosman/JSONDrivenUI) from EnesKaraosman, which is also licensed under the MIT License. See the [LICENSE](./LICENSE) file for full details. 26 | -------------------------------------------------------------------------------- /app.plugin.js: -------------------------------------------------------------------------------- 1 | const { withDangerousMod } = require("@expo/config-plugins"); 2 | const { execSync } = require("child_process"); 3 | const readline = require("readline"); 4 | 5 | const withRNRenderSwiftUI = (config, { srcDir, noClean, dependencys } = {}) => { 6 | return withDangerousMod(config, [ 7 | "ios", 8 | (config) => { 9 | console.log("Running RNSwiftUI preperation"); 10 | 11 | try { 12 | execSync( 13 | `cp ./node_modules/react-native-render-swift-ui/ios/ReactNativeRenderSwiftUi.podspec.config ./node_modules/react-native-render-swift-ui/ios/ReactNativeRenderSwiftUi.podspec`, 14 | { stdio: "inherit" } 15 | ); 16 | dependencys && 17 | dependencys.forEach((dependency) => { 18 | if ( 19 | dependency !== "Kingfischer" && 20 | dependency !== "ExpoModulesCore" 21 | ) 22 | execSync( 23 | `sed -i '' -e '/# Custom Dependencys/p; s/# Custom Dependencys/s.dependency "${dependency}"/' ./node_modules/react-native-render-swift-ui/ios/ReactNativeRenderSwiftUi.podspec 24 | `, 25 | { stdio: "inherit" } 26 | ); 27 | }); 28 | execSync( 29 | `find ./node_modules/react-native-render-swift-ui/ios/CustomViews -type f ! -name 'index.swift' -exec rm -f {} +`, 30 | { stdio: "inherit" } 31 | ); 32 | execSync( 33 | `node ./node_modules/react-native-render-swift-ui/custom.js ${srcDir !== null && srcDir} ${noClean && "--no-clean"} `, 34 | { stdio: "inherit" } 35 | ); 36 | console.log( 37 | "\u001b[1;32m \n✓ The following dependencies have been added to your project: \n" + 38 | " " + 39 | JSON.stringify(dependencys || []) + 40 | "\n" 41 | ); 42 | 43 | readline 44 | .createInterface({ input: process.stdin, output: process.stdout }) 45 | .question("", (answer) => { 46 | answer.trim().toLowerCase() === "yes" 47 | ? require("child_process").execSync("cd ios && pod install", { 48 | stdio: "inherit", 49 | }) 50 | : console.log(`\u001b[1;33m \n⚠ Pod-Install skipped \n`); 51 | process.exit(); 52 | }); 53 | setTimeout( 54 | () => 55 | console.log( 56 | "\nDo you want to run pod install in the ios directory? (yes/no)" 57 | ), 58 | 1000 59 | ); 60 | } catch (error) { 61 | console.error("Error running rn-render-swift-ui preparation:", error); 62 | } 63 | return config; 64 | }, 65 | ]); 66 | }; 67 | 68 | module.exports = withRNRenderSwiftUI; 69 | -------------------------------------------------------------------------------- /custom.js: -------------------------------------------------------------------------------- 1 | const fs = require("fs"); 2 | const path = require("path"); 3 | 4 | const defaultConf = ` 5 | import ExpoModulesCore 6 | import SwiftUI 7 | 8 | struct CustomView: View { 9 | let viewKey: String 10 | let material: ViewMaterial 11 | let onEvent: EventDispatcher 12 | 13 | @ViewBuilder 14 | var body: some View { 15 | switch viewKey { 16 | default: 17 | ErrorMessage(message: "Native View not found") 18 | } 19 | } 20 | } 21 | 22 | `; 23 | 24 | // Function to extract key, material, and struct name information from content 25 | function extractKeyAndMaterial(content) { 26 | const result = []; 27 | const lines = content.split("\n"); 28 | const eventImport = content.includes("import ExpoModulesCore") ? true : false; 29 | 30 | let inStruct = false; 31 | let material = false; 32 | let event = false; 33 | 34 | let structName = ""; 35 | 36 | lines.forEach((line) => { 37 | if (/\/\/\s*key:/.test(line)) { 38 | const key = line.split(":").pop().trim(); 39 | material = false; 40 | inStruct = false; 41 | event = false; 42 | structName = ""; 43 | 44 | // Process the next lines to find the struct and material 45 | for (let i = lines.indexOf(line) + 1; i < lines.length; i++) { 46 | const currentLine = lines[i]; 47 | if (/struct\s+(\w+)\s*:\s*View\s*{/.test(currentLine)) { 48 | inStruct = true; 49 | structName = currentLine.match(/struct\s+(\w+)\s*:/)[1]; 50 | material = false; 51 | event = false; 52 | } 53 | if (inStruct) { 54 | if (/var\s+material:\s*ViewMaterial/.test(currentLine)) { 55 | material = true; 56 | } 57 | if ( 58 | /var\s+onEvent:\s*EventDispatcher/.test(currentLine) && 59 | eventImport 60 | ) { 61 | event = true; 62 | } 63 | if (/}/.test(currentLine)) { 64 | inStruct = false; 65 | } 66 | } 67 | if (!inStruct && /}/.test(currentLine)) { 68 | break; 69 | } 70 | } 71 | console.log( 72 | `\u001b[1;32m \n Extracted informations: \n key: ${key}, material: ${material}, name: ${structName}; event: ${event} \n` 73 | ); 74 | result.push({ 75 | key: key, 76 | material: material, 77 | structName: structName, 78 | event: event, 79 | }); 80 | } 81 | }); 82 | 83 | return result; 84 | } 85 | 86 | // Function to insert a new case into the switch statement 87 | function insertConfig(content, newCase) { 88 | const switchPattern = /switch viewKey {[^}]*default:/; 89 | if (switchPattern.test(content)) { 90 | return content.replace(switchPattern, (match) => { 91 | return match.replace(/default:/, `${newCase};\ndefault:`); 92 | }); 93 | } 94 | return content; 95 | } 96 | 97 | // Function to prepare the file content 98 | function prepareFile(content, destDir) { 99 | const views = extractKeyAndMaterial(content); 100 | const indexFile = path.join(destDir, "index.swift"); 101 | 102 | let config = fs.readFileSync(indexFile, "utf8"); 103 | 104 | views.forEach((view) => { 105 | const key = view.key; 106 | const material = view.material ? "material: material" : ""; 107 | const event = view.event ? "onEvent: onEvent" : ""; 108 | 109 | const structName = view.structName || key; 110 | const newCase = `case ".$${key}": ${structName}(${material} ${(event && material) !== "" ? "," : ""} ${event})`; 111 | 112 | config = insertConfig(config, newCase); 113 | }); 114 | 115 | fs.writeFileSync(indexFile, config, "utf8"); 116 | console.log("\u001b[1;32m \n ✓ Prepared file"); 117 | } 118 | 119 | // Function to clean the destination directory except index.swift 120 | async function cleanDirectory(destDir) { 121 | const indexFile = await path.join(destDir, "index.swift"); 122 | 123 | if (fs.existsSync(destDir) && fs.existsSync(indexFile)) { 124 | await console.log("\u001b[1;32m \n \n Cleaning directory..."); 125 | await fs.writeFileSync(indexFile, defaultConf, "utf8"); 126 | await fs.readdir(destDir, (err, files) => { 127 | if (err) { 128 | return; 129 | } 130 | }); 131 | console.log("\u001b[1;32m \n ✓ Directory cleaned"); 132 | } else { 133 | console.error("\u001b[1;31m \n ✕ Destination directory does not exist"); 134 | } 135 | 136 | await console.log("\u001b[1;32m \n Searching files"); 137 | await copyFiles(srcDir, destDir); 138 | } 139 | 140 | // Function to copy files from source to destination 141 | function copyFiles(srcDir, destDir) { 142 | if (!fs.existsSync(srcDir)) { 143 | fs.mkdirSync(srcDir, { recursive: true }); 144 | } 145 | if (!fs.existsSync(destDir)) { 146 | console.error("\u001b[1;31m ✕ \n Cannot locate destination directory"); 147 | return; 148 | } 149 | 150 | fs.readdirSync(srcDir).forEach((file) => { 151 | console.log("\u001b[1;32m Found file " + file); 152 | const srcFile = path.join(srcDir, file); 153 | const destFile = path.join(destDir, file); 154 | 155 | if (fs.statSync(srcFile).isFile() && file.endsWith(".swift")) { 156 | const data = fs.readFileSync(srcFile, "utf8"); 157 | prepareFile(data, destDir); 158 | fs.copyFileSync(srcFile, destFile); 159 | } else { 160 | console.log(`\u001b[1;33m \n⚠ Skipping non-swift-file: ${srcFile} \n`); 161 | } 162 | }); 163 | } 164 | 165 | const args = process.argv.slice(2); 166 | const customPath = 167 | args[0] !== "--no-clean" && args[0] !== undefined ? args[0] : null; 168 | const srcDir = 169 | customPath !== null && customPath !== "undefined" 170 | ? path.resolve(customPath) 171 | : path.resolve("./swiftui"); 172 | const destDir = args.includes("--example") 173 | ? path.resolve("../ios/CustomViews") 174 | : path.resolve("./node_modules/react-native-render-swift-ui/ios/CustomViews"); 175 | 176 | if (args.includes("--no-clean")) { 177 | console.log(`\u001b[1;33m \n⚠ Cleaning skipped \n`); 178 | console.log("\u001b[1;32m \n Searching files... \n"); 179 | copyFiles(srcDir, destDir); 180 | } else { 181 | cleanDirectory(destDir); 182 | } 183 | -------------------------------------------------------------------------------- /docs/.gitignore: -------------------------------------------------------------------------------- 1 | # Dependencies 2 | /node_modules 3 | 4 | # Production 5 | /build 6 | 7 | # Generated files 8 | .docusaurus 9 | .cache-loader 10 | 11 | # Misc 12 | .DS_Store 13 | .env.local 14 | .env.development.local 15 | .env.test.local 16 | .env.production.local 17 | 18 | npm-debug.log* 19 | yarn-debug.log* 20 | yarn-error.log* 21 | -------------------------------------------------------------------------------- /docs/README.md: -------------------------------------------------------------------------------- 1 | # Website 2 | 3 | This website is built using [Docusaurus](https://docusaurus.io/), a modern static website generator. 4 | 5 | ### Installation 6 | 7 | ``` 8 | $ yarn 9 | ``` 10 | 11 | ### Local Development 12 | 13 | ``` 14 | $ yarn start 15 | ``` 16 | 17 | This command starts a local development server and opens up a browser window. Most changes are reflected live without having to restart the server. 18 | 19 | ### Build 20 | 21 | ``` 22 | $ yarn build 23 | ``` 24 | 25 | This command generates static content into the `build` directory and can be served using any static contents hosting service. 26 | 27 | ### Deployment 28 | 29 | Using SSH: 30 | 31 | ``` 32 | $ USE_SSH=true yarn deploy 33 | ``` 34 | 35 | Not using SSH: 36 | 37 | ``` 38 | $ GIT_USER= yarn deploy 39 | ``` 40 | 41 | If you are using GitHub pages for hosting, this command is a convenient way to build the website and push to the `gh-pages` branch. 42 | -------------------------------------------------------------------------------- /docs/babel.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | presets: [require.resolve('@docusaurus/core/lib/babel/preset')], 3 | }; 4 | -------------------------------------------------------------------------------- /docs/docs/components/_category_.json: -------------------------------------------------------------------------------- 1 | { 2 | "label": "Components", 3 | "position": 4, 4 | "link": { 5 | "type": "generated-index", 6 | "description": "An overview about all componets" 7 | } 8 | } 9 | -------------------------------------------------------------------------------- /docs/docs/components/button.md: -------------------------------------------------------------------------------- 1 | # Button 2 | 3 | Displays a Swift UI button 4 | 5 | 7 | 8 | Official Docs 9 | 10 | 11 | 12 | ### Preview 13 |
14 | 15 | 16 | ![button preview](@site/static/img/docs/button.png) 17 | 18 | 19 |
20 | 21 | 22 | ### Example Usage 23 | 24 | ```tsx 25 | 26 | 27 | Button 28 | 29 | 30 | ``` 31 | 32 | 33 | ### Props 34 | 35 | | name | type | required | description | 36 | |------|------|----------|-------------| 37 | |key| `string` | ✓ | The key under which the event is sent | 38 | | children | `React.ReactNode` | ✓ | The RNSwiftUI view that should be displayed as a button | 39 | 40 | 41 | > extends `SwiftUIViewProperties` 42 | 43 | ### Events 44 | | name | type | description | 45 | |------|------|-------------| 46 | |onPress| `() => void;` | This Event is triggered on a button press | 47 | 48 | -------------------------------------------------------------------------------- /docs/docs/components/contentunavailableview.md: -------------------------------------------------------------------------------- 1 | # ContentUnavailableView 2 | 3 | Displays a Swift UI ContentUnavailableView 4 | 5 | 6 | 7 | 9 | 10 | Official Docs 11 | 12 | 13 | 14 | ### Preview 15 |
16 | 17 | 18 | ![preview](@site/static/img/docs/contentunavailableview.png) 19 | 20 | 21 |
22 | 23 | 24 | ### Example Usage 25 | 26 | ```tsx 27 | 28 | 29 | ``` 30 | 31 | 32 | ### Props 33 | 34 | | name | type | required | description | 35 | |------|------|----------|-------------| 36 | |title| `string` | ✓ | The title | 37 | | systemIconName | `SFSymbol` | ✕ | The symbol to display (SF symbol) [optional] | 38 | | description | `string` | ✕ | The symbol to display (SF symbol) [optional] | 39 | 40 | > extends `SwiftUIViewProperties` -------------------------------------------------------------------------------- /docs/docs/components/contextmenu.md: -------------------------------------------------------------------------------- 1 | 2 | # ContextMenu 3 | 4 | Displays a Swift UI ContextMenu 5 | 6 | 7 | 8 | Official Docs 9 | 10 | 11 | ### Preview 12 |
13 | 14 | 15 | ![button preview](@site/static/img/docs/contextmenu.png) 16 | 17 | 18 |
19 | 20 | 21 | ### Example Usage 22 | 23 | ```tsx 24 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | }> 42 | 43 | 44 | ``` 45 | 46 | 47 | ### Props 48 | 49 | | name | type | required | description | 50 | |------|------|----------|-------------| 51 | | children | `React.ReactNode` | ✓ | The RNSwiftUI view that should trigger the menu | 52 | | optionalSubviews | `React.ReactNode` | ✓ | The RNSwiftUI view that should be displayed inside of the menu | 53 | 54 | > extends `SwiftUIViewProperties` -------------------------------------------------------------------------------- /docs/docs/components/controlgroup.md: -------------------------------------------------------------------------------- 1 | # ControlGroup 2 | 3 | Displays a Swift UI ControlGroup 4 | 5 | 10 | 11 | Official Docs 12 | 13 | 14 | ### Preview 15 |
16 | 17 | 18 | ![button preview](@site/static/img/docs/controlgroup.png) 19 | 20 | 21 |
22 | 23 | 24 | ### Example Usage 25 | 26 | ```tsx 27 | 28 | 29 | 30 | ``` 31 | 32 | 33 | ### Props 34 | 35 | | name | type | required | description | 36 | |------|------|----------|-------------| 37 | | children | `React.ReactNode` | ✓ | The RNSwiftUI views that should be displayed inside of the ControlGroup | 38 | 39 | > extends `SwiftUIViewProperties` -------------------------------------------------------------------------------- /docs/docs/components/custom.md: -------------------------------------------------------------------------------- 1 | # Custom View 2 | 3 | 4 | Integrates a custom Swift UI View into React Native. 5 | 6 | 7 | More information can be found under [Custom Views](../custom.md) 8 | 9 | 10 | 11 | ### Preview 12 |
13 | 14 | 15 |

no preview available

16 | 17 | 18 | 19 | 20 |
21 | 22 | 23 | ### Example Usage 24 | 25 | ```tsx 26 | 27 | 28 | 29 | 30 | 31 | 32 | ``` 33 | 34 | 35 | ### Props 36 | 37 | | name | type | required | description | 38 | |------|------|----------|-------------| 39 | |key| `string` | ✓ | The key of the native view | 40 | 41 | > extends `SwiftUIViewProperties` && `SwiftUIViewValues` -------------------------------------------------------------------------------- /docs/docs/components/divider.md: -------------------------------------------------------------------------------- 1 | # Divider 2 | 3 | Displays a Swift UI Divider 4 | 5 | 6 | 7 | Official Docs 8 | 9 | 10 | ### Preview 11 |
12 | 13 | 14 | 15 | 16 |

no preview available

17 | 18 | 19 |
20 | 21 | 22 | ### Example Usage 23 | 24 | ```tsx 25 | 26 | ``` 27 | 28 | 29 | ### Props 30 | 31 | 32 | > extends `SwiftUIViewProperties` -------------------------------------------------------------------------------- /docs/docs/components/group.md: -------------------------------------------------------------------------------- 1 | # Group 2 | 3 | Groups different SwiftUI Views together. This works also in an context menu. 4 | 5 | 10 | 11 | Official Docs 12 | 13 | 14 | ### Preview 15 |
16 | 17 | 18 | 19 | 20 |

no preview available

21 | 22 | 23 |
24 | 25 | 26 | ### Example Usage 27 | 28 | ```tsx 29 | 30 | 31 | 32 | ``` 33 | 34 | 35 | ### Props 36 | 37 | | name | type | required | description | 38 | |------|------|----------|-------------| 39 | | children | `React.ReactNode` | ✓ | The RNSwiftUI views that should be displayed inside of the Group | 40 | 41 | > extends `SwiftUIViewProperties` -------------------------------------------------------------------------------- /docs/docs/components/hstack.md: -------------------------------------------------------------------------------- 1 | # HStack 2 | 3 | Displays a Swift UI HStack 4 | 5 | 6 | 7 | Official Docs 8 | 9 | 10 | ### Preview 11 | 12 |
13 | 14 | 15 | 16 | ![button preview](@site/static/img/docs/hstack.png) 17 | 18 | 19 |
20 | 21 | 22 | ### Example Usage 23 | 24 | ```tsx 25 | 26 | 27 | 28 | ``` 29 | 30 | 31 | ### Props 32 | 33 | | name | type | required | description | 34 | |------|------|----------|-------------| 35 | | children | `React.ReactNode` | ✓ | The RNSwiftUI view that should be displayed inside of the HSTack | 36 | 37 | > extends `SwiftUIViewProperties` 38 | 39 | 40 | 41 | 42 | 43 | -------------------------------------------------------------------------------- /docs/docs/components/image.md: -------------------------------------------------------------------------------- 1 | # Image 2 | 3 | Displays a SwiftUI Image 4 | 5 | 6 | 7 | 10 | 11 | Official Docs 12 | 13 | 14 | 15 | ### Preview 16 |
17 | 18 | 19 | 20 | ![preview](@site/static/img/docs/image.png) 21 | 22 | 23 |
24 | 25 | 26 | ### Example Usage 27 | 28 | ```tsx 29 | 30 | 31 | 32 | 33 | 34 | 35 | ``` 36 | 37 | 38 | ### Props 39 | 40 | | name | type | required | description | 41 | |------|------|----------|-------------| 42 | |imageUrl| `string` | ✓ / ✕ | The url for the image that should be shown (https) | 43 | | systemIconName | `SFSymbol` | ✓ / ✕ | The symbol to display (SF symbol) | 44 | | localImageName | `string` | ✓ / ✕ | The name of an xcode asset | 45 | 46 | > extends `SwiftUIViewProperties` -------------------------------------------------------------------------------- /docs/docs/components/label.md: -------------------------------------------------------------------------------- 1 | # Label 2 | 3 | Displays a Swift UI Label which can be used for exmapkle inside of a button or list. 4 | 5 | 6 | 7 | Official Docs 8 | 9 | 10 | ### Preview 11 |
12 | 13 | 14 | 15 | ![preview](@site/static/img/docs/label.png) 16 | 17 | 18 |
19 | 20 | 21 | ### Example Usage 22 | 23 | ```tsx 24 | 25 | 26 | ``` 27 | 28 | 29 | ### Props 30 | 31 | | name | type | required | description | 32 | |------|------|----------|-------------| 33 | |text| `string` | ✓ | The text for the label | 34 | | systemIconName | `SFSymbol` | ✕ | The symbol to display (SF symbol) [optional] | 35 | 36 | 37 | > extends `SwiftUIViewProperties` -------------------------------------------------------------------------------- /docs/docs/components/lazyhstack.md: -------------------------------------------------------------------------------- 1 | # LazyHStack 2 | 3 | Displays a Swift UI LazyLazyHStack 4 | 5 | 10 | 11 | Official Docs 12 | 13 | 14 | ### Preview 15 | 16 |
17 | 18 | 19 | 20 | ![button preview](@site/static/img/docs/vstack.png) 21 | 22 | 23 |
24 | 25 | 26 | ### Example Usage 27 | 28 | ```tsx 29 | 30 | 31 | 32 | ``` 33 | 34 | 35 | ### Props 36 | 37 | | name | type | required | description | 38 | |------|------|----------|-------------| 39 | | children | `React.ReactNode` | ✓ | The RNSwiftUI view that should be displayed inside of the LazyHStack | 40 | 41 | > extends `SwiftUIViewProperties` 42 | 43 | 44 | 45 | 46 | 47 | -------------------------------------------------------------------------------- /docs/docs/components/lazyvstack.md: -------------------------------------------------------------------------------- 1 | # LazyVStack 2 | 3 | Displays a Swift UI LazyVStack 4 | 5 | 10 | 11 | Official Docs 12 | 13 | 14 | ### Preview 15 |
16 | 17 | 18 | ![button preview](@site/static/img/docs/vstack.png) 19 | 20 | 21 |
22 | 23 | 24 | ### Example Usage 25 | 26 | ```tsx 27 | 28 | 29 | 30 | ``` 31 | 32 | 33 | ### Props 34 | 35 | | name | type | required | description | 36 | |------|------|----------|-------------| 37 | | children | `React.ReactNode` | ✓ | The RNSwiftUI view that should be displayed inside of the LazyVStack | 38 | 39 | > extends `SwiftUIViewProperties` -------------------------------------------------------------------------------- /docs/docs/components/list_folder/_category_.json: -------------------------------------------------------------------------------- 1 | { 2 | "label": "List", 3 | "position": 2 4 | } 5 | -------------------------------------------------------------------------------- /docs/docs/components/list_folder/list.md: -------------------------------------------------------------------------------- 1 | # List 2 | 3 | Displays a native IOS list 4 | 5 | 7 | 8 | Official Docs 9 | 10 | 11 | ### Preview 12 |
13 | 14 | 15 | ![preview](@site/static/img/docs/list.png) 16 | 17 | 18 |
19 | 20 | 21 | 22 | ### Example Usage 23 | 24 | ```tsx 25 | 26 | 31 | ``` 32 | 33 | 34 | ### Props 35 | 36 | | name | type | required | description | 37 | |------|------|----------|-------------| 38 | |listStyle| `ListStyle` | ✕ | The Swift UI List Style | 39 | | children | `React.ReactNode` | ✓ | The RNSwiftUI views that should be displayed as list items | 40 | 41 | 42 | > extends `SwiftUIViewProperties` 43 | 44 |
45 | -------------------------------------------------------------------------------- /docs/docs/components/list_folder/section.md: -------------------------------------------------------------------------------- 1 | # Section 2 | 3 | Groups a List in different sections. If it is used outside of a list it will present a sticky element. 4 | 5 | 8 | 9 | Official Docs 10 | 11 | 12 | ### Preview 13 |
14 | 15 | ![preview](@site/static/img/docs/sections.png) 16 | 17 | 18 |
19 | 20 | 21 | 22 | ### Example Usage 23 | 24 | ```tsx 25 | 26 | }> 27 | 28 | 29 | 30 | 31 | 32 | 33 | ``` 34 | 35 | 36 | ### Props 37 | 38 | | name | type | required | description | 39 | |------|------|----------|-------------| 40 | |optionalSubviews| `React.ReactNode` | ✓ | The label of the section | 41 | | children | `React.ReactNode` | ✓ | The RNSwiftUI views that should be displayed in th section | 42 | 43 | 44 | > extends `SwiftUIViewProperties` -------------------------------------------------------------------------------- /docs/docs/components/maskview.md: -------------------------------------------------------------------------------- 1 | # MaskView 2 | 3 | Masks two views 4 | 5 | 6 | 7 | ### Preview 8 |
9 | 10 | 11 | ![button preview](@site/static/img/docs/mask.png) 12 | 13 | 14 |
15 | 16 | 17 | ### Example Usage 18 | 19 | ```tsx 20 | 23 | Hello World 24 | } 25 | > 26 | 27 | 28 | ``` 29 | 30 | 31 | ### Props 32 | 33 | | name | type | required | description | 34 | |------|------|----------|-------------| 35 | | children | `React.ReactNode` | ✓ | The RNSwiftUI view which should be masked | 36 | | optionalSubviews | `React.ReactNode` | ✓ | The RNSwiftUI view that should be used as a mask | 37 | 38 | > extends `SwiftUIViewProperties` -------------------------------------------------------------------------------- /docs/docs/components/navigationlink.md: -------------------------------------------------------------------------------- 1 | 2 | # NaviagtionLink 3 | 4 | Displays a Swift UI NaviagtionLink 5 | 6 | :::warning 7 | This view can only be used as a child of a `NavigationView` or `NavigationSplitView` 8 | ::: 9 | 10 | 11 | 12 | Official Docs 13 | 14 | 15 | 16 | 17 | ### Preview 18 |
19 | 20 | 21 | ![button preview](@site/static/img/docs/navlink.gif) 22 | 23 | 24 |
25 | 26 | 27 | ### Example Usage 28 | 29 | ```tsx 30 | 34 | Open new page 35 | 36 | } 37 | > 38 | 42 | 43 | ``` 44 | 45 | 46 | ### Props 47 | 48 | | name | type | required | description | 49 | |------|------|----------|-------------| 50 | | children | `React.ReactNode` | ✓ | The RNSwiftUI view that should be displayed on the new page | 51 | | optionalSubviews | `React.ReactNode` | ✓ | The NavigationLink | 52 | | title | `React.ReactNode` | ✕ | The title of the new page | 53 | 54 | > extends `SwiftUIViewProperties` -------------------------------------------------------------------------------- /docs/docs/components/navigationsplitview.md: -------------------------------------------------------------------------------- 1 | 2 | # NaviagtionSplitView 3 | 4 | Displays a Swift UI NavigationSplitView 5 | 6 | 7 | 8 | Official Docs 9 | 10 | 11 | ### Preview 12 |
13 | 14 | 15 | ![button preview](@site/static/img/docs/navsplitview.gif) 16 | 17 | 18 |
19 | 20 | 21 | ### Example Usage 22 | 23 | ```tsx 24 | 32 | } 33 | > 34 | 35 | 38 | } 39 | > 40 | 41 | 42 | 45 | } 46 | > 47 | 48 | 49 | 52 | } 53 | > 54 | 55 | 56 | 57 | 58 | ``` 59 | 60 | 61 | ### Props 62 | 63 | | name | type | required | description | 64 | |------|------|----------|-------------| 65 | | children | `React.ReactNode` | ✓ | The RNSwiftUI view that should be displayed inside the smaller part of the screen | 66 | | optionalSubviews | `React.ReactNode` | ✓ | The RNSwiftUI view that should be displayed as a placeholder before selecting a navigationview | 67 | | title | `string` | ✕ | The navigation title of the smaller view | 68 | 69 | > extends `SwiftUIViewProperties` 70 | -------------------------------------------------------------------------------- /docs/docs/components/navigationview.md: -------------------------------------------------------------------------------- 1 | # NavigationView 2 | 3 | Displays a Swift UI NavigationView 4 | 5 | 10 | 11 | Official Docs 12 | 13 | 14 | ### Preview 15 |
16 | 17 | 18 | no preview available 19 | 20 | 21 |
22 | 23 | 24 | ### Example Usage 25 | 26 | ```tsx 27 | 28 | 29 | 30 | ``` 31 | 32 | 33 | ### Props 34 | 35 | | name | type | required | description | 36 | |------|------|----------|-------------| 37 | | children | `React.ReactNode` | ✓ | The RNSwiftUI view that should be displayed inside of the NavigationView | 38 | | title | `string` | ✕ | The title of the NavigationView | 39 | 40 | > extends `SwiftUIViewProperties` -------------------------------------------------------------------------------- /docs/docs/components/popoverview.md: -------------------------------------------------------------------------------- 1 | 2 | # PopoverView 3 | 4 | Displays a Swift UI Popover 5 | 6 | 8 | 9 | Official Docs 10 | 11 | 12 | ### Preview 13 |
14 | 15 | 16 | ![button preview](@site/static/img/docs/popover.png) 17 | 18 | 19 |
20 | 21 | 22 | ### Example Usage 23 | 24 | ```tsx 25 | 34 | } 35 | > 36 | 37 | Open Popover 38 | 39 | 40 | ``` 41 | 42 | 43 | ### Props 44 | 45 | | name | type | required | description | 46 | |------|------|----------|-------------| 47 | | children | `React.ReactNode` | ✓ | The RNSwiftUI view that should trigger the Popover | 48 | | optionalSubviews | `React.ReactNode` | ✓ | The RNSwiftUI view that should be displayed inside of the Popover | 49 | 50 | > extends `SwiftUIViewProperties` -------------------------------------------------------------------------------- /docs/docs/components/reactchildview.md: -------------------------------------------------------------------------------- 1 | # ReactChildView 2 | 3 | Integrates a React Native View into Swift UI. 4 | 5 | 6 | To display a react native view in SwiftUI, you must first pass it as an array to the property `reactViews`. To then display a view from this array in Swift UI, you must place a ``there and assign the index from the array to it. To do this, use the property `index`. 7 | 8 | 9 | 10 | ### Preview 11 |
12 | 13 | 14 |

no preview available

15 | 16 | 17 | 18 | 19 |
20 | 21 | 22 | ### Example Usage 23 | 24 | ```tsx 25 | Hello World, 28 |