fix: add react-navigation

Author: ethanneff

src/__tests__/index.tsx

@@ -0,0 +1,18 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`should render correctly 1`] = `
+<View
+  style={
+    Object {
+      "alignItems": "center",
+      "flex": 1,
+      "justifyContent": "center",
+    }
+  }
+  testID="wrapper"
+>
+  <Text>
+    hello
+  </Text>
+</View>
+`;

src/components/Container/__tests__/__snapshots__/index.tsx.snap

@@ -0,0 +1,14 @@
+import React from 'react';
+import {Container} from '..';
+import renderer from 'react-test-renderer';
+import {Text} from 'react-native';
+
+it('should render correctly', () => {
+  const component = renderer.create(
+    <Container testID="wrapper">
+      <Text>hello</Text>
+    </Container>,
+  );
+
+  expect(component.toJSON()).toMatchSnapshot();
+});

src/components/Container/__tests__/index.tsx

@@ -0,0 +1,16 @@
+import React, {ReactNode} from 'react';
+import {View} from 'react-native';
+import {styles} from './styles';
+
+type Props = {
+  children: ReactNode | ReactNode[];
+  testID?: string;
+};
+
+export function Container({children, testID}: Props) {
+  return (
+    <View style={styles.center} testID={testID}>
+      {children}
+    </View>
+  );
+}

src/components/Container/index.tsx

@@ -0,0 +1,9 @@
+import {StyleSheet} from 'react-native';
+
+export const styles = StyleSheet.create({
+  center: {
+    flex: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+});

src/components/Container/styles.tsx

@@ -0,0 +1,9 @@
+import {StyleSheet} from 'react-native';
+
+export const styles = StyleSheet.create({
+  center: {
+    alignItems: 'center',
+    justifyContent: 'center',
+    height: '100vh',
+  },
+});

src/components/Container/styles.web.tsx

@@ -0,0 +1 @@
+export * from './Container';

src/components/index.tsx

@@ -1,22 +1,14 @@
-import React, { memo } from "react";
-import { AppRegistry, View, Text, Platform, StyleSheet } from "react-native";
+import React from 'react';
+import {AppRegistry, Platform} from 'react-native';
+import {Navigation} from './navigation';
 
-const appName = "example";
-const styles = StyleSheet.create({
-  container: { flex: 1, justifyContent: "center", alignItems: "center" }
-});
-
-export const Main = memo(function Main() {
-  return (
-    <View style={styles.container}>
-      <Text>react native with web and typescript</Text>
-    </View>
-  );
-});
+export function App() {
+  return <Navigation />;
+}
 
-AppRegistry.registerComponent(appName, () => Main);
-if (Platform.OS === "web") {
-  AppRegistry.runApplication(appName, {
-    rootTag: document.getElementById("root")
+AppRegistry.registerComponent('example', () => App);
+if (Platform.OS === 'web') {
+  AppRegistry.runApplication('example', {
+    rootTag: document.getElementById('root'),
   });
 }

src/index.tsx

@@ -0,0 +1,6 @@
+const path = require('path');
+
+module.exports = {
+  process: (_, filename) =>
+    `module.exports = '${JSON.stringify(path.basename(filename))}';`,
+};

src/mocks/Files/index.js

@@ -0,0 +1,29 @@
+import 'react-native-gesture-handler/jestSetup';
+
+jest.useFakeTimers();
+
+jest.mock('react-native-reanimated', () => {
+  const Reanimated = require('react-native-reanimated/mock');
+  Reanimated.default.call = () => {};
+  return Reanimated;
+});
+
+jest.mock('react-native/Libraries/Animated/src/NativeAnimatedHelper');
+
+export const mockNavigation = {
+  goBack: jest.fn(),
+  navigate: jest.fn(),
+  push: jest.fn(),
+  popToTop: jest.fn(),
+};
+jest.mock('@react-navigation/native', () => {
+  return {
+    useRoute: () => jest.fn(),
+    useNavigation: () => ({
+      goBack: mockNavigation.goBack,
+      navigate: mockNavigation.navigate,
+      push: mockNavigation.push,
+      popToTop: mockNavigation.popToTop,
+    }),
+  };
+});