Moomin

Server side rendering for React Native mobile apps.

With Moomin, you can load parts of your React Native app UI from the backend. This makes is easier and faster to update parts of the UI.

What can you do with Moomin?

Push UI updates and bug fixes immediately
Offload UI related logic to the backend
Support embedding third party UI elements
Distribute developing and deploying the app

Getting Started:

Install moomin-view on your React Native app.

yarn add moomin-view

Import the RemoteView component and use it with the backend URL for the view.

// App.tsx
import React from "react"
import { StyleSheet, View } from "react-native"
import { RemoteView } from "moomin-view"

export default function App() {
  return (
    <View style={styles.container}>
      <Text>My Page</Text>
      <RemoteView src="http://localhost:3000/views/my-page" />
    </View>
  )
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "#fff",
    alignItems: "center",
    justifyContent: "center",
  }
})

On the server side, install moomin-server and use JSX/TSX to define your views.

// server.tsx
import express from 'express'
import { React, View, Text, Image } from 'moomin-server'

const MyPage = () => (
  <View>
    <Image source={{ uri: 'https://moomin.js.org/logo.png' }} />
    <Text style={{ color: 'blue' }}>Page Content</Text>
  </View>
)

const app = express()

app.get("/views/my-page", function (req, res) {
  res.send(<MyPage />)
})

app.listen(3000, () => {
  console.log(`Server listening at http://localhost:${3000}`)
})

For more examples and usage, please refer to the Docs.

Development setup

Moomin is still in the early development process, this includes how Moomin is developed itself. Therefore it can change fast and without any notice. So far, this is how we develop Moomin:

All packages npm packages are available inside packages, these packages are published manually
Until we add sufficient tests, we use the example app to test whether Moomin works as expected

How to contribute

See our guide on contributing.

Release History

See our changelog.

License

For license details, see the LICENSE file in the root of this project.

klarna-incubator / moomin