zio
/
bsky-app
2
0
Fork 0
Code Pull Requests Packages Releases Activity

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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
.eslintrc.js
View File

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

4
README.md
View File

@ -5,8 +5,7 @@ In-progress social app.
Uses: Uses:
- [React Native](https://reactnative.dev) - [React Native](https://reactnative.dev)
- (blocked) [React Native for Web](https://necolas.github.io/react-native-web/) - [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 Navigation](https://reactnative.dev/docs/navigation#react-navigation) - [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) [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) - (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)). - `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 iOS simulator: `yarn ios`
- To run the Android simulator: `yarn android` - To run the Android simulator: `yarn android`
- To run the Web app: `yarn web`
- Tips - Tips
- `npx react-native info` Checks what has been installed. - `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). - 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).

2
index.js → index.native.js
View File

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

19
package.json
View File

@ -5,6 +5,7 @@
"scripts": { "scripts": {
"android": "react-native run-android", "android": "react-native run-android",
"ios": "react-native run-ios", "ios": "react-native run-ios",
"web": "react-scripts start",
"start": "react-native start", "start": "react-native start",
"test": "jest", "test": "jest",
"lint": "eslint . --ext .js,.jsx,.ts,.tsx" "lint": "eslint . --ext .js,.jsx,.ts,.tsx"
@ -13,9 +14,11 @@
"@react-navigation/native": "^6.0.10", "@react-navigation/native": "^6.0.10",
"@react-navigation/native-stack": "^6.6.2", "@react-navigation/native-stack": "^6.6.2",
"react": "17.0.2", "react": "17.0.2",
"react-dom": "17.0.2",
"react-native": "0.68.2", "react-native": "0.68.2",
"react-native-safe-area-context": "^4.3.1", "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": { "devDependencies": {
"@babel/core": "^7.12.9", "@babel/core": "^7.12.9",
@ -27,9 +30,11 @@
"@typescript-eslint/eslint-plugin": "^5.17.0", "@typescript-eslint/eslint-plugin": "^5.17.0",
"@typescript-eslint/parser": "^5.17.0", "@typescript-eslint/parser": "^5.17.0",
"babel-jest": "^26.6.3", "babel-jest": "^26.6.3",
"babel-plugin-react-native-web": "^0.17.7",
"eslint": "^7.32.0", "eslint": "^7.32.0",
"jest": "^26.6.3", "jest": "^26.6.3",
"metro-react-native-babel-preset": "^0.67.0", "metro-react-native-babel-preset": "^0.67.0",
"react-scripts": "^5.0.1",
"react-test-renderer": "17.0.2", "react-test-renderer": "17.0.2",
"typescript": "^4.4.4" "typescript": "^4.4.4"
}, },
@ -49,5 +54,17 @@
"transformIgnorePatterns": [ "transformIgnorePatterns": [
"node_modules/(?!(jest-)?react-native|react-clone-referenced-element|@react-native-community|rollbar-react-native|@fortawesome|@react-native|@react-navigation)" "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>

73
src/App.tsx
View File

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

0
app.json → src/app.json
View File

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
View File

File diff suppressed because it is too large Load Diff