lumine-ui

A server-driven UI package for React Native.

Documentation

Find the documentation of Lumine UI here.

Installation

Using lumine-ui template

To create a new react-native (expo) app with lumine-ui, run the following command in a bash terminal.

Note: Use git bash to run it on Windows.

npx create-lumine-app <app_name>

Adding to an existing expo app

To add lumine-ui to an already existing expo app, install the package by using the following command.

npm install lumine-ui

To get started, paste the code below in App.tsx file of your expo app.

import { Presentation, PresentationData, NavHost } from "lumine-ui";
import React from "react";

// Replace the url below with your sever URL
const SERVER_URL = "https://raw.githubusercontent.com/Lumine-UI/server-samples/main/counter.json";

const defaultPresentation: PresentationData = {
  components: [],
};

export default function App() {
  const [presentationData, setPresentationData] =
    React.useState<PresentationData>(defaultPresentation);

  React.useEffect(() => {
    async function init() {
      try {
        const response = await fetch(SERVER_URL);
        const data = await response.json();
        console.log(data);
        setPresentationData(data);
      } catch (error) {
        console.error(error);
      }
    }
    init();
  }, []);
  return (
    <NavHost>
      <Presentation components={presentationData.components} />
    </NavHost>
  );
}

You can run your server locally (for example, at http://localhost:5000/) or host it on the web that responds in the format specified by Lumine UI. Once that is done, simply copy your url and paste it as SERVER_URL in the code above to start using Lumine UI.

This will initialize a react-native (expo) based counter app.

Server Samples

The server samples required for Lumine UI can be found here.

NOTE

If you want to use lumine for navigation, you need to install react-native-screens and react-native-safe-area-context. Run the following command in the app's root directory:

npx expo install react-native-screens react-native-safe-area-context

Contributing

See the contributing guide to learn how to contribute to the repository and the development workflow.

License

MIT

---

Made with create-react-native-library