Add web target

zio/stable
Paul Frazee 2022-06-08 15:52:12 -05:00
parent efe65e70d7
commit 92ca49ab9a
9 changed files with 5377 additions and 221 deletions

View File

@ -2,12 +2,12 @@ module.exports = {
root: true,
extends: '@react-native-community',
parser: '@typescript-eslint/parser',
plugins: ['@typescript-eslint'],
// plugins: ['@typescript-eslint'],
overrides: [
{
files: ['*.ts', '*.tsx'],
rules: {
'@typescript-eslint/no-shadow': ['error'],
'@typescript-eslint/no-shadow': 'off',
'no-shadow': 'off',
'no-undef': 'off',
},

View File

@ -5,8 +5,7 @@ In-progress social app.
Uses:
- [React Native](https://reactnative.dev)
- (blocked) [React Native for Web](https://necolas.github.io/react-native-web/)
- Needs [0.18 preview release #2248](https://github.com/necolas/react-native-web/pull/2248) to merge
- [React Native for Web](https://necolas.github.io/react-native-web/)
- [React Navigation](https://reactnative.dev/docs/navigation#react-navigation)
- (todo) [MobX](https://mobx.js.org/README.html) and [MobX State Tree](https://mobx-state-tree.js.org/)
- (todo) [Async Storage](https://github.com/react-native-async-storage/async-storage)
@ -18,6 +17,7 @@ Uses:
- `cd ios ; pod install` Installs the React Navigation deps ([info](https://reactnative.dev/docs/navigation#installation-and-setup)).
- To run the iOS simulator: `yarn ios`
- To run the Android simulator: `yarn android`
- To run the Web app: `yarn web`
- Tips
- `npx react-native info` Checks what has been installed.
- Android instructions are a *little* inaccurate but not as much as you might think. I had to manually create a virtual device, then run `yarn android` twice (once to start the emulator and the second time to connect to it).

View File

@ -4,6 +4,6 @@
import {AppRegistry} from 'react-native';
import App from './src/App';
import {name as appName} from './app.json';
import {name as appName} from './src/app.json';
AppRegistry.registerComponent(appName, () => App);

View File

@ -5,6 +5,7 @@
"scripts": {
"android": "react-native run-android",
"ios": "react-native run-ios",
"web": "react-scripts start",
"start": "react-native start",
"test": "jest",
"lint": "eslint . --ext .js,.jsx,.ts,.tsx"
@ -13,9 +14,11 @@
"@react-navigation/native": "^6.0.10",
"@react-navigation/native-stack": "^6.6.2",
"react": "17.0.2",
"react-dom": "17.0.2",
"react-native": "0.68.2",
"react-native-safe-area-context": "^4.3.1",
"react-native-screens": "^3.13.1"
"react-native-screens": "^3.13.1",
"react-native-web": "^0.17.7"
},
"devDependencies": {
"@babel/core": "^7.12.9",
@ -27,9 +30,11 @@
"@typescript-eslint/eslint-plugin": "^5.17.0",
"@typescript-eslint/parser": "^5.17.0",
"babel-jest": "^26.6.3",
"babel-plugin-react-native-web": "^0.17.7",
"eslint": "^7.32.0",
"jest": "^26.6.3",
"metro-react-native-babel-preset": "^0.67.0",
"react-scripts": "^5.0.1",
"react-test-renderer": "17.0.2",
"typescript": "^4.4.4"
},
@ -49,5 +54,17 @@
"transformIgnorePatterns": [
"node_modules/(?!(jest-)?react-native|react-clone-referenced-element|@react-native-community|rollbar-react-native|@fortawesome|@react-native|@react-navigation)"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}
}

11
public/index.html 100644
View File

@ -0,0 +1,11 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
<title> WEBAPP </title>
</head>
<body>
<div id="root"></div>
</body>
</html>

View File

@ -20,15 +20,10 @@ import {
View,
} from 'react-native';
import {NavigationContainer} from '@react-navigation/native';
import { createNativeStackNavigator, NativeStackScreenProps } from '@react-navigation/native-stack';
import {
Colors,
DebugInstructions,
Header,
LearnMoreLinks,
ReloadInstructions,
} from 'react-native/Libraries/NewAppScreen';
createNativeStackNavigator,
NativeStackScreenProps,
} from '@react-navigation/native-stack';
type RootStackParamList = {
Home: undefined;
@ -39,48 +34,24 @@ const Stack = createNativeStackNavigator();
const Section: React.FC<{
title: string;
}> = ({children, title}) => {
const isDarkMode = useColorScheme() === 'dark';
return (
<View style={styles.sectionContainer}>
<Text
style={[
styles.sectionTitle,
{
color: isDarkMode ? Colors.white : Colors.black,
},
]}>
{title}
</Text>
<Text
style={[
styles.sectionDescription,
{
color: isDarkMode ? Colors.light : Colors.dark,
},
]}>
{children}
</Text>
<Text style={styles.sectionTitle}>{title}</Text>
<Text style={styles.sectionDescription}>{children}</Text>
</View>
);
};
const HomeScreen = ({ navigation }: NativeStackScreenProps<RootStackParamList, 'Home'>) => {
const HomeScreen = ({
navigation,
}: NativeStackScreenProps<RootStackParamList, 'Home'>) => {
const isDarkMode = useColorScheme() === 'dark';
const backgroundStyle = {
backgroundColor: isDarkMode ? Colors.darker : Colors.lighter,
};
return (
<SafeAreaView style={backgroundStyle}>
<SafeAreaView>
<StatusBar barStyle={isDarkMode ? 'light-content' : 'dark-content'} />
<ScrollView
contentInsetAdjustmentBehavior="automatic"
style={backgroundStyle}>
<Header />
<View
style={{
backgroundColor: isDarkMode ? Colors.black : Colors.white,
}}>
<ScrollView contentInsetAdjustmentBehavior="automatic">
<View>
<Section title="Step One">
Edit <Text style={styles.highlight}>App.tsx</Text> to change this
screen and then come back to see your edits.
@ -89,28 +60,22 @@ const HomeScreen = ({ navigation }: NativeStackScreenProps<RootStackParamList, '
onPress={() => navigation.navigate('Profile', {name: 'Jane'})}
/>
</Section>
<Section title="See Your Changes">
<ReloadInstructions />
</Section>
<Section title="Debug">
<DebugInstructions />
</Section>
<Section title="Learn More">
Read the docs to discover what to do next:
</Section>
<LearnMoreLinks />
</View>
</ScrollView>
</SafeAreaView>
)
}
);
};
const ProfileScreen = ({ navigation, route }: NativeStackScreenProps<RootStackParamList, 'Profile'>) => {
const ProfileScreen = ({
route,
}: NativeStackScreenProps<RootStackParamList, 'Profile'>) => {
return <Text>This is {route.params.name}'s profile</Text>;
};
const App = () => {
return (
<NavigationContainer>
<Stack.Navigator>

12
src/index.js 100644
View File

@ -0,0 +1,12 @@
/**
* @format
*/
import {AppRegistry} from 'react-native';
import App from './App';
AppRegistry.registerComponent('App', () => App);
AppRegistry.runApplication('App', {
rootTag: document.getElementById('root'),
});

5473
yarn.lock

File diff suppressed because it is too large Load Diff