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