RYNO 🛸

Server-driven rendering for React Native apps.

Introduction

This library enables the use React Server Components in React Native apps. ryno implements its own server renderer and provides a simple API that is easily to integrate into existing projects.

• ServerComponent provides an easy API to send a request to the server renderer
• All datatypes, even React elements and callback functions, are supported as props
• simple render function allows rendering custom React Native component on the server
• caching and reduplication build in

...and a lot more.

---

Install

Add ryno to your dependecies with this command:

with yarn

yarn add ryno

with npm

npm install --save ryno

Quick Start

This is a basic example on how to use the library.

On the client side:

import React from 'react';
import { ServerComponent } from 'ryno';
import { BlurView } from 'expo-blur';

export default function ServerBanner() {
  return (
    <ServerComponent
      // used for deduplicating server renders
      // when this compontent is used more than once
      path="1"
      // this implements the server communication
      // props are a serialised string that coints all rpops
      queryFn={async (path, props) => {
        const result = await fetch(uri + '/' + path, {
          method: 'POST',
          headers: { 'Content-Type': 'text/plain' },
          body: props,
        });

        return result.text();
      }}
      ErrorComponent={<Error />}
      LoaderComponent={<Loader />}
      // supports developer mode
      useLocal
      local={<Example />}
      // all other props get passed to the server
      uriBase={uri}
      // Function that are gonna be used as props on the server-side can be passed
      onPress={() => alert('Button pressed!')}
      // React elements can be passed to server components
      // you can even apply props to them from the server-side
      BlurView={BlurView}
    />
  );
}

On the server side:

import express from 'express';
import React from 'react';
import { render } from 'ryno';
import { Example } from 'Example';

const app = express();
app.use(express.text());
app.use(express.static('assets'));

const wait = (t: Number) => new Promise(r => setTimeout(r, t));

app.post('/1', async (req, res) => {
  const result = await render(props => <Example {...props} />, req.body);
  res.send(result);
});

Example component on the server

import React, { ElementType } from 'react';
import {
  Adapter,
  ImageBackground,
  StyleSheet,
  Text,
  TouchableOpacity,
  View,
} from 'ryno';

export function ExampleOne({
  uriBase,
  BlurView,
  onPress = () => {},
}: {
  uriBase: string,
  BlurView: ElementType<any>,
  onPress?: () => void,
}) {
  return (
    <ImageBackground
      key="wrapper"
      style={styles.hero}
      imageStyle={{
        borderRadius: 15,
      }}
      resizeMode="cover"
    >
      // The onPress prop was passed from the client // the event will trigger
      the function on the client
      <TouchableOpacity key="touchable" activeOpacity={0.8} onPress={onPress}>
        // Adapter is used to render components passed as props to the client //
        all props are passed to the component in the client
        <Adapter key="blur" component={BlurView} intensity={90}>
          <View key="blurContent">
            <Text key="headline">praesent plementum facilisis</Text>
          </View>
        </Adapter>
      </TouchableOpacity>
    </ImageBackground>
  );
}

// StyleSheets are supported to!
const styles = StyleSheet.create({
  hero: {
    aspectRatio: 1,
    justifyContent: 'space-between',
  },
});

Additional examples can be found inside the /example directory.

For more advanced uses of the library look inside the /benchmark directory.

---

License

The MIT License.