diff --git a/.nvmrc b/.nvmrc index db24ab9..8351c19 100644 --- a/.nvmrc +++ b/.nvmrc @@ -1 +1 @@ -10.13.0 +14 diff --git a/App.tsx b/App.tsx index 096f3fe..2a7701e 100644 --- a/App.tsx +++ b/App.tsx @@ -4,119 +4,21 @@ * */ -import React, {useState} from 'react'; -import { - SafeAreaView, - StyleSheet, - ScrollView, - View, - Text, - StatusBar, - Switch, -} from 'react-native'; +import React from 'react'; +import {StatusBar} from 'react-native'; +// import {enableScreens} from 'react-native-screens'; -import { - Header, - LearnMoreLinks, - Colors, - DebugInstructions, - ReloadInstructions, -} from 'react-native/Libraries/NewAppScreen'; +import Router from './app/router'; -const App: React.FC = () => { - const [isToggled, setIsToggled] = useState(false); - - const handleToggle = () => setIsToggled(!isToggled); +// enableScreens(); +const App: React.FC = () => { return ( <> - - -
- {global.HermesInternal == null ? null : ( - - Engine: Hermes - - )} - - - - Step One - - Edit App.js to change this - screen and then come back to see your edits. - - - - See Your Changes - - - - - - Debug - - - - - - Learn More - - Read the docs to discover what to do next: - - - - - - + ); }; -const styles = StyleSheet.create({ - scrollView: { - backgroundColor: Colors.lighter, - }, - engine: { - position: 'absolute', - right: 0, - }, - body: { - backgroundColor: Colors.white, - }, - sectionContainer: { - marginTop: 32, - paddingHorizontal: 24, - }, - sectionTitle: { - fontSize: 24, - fontWeight: '600', - color: Colors.black, - }, - sectionDescription: { - marginTop: 8, - fontSize: 18, - fontWeight: '400', - color: Colors.dark, - }, - highlight: { - fontWeight: '700', - }, - footer: { - color: Colors.dark, - fontSize: 12, - fontWeight: '600', - padding: 4, - paddingRight: 12, - textAlign: 'right', - }, -}); - export default App; diff --git a/__tests__/App-test.js b/__tests__/App-test.js deleted file mode 100644 index e693710..0000000 --- a/__tests__/App-test.js +++ /dev/null @@ -1,34 +0,0 @@ -import ReactNative from 'react-native'; -// Note: test renderer must be required after react-native. -import {shallow} from 'enzyme'; -import renderer from 'react-test-renderer'; - -import React from 'react'; -import App from '../App'; - -const {View, Text, Switch} = ReactNative; - -describe('jest snapshot tests', () => { - it('renders correctly', () => { - const tree = renderer.create().toJSON(); - expect(tree).toMatchSnapshot(); - }); -}); - -describe('enzyme tests', () => { - it('should render a component', () => { - const wrapper = shallow(); - expect(wrapper.find(View)).toHaveLength(5); - expect(wrapper.find(Text)).toHaveLength(9); - expect(wrapper.find(Switch)).toHaveLength(1); - }); - - it('should togggle switch to true', () => { - const wrapper = shallow(); - const switchValueBeforeToggle = wrapper.find(Switch).first().props().value; - expect(switchValueBeforeToggle).toBe(false); - wrapper.find(Switch).first().props().onChange(); - const switchValueAfterToggle = wrapper.find(Switch).first().props().value; - expect(switchValueAfterToggle).toBe(true); - }); -}); diff --git a/__tests__/App-test.tsx b/__tests__/App-test.tsx new file mode 100644 index 0000000..cf5aa4c --- /dev/null +++ b/__tests__/App-test.tsx @@ -0,0 +1,14 @@ +import renderer from 'react-test-renderer'; +// import {fireEvent, render} from '@testing-library/react-native'; + +import React from 'react'; +import App from '../App'; + +jest.useFakeTimers(); + +describe('jest snapshot tests', () => { + it('renders correctly', async () => { + const tree = renderer.create().toJSON(); + expect(tree).toMatchSnapshot(); + }); +}); diff --git a/__tests__/__snapshots__/App-test.js.snap b/__tests__/__snapshots__/App-test.js.snap deleted file mode 100644 index 8eeaece..0000000 --- a/__tests__/__snapshots__/App-test.js.snap +++ /dev/null @@ -1,800 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`jest snapshot tests renders correctly 1`] = ` - - - - - - - Welcome to - - - React Native - - - - - - - Step One - - - Edit - - App.js - - to change this screen and then come back to see your edits. - - - - - See Your Changes - - - - Press - - Cmd + R - - in the simulator to reload your app's code. - - - - - - Debug - - - - Press - - Cmd + D - - in the simulator or - - - Shake - - your device to open the React Native debug menu. - - - - - - Learn More - - - Read the docs to discover what to do next: - - - - - - - The Basics - - - Explains a Hello World for React Native. - - - - - - Style - - - Covers how to use the prop named style which controls the visuals. - - - - - - Layout - - - React Native uses flexbox for layout, learn how it works. - - - - - - Components - - - The full list of components and APIs inside React Native. - - - - - - Navigation - - - How to handle moving between screens inside your application. - - - - - - Networking - - - How to use the Fetch API in React Native. - - - - - - Help - - - Need more help? There are many other React Native developers who may have the answer. - - - - - - Follow us on Twitter - - - Stay in touch with the community, join in on Q&As and more by following React Native on Twitter. - - - - - - - -`; diff --git a/__tests__/__snapshots__/App-test.tsx.snap b/__tests__/__snapshots__/App-test.tsx.snap new file mode 100644 index 0000000..405aee4 --- /dev/null +++ b/__tests__/__snapshots__/App-test.tsx.snap @@ -0,0 +1,1157 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`jest snapshot tests renders correctly 1`] = ` + + + + + + + + + + + + + Home + + + + + + + + + + + + + + + + + + + + + + Welcome to + + + React Native + + + + + + + Search Countries + + + + + + + Step One + + + Edit + + App.js + + to change this screen and then come back to see your edits. + + + + + See Your Changes + + + + Press + + Cmd + R + + in the simulator to reload your app's code. + + + + + + Debug + + + + Press + + Cmd + D + + in the simulator or + + + Shake + + your device to open the React Native debug menu. + + + + + + Learn More + + + Read the docs to discover what to do next: + + + + + + + The Basics + + + Explains a Hello World for React Native. + + + + + + Style + + + Covers how to use the prop named style which controls the visuals. + + + + + + Layout + + + React Native uses flexbox for layout, learn how it works. + + + + + + Components + + + The full list of components and APIs inside React Native. + + + + + + Navigation + + + How to handle moving between screens inside your application. + + + + + + Networking + + + How to use the Fetch API in React Native. + + + + + + Help + + + Need more help? There are many other React Native developers who may have the answer. + + + + + + Follow us on Twitter + + + Stay in touch with the community, join in on Q&As and more by following React Native on Twitter. + + + + + + + + + + + + + + + + +`; diff --git a/__tests__/setupTests.js b/__tests__/setupTests.js deleted file mode 100644 index 0e2cbd7..0000000 --- a/__tests__/setupTests.js +++ /dev/null @@ -1,26 +0,0 @@ -// setup-tests.js - -import 'react-native'; -import 'jest-enzyme'; -import Adapter from '@wojtekmaj/enzyme-adapter-react-17'; //TODO: replace this with enzyme-adapter-react-17 when official react 17 support is added -import Enzyme from 'enzyme'; - -/** - * Set up Enzyme to mount to DOM, simulate events, - * and inspect the DOM in tests. - */ -Enzyme.configure({adapter: new Adapter()}); - -/** - * Ignore some expected warnings - * see: https://jestjs.io/docs/en/tutorial-react.html#snapshot-testing-with-mocks-enzyme-and-react-16 - * see https://github.com/Root-App/react-native-mock-render/issues/6 - */ -const originalConsoleError = console.error; -console.error = message => { - if (message.startsWith('Warning:')) { - return; - } - - originalConsoleError(message); -}; diff --git a/app/router/index.tsx b/app/router/index.tsx new file mode 100644 index 0000000..fc0ff9c --- /dev/null +++ b/app/router/index.tsx @@ -0,0 +1,25 @@ +// import isEqual from 'lodash/isEqual'; + +import React from 'react'; + +import {NavigationContainer} from '@react-navigation/native'; +import {createStackNavigator} from '@react-navigation/stack'; + +import routes from './routes'; +import {HOME} from './routeNames'; + +const Stack = createStackNavigator(); + +const Router: React.FC = () => ( + + + {Object.keys(routes).map(routeKey => ( + + + + ))} + + +); + +export default Router; diff --git a/app/router/routeConfigs.ts b/app/router/routeConfigs.ts new file mode 100644 index 0000000..6b27c43 --- /dev/null +++ b/app/router/routeConfigs.ts @@ -0,0 +1,13 @@ +import { HOME, SEARCH } from './routeNames'; + +const routeConfigs = { + [SEARCH]: { + path: '/search', + }, + [HOME]: { + path: '/', + parse: {}, + }, +}; + +export default routeConfigs; diff --git a/app/router/routeNames.ts b/app/router/routeNames.ts new file mode 100644 index 0000000..0890409 --- /dev/null +++ b/app/router/routeNames.ts @@ -0,0 +1,2 @@ +export const HOME = 'Home'; +export const SEARCH = 'Search'; diff --git a/app/router/routes.ts b/app/router/routes.ts new file mode 100644 index 0000000..bed5012 --- /dev/null +++ b/app/router/routes.ts @@ -0,0 +1,18 @@ +import HomeScreen from 'screens/HomeScreen'; +import SearchScreen from 'screens/SearchScreen'; + +import routeConfigs from './routeConfigs'; +import * as routeNames from './routeNames'; + +const routes = { + [routeNames.HOME]: { + ...routeConfigs[routeNames.HOME], + screen: HomeScreen, + }, + [routeNames.SEARCH]: { + ...routeConfigs[routeNames.SEARCH], + screen: SearchScreen, + }, +}; + +export default routes; diff --git a/app/router/types.ts b/app/router/types.ts new file mode 100644 index 0000000..626b31e --- /dev/null +++ b/app/router/types.ts @@ -0,0 +1,4 @@ +export type RootStackParamList = { + Home: {}; + Search: {}; +}; diff --git a/app/screens/HomeScreen/Loadable.ts b/app/screens/HomeScreen/Loadable.ts new file mode 100644 index 0000000..183fcce --- /dev/null +++ b/app/screens/HomeScreen/Loadable.ts @@ -0,0 +1,7 @@ +/** + * Asynchronously loads the component for HomeScreen + */ + +import loadable from 'react-suspense-loadable'; + +export default loadable(() => import('./index')); diff --git a/app/screens/HomeScreen/index.tsx b/app/screens/HomeScreen/index.tsx new file mode 100644 index 0000000..d46e38f --- /dev/null +++ b/app/screens/HomeScreen/index.tsx @@ -0,0 +1,83 @@ +import React, {useState} from 'react'; +// import Text from 'theme/Text'; +import {ScrollView, Text, View, Switch} from 'react-native'; + +import { + Header, + LearnMoreLinks, + DebugInstructions, + ReloadInstructions, +} from 'react-native/Libraries/NewAppScreen'; + +import Button from 'theme/Button'; + +import {SEARCH} from 'router/routeNames'; + +import {HomeScreenProps} from './types'; +import styles from './style'; + +function HomeScreen(props: HomeScreenProps): React.ReactChild { + const [isToggled, setIsToggled] = useState(false); + + const handleToggle = () => setIsToggled(!isToggled); + return ( + +
+ {global.HermesInternal == null ? null : ( + + Engine: Hermes + + )} + + +