Skip to content

Commit 4f359c4

Browse files
aryaemami59aryaemami59
committed
chore: update Expo example app
1 parent 94c517e commit 4f359c4

40 files changed

+12540
-13848
lines changed

‎examples/publish-ci/expo/.eslintrc.json

Lines changed: 0 additions & 41 deletions
This file was deleted.

‎examples/publish-ci/expo/.gitignore

Lines changed: 21 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2,12 +2,13 @@
22

33
# dependencies
44
node_modules/
5-
.yarn/
65

76
# Expo
87
.expo/
98
dist/
109
web-build/
10+
expo-env.d.ts
11+
build/
1112

1213
# Native
1314
*.orig.*
@@ -16,8 +17,8 @@ web-build/
1617
*.p12
1718
*.key
1819
*.mobileprovision
19-
android
20-
ios
20+
android/
21+
ios/
2122

2223
# Metro
2324
.metro-health-check*
@@ -36,3 +37,20 @@ yarn-error.*
3637

3738
# typescript
3839
*.tsbuildinfo
40+
41+
# testing
42+
/coverage
43+
44+
# Yarn
45+
.yarn/*
46+
!.yarn/patches
47+
!.yarn/plugins
48+
!.yarn/releases
49+
!.yarn/sdks
50+
!.yarn/versions
51+
52+
# IDE
53+
.vscode
54+
55+
.yalc/
56+
yalc.lock

‎examples/publish-ci/expo/.prettierrc.json

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
11
{
22
"arrowParens": "avoid",
3-
"bracketSameLine": true,
4-
"singleQuote": true,
5-
"trailingComma": "all"
3+
"semi": false,
4+
"singleQuote": true
65
}

‎examples/publish-ci/expo/App.tsx

Lines changed: 10 additions & 83 deletions
Original file line numberDiff line numberDiff line change
@@ -1,83 +1,10 @@
1-
import type { FC } from 'react';
2-
import {
3-
SafeAreaView,
4-
ScrollView,
5-
StatusBar,
6-
StyleSheet,
7-
Text,
8-
View,
9-
useColorScheme,
10-
} from 'react-native';
11-
import { Provider } from 'react-redux';
12-
import { store } from './src/app/store';
13-
import { Counter } from './src/features/counter/Counter';
14-
15-
import {
16-
DebugInstructions,
17-
HermesBadge,
18-
LearnMoreLinks,
19-
ReloadInstructions,
20-
} from 'react-native/Libraries/NewAppScreen';
21-
import { Header } from './src/components/Header';
22-
import { LearnReduxLinks } from './src/components/LearnReduxLinks';
23-
import { Section } from './src/components/Section';
24-
import { TypedColors } from './src/constants/TypedColors';
25-
26-
export const App: FC = () => {
27-
const isDarkMode = useColorScheme() === 'dark';
28-
29-
const backgroundStyle = {
30-
backgroundColor: isDarkMode ? TypedColors.darker : TypedColors.lighter,
31-
};
32-
33-
return (
34-
<Provider store={store}>
35-
<SafeAreaView style={backgroundStyle}>
36-
<StatusBar
37-
barStyle={isDarkMode ? 'light-content' : 'dark-content'}
38-
backgroundColor={backgroundStyle.backgroundColor}
39-
/>
40-
<ScrollView
41-
contentInsetAdjustmentBehavior="automatic"
42-
style={backgroundStyle}>
43-
<Header />
44-
<HermesBadge />
45-
<View
46-
style={{
47-
backgroundColor: isDarkMode
48-
? TypedColors.black
49-
: TypedColors.white,
50-
}}>
51-
<Counter />
52-
<Section title="Step One">
53-
Edit <Text style={styles.highlight}>App.tsx</Text> to change this
54-
screen and then come back to see your edits.
55-
</Section>
56-
<Section title="See Your Changes">
57-
<ReloadInstructions />
58-
</Section>
59-
<Section title="Debug">
60-
<DebugInstructions />
61-
</Section>
62-
<Section title="Learn More Redux">
63-
Discover what to do next with Redux:
64-
</Section>
65-
<LearnReduxLinks />
66-
<Section title="Learn More React Native">
67-
Read the docs to discover what to do next:
68-
</Section>
69-
<LearnMoreLinks />
70-
</View>
71-
</ScrollView>
72-
</SafeAreaView>
73-
</Provider>
74-
);
75-
};
76-
77-
const styles = StyleSheet.create({
78-
highlight: {
79-
fontWeight: '700',
80-
},
81-
});
82-
83-
export default App;
1+
import type { JSX } from 'react'
2+
import { Provider } from 'react-redux'
3+
import { store } from './src/app/store'
4+
import { Main } from './src/Main'
5+
6+
export const App = (): JSX.Element => (
7+
<Provider store={store}>
8+
<Main />
9+
</Provider>
10+
)

‎examples/publish-ci/expo/README.md

Lines changed: 74 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,74 @@
1+
# Expo Template Redux TypeScript
2+
3+
The official Redux+TS template for Expo.
4+
5+
## :arrow_forward: Usage
6+
7+
```sh
8+
npx create-expo my-app --template expo-template-redux-typescript
9+
```
10+
11+
# Getting Started
12+
13+
> **Note**: Make sure you have completed the [React Native - Environment Setup](https://reactnative.dev/docs/environment-setup) instructions till "Creating a new application" step, before proceeding.
14+
15+
## Step 1: Start the Metro Server
16+
17+
First, you will need to start **Metro**, the JavaScript _bundler_ that ships _with_ React Native.
18+
19+
To start Metro, run the following command from the _root_ of your React Native project:
20+
21+
```bash
22+
# using npm
23+
npm start
24+
```
25+
26+
```bash
27+
# OR using Yarn
28+
yarn start
29+
```
30+
31+
## Step 2: Start your Application
32+
33+
Let Metro Bundler run in its _own_ terminal. Open a _new_ terminal from the _root_ of your React Native project. Run the following command to start your _Android_ or _iOS_ app:
34+
35+
### For Android
36+
37+
```bash
38+
# using npm
39+
npm run android
40+
```
41+
42+
```bash
43+
# OR using Yarn
44+
yarn android
45+
```
46+
47+
### For iOS
48+
49+
```bash
50+
# using npm
51+
npm run ios
52+
```
53+
54+
```bash
55+
# OR using Yarn
56+
yarn ios
57+
```
58+
59+
If everything is set up _correctly_, you should see your new app running in your _Android Emulator_ or _iOS Simulator_ shortly provided you have set up your emulator/simulator correctly.
60+
61+
This is one way to run your app — you can also run it directly from within Android Studio and Xcode respectively.
62+
63+
## Step 3: Modifying your App
64+
65+
Now that you have successfully run the app, let's modify it.
66+
67+
1. Open `App.tsx` in your text editor of choice and edit some lines.
68+
2. For **Android**: Press the <kbd>R</kbd> key twice or select **"Reload"** from the **Developer Menu** (<kbd>Ctrl</kbd> + <kbd>M</kbd> (on Window and Linux) or <kbd>Cmd ⌘</kbd> + <kbd>M</kbd> (on macOS)) to see your changes!
69+
70+
For **iOS**: Hit <kbd>Cmd ⌘</kbd> + <kbd>R</kbd> in your iOS Simulator to reload the app and see your changes!
71+
72+
## Congratulations! :tada:
73+
74+
You've successfully run and modified your Expo App. :partying_face:

‎examples/publish-ci/expo/__tests__/App.test.tsx

Lines changed: 0 additions & 9 deletions
This file was deleted.

‎examples/publish-ci/expo/__tests__/counterSlice.test.ts

Lines changed: 0 additions & 37 deletions
This file was deleted.

‎examples/publish-ci/expo/app.json

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -6,12 +6,12 @@
66
"orientation": "portrait",
77
"icon": "./assets/icon.png",
88
"userInterfaceStyle": "light",
9+
"newArchEnabled": true,
910
"splash": {
10-
"image": "./assets/splash.png",
11+
"image": "./assets/splash-icon.png",
1112
"resizeMode": "contain",
1213
"backgroundColor": "#ffffff"
1314
},
14-
"assetBundlePatterns": ["**/*"],
1515
"ios": {
1616
"supportsTablet": true
1717
},

‎examples/publish-ci/expo/assets/splash-icon.png

17.1 KB
Loading

‎examples/publish-ci/expo/assets/splash.png

-46.2 KB
Binary file not shown.

‎examples/publish-ci/expo/babel.config.js

Lines changed: 19 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,20 @@
1-
/** @type {import('@babel/core').ConfigFunction} */
2-
module.exports = api => {
3-
api.cache.forever();
1+
/** @import { ConfigFunction } from "@babel/core" */
2+
/** @import { BabelPresetExpoOptions } from "babel-preset-expo" */
3+
4+
/**
5+
* @satisfies {ConfigFunction}
6+
*/
7+
const config = api => {
8+
api.cache.forever()
9+
410
return {
5-
presets: ['babel-preset-expo'],
6-
};
7-
};
11+
presets: [
12+
/**
13+
* @satisfies {['babel-preset-expo', BabelPresetExpoOptions?]}
14+
*/
15+
(['babel-preset-expo']),
16+
],
17+
}
18+
}
19+
20+
module.exports = config

0 commit comments

Comments
 (0)