Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/oneananda/reactflow-reactnative-builder
reactflow-reactnative-builder
https://github.com/oneananda/reactflow-reactnative-builder
Last synced: about 1 month ago
JSON representation
reactflow-reactnative-builder
- Host: GitHub
- URL: https://github.com/oneananda/reactflow-reactnative-builder
- Owner: oneananda
- License: mit
- Created: 2024-12-07T08:20:56.000Z (about 1 month ago)
- Default Branch: main
- Last Pushed: 2024-12-07T08:27:55.000Z (about 1 month ago)
- Last Synced: 2024-12-07T09:20:00.400Z (about 1 month ago)
- Size: 0 Bytes
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
---
# ReactFlow ReactNative Builder
**ReactFlow ReactNative Builder** is a drag-and-drop tool for building React Native pages using ReactFlow. This project allows users to visually create UI components and generate React Native code in real-time, making mobile app development faster and more intuitive.
---
## Features
- 🖱️ **Drag-and-Drop Interface**: Create UI layouts by dragging and dropping components.
- ⚡ **React Native Code Generation**: Instantly generate React Native code for your designs.
- 🌟 **Customizable Components**: Extendable to add your own components.
- 💾 **Export Code**: Save generated code as a `.js` file for integration into your projects.
- 📦 **Mobile-Ready**: Use the generated code with Expo or React Native CLI for rapid development.
---
## Installation
1. Clone the repository:
```bash
git clone https://github.com/oneananda/reactflow-reactnative-builder.git
cd reactflow-reactnative-builder
```
2. Install dependencies:
```bash
npm install
```
3. Start the development server:
```bash
npm start
```
4. Open your browser at [http://localhost:3000](http://localhost:3000).
---
## Usage
1. **Drag Components**: Use the sidebar to drag components like `Text`, `Button`, and `View` onto the canvas.
2. **Customize Properties**: Click on a component to modify its properties, such as text, color, or dimensions.
3. **Generate Code**: Click the **Generate Code** button to see the corresponding React Native code.
4. **Export Code**: Save the generated code as a `.js` file for further development.
---
## Example
Here’s a sample of the generated code:
```jsx
import React from 'react';
import { View, Text, Button } from 'react-native';
const GeneratedPage = () => {
return (
Welcome to ReactFlow!
alert('Button Pressed')} />
);
};
export default GeneratedPage;
```
---
## Folder Structure
```
reactflow-reactnative-builder/
├── public/
├── src/
│ ├── components/
│ │ ├── Sidebar.jsx # Drag-and-drop sidebar
│ │ ├── CustomNodes.jsx # Custom ReactFlow nodes
│ ├── utils/
│ │ ├── codeGenerator.js # Logic to generate React Native code
│ ├── App.js # Main application entry point
│ ├── index.js # React DOM renderer
├── package.json
```
---
## Contributing
Contributions are welcome! 🎉
1. Fork the repository.
2. Create a new branch:
```bash
git checkout -b feature-name
```
3. Make your changes and commit:
```bash
git commit -m "Add feature-name"
```
4. Push to your fork and submit a pull request.
---
## Roadmap
- [ ] Add more React Native components (e.g., `Image`, `TextInput`).
- [ ] Implement real-time preview of the generated code.
- [ ] Add functionality for nested components.
- [ ] Support importing/exporting project configurations.
---
## License
This project is licensed under the [MIT License](LICENSE).
---
## Acknowledgments
- [ReactFlow](https://reactflow.dev/) for the drag-and-drop diagram builder.
- [React Native](https://reactnative.dev/) for powering cross-platform mobile apps.
---
Happy coding! 😊