rnna app starter

README.md

$ npx yown @rnna/app-starter

events\boot\index.js

import { onBoot } from 'rnna/events';

export default onBoot(({ router }) => {
  router.go('main/Home');
});

routes\index.js

function home({ db }) {
  const actionCount = db.getActionCount();

  return {
    actionCount,
    name: "World"
  };
}

const routes = {
  "main/Home": home,
};

export default routes;

services\index.js

import { Container } from "rnna";
import DbBundle from "@rnna/bundle-db";
import RouterBundle from "@rnna/bundle-router";

import routes from "../routes";
import screens from "../views/screens";
import * as selectors from "./selectors";

const container = new Container();

 // DB
container.constant("db.selectors", selectors);
container.service("bundles.db", DbBundle);

// Router
container.constant("router.screens", screens);
container.constant("router.routes", routes);
container.service("bundles.router", RouterBundle);

export default container;

services\selectors.js

import { createSelector as $ } from "@rnna/db";

export const getActionCount = $('actionCount');

state\index.js

const reducers = {
  actionCount: (count = 0, action) => count + 1,
};

export default reducers;

views\lib\index.js

export { ActivityIndicator, Button, TextInput } from 'react-native';
export * from 'rnna/views/atoms';

views\screens\home.js

import React from 'react';
import { Text, View } from 'react-native';

import { m, p } from '../theme';

export default function Home({ actionCount, name }) {
  return (
    <View style={p[3]}>
      <Text style={m.b3}>Hello {name} !</Text>
      <Text>{actionCount} actions executed so far</Text>
    </View>
  );
}

views\screens\index.js

// import Login from './login';
import Home from './home';

export default {
//   auth: {
//     Login,
//   },
  main: {
    Home,
  },
};

views\theme.js

import { createMargin, createPadding } from 'rnna/views';

// Spacing
const sizes = [0, 4, 8, 16, 32, 64];

export const m = createMargin(sizes);

export const p = createPadding(sizes);

// Colors
// https://www.materialpalette.com/indigo/red

const primary = '#3F51B5';
const primaryDark = '#303F9F';
const primaryLight = '#C5CAE9';

const accent = '#FF5252';

const black = '#212121';
const white = '#FFFFFF';
const grey = '#757575';
const greyLight = '#BDBDBD';

export const colors = {
  primary,
  primaryVariant: primaryDark,
  accent,
  background: primary,
  surface: white,
  error: 'red',
  text: black,
  textSecondary: grey,
  divider: greyLight,
  on: {
    primary: white,
    accent: white,
    background: white,
    surface: black,
    error: white,
  },
};

export const roundness = 15;

yown.json

{
  "dir": "app",
  "keywords": ["rnna"],
  "dependencies": ["immer"]
}