Skip to content
This repository was archived by the owner on Dec 3, 2024. It is now read-only.

Commit d9f78ec

Browse files
brentvatnebrentvatne
committed
Migrate to monorepo, get example running
1 parent b844914 commit d9f78ec

15 files changed

+6958
-5742
lines changed

‎example/App.tsx

Lines changed: 66 additions & 61 deletions
Original file line numberDiff line numberDiff line change
@@ -1,65 +1,68 @@
1-
import React, { useState } from 'react';
2-
import { View, Text, Platform, StyleSheet } from 'react-native';
3-
import { NavigationContainer, useNavigation, RouteProp } from '@react-navigation/native';
4-
import { createStackNavigator } from '@react-navigation/stack';
5-
import { RectButton, BorderlessButton } from 'react-native-gesture-handler';
6-
import SearchLayout from 'react-navigation-addon-search-layout';
7-
import { Ionicons } from '@expo/vector-icons';
1+
import React, { useState } from "react";
2+
import { View, Text, Platform, StyleSheet } from "react-native";
3+
import {
4+
NavigationContainer,
5+
useNavigation,
6+
RouteProp,
7+
} from "@react-navigation/native";
8+
import { createStackNavigator } from "@react-navigation/stack";
9+
import { RectButton, BorderlessButton } from "react-native-gesture-handler";
10+
import SearchLayout from "react-navigation-addon-search-layout";
11+
import { Ionicons } from "@expo/vector-icons";
12+
import { StatusBar } from "expo-status-bar";
813

914
type RootStackParamList = {
1015
Home: undefined;
1116
Search: undefined;
1217
Result: { text: string };
1318
};
1419

15-
type ResultScreenRouteProp = RouteProp<RootStackParamList, 'Result'>;
20+
type ResultScreenRouteProp = RouteProp<RootStackParamList, "Result">;
1621

1722
function HomeScreen() {
1823
return (
19-
<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
24+
<View style={{ flex: 1, alignItems: "center", justifyContent: "center" }}>
2025
<Text>Hello there!!!</Text>
2126
</View>
2227
);
2328
}
2429

