React-native-dynamic-render NPM

react-native-dynamic-render ·

Example

Online example: https://snack.expo.io/@moh3n95/react-native-dynamic-render

Installation

npm i react-native-dynamic-render

Usage

import DynamicComponent from "react-native-dynamic-render";
import { Text, View } from "react-native";

export default function App() {

  const mapComponents = {
    text: Text, // Or Your custom component
    view: View
  };

  const props = {
    name: "view",
    _uid: "123",
    children: [
      {
        name: "text",
        _uid: "1234"
      },
      {
        name: "text",
        _uid: "12345",
        props: null
      },
      {
        name: "view",
        _uid: "123456",
        children: [
            {
              name: "text",
              _uid: "1234567",
              children: "some foo bar",
              props: {
                  first: "text foo",
                  second: "text bar"
              }
            },
            {
              name: "text",
              _uid: "12345678"
            },

        ],
        props: {
            first: "view foo",
            second: "view bar"
        }
      }
    ]
  };

  return (
    <DynamicComponent
        {...props}
        mapComponents={mapComponents}
    />
  );
  
}

Expected output

<View>
  <Text />
  <Text />
  <View
    first="view foo"
    second="view bar"
  >
    <Text
      first="text foo"
      second="text bar"
    >
      some foo bar
    </Text>
    <Text />
  </View>
</View>