https://github.com/moh3n9595/react-native-dynamic-render
🔀 Render from Json object
https://github.com/moh3n9595/react-native-dynamic-render
dynamic json react-native render
Last synced: 8 months ago
JSON representation
🔀 Render from Json object
- Host: GitHub
- URL: https://github.com/moh3n9595/react-native-dynamic-render
- Owner: moh3n9595
- License: mit
- Created: 2020-03-24T12:53:33.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2023-01-06T15:30:55.000Z (over 3 years ago)
- Last Synced: 2025-08-17T14:55:26.031Z (10 months ago)
- Topics: dynamic, json, react-native, render
- Language: TypeScript
- Homepage:
- Size: 5.09 MB
- Stars: 12
- Watchers: 3
- Forks: 2
- Open Issues: 16
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# react-native-dynamic-render ·  [](https://github.com/moh3n9595/react-native-dynamic-render/blob/master/LICENSE) [](https://github.com/moh3n9595/react-native-dynamic-render/compare) [](https://codecov.io/gh/moh3n9595/react-native-dynamic-render)
Render from Json object
## Examples
- Online simple example: https://snack.expo.io/@moh3n95/react-native-dynamic-render
- Online advanced example: https://snack.expo.io/@moh3n95/react-navigation-dynamic-render
## Installation
```
yarn add react-native-dynamic-render
```
or
```
npm i react-native-dynamic-render
```
## Usage
```jsx
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 (
);
}
```
### Expected output
```tsx
some foo bar
```
## Contributing
Thank you for your interest in contributing! Please feel free to put up a PR for any issue or feature request.
## Give me a Star
If you think this project is helpful just give me a ⭐️ Star is enough because i don't drink coffee 😃
## License
This project is licensed under the MIT License - see the [LICENSE.md](https://github.com/moh3n9595/react-native-dynamic-render/blob/master/LICENSE) file for details
## Author
Made with ❤️ by [Mohsen Madani](https://github.com/moh3n9595).