├── .gitattributes ├── src ├── components │ ├── index.tsx │ └── Container │ │ ├── styles.tsx │ │ ├── styles.web.tsx │ │ ├── __tests__ │ │ ├── __snapshots__ │ │ │ └── index.tsx.snap │ │ └── index.tsx │ │ └── index.tsx ├── react-app-env.d.ts ├── navigation │ ├── GestureHandler │ │ ├── index.web.ts │ │ └── index.ts │ └── index.tsx ├── screens │ ├── index.tsx │ ├── Home │ │ ├── __tests__ │ │ │ ├── index.tsx │ │ │ └── __snapshots__ │ │ │ │ └── index.tsx.snap │ │ └── index.tsx │ └── Details │ │ ├── index.tsx │ │ └── __tests__ │ │ ├── index.tsx │ │ └── __snapshots__ │ │ └── index.tsx.snap ├── mocks │ ├── Files │ │ └── index.js │ └── Setup │ │ └── index.ts └── index.tsx ├── index.js ├── app.json ├── public ├── robots.txt ├── favicon.ico ├── logo192.png ├── logo512.png ├── manifest.json └── index.html ├── babel.config.js ├── android ├── app │ ├── debug.keystore │ ├── src │ │ ├── main │ │ │ ├── res │ │ │ │ ├── values │ │ │ │ │ ├── strings.xml │ │ │ │ │ └── styles.xml │ │ │ │ ├── mipmap-hdpi │ │ │ │ │ ├── ic_launcher.png │ │ │ │ │ └── ic_launcher_round.png │ │ │ │ ├── mipmap-mdpi │ │ │ │ │ ├── ic_launcher.png │ │ │ │ │ └── ic_launcher_round.png │ │ │ │ ├── mipmap-xhdpi │ │ │ │ │ ├── ic_launcher.png │ │ │ │ │ └── ic_launcher_round.png │ │ │ │ ├── mipmap-xxhdpi │ │ │ │ │ ├── ic_launcher.png │ │ │ │ │ └── ic_launcher_round.png │ │ │ │ └── mipmap-xxxhdpi │ │ │ │ │ ├── ic_launcher.png │ │ │ │ │ └── ic_launcher_round.png │ │ │ ├── java │ │ │ │ └── com │ │ │ │ │ └── example │ │ │ │ │ ├── MainActivity.java │ │ │ │ │ └── MainApplication.java │ │ │ └── AndroidManifest.xml │ │ └── debug │ │ │ ├── AndroidManifest.xml │ │ │ └── java │ │ │ └── com │ │ │ └── example │ │ │ └── ReactNativeFlipper.java │ ├── proguard-rules.pro │ ├── build_defs.bzl │ ├── BUCK │ └── build.gradle ├── gradle │ └── wrapper │ │ ├── gradle-wrapper.jar │ │ └── gradle-wrapper.properties ├── settings.gradle ├── build.gradle ├── gradle.properties ├── gradlew.bat └── gradlew ├── ios ├── example │ ├── Images.xcassets │ │ ├── Contents.json │ │ └── AppIcon.appiconset │ │ │ └── Contents.json │ ├── AppDelegate.h │ ├── main.m │ ├── Info.plist │ ├── AppDelegate.m │ └── LaunchScreen.storyboard ├── example.xcworkspace │ ├── contents.xcworkspacedata │ └── xcshareddata │ │ └── IDEWorkspaceChecks.plist ├── exampleTests │ ├── Info.plist │ └── exampleTests.m ├── example-tvOSTests │ └── Info.plist ├── Podfile ├── example-tvOS │ └── Info.plist ├── example.xcodeproj │ ├── xcshareddata │ │ └── xcschemes │ │ │ ├── example.xcscheme │ │ │ └── example-tvOS.xcscheme │ └── project.pbxproj └── Podfile.lock ├── .prettierrc.js ├── .vscode └── settings.json ├── metro.config.js ├── .eslintrc.js ├── tsconfig.json ├── README.md ├── .gitignore └── package.json /.gitattributes: -------------------------------------------------------------------------------- 1 | *.pbxproj -text 2 | -------------------------------------------------------------------------------- /src/components/index.tsx: -------------------------------------------------------------------------------- 1 | export * from './Container'; 2 | -------------------------------------------------------------------------------- /index.js: -------------------------------------------------------------------------------- 1 | import {App} from './src'; 2 | export default App; 3 | -------------------------------------------------------------------------------- /src/react-app-env.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | -------------------------------------------------------------------------------- /app.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "example", 3 | "displayName": "example" 4 | } -------------------------------------------------------------------------------- /src/navigation/GestureHandler/index.web.ts: -------------------------------------------------------------------------------- 1 | import 'react-native'; 2 | -------------------------------------------------------------------------------- /src/screens/index.tsx: -------------------------------------------------------------------------------- 1 | export * from './Details'; 2 | export * from './Home'; 3 | -------------------------------------------------------------------------------- /public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /babel.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | presets: ['module:metro-react-native-babel-preset'], 3 | }; 4 | -------------------------------------------------------------------------------- /src/navigation/GestureHandler/index.ts: -------------------------------------------------------------------------------- 1 | import 'react-native'; 2 | import 'react-native-gesture-handler'; 3 | -------------------------------------------------------------------------------- /public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ethanneff/react-native-web-typescript/HEAD/public/favicon.ico -------------------------------------------------------------------------------- /public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ethanneff/react-native-web-typescript/HEAD/public/logo192.png -------------------------------------------------------------------------------- /public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ethanneff/react-native-web-typescript/HEAD/public/logo512.png -------------------------------------------------------------------------------- /android/app/debug.keystore: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ethanneff/react-native-web-typescript/HEAD/android/app/debug.keystore -------------------------------------------------------------------------------- /android/app/src/main/res/values/strings.xml: -------------------------------------------------------------------------------- 1 | 2 | example 3 | 4 | -------------------------------------------------------------------------------- /ios/example/Images.xcassets/Contents.json: -------------------------------------------------------------------------------- 1 | { 2 | "info" : { 3 | "version" : 1, 4 | "author" : "xcode" 5 | } 6 | } 7 | -------------------------------------------------------------------------------- /.prettierrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | bracketSpacing: false, 3 | jsxBracketSameLine: true, 4 | singleQuote: true, 5 | trailingComma: 'all', 6 | }; 7 | -------------------------------------------------------------------------------- /android/gradle/wrapper/gradle-wrapper.jar: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ethanneff/react-native-web-typescript/HEAD/android/gradle/wrapper/gradle-wrapper.jar -------------------------------------------------------------------------------- /android/app/src/main/res/mipmap-hdpi/ic_launcher.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ethanneff/react-native-web-typescript/HEAD/android/app/src/main/res/mipmap-hdpi/ic_launcher.png -------------------------------------------------------------------------------- /android/app/src/main/res/mipmap-mdpi/ic_launcher.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ethanneff/react-native-web-typescript/HEAD/android/app/src/main/res/mipmap-mdpi/ic_launcher.png -------------------------------------------------------------------------------- /android/app/src/main/res/mipmap-xhdpi/ic_launcher.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ethanneff/react-native-web-typescript/HEAD/android/app/src/main/res/mipmap-xhdpi/ic_launcher.png -------------------------------------------------------------------------------- /android/app/src/main/res/mipmap-xxhdpi/ic_launcher.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ethanneff/react-native-web-typescript/HEAD/android/app/src/main/res/mipmap-xxhdpi/ic_launcher.png -------------------------------------------------------------------------------- /android/app/src/main/res/mipmap-xxxhdpi/ic_launcher.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ethanneff/react-native-web-typescript/HEAD/android/app/src/main/res/mipmap-xxxhdpi/ic_launcher.png -------------------------------------------------------------------------------- /android/app/src/main/res/mipmap-hdpi/ic_launcher_round.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ethanneff/react-native-web-typescript/HEAD/android/app/src/main/res/mipmap-hdpi/ic_launcher_round.png -------------------------------------------------------------------------------- /android/app/src/main/res/mipmap-mdpi/ic_launcher_round.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ethanneff/react-native-web-typescript/HEAD/android/app/src/main/res/mipmap-mdpi/ic_launcher_round.png -------------------------------------------------------------------------------- /android/app/src/main/res/mipmap-xhdpi/ic_launcher_round.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ethanneff/react-native-web-typescript/HEAD/android/app/src/main/res/mipmap-xhdpi/ic_launcher_round.png -------------------------------------------------------------------------------- /android/app/src/main/res/mipmap-xxhdpi/ic_launcher_round.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ethanneff/react-native-web-typescript/HEAD/android/app/src/main/res/mipmap-xxhdpi/ic_launcher_round.png -------------------------------------------------------------------------------- /android/app/src/main/res/mipmap-xxxhdpi/ic_launcher_round.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ethanneff/react-native-web-typescript/HEAD/android/app/src/main/res/mipmap-xxxhdpi/ic_launcher_round.png -------------------------------------------------------------------------------- /src/mocks/Files/index.js: -------------------------------------------------------------------------------- 1 | const path = import('path'); 2 | 3 | module.exports = { 4 | process: (_, filename) => 5 | `module.exports = '${JSON.stringify(path.basename(filename))}';`, 6 | }; 7 | -------------------------------------------------------------------------------- /android/settings.gradle: -------------------------------------------------------------------------------- 1 | rootProject.name = 'example' 2 | apply from: file("../node_modules/@react-native-community/cli-platform-android/native_modules.gradle"); applyNativeModulesSettingsGradle(settings) 3 | include ':app' 4 | -------------------------------------------------------------------------------- /.vscode/settings.json: -------------------------------------------------------------------------------- 1 | { 2 | "editor.formatOnSave": true, 3 | "editor.formatOnPaste": true, 4 | "editor.codeActionsOnSave": ["source.organizeImports", "source.fixAll"], 5 | "editor.gotoLocation.multipleImplementations": "goto" 6 | } 7 | -------------------------------------------------------------------------------- /ios/example/AppDelegate.h: -------------------------------------------------------------------------------- 1 | #import 2 | #import 3 | 4 | @interface AppDelegate : UIResponder 5 | 6 | @property (nonatomic, strong) UIWindow *window; 7 | 8 | @end 9 | -------------------------------------------------------------------------------- /src/components/Container/styles.tsx: -------------------------------------------------------------------------------- 1 | import {StyleSheet} from 'react-native'; 2 | 3 | export const styles = StyleSheet.create({ 4 | center: { 5 | flex: 1, 6 | alignItems: 'center', 7 | justifyContent: 'center', 8 | }, 9 | }); 10 | -------------------------------------------------------------------------------- /metro.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | transformer: { 3 | getTransformOptions: async () => ({ 4 | transform: { 5 | experimentalImportSupport: false, 6 | inlineRequires: false, 7 | }, 8 | }), 9 | }, 10 | }; 11 | -------------------------------------------------------------------------------- /android/gradle/wrapper/gradle-wrapper.properties: -------------------------------------------------------------------------------- 1 | distributionBase=GRADLE_USER_HOME 2 | distributionPath=wrapper/dists 3 | distributionUrl=https\://services.gradle.org/distributions/gradle-6.2-all.zip 4 | zipStoreBase=GRADLE_USER_HOME 5 | zipStorePath=wrapper/dists 6 | -------------------------------------------------------------------------------- /ios/example/main.m: -------------------------------------------------------------------------------- 1 | #import 2 | 3 | #import "AppDelegate.h" 4 | 5 | int main(int argc, char * argv[]) { 6 | @autoreleasepool { 7 | return UIApplicationMain(argc, argv, nil, NSStringFromClass([AppDelegate class])); 8 | } 9 | } 10 | -------------------------------------------------------------------------------- /src/components/Container/styles.web.tsx: -------------------------------------------------------------------------------- 1 | import {StyleSheet} from 'react-native'; 2 | 3 | export const styles = StyleSheet.create({ 4 | center: { 5 | alignItems: 'center', 6 | justifyContent: 'center', 7 | height: '100vh', 8 | }, 9 | }); 10 | -------------------------------------------------------------------------------- /ios/example.xcworkspace/contents.xcworkspacedata: -------------------------------------------------------------------------------- 1 | 2 | 4 | 6 | 7 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /ios/example.xcworkspace/xcshareddata/IDEWorkspaceChecks.plist: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | IDEDidComputeMac32BitWarning 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /android/app/src/main/res/values/styles.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /src/components/Container/__tests__/__snapshots__/index.tsx.snap: -------------------------------------------------------------------------------- 1 | // Jest Snapshot v1, https://goo.gl/fbAQLP 2 | 3 | exports[`should render correctly 1`] = ` 4 | 14 | 15 | hello 16 | 17 | 18 | `; 19 | -------------------------------------------------------------------------------- /.eslintrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | root: true, 3 | extends: [ 4 | '@react-native-community', 5 | 'eslint:recommended', 6 | 'plugin:@typescript-eslint/eslint-recommended', 7 | 'plugin:@typescript-eslint/recommended', 8 | ], 9 | env: {jest: true}, 10 | ignorePatterns: [ 11 | 'node_modules/', 12 | 'coverage/', 13 | 'android/', 14 | 'ios/', 15 | 'src/mocks/Setup', 16 | ], 17 | }; 18 | -------------------------------------------------------------------------------- /android/app/src/debug/AndroidManifest.xml: -------------------------------------------------------------------------------- 1 | 2 | 4 | 5 | 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /src/components/Container/__tests__/index.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import {Container} from '..'; 3 | import renderer from 'react-test-renderer'; 4 | import {Text} from 'react-native'; 5 | 6 | it('should render correctly', () => { 7 | const component = renderer.create( 8 | 9 | hello 10 | , 11 | ); 12 | 13 | expect(component.toJSON()).toMatchSnapshot(); 14 | }); 15 | -------------------------------------------------------------------------------- /src/index.tsx: -------------------------------------------------------------------------------- 1 | import React, {ReactElement} from 'react'; 2 | import {AppRegistry, Platform} from 'react-native'; 3 | import {Navigation} from './navigation'; 4 | 5 | export function App(): ReactElement { 6 | return ; 7 | } 8 | 9 | AppRegistry.registerComponent('example', () => App); 10 | if (Platform.OS === 'web') { 11 | AppRegistry.runApplication('example', { 12 | rootTag: document.getElementById('root'), 13 | }); 14 | } 15 | -------------------------------------------------------------------------------- /android/app/src/main/java/com/example/MainActivity.java: -------------------------------------------------------------------------------- 1 | package com.example; 2 | 3 | import com.facebook.react.ReactActivity; 4 | 5 | public class MainActivity extends ReactActivity { 6 | 7 | /** 8 | * Returns the name of the main component registered from JavaScript. This is used to schedule 9 | * rendering of the component. 10 | */ 11 | @Override 12 | protected String getMainComponentName() { 13 | return "example"; 14 | } 15 | } 16 | -------------------------------------------------------------------------------- /src/components/Container/index.tsx: -------------------------------------------------------------------------------- 1 | import React, {ReactElement} from 'react'; 2 | import {View} from 'react-native'; 3 | import {styles} from './styles'; 4 | 5 | type Props = { 6 | children: React.ReactElement | ReactElement[]; 7 | testID?: string; 8 | }; 9 | 10 | export function Container({children, testID}: Props): React.ReactElement { 11 | return ( 12 | 13 | {children} 14 | 15 | ); 16 | } 17 | -------------------------------------------------------------------------------- /android/app/proguard-rules.pro: -------------------------------------------------------------------------------- 1 | # Add project specific ProGuard rules here. 2 | # By default, the flags in this file are appended to flags specified 3 | # in /usr/local/Cellar/android-sdk/24.3.3/tools/proguard/proguard-android.txt 4 | # You can edit the include path and order by changing the proguardFiles 5 | # directive in build.gradle. 6 | # 7 | # For more details, see 8 | # http://developer.android.com/guide/developing/tools/proguard.html 9 | 10 | # Add any project specific keep options here: 11 | -------------------------------------------------------------------------------- /public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "64x64 32x32 24x24 16x16", 8 | "type": "image/x-icon" 9 | }, 10 | { 11 | "src": "logo192.png", 12 | "type": "image/png", 13 | "sizes": "192x192" 14 | }, 15 | { 16 | "src": "logo512.png", 17 | "type": "image/png", 18 | "sizes": "512x512" 19 | } 20 | ], 21 | "start_url": ".", 22 | "display": "standalone", 23 | "theme_color": "#000000", 24 | "background_color": "#ffffff" 25 | } 26 | -------------------------------------------------------------------------------- /src/screens/Home/__tests__/index.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import {Home} from '..'; 3 | import renderer from 'react-test-renderer'; 4 | import {mockNavigation} from '../../../mocks/Setup'; 5 | 6 | it('should render correctly', () => { 7 | const component = renderer.create(); 8 | expect(component.toJSON()).toMatchSnapshot(); 9 | }); 10 | 11 | it('navigates to details', () => { 12 | const component = renderer.create(); 13 | const button = component.root.findByProps({testID: 'details'}); 14 | button.instance.props.onPress(); 15 | expect(mockNavigation.navigate).toBeCalledWith('Details', {data: '🤪'}); 16 | }); 17 | -------------------------------------------------------------------------------- /android/app/build_defs.bzl: -------------------------------------------------------------------------------- 1 | """Helper definitions to glob .aar and .jar targets""" 2 | 3 | def create_aar_targets(aarfiles): 4 | for aarfile in aarfiles: 5 | name = "aars__" + aarfile[aarfile.rindex("/") + 1:aarfile.rindex(".aar")] 6 | lib_deps.append(":" + name) 7 | android_prebuilt_aar( 8 | name = name, 9 | aar = aarfile, 10 | ) 11 | 12 | def create_jar_targets(jarfiles): 13 | for jarfile in jarfiles: 14 | name = "jars__" + jarfile[jarfile.rindex("/") + 1:jarfile.rindex(".jar")] 15 | lib_deps.append(":" + name) 16 | prebuilt_jar( 17 | name = name, 18 | binary_jar = jarfile, 19 | ) 20 | -------------------------------------------------------------------------------- /src/navigation/index.tsx: -------------------------------------------------------------------------------- 1 | import {NavigationContainer} from '@react-navigation/native'; 2 | import {createStackNavigator} from '@react-navigation/stack'; 3 | import React, {ReactElement} from 'react'; 4 | import {Details, Home} from '../screens'; 5 | import './GestureHandler'; 6 | 7 | export type StackParams = { 8 | Home: undefined; 9 | Details: {data: string} | undefined; 10 | }; 11 | 12 | const Stack = createStackNavigator(); 13 | 14 | export function Navigation(): ReactElement { 15 | return ( 16 | 17 | 18 | 19 | 20 | 21 | 22 | ); 23 | } 24 | -------------------------------------------------------------------------------- /src/screens/Home/index.tsx: -------------------------------------------------------------------------------- 1 | import {useNavigation} from '@react-navigation/native'; 2 | import {StackNavigationProp} from '@react-navigation/stack'; 3 | import React, {ReactElement} from 'react'; 4 | import {Button, Text} from 'react-native'; 5 | import {Container} from '../../components'; 6 | import {StackParams} from '../../navigation'; 7 | 8 | type NavigationProps = StackNavigationProp; 9 | 10 | export function Home(): ReactElement { 11 | const {navigate} = useNavigation(); 12 | return ( 13 | 14 | Home Screen 15 |