🚧 (package) Add basic page and container

Author: tpucci

example/src/App.tsx

@@ -1,30 +1,14 @@
-/**
- * Sample React Native App
- * https://github.com/facebook/react-native
- *
- * Generated with the TypeScript template
- * https://github.com/emin93/react-native-template-typescript
- *
- * @format
- */
-
-import React, { Component } from "react";
-import { Platform, StyleSheet, Text, View } from "react-native";
-import { FirstName } from "./tunnels/SignIn/FirstName";
+import React, { Component } from 'react';
+import { View } from 'react-native';
+import { NavigationProvider } from 'react-gondola';
 
 interface Props {}
 export default class App extends Component<Props> {
   render() {
     return (
-      <View style={styles.container}>
-        <FirstName />
-      </View>
+      <NavigationProvider>
+        <View />
+      </NavigationProvider>
     );
   }
 }
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1
-  }
-});

example/src/canals/SignIn/FirstName.tsx

@@ -0,0 +1,22 @@
+import React, { Component } from 'react';
+import { Platform, StyleSheet, Text, View } from 'react-native';
+
+interface Props {}
+export class FirstName extends Component<Props> {
+  render() {
+    return (
+      <View style={styles.container}>
+        <Text>FirstName</Text>
+      </View>
+    );
+  }
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+    backgroundColor: '#FFAAAA',
+  },
+});

example/src/tunnels/SignIn/LastName.tsx example/src/canals/SignIn/LastName.tsxexample/src/tunnels/SignIn/LastName.tsx renamed to example/src/canals/SignIn/LastName.tsx

@@ -1,5 +1,5 @@
-import React, { Component } from "react";
-import { Platform, StyleSheet, Text, View } from "react-native";
+import React, { Component } from 'react';
+import { Platform, StyleSheet, Text, View } from 'react-native';
 
 interface Props {}
 export class LastName extends Component<Props> {
@@ -15,8 +15,8 @@ export class LastName extends Component<Props> {
 const styles = StyleSheet.create({
   container: {
     flex: 1,
-    justifyContent: "center",
-    alignItems: "center",
-    backgroundColor: "#FF9999"
-  }
+    justifyContent: 'center',
+    alignItems: 'center',
+    backgroundColor: '#FF9999',
+  },
 });

example/src/canals/SignIn/index.ts

@@ -0,0 +1,4 @@
+import { FirstName } from './FirstName';
+import { LastName } from './LastName';
+
+export const SignIn = canal(FirstName, LastName);

example/src/tunnels/SignIn/FirstName.tsx

@@ -0,0 +1,9 @@
+import React from 'react';
+import { Provider } from 'mobx-react/native';
+
+interface IProps {
+  children: React.ReactNode;
+}
+export const NavigationProvider = ({ children }: IProps) => (
+  <Provider navigation={{}}>{React.Children.only(children)}</Provider>
+);

example/src/tunnels/SignIn/index.ts

@@ -0,0 +1,20 @@
+import React from 'react';
+import TestRenderer from 'react-test-renderer';
+import { Provider } from 'mobx-react/native';
+import { View } from 'react-native';
+
+import { NavigationProvider } from '../NavigationProvider';
+
+describe('NavigationProvider', () => {
+  it('renders a MobX provider with a navigation prop', () => {
+    const testRenderer = TestRenderer.create(
+      <NavigationProvider>
+        <View />
+      </NavigationProvider>
+    );
+    expect(testRenderer.toJSON()).toMatchSnapshot();
+    const testInstance = testRenderer.root;
+    const providerInstance = testInstance.findByType(Provider);
+    expect(providerInstance.props.navigation).toBeDefined();
+  });
+});

src/NavigationProvider.tsx

@@ -0,0 +1,3 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`NavigationProvider renders a MobX provider with a navigation prop 1`] = `<View />`;

src/__tests__/NavigationProvider.test.tsx

@@ -1,3 +1,3 @@
-it("should work", () => {
+it('should work', () => {
   expect(true).toBe(true);
 });