smh-rn-expo-json-ui-engine/lib/module/render.js

A JSON-driven UI engine for React Native and Expo that enables dynamic, runtime-rendered interfaces without rebuilding the app.

"use strict";import{Button,KeyboardAvoidingView,Pressable,SectionList,Text,TextInput,TouchableHighlight,TouchableOpacity,TouchableWithoutFeedback,View}from"react-native";import{SafeAreaView}from"react-native-safe-area-context";import{Image,ImageBackground}from"expo-image";import{Fragment,useMemo,createElement as _createElement}from"react";import{FlashList}from"@shopify/flash-list";import{getCachedStyle}from"smh-rn-styles-cache";import MaskedView from"@react-native-masked-view/masked-view";import Checkbox from"expo-checkbox";import{LinearGradient}from"expo-linear-gradient";import{GLView}from"expo-gl";import{LivePhotoView}from"expo-live-photo";import{MeshGradientView}from"expo-mesh-gradient";import{StatusBar}from"expo-status-bar";import{VideoView}from"expo-video";import Slider from"@react-native-community/slider";import SegmentedControl from"@react-native-segmented-control/segmented-control";import LottieView from"lottie-react-native";import DateTimePicker from"react-native-modal-datetime-picker";import{getComponentEntry,resolvePlaceholders}from"./custom.js";import{BlurView}from"expo-blur";import{CameraView}from"expo-camera";import PagerView from"react-native-pager-view";import{Picker}from"@react-native-picker/picker";import{JSONUIEnums}from"./types.js";import{Fragment as _Fragment,jsx as _jsx}from"react/jsx-runtime";const UseComponentWrapper=({ref:e,props:t,properties:r})=>{const n=getComponentEntry(e);if(!n)return null;const o=useMemo(()=>{const e={...n.defaultProps,...t},o=resolvePlaceholders(n.json,e);return o.type===JSONUIEnums.ContainerTypes.ViewContainer?{...o,properties:r??o.properties}:o},[n,t,r]);return _jsx(_Fragment,{children:renderUIComponent(o)})},ViewContainerWrappers={View:View,SafeAreaView:SafeAreaView,KeyboardAvoidingView:KeyboardAvoidingView,Pressable:Pressable,TouchableHighlight:TouchableHighlight,TouchableOpacity:TouchableOpacity,TouchableWithoutFeedback:TouchableWithoutFeedback,BlurView:BlurView,CameraView:CameraView,PagerView:PagerView},recursiveRenderUIComponent=e=>e?()=>renderUIComponent(e):void 0,cacheSingleStyle=e=>e?getCachedStyle(e):{},renderFlashList=(e,t)=>{const{headerComponent:r,footerComponent:n,emptyComponent:o,itemSeparatorComponent:i,cellRendererComponent:a,stickyHeaderComponent:s}=t||{};return _jsx(FlashList,{...e,ListHeaderComponent:recursiveRenderUIComponent(r),ListFooterComponent:recursiveRenderUIComponent(n),ListEmptyComponent:recursiveRenderUIComponent(o),ItemSeparatorComponent:recursiveRenderUIComponent(i),CellRendererComponent:recursiveRenderUIComponent(a),StickyHeaderComponent:recursiveRenderUIComponent(s),renderItem:({item:e})=>renderUIComponent(e)})},renderSectionList=(e,t)=>{const{headerComponent:r,footerComponent:n,emptyComponent:o,itemSeparatorComponent:i,sectionHeaderComponent:a,sectionSeparatorComponent:s,cellRendererComponent:l}=t;return _jsx(SectionList,{...e,renderItem:({item:e})=>renderUIComponent(e),renderSectionHeader:renderUIComponent(a),ListHeaderComponent:recursiveRenderUIComponent(r),ListFooterComponent:recursiveRenderUIComponent(n),ListEmptyComponent:recursiveRenderUIComponent(o),ItemSeparatorComponent:recursiveRenderUIComponent(i),SectionSeparatorComponent:recursiveRenderUIComponent(s),CellRendererComponent:recursiveRenderUIComponent(l)})},renderUIComponent=e=>{const{ContainerTypes:t,LeafTypes:r,ViewWrapperTypes:n,CustomTypes:o}=JSONUIEnums,{type:i,showIf:a,props:s,value:l,wrapperComponent:c,components:m,listProps:p}=e;if(a&&"function"==typeof a&&!a(e))return null;if(!1===a)return null;switch(i){case r.Button:return _jsx(Button,{...s});case r.Text:return _jsx(Text,{style:cacheSingleStyle(s?.style),children:l});case r.Image:return _jsx(Image,{...s,style:cacheSingleStyle(s?.style)});case r.ImageBackground:return _jsx(ImageBackground,{...s,style:cacheSingleStyle(s?.style),imageStyle:cacheSingleStyle(s?.style)});case r.TextInput:return _jsx(TextInput,{...s,style:cacheSingleStyle(s?.style)});case r.SectionList:return renderSectionList(s,m);case r.Checkbox:return _jsx(Checkbox,{...s,style:cacheSingleStyle(s?.style)});case r.LinearGradient:return _jsx(LinearGradient,{...s,style:cacheSingleStyle(s?.style),children:(e.children||[]).map((e,t)=>_jsx(Fragment,{children:renderUIComponent(e)},t))});case r.GLView:return _jsx(GLView,{...s,style:cacheSingleStyle(s?.style)});case r.LivePhotoView:return _jsx(LivePhotoView,{...s,style:cacheSingleStyle(s?.style)});case r.MeshGradientView:return _jsx(MeshGradientView,{...s,style:cacheSingleStyle(s?.style)});case r.StatusBar:return _jsx(StatusBar,{...s,style:cacheSingleStyle(s?.style)});case r.VideoView:return _jsx(VideoView,{...s,style:cacheSingleStyle(s?.style)});case r.DateTimePicker:return _jsx(DateTimePicker,{...s,style:cacheSingleStyle(s?.style)});case r.Slider:return _jsx(Slider,{...s,style:cacheSingleStyle(s?.style)});case r.MaskedView:const a=renderUIComponent(e.maskElement);if(!a)throw new Error("MaskedView requires a valid maskElement.");return _jsx(MaskedView,{maskElement:a,children:(e.children||[]).map((e,t)=>_jsx(Fragment,{children:renderUIComponent(e)},t))});case r.SegmentedControl:return _jsx(SegmentedControl,{...s,style:cacheSingleStyle(s?.style),tabStyle:cacheSingleStyle(s?.tabStyle),fontStyle:cacheSingleStyle(s?.fontStyle),sliderStyle:cacheSingleStyle(s?.sliderStyle),activeFontStyle:cacheSingleStyle(s?.activeFontStyle)});case r.Picker:return _jsx(Picker,{...s,style:cacheSingleStyle(s?.style),itemStyle:cacheSingleStyle(s?.itemStyle),children:e.items.map((e,t)=>_createElement(Picker.Item,{...e,key:t}))});case r.LottieView:return _jsx(LottieView,{...s,style:cacheSingleStyle(s?.style)});case t.ViewContainer:{const t=c||n.View;return _jsx(ViewContainerWrappers[t],{...s,style:cacheSingleStyle(s?.style),children:e.properties.map((e,t)=>_jsx(Fragment,{children:renderUIComponent(e)},t))})}case t.ListContainer:return renderFlashList(s,m);case t.ViewListContainer:{const e=c||n.View;return _jsx(ViewContainerWrappers[e],{...s,style:cacheSingleStyle(s?.style),children:renderFlashList(p,m)})}case o.useComponent:return _jsx(UseComponentWrapper,{...e});default:return console.warn("Unknown UI component type",i),null}};export default renderUIComponent;