Add web target
Paul Frazee
parent
efe65e70d7
commit
92ca49ab9a
|
|
@ -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',
|
||||
},
|
||||
|
|
|
|||
|
|
@ -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).
|
||||
|
|
@ -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);
|
||||
19
package.json
19
package.json
|
|
@ -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"
|
||||
]
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
67
src/App.tsx
67
src/App.tsx
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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'),
|
||||
});
|
||||
Loading…
Reference in New Issue