25-
function SearchScreen () {
26-
27-
const [ searchText, setSearchText ] = useState('');
30+
function SearchScreen() {
31+
const [searchText, setSearchText] = useState("");
2832
const navigation = useNavigation();
2933

30-
const _handleQueryChange = ( searchText: string ) => {
34+
const _handleQueryChange = (searchText: string) => {
3135
setSearchText(searchText);
3236
};
3337

3438
const _executeSearch = () => {
35-
alert('do search!');
39+
alert("do search!");
3640
};
3741

3842
return (
39-
<SearchLayout
40-
onChangeQuery={_handleQueryChange}
41-
onSubmit={_executeSearch}>
43+
<SearchLayout onChangeQuery={_handleQueryChange} onSubmit={_executeSearch}>
4244
{searchText ? (
4345
<RectButton
4446
style={{
4547
borderBottomWidth: StyleSheet.hairlineWidth,
46-
borderBottomColor: '#eee',
48+
borderBottomColor: "#eee",
4749
paddingVertical: 20,
4850
paddingHorizontal: 15,
4951
}}
5052
onPress={() =>
51-
navigation.navigate('Result', {
53+
navigation.navigate("Result", {
5254
text: searchText,
5355
})
54-
}>
56+
}
57+
>
5558
<Text style={{ fontSize: 14 }}>{searchText}!</Text>
5659
</RectButton>
5760
) : null}
5861
</SearchLayout>
5962
);
6063
}
6164

62-
function ResultScreen (props: ResultScreenRouteProp) {
65+
function ResultScreen(props: ResultScreenRouteProp) {
6366
return (
6467
<View style={styles.container}>
6568
<Text>{props.params.text} result!</Text>
@@ -71,50 +74,52 @@ const Stack = createStackNavigator();
7174

7275
export default function App() {
7376
return (
74-
<NavigationContainer>
75-
<Stack.Navigator>
76-
<Stack.Screen
77-
name="Home"
78-
component={HomeScreen}
79-
options={{
80-
headerRight: (props) => {
81-
const navigation = useNavigation();
82-
return (
83-
<BorderlessButton
84-
onPress={() => navigation.navigate('Search')}
85-
style={{ marginRight: 15 }}>
86-
<Ionicons
87-
name="md-search"
88-
size={Platform.OS === 'ios' ? 22 : 25}
89-
color={SearchLayout.DefaultTintColor}
90-
/>
91-
</BorderlessButton>
92-
)},
93-
}}
94-
/>
95-
<Stack.Screen
96-
name="Search"
97-
component={SearchScreen}
98-
options={{
99-
headerShown: false,
100-
gestureEnabled: false,
101-
animationEnabled:false
102-
}}
103-
/>
77+
<>
78+
<NavigationContainer>
79+
<Stack.Navigator>
80+
<Stack.Screen
81+
name="Home"
82+
component={HomeScreen}
83+
options={{
84+
headerRight: (props) => {
85+
const navigation = useNavigation();
86+
return (
87+
<BorderlessButton
88+
onPress={() => navigation.navigate("Search")}
89+
style={{ marginRight: 15 }}
90+
>
91+
<Ionicons
92+
name="md-search"
93+
size={Platform.OS === "ios" ? 22 : 25}
94+
color={SearchLayout.DefaultTintColor}
95+
/>
96+
</BorderlessButton>
97+
);
98+
},
99+
}}
100+
/>
101+
<Stack.Screen
102+
name="Search"
103+
component={SearchScreen}
104+
options={{
105+
headerShown: false,
106+
gestureEnabled: false,
107+
animationEnabled: false,
108+
}}
109+
/>
104110

105-
<Stack.Screen
106-
name="Result"
107-
component={ResultScreen}
108-
/>
109-
</Stack.Navigator>
110-
</NavigationContainer>
111+
<Stack.Screen name="Result" component={ResultScreen} />
112+
</Stack.Navigator>
113+
</NavigationContainer>
114+
<StatusBar style="dark" />
115+
</>
111116
);
112117
}
113118

114119
const styles = StyleSheet.create({
115120
container: {
116121
flex: 1,
117-
justifyContent: 'center',
118-
alignItems: 'center'
119-
}
120-
});
122+
justifyContent: "center",
123+
alignItems: "center",
124+
},
125+
});

‎example/__generated__/AppEntry.js

Lines changed: 13 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎example/metro.config.js

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
const { createMetroConfiguration } = require('expo-yarn-workspaces');
2+
3+
const defaultConfig = createMetroConfiguration(__dirname);
4+
5+
module.exports = {
6+
...defaultConfig,
7+
server: {
8+
...defaultConfig.server,
9+
enhanceMiddleware: (middleware) => {
10+
return (req, res, next) => {
11+
// When an asset is imported outside the project root, it has wrong path on Android
12+
// So we fix the path to correct one
13+
if (/\/packages\/.+\.png\?.+$/.test(req.url)) {
14+
req.url = `/assets/../${req.url}`;
15+
}
16+
17+
return middleware(req, res, next);
18+
};
19+
},
20+
},
21+
};

‎example/package.json

Lines changed: 14 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,30 @@
11
{
2-
"main": "node_modules/expo/AppEntry.js",
2+
"name": "example",
3+
"version": "0.0.0",
4+
"main": "__generated__/AppEntry.js",
35
"scripts": {
46
"start": "expo start",
57
"android": "expo start --android",
68
"ios": "expo start --ios",
79
"web": "expo start --web",
8-
"eject": "expo eject"
10+
"eject": "expo eject",
11+
"postinstall": "expo-yarn-workspaces postinstall"
912
},
1013
"dependencies": {
14+
"@react-native-community/masked-view": "0.1.10",
15+
"@react-navigation/native": "^5.9.3",
16+
"@react-navigation/stack": "^5.14.3",
1117
"expo": "~40.0.0",
1218
"expo-status-bar": "~1.0.3",
1319
"react": "16.13.1",
1420
"react-dom": "16.13.1",
1521
"react-native": "https://github.com/expo/react-native/archive/sdk-40.0.1.tar.gz",
16-
"react-native-web": "~0.13.12"
22+
"react-native-gesture-handler": "~1.8.0",
23+
"react-native-reanimated": "~1.13.0",
24+
"react-native-safe-area-context": "3.1.9",
25+
"react-native-screens": "~2.15.0",
26+
"react-native-web": "~0.13.12",
27+
"react-navigation-addon-search-layout": "*"
1728
},
1829
"devDependencies": {
1930
"@babel/core": "~7.9.0",

0 commit comments

Comments
 (0)