rn-dynamic-ui-render/example/components/dynamicComponentView.js

A dynamic UI rendering engine for React Native

import {
  ActivityIndicator,
  FlatList,
  Image,
  Pressable,
  ScrollView,
  Text,
  TouchableOpacity,
  View,
  TextInput,
} from "react-native";
import { RNDynamicUIRender } from "rn-dynamic-ui-render";

const components = {
  View,
  ScrollView,
  Text,
  Image,
  FlatList,
  Pressable,
  ActivityIndicator,
  TextInput,
  TouchableOpacity,
};

const theme = {
  colors: {
    primary: "red",
    secondary: "blue",
    borderColor: "green",
    backgroundColor: "yellow",
    white: "#ffffff",
  },
  font: {
    h1: 24,
    h2: 20,
    h3: 18,
    h4: 16,
    h5: 14,
    h6: 12,
  },
  fontWeight: {
    bold: "800",
    semiBold: "600",
    medium: "500",
    regular: "400",
  },
  buttonStyle: {
    backgroundColor: "blue",
    padding: 16,
    borderRadius: 20,
    marginVertical: 16,
    marginTop: 40,
    alignItems: "center",
  },
};

const DynamicComponentView = ({ data, functions }) => {
  return (
    <RNDynamicUIRender
      data={data}
      handlers={functions}
      components={components}
      theme={theme}
      translate={false}
    />
  );
};

export default DynamicComponentView;