{"id":16955233,"url":"https://github.com/fasthedeveloper/react-native-rise-sdui-server","last_synced_at":"2026-05-06T01:35:24.038Z","repository":{"id":256089430,"uuid":"853858838","full_name":"FastheDeveloper/react-native-rise-sdui-server","owner":"FastheDeveloper","description":"This repository contains the server-side implementation for Server-Driven UI (SDUI) development using Rise Tools. It's designed to work seamlessly with React Native applications, providing dynamic UI components that can be updated in production without rebuilding or redeploying your app.","archived":false,"fork":false,"pushed_at":"2024-09-11T11:07:45.000Z","size":5050,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-01-26T08:26:26.762Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://react-native-rise-sdui-server.vercel.app","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/FastheDeveloper.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"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":"2024-09-07T18:23:04.000Z","updated_at":"2024-09-16T04:10:18.000Z","dependencies_parsed_at":"2024-11-27T18:10:59.647Z","dependency_job_id":null,"html_url":"https://github.com/FastheDeveloper/react-native-rise-sdui-server","commit_stats":null,"previous_names":["fasthedeveloper/react-native-rise-sdui-server"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/FastheDeveloper%2Freact-native-rise-sdui-server","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/FastheDeveloper%2Freact-native-rise-sdui-server/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/FastheDeveloper%2Freact-native-rise-sdui-server/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/FastheDeveloper%2Freact-native-rise-sdui-server/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/FastheDeveloper","download_url":"https://codeload.github.com/FastheDeveloper/react-native-rise-sdui-server/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":244795518,"owners_count":20511521,"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":[],"created_at":"2024-10-13T22:11:41.584Z","updated_at":"2025-10-27T05:02:05.451Z","avatar_url":"https://github.com/FastheDeveloper.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://rise.tools/\"\u003e\n    \u003cimg alt=\"Rise Tools\" src=\"https://rise.tools/img/logo.svg\" width=\"60\" /\u003e\n  \u003c/a\u003e\n\u003c/p\u003e\n\n\u003ch1 align=\"center\"\u003e\n FasTheDeveloper's Guide to Server Defined Rendering for React Native Using Rise\n\n\u003ch3 align=\"center\"\u003e\nReact Native • TypeScript • Expo • Expo Router • Rise • Tamagui  \n\u003c/h3\u003e\n\nServer Repository : https://github.com/FastheDeveloper/react-native-rise-sdui-server\n\u003cbr\u003e\nMobile Repository : https://github.com/FastheDeveloper/react-native-rise-sdui-mobile\n\n## 🚀 Introduction\n\nThis article contains the implementation for Server-Driven UI (SDUI) development using Rise Tools. It's designed to seamlessly update React Native applications, providing dynamic UI components that can be updated in production without rebuilding or redeploying your app.\n\n## 🎯 What You'll Learn\n\n1. Core principles of Server Defined Rendering for React Native\n2. Server Defined Rendering VS OTA updates Vs Update Prompts\n3. Rise Tools Architecture\n4. Creating Server side\n5. Creating Client side app\n6. Building mobile app for installation\n7. Deploying backend server and using it to update the mobile app\n\n## 🛠 Prerequisites\n\nBefore diving in, make sure you have:\n\n- A basic understanding of JavaScript, Typescript and React Native\n- Node.js and npm installed on your development machine\n- Make sure you have completed the [React Native - Environment Setup](https://reactnative.dev/docs/environment-setup) instructions\n- A basic knowlwdge of Tamagui\n\n## 📚 Tutorial Sections\n\n1. **Introduction to Server-Driven Development**\n\n   - Definition and core concepts of Server-Driven UI (SDUI)\n   - Benefits and use cases for SDUI\n   - Real-world examples of apps utilizing SDUI and their success stories\n\n2. **Setting Up Rise Server**\n\n   - Project setup \u0026 folder structure\n   - Server configuration and initialization\n   - Creating Base HomeScreen Model\n\n3. **Setting Up Your Expo Project**\n\n- Cloning existing expo template\n  - Creating a new Expo project\n  - Essential configurations and dependencies\n  - Integrating the HomeScreen model from the server\n\n5. **Updating React Native Application with Server update**\n6. **Deploying the Server to Production**\n7. **Dynamic React Native App Updates from Server**\n8. **Building and Testing the Mobile App for Production**\n\n## Introduction to Server-Driven Development\n\nDefinition and core concepts of Server-Driven UI (SDUI):\nSDUI is an architectural pattern where the server defines and controls the user interface of a client application. Instead of hardcoding UI elements in the client, the server sends a UI specification (often in JSON format) that the client interprets and renders. This approach allows for dynamic UI updates without requiring app updates.\n\n### Key concepts include:\n\n- UI specification: A structured description of the interface layout and components\n- Client-side renderer: A component that interprets the specification and creates native UI elements\n- Dynamic updates: The ability to change the UI by modifying the server-side specification\n\n### Benefits and use cases for SDUI:\n\n1. Flexibility: Easily update UI without app store releases\n2. Consistency: Maintain a uniform experience across platforms\n3. A/B testing: Quickly test different layouts or features\n4. Personalization: Tailor UI based on user segments or behaviors\n5. Rapid iteration: Implement UI changes faster\n6. Feature flags: Enable or disable features remotely\n7. Reduced app size: Some UI logic moves to the server\n\n### Why Server Defined Rendering is Superior to Over-The-Air updates and Update Prompts\n\n1. Instant Updates: Unlike OTA updates or update prompts, SDR ensures all users are always on the latest version, eliminating fragmentation and version compatibility issues.\n2. Improved User Experience: SDR removes the need for intrusive update prompts or download waiting times, providing a seamless experience.\n3. Enhanced Security and Control: With logic on the server, SDR offers better protection against reverse engineering and unauthorized modifications.\n4. Flexibility and Agility: SDR allows for rapid iterations and A/B testing without the need for app store approvals or user actions.\n5. Reduced Client-Side Complexity: By moving logic to the server, SDR simplifies client-side code, potentially improving app performance and reducing bugs.\n6. Data-Driven Improvements: With all users on the same version, it's easier to gather consistent analytics and make data-driven decisions.\n\n## Setting Up Rise Server\n\nWe will work with this UI focusing on creating a server-side UI and implementing it in a React Native application. Follow the tutorial sections to build your SDUI-powered app step by step.\n\n![Final App](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rcqtldxwad741fjibmcq.png)\n\n### Setting Up Rise Server\n\nTo create a new Rise server project, follow these steps:\n\n1. Open your terminal.\n2. Run the following command:\n   `npm create rise@latest`\n\nThis is the resulting folder structure\n\n```\nmy-rise-project/\n├── node_modules\n├── src/\n│ ├── models.tsx\n│ ├── server.ts\n├── package.json\n├── tsconfig.json\n└── README.md\n```\n\n### Setting up Server for Home screen\n\nCreate a `HomeScreen.tsx` file in your preferred directory, and let's get started.\n\n```javascript\nimport {\n\tH1,\n\tH3,\n\tH6,\n\tText,\n\tXStack,\n\tYStack,\n} from \"@rise-tools/kitchen-sink/server\";\n\nexport const models = {\n\tHeaderUI,\n\tSearchUI,\n\tNearbyUi: NearbyUi,\n\tBannerUi,\n\tProductUi,\n\tHomeScreen,\n};\n\nfunction HeaderUI() {\n\treturn (\n\t\t\u003cYStack\u003e\n\t\t\t\u003cText\u003eHeader Ui\u003c/Text\u003e\n\t\t\u003c/YStack\u003e\n\t);\n}\n\nfunction SearchUI() {\n\treturn (\n\t\t\u003cYStack\u003e\n\t\t\t\u003cH1\u003eSearch Ui\u003c/H1\u003e\n\t\t\u003c/YStack\u003e\n\t);\n}\n\nfunction NearbyUi() {\n\treturn (\n\t\t\u003cYStack\u003e\n\t\t\t\u003cH3\u003eNearby resturants\u003c/H3\u003e\n\n\t\t\t\u003cXStack gap=\"$12\"\u003e\n\t\t\t\t\u003cH6\u003eNearest resturants\u003c/H6\u003e\n\t\t\t\u003c/XStack\u003e\n\t\t\u003c/YStack\u003e\n\t);\n}\n\nfunction BannerUi() {\n\treturn (\n\t\t\u003cYStack\u003e\n\t\t\t\u003cH1\u003eBanner\u003c/H1\u003e\n\t\t\u003c/YStack\u003e\n\t);\n}\n\nfunction ProductUi() {\n\treturn (\n\t\t\u003cYStack\u003e\n\t\t\t\u003cText\u003eOur Top Product\u003c/Text\u003e\n\t\t\t\u003cXStack gap=\"$8\"\u003e\n\t\t\t\t\u003cText\u003e🌚\u003c/Text\u003e\n\t\t\t\t\u003cText\u003e🌚\u003c/Text\u003e\n\t\t\t\t\u003cText\u003e🌚\u003c/Text\u003e\n\t\t\t\t\u003cText\u003e🌚\u003c/Text\u003e\n\t\t\t\t\u003cText\u003e🌚\u003c/Text\u003e\n\t\t\t\u003c/XStack\u003e\n\t\t\u003c/YStack\u003e\n\t);\n}\n\nfunction TripUi() {\n\treturn (\n\t\t\u003cYStack gap=\"$8\"\u003e\n\t\t\t\u003cText\u003eYour Trips\u003c/Text\u003e\n\t\t\t\u003cText\u003e🌚\u003c/Text\u003e\n\t\t\t\u003cText\u003e🌚\u003c/Text\u003e\n\t\t\t\u003cText\u003e🌚\u003c/Text\u003e\n\t\t\t\u003cText\u003e🌚\u003c/Text\u003e\n\t\t\t\u003cText\u003e🌚\u003c/Text\u003e\n\t\t\u003c/YStack\u003e\n\t);\n}\n\nfunction HomeScreen() {\n\treturn (\n\t\t\u003cYStack\u003e\n\t\t\t\u003cHeaderUI /\u003e\n\t\t\t\u003cSearchUI /\u003e\n\t\t\t\u003cNearbyUi /\u003e\n\t\t\t\u003cBannerUi /\u003e\n\t\t\t\u003cProductUi /\u003e\n\t\t\t\u003cTripUi /\u003e\n\t\t\u003c/YStack\u003e\n\t);\n}\n```\n\n#### Models Object:\n\nAn object named models is exported, containing references to various UI components. This object is used for dynamic rendering and to organize components for easier access.\n\nThis component breaks down the `HomeScreen` into several distinct components: `HeaderUi`, `SearchUi`, `NearbyUi`, `BannerUi`, `ProductUi`, and `TripUi`. These components can be used individually on the mobile/client side or combined to form the complete `HomeScreen`. By using the main `HomeScreen` in the client app, we can dynamically rearrange its structure from the server.\n\n### Setting Up `server.ts`\n\n```javascript\nimport { setupRiseTools } from \"@rise-tools/cli\";\nimport { createWSServer } from \"@rise-tools/server\";\n\nimport { models as mainModal } from \"~src/home/home\"; // import models from `Homescreen.tsx`\nconst port = Number(process.env.PORT || \"3015\");\n\nconst models = { ...mainModal };\nconst server = createWSServer(models, port);\n\nif (process.env.NODE_ENV === \"development\") {\n\tsetupRiseTools({ server });\n}\n```\n\n## Setting Up Your Expo Project\n\n### Cloning existing expo template\n\nTo quickly get started with your application, you can clone this base repository, which is set up with `Expo`, `expo-router`, `Tamagui`, and `Rise Tools`.\n\nRun the following command to clone the repository:\n\n```bash\ngit clone git@github.com:rise-tools/rise-mobile-quickstart.git\n\n```\n\n### Manual set Up\n\nTo set up your project with Tamagui and Expo Router, run the following command:\n\n```bash\nnpx create-expo-stack@latest react-native-rise-sdui-mobile --expo-router --tamagui\n```\n\nThen, install the necessary dependencies:\n\n`@rise-tools/kit-expo-router`\n`@rise-tools/kitchen-sink`\n`@rise-tools/react`\n`@rise-tools/ws-client`\n`expo-haptics`\n\n#### Create modelSource.ts\n\nNext, create a `modelSource.ts` file to define the connection to the WebSocket server provided by the server.\n\n```Typescript\nimport { createWSModelSource } from \"@rise-tools/ws-client\";\n\nexport const modelSource = createWSModelSource(\"ws://192.168.0.213:3015\"); //switch 192.168.0.213 with your expo localhost url\n\n```\n\n#### Create riseActions.ts\n\nCreate a `riseActions.ts` file to define the local action library for the app.\n\n```javascript\nimport { useExpoRouterActions } from \"@rise-tools/kit-expo-router\";\nimport {\n\tuseHapticsActions,\n\tuseLinkingActions,\n\tuseToastActions,\n} from \"@rise-tools/kitchen-sink\";\n\nexport function useRiseActions() {\n\treturn {\n\t\t...useHapticsActions(),\n\t\t...useLinkingActions(),\n\t\t...useToastActions(),\n\t\t...useExpoRouterActions(),\n\t};\n}\n```\n\n#### Create riseComponenets.ts\n\nCreate a `riseComponents.ts` file to define the local component library for the app.\n\n```Typescript\n\nimport {\n\tFormComponents,\n\tLucideIconsComponents,\n\tQRCodeComponents,\n\tRiseComponents,\n\tSVGComponents,\n\tTamaguiComponents,\n\t} from '@rise-tools/kitchen-sink';\n\nexport const components = {\n\t...FormComponents,\n\t...LucideIconsComponents,\n\t...QRCodeComponents,\n\t...RiseComponents,\n\t...SVGComponents,\n\t...TamaguiComponents,\n\t};\n\n```\n\n#### Integrating the HomeScreen model from the server\n\n1. In the server terminal, run Server with `npm run dev` to start the server\n\n2. In the react native app terminal, run the app using the following commands:\n   `yarn ios` to open the app on an iOS simulator\n   `yarn android` to open the app on an Android emulator\n   `yarn start` to open the app with Expo on your physical device\n\n3. In the appropriate Expo file, set up your HomeScreen to utilize Rise tools by calling the models defined for the HomeScreen:\n\n```Typescript\nimport { Rise } from '@rise-tools/react';\nimport { Stack, Link } from 'expo-router';\nimport { View } from 'react-native';\n\nimport { Button } from '~/components/Button';\nimport { Container } from '~/components/Container';\nimport { ScreenContent } from '~/components/ScreenContent';\nimport { modelSource } from '~/src/modelSource';\nimport { useRiseActions } from '~/src/riseActions';\nimport { components } from '~/src/riseComponents';\n\nexport default function Home() {\n  return (\n    \u003c\u003e\n      \u003cRise\n        modelSource={modelSource}\n        components={components}\n        path=\"HomeScreen\" //model gotten from the server\n        actions={useRiseActions()}\n      /\u003e\n    \u003c/\u003e\n  );\n}\n\n```\n\n![Base Home](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/esmmsrh3r5r8vbd5sv49.png)\n\n## Updating React Native Application with Server update\n\nWhile the server is running, any changes made to the Homescreen model will be automatically reflected in the mobile application.\n\n```typescript\nfunction HeaderUI() {\n\treturn (\n\t\t\u003cXStack\n\t\t\talignItems={\"center\"}\n\t\t\tpadding={\"$2\"}\n\t\t\tjustifyContent={\"space-between\"}\u003e\n\t\t\t\u003cXStack\u003e\n\t\t\t\t\u003cUserIcon width={70} height={60} /\u003e\n\t\t\t\t\u003cXStack alignItems={\"center\"}\u003e\n\t\t\t\t\t\u003cYStack\u003e\n\t\t\t\t\t\t\u003cText color={\"#838282\"}\u003eHello,\u003c/Text\u003e\n\t\t\t\t\t\t\u003cH3 color={\"#0F0F0F\"} fontWeight={\"700\"}\u003e\n\t\t\t\t\t\t\tF.A.S\n\t\t\t\t\t\t\u003c/H3\u003e\n\t\t\t\t\t\u003c/YStack\u003e\n\t\t\t\t\u003c/XStack\u003e\n\t\t\t\u003c/XStack\u003e\n\n\t\t\t\u003cHamburger width={32} height={32} /\u003e\n\t\t\u003c/XStack\u003e\n\t);\n}\n```\n\n![Header Updated](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ydnvmforzqhrl9bgn2qg.png)\n\nTo finalize the design, we'll update the other components in our homescreen component, which will automatically update the app.\n\n```typescript\nimport {\n\tH3,\n\tH6,\n\tH5,\n\tRiseForm,\n\tText,\n\tXStack,\n\tYStack,\n\tInputField,\n} from \"@rise-tools/kitchen-sink/server\";\n\nimport {\n\tUserIcon,\n\tHamburger,\n\tSearchIcon,\n\tMicIcon,\n\tSmallFork,\n\tRightIcon,\n\tClockIcon,\n\tStarIcon,\n\tCarIcon,\n\tPackageIcon,\n\tErrandIcon,\n\tRidesicon,\n\tResturantIcon,\n} from \"~/components/UserIcon\";\n\nexport const models = {\n\tHeaderUI,\n\tSearchUI,\n\tNearbyUi: NearbyUi,\n\tBannerUi,\n\tProductUi,\n\tHomeScreen,\n};\n\nconst myProducts = [\n\t{\n\t\tname: \"Package\",\n\t\ticon: \u003cPackageIcon width={32} height={32} /\u003e,\n\t},\n\t{\n\t\tname: \"Rides\",\n\t\ticon: \u003cRidesicon width={35} height={32} /\u003e,\n\t},\n\t{\n\t\tname: \"Errands\",\n\t\ticon: \u003cErrandIcon width={32} height={32} /\u003e,\n\t},\n\t{\n\t\tname: \"Resturant\",\n\t\ticon: \u003cResturantIcon width={32} height={32} /\u003e,\n\t},\n];\nfunction HeaderUI() {\n\treturn (\n\t\t\u003cXStack\n\t\t\talignItems={\"center\"}\n\t\t\tpadding={\"$2\"}\n\t\t\tjustifyContent={\"space-between\"}\u003e\n\t\t\t\u003cXStack\u003e\n\t\t\t\t\u003cUserIcon width={70} height={60} /\u003e\n\t\t\t\t\u003cXStack alignItems={\"center\"}\u003e\n\t\t\t\t\t\u003cYStack\u003e\n\t\t\t\t\t\t\u003cText color={\"#838282\"}\u003eHello,\u003c/Text\u003e\n\t\t\t\t\t\t\u003cH3 color={\"#0F0F0F\"} fontWeight={\"700\"}\u003e\n\t\t\t\t\t\t\tF.A.S\n\t\t\t\t\t\t\u003c/H3\u003e\n\t\t\t\t\t\u003c/YStack\u003e\n\t\t\t\t\u003c/XStack\u003e\n\t\t\t\u003c/XStack\u003e\n\n\t\t\t\u003cHamburger width={32} height={32} /\u003e\n\t\t\u003c/XStack\u003e\n\t);\n}\n\nfunction SearchUI() {\n\treturn (\n\t\t\u003cXStack alignItems={\"center\"}\u003e\n\t\t\t\u003cSearchIcon width={20} height={20} /\u003e\n\t\t\t\u003cRiseForm onSubmit={() =\u003e {}} flex={1} justifyContent={\"center\"}\u003e\n\t\t\t\t\u003cInputField\n\t\t\t\t\tid=\"searchInput\"\n\t\t\t\t\tbackgroundColor={\"#fff\"}\n\t\t\t\t\tborderWidth={0}\n\t\t\t\t\tborderRadius={0}\n\t\t\t\t\theight={40}\n\t\t\t\t\tstyle={{ marginTop: -14 }}\n\t\t\t\t\tplaceholder={\"Where are you going?\"}\n\t\t\t\t\tplaceholderTextColor={\"#838282\"}\n\t\t\t\t\tcolor={\"black\"}\n\t\t\t\t/\u003e\n\t\t\t\u003c/RiseForm\u003e\n\t\t\t\u003cMicIcon width={20} height={20} /\u003e\n\t\t\u003c/XStack\u003e\n\t);\n}\n\nfunction NearbyUi() {\n\treturn (\n\t\t\u003cYStack marginTop={\"$4\"} gap={\"$2\"}\u003e\n\t\t\t\u003cXStack alignItems={\"flex-end\"} justifyContent={\"space-between\"}\u003e\n\t\t\t\t\u003cH3 color={\"black\"} fontWeight={\"500\"}\u003e\n\t\t\t\t\tNearby Resturants\n\t\t\t\t\u003c/H3\u003e\n\t\t\t\t\u003cH3 color={\"#838282\"} fontSize={20}\u003e\n\t\t\t\t\tSee all\n\t\t\t\t\u003c/H3\u003e\n\t\t\t\u003c/XStack\u003e\n\n\t\t\t\u003cXStack justifyContent={\"space-between\"} alignItems={\"center\"}\u003e\n\t\t\t\t\u003cXStack gap={\"$2\"} alignItems={\"center\"}\u003e\n\t\t\t\t\t\u003cSmallFork width={34} height={34} /\u003e\n\t\t\t\t\t\u003cYStack gap={\"$2\"}\u003e\n\t\t\t\t\t\t\u003cH6 color={\"#000\"} fontWeight={\"500\"}\u003e\n\t\t\t\t\t\t\tThe Place Restaurant\n\t\t\t\t\t\t\u003c/H6\u003e\n\t\t\t\t\t\t\u003cXStack gap={\"$4\"} alignItems={\"center\"}\u003e\n\t\t\t\t\t\t\t\u003cXStack gap={\"$2\"}\u003e\n\t\t\t\t\t\t\t\t\u003cClockIcon width={16} height={16} /\u003e\n\t\t\t\t\t\t\t\t\u003cText color={\"#838282\"}\u003e5mins drive\u003c/Text\u003e\n\t\t\t\t\t\t\t\u003c/XStack\u003e\n\t\t\t\t\t\t\t\u003cXStack gap={\"$2\"}\u003e\n\t\t\t\t\t\t\t\t\u003cStarIcon width={16} height={16} /\u003e\n\t\t\t\t\t\t\t\t\u003cText color={\"#838282\"}\u003e4.5\u003c/Text\u003e\n\t\t\t\t\t\t\t\u003c/XStack\u003e\n\t\t\t\t\t\t\u003c/XStack\u003e\n\t\t\t\t\t\u003c/YStack\u003e\n\t\t\t\t\u003c/XStack\u003e\n\t\t\t\t\u003cRightIcon width={24} height={24} /\u003e\n\t\t\t\u003c/XStack\u003e\n\t\t\u003c/YStack\u003e\n\t);\n}\n\nfunction BannerUi() {\n\treturn (\n\t\t\u003cXStack\n\t\t\tbackgroundColor={\"#24B229\"}\n\t\t\talignItems={\"center\"}\n\t\t\tjustifyContent={\"space-between\"}\n\t\t\tpaddingHorizontal={\"$4\"}\n\t\t\tmarginVertical={\"$4\"}\n\t\t\tborderRadius={15}\u003e\n\t\t\t\u003cYStack\u003e\n\t\t\t\t\u003cText fontSize={20} color={\"white\"} fontWeight={\"500\"}\u003e\n\t\t\t\t\tRide with us.\n\t\t\t\t\u003c/Text\u003e\n\t\t\t\t\u003cText fontSize={20} color={\"white\"} fontWeight={\"500\"}\u003e\n\t\t\t\t\tEarn Points.\n\t\t\t\t\u003c/Text\u003e\n\t\t\t\t\u003cText fontWeight={\"500\"} color={\"white\"}\u003e\n\t\t\t\t\tGet Started {\"-\u003e\"}\n\t\t\t\t\u003c/Text\u003e\n\t\t\t\u003c/YStack\u003e\n\t\t\t\u003cCarIcon width={187} height={118} /\u003e\n\t\t\u003c/XStack\u003e\n\t);\n}\n\nfunction ProductUi() {\n\treturn (\n\t\t\u003cYStack gap={\"$2\"}\u003e\n\t\t\t\u003cXStack alignItems={\"flex-end\"} justifyContent={\"space-between\"}\u003e\n\t\t\t\t\u003cH5 color={\"black\"} fontWeight={\"500\"}\u003e\n\t\t\t\t\tOur Products\n\t\t\t\t\u003c/H5\u003e\n\t\t\t\t\u003cH3 color={\"#838282\"} fontSize={20}\u003e\n\t\t\t\t\tSee all\n\t\t\t\t\u003c/H3\u003e\n\t\t\t\u003c/XStack\u003e\n\t\t\t\u003cXStack marginBottom={\"$4\"}\u003e\n\t\t\t\t{myProducts.map((item) =\u003e (\n\t\t\t\t\t\u003cYStack\n\t\t\t\t\t\tkey={item.name}\n\t\t\t\t\t\tjustifyContent=\"space-between\"\n\t\t\t\t\t\talignItems=\"center\"\n\t\t\t\t\t\tflex={1}\u003e\n\t\t\t\t\t\t\u003cYStack alignItems=\"center\"\u003e\n\t\t\t\t\t\t\t\u003cYStack\n\t\t\t\t\t\t\t\tbackgroundColor=\"#ECECEC\"\n\t\t\t\t\t\t\t\tborderRadius={\"$4\"}\n\t\t\t\t\t\t\t\tpadding={\"$4\"}\n\t\t\t\t\t\t\t\tmarginVertical={\"$2\"}\u003e\n\t\t\t\t\t\t\t\t{item.icon}\n\t\t\t\t\t\t\t\u003c/YStack\u003e\n\t\t\t\t\t\t\t\u003cText fontSize={14} color={\"#0F0F0F\"}\u003e\n\t\t\t\t\t\t\t\t{item.name}\n\t\t\t\t\t\t\t\u003c/Text\u003e\n\t\t\t\t\t\t\u003c/YStack\u003e\n\t\t\t\t\t\u003c/YStack\u003e\n\t\t\t\t))}\n\t\t\t\u003c/XStack\u003e\n\t\t\u003c/YStack\u003e\n\t);\n}\n\nfunction TripUi() {\n\treturn (\n\t\t\u003cYStack gap={\"$2\"}\u003e\n\t\t\t\u003cXStack alignItems={\"flex-end\"} justifyContent={\"space-between\"}\u003e\n\t\t\t\t\u003cH5 color={\"black\"} fontWeight={\"500\"}\u003e\n\t\t\t\t\tYour trips\n\t\t\t\t\u003c/H5\u003e\n\t\t\t\t\u003cH3 color={\"#838282\"} fontSize={20}\u003e\n\t\t\t\t\tSee all\n\t\t\t\t\u003c/H3\u003e\n\t\t\t\u003c/XStack\u003e\n\t\t\t\u003cXStack justifyContent={\"space-between\"} alignItems={\"center\"}\u003e\n\t\t\t\t\u003cXStack gap={\"$2\"} alignItems={\"center\"}\u003e\n\t\t\t\t\t\u003cSmallFork width={34} height={34} /\u003e\n\t\t\t\t\t\u003cYStack gap={\"$2\"}\u003e\n\t\t\t\t\t\t\u003cH6 color={\"#000\"} fontWeight={\"500\"}\u003e\n\t\t\t\t\t\t\tSo Fresh\n\t\t\t\t\t\t\u003c/H6\u003e\n\t\t\t\t\t\t\u003cXStack gap={\"$4\"} alignItems={\"center\"}\u003e\n\t\t\t\t\t\t\t\u003cXStack gap={\"$2\"}\u003e\n\t\t\t\t\t\t\t\t\u003cClockIcon width={16} height={16} /\u003e\n\t\t\t\t\t\t\t\t\u003cText color={\"#838282\"}\u003e1hr drive\u003c/Text\u003e\n\t\t\t\t\t\t\t\u003c/XStack\u003e\n\t\t\t\t\t\t\t\u003cXStack gap={\"$2\"}\u003e\n\t\t\t\t\t\t\t\t\u003cStarIcon width={16} height={16} /\u003e\n\t\t\t\t\t\t\t\t\u003cText color={\"#838282\"}\u003e4\u003c/Text\u003e\n\t\t\t\t\t\t\t\u003c/XStack\u003e\n\t\t\t\t\t\t\u003c/XStack\u003e\n\t\t\t\t\t\u003c/YStack\u003e\n\t\t\t\t\u003c/XStack\u003e\n\t\t\t\t\u003cH6 color={\"#000\"} fontWeight={\"500\"}\u003e\n\t\t\t\t\t₦12,000.00\n\t\t\t\t\u003c/H6\u003e\n\t\t\t\u003c/XStack\u003e\n\t\t\t\u003cXStack\n\t\t\t\tjustifyContent={\"space-between\"}\n\t\t\t\talignItems={\"center\"}\n\t\t\t\tmarginTop={\"$4\"}\u003e\n\t\t\t\t\u003cXStack gap={\"$2\"} alignItems={\"center\"}\u003e\n\t\t\t\t\t\u003cRidesicon width={34} height={34} /\u003e\n\t\t\t\t\t\u003cYStack gap={\"$2\"}\u003e\n\t\t\t\t\t\t\u003cH6 color={\"#000\"} fontWeight={\"500\"}\u003e\n\t\t\t\t\t\t\tFilm house cinema\n\t\t\t\t\t\t\u003c/H6\u003e\n\t\t\t\t\t\t\u003cXStack gap={\"$4\"} alignItems={\"center\"}\u003e\n\t\t\t\t\t\t\t\u003cXStack gap={\"$2\"}\u003e\n\t\t\t\t\t\t\t\t\u003cClockIcon width={16} height={16} /\u003e\n\t\t\t\t\t\t\t\t\u003cText color={\"#838282\"}\u003e15mins drive\u003c/Text\u003e\n\t\t\t\t\t\t\t\u003c/XStack\u003e\n\t\t\t\t\t\t\t\u003cXStack gap={\"$2\"}\u003e\n\t\t\t\t\t\t\t\t\u003cStarIcon width={16} height={16} /\u003e\n\t\t\t\t\t\t\t\t\u003cText color={\"#838282\"}\u003e2.5\u003c/Text\u003e\n\t\t\t\t\t\t\t\u003c/XStack\u003e\n\t\t\t\t\t\t\u003c/XStack\u003e\n\t\t\t\t\t\u003c/YStack\u003e\n\t\t\t\t\u003c/XStack\u003e\n\t\t\t\t\u003cH6 color={\"#000\"} fontWeight={\"500\"}\u003e\n\t\t\t\t\t₦5,000.00\n\t\t\t\t\u003c/H6\u003e\n\t\t\t\u003c/XStack\u003e\n\t\t\t\u003cXStack\n\t\t\t\tjustifyContent={\"space-between\"}\n\t\t\t\talignItems={\"center\"}\n\t\t\t\tmarginTop={\"$4\"}\u003e\n\t\t\t\t\u003cXStack gap={\"$2\"} alignItems={\"center\"}\u003e\n\t\t\t\t\t\u003cRidesicon width={34} height={34} /\u003e\n\t\t\t\t\t\u003cYStack gap={\"$2\"}\u003e\n\t\t\t\t\t\t\u003cH6 color={\"#000\"} fontWeight={\"500\"}\u003e\n\t\t\t\t\t\t\tiFitness Gym\n\t\t\t\t\t\t\u003c/H6\u003e\n\t\t\t\t\t\t\u003cXStack gap={\"$4\"} alignItems={\"center\"}\u003e\n\t\t\t\t\t\t\t\u003cXStack gap={\"$2\"}\u003e\n\t\t\t\t\t\t\t\t\u003cClockIcon width={16} height={16} /\u003e\n\t\t\t\t\t\t\t\t\u003cText color={\"#838282\"}\u003e10min drive\u003c/Text\u003e\n\t\t\t\t\t\t\t\u003c/XStack\u003e\n\t\t\t\t\t\t\t\u003cXStack gap={\"$2\"}\u003e\n\t\t\t\t\t\t\t\t\u003cStarIcon width={16} height={16} /\u003e\n\t\t\t\t\t\t\t\t\u003cText color={\"#838282\"}\u003e2.5\u003c/Text\u003e\n\t\t\t\t\t\t\t\u003c/XStack\u003e\n\t\t\t\t\t\t\u003c/XStack\u003e\n\t\t\t\t\t\u003c/YStack\u003e\n\t\t\t\t\u003c/XStack\u003e\n\t\t\t\t\u003cH6 color={\"#000\"} fontWeight={\"500\"}\u003e\n\t\t\t\t\t₦3,000.00\n\t\t\t\t\u003c/H6\u003e\n\t\t\t\u003c/XStack\u003e\n\t\t\u003c/YStack\u003e\n\t);\n}\n\nfunction HomeScreen() {\n\treturn (\n\t\t\u003cYStack paddingHorizontal={\"$4\"}\u003e\n\t\t\t\u003cHeaderUI /\u003e\n\t\t\t\u003cSearchUI /\u003e\n\t\t\t\u003cNearbyUi /\u003e\n\t\t\t\u003cBannerUi /\u003e\n\t\t\t\u003cProductUi /\u003e\n\t\t\t\u003cTripUi /\u003e\n\t\t\u003c/YStack\u003e\n\t);\n}\n```\n\n![Final output](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/d5mkl0t0t5noo9rpk8mn.png)\n\n\u003cbr\u003e\nA common use case for Server Driven Rendering is managing promotional content. For example, if our `BannerUi` represents promotional content that needs to be hidden, you simply need to delete or comment it out on the server. This change will automatically remove the promotional content from the React Native application.\n\u003cbr\u003e\n\n![hiddenbannercode](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3u00yqusur6n5e4o6vai.png)\n\n![Hidden banner](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ujc50b1jmdhzsmhikme4.png)\n\n## Deploying the Server to Production\n\nTo deploy the Rise server, we will use \u003ca href=\"https://render.com/\"\u003e `Render`\u003c/a\u003e for hosting.\n\n### Create new Web service\n\n![New Render](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/w96d812yd0lhxqznblq9.png)\n\n![Setting](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9gzl1ybpk9q64364klch.png)\n\n![port](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/y42aa6599nzrxr7xmucw.png)\n\n## Dynamic React Native App Updates from Server\n\nUpdate the modelSource.ts file in the React Native application to use the new render service link.\n\n```typescript\nexport const modelSource = createWSModelSource(\n\t\"https://my-render-link.com/:3015\"\n);\n```\n\nWith any update to the main branch of the server, the server will automatically redeploy. This will trigger an automatic update of the React Native app as well.\n\n## Building and Testing the Mobile App for Production\n\nTo build and run the iOS app on your physical device in release configuration:\n`npx expo run:ios --configuration Release --device`\nThis command compiles the app with optimizations enabled and deploys it to your connected iOS device.\n\nTo create a release variant of your Android application:\n`npx expo run:android --variant release`\nThis command generates an optimized APK or App Bundle suitable for distribution and installation\n\nUpdate your server and monitor the deployment process on Render. Once the deployment is complete, the app will update accordingly.\n\n## 🤝 Contributing\n\nWe welcome contributions to enhance this tutorial. Feel free to submit issues or pull requests.\n\n\u003c!-- ## 📄 License\n\nThis project is licensed under the MIT License - see the [LICENSE.md](LICENSE.md) file for details. --\u003e\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffasthedeveloper%2Freact-native-rise-sdui-server","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ffasthedeveloper%2Freact-native-rise-sdui-server","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffasthedeveloper%2Freact-native-rise-sdui-server/lists"}