Skip to content

Commit 0d8dfa8

Browse files
kelvinthhkelvinthh
authored
Merge pull request #2 from kelvinthh/dev
Added Netinfo check to detect connection lost and optimized UI/UX
2 parents cea910f + 260c9b6 commit 0d8dfa8

File tree

11 files changed

+194
-117
lines changed

11 files changed

+194
-117
lines changed

‎App.tsx

Lines changed: 20 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,22 +1,36 @@
11
import React, { useEffect } from "react";
2-
import { SafeAreaView } from "react-native";
3-
import { RecoilRoot, useSetRecoilState } from "recoil";
2+
import { SafeAreaView, StatusBar } from "react-native";
3+
import { RecoilRoot, useRecoilState, useSetRecoilState } from "recoil";
44
import Header from "./src/components/Header";
55
import imageState from "./src/state/imageState";
66
import Body from "./src/components/Body";
77
import suggestionState from "./src/state/suggestionState";
88
import { fetchImages, fetchSuggestion } from "./src/fetchData";
9-
import { Toast } from 'react-native-toast-message/lib/src/Toast';
9+
import { Toast } from "react-native-toast-message/lib/src/Toast";
10+
import internetState from "./src/state/internetState";
11+
import NetInfo from "@react-native-community/netinfo";
1012

1113
const AppContent = () => {
1214
const setImages = useSetRecoilState(imageState);
1315
const setSuggestion = useSetRecoilState(suggestionState);
16+
const [hasInternet, setHasInternet] = useRecoilState(internetState);
17+
18+
useEffect(() => {
19+
const unsubscribe = NetInfo.addEventListener((state) => {
20+
console.log(`Internet state: ${state.type} ${state.isInternetReachable}`);
21+
setHasInternet(state.isInternetReachable);
22+
});
23+
24+
return () => {
25+
unsubscribe();
26+
};
27+
}, []);
1428

1529
useEffect(() => {
1630
(async () => {
1731
const images = await fetchImages();
1832
const suggestion = await fetchSuggestion();
19-
33+
2034
setImages(images ?? []); // Provide an empty array as the default value
2135
setSuggestion(suggestion ?? ""); // Provide an empty string as the default value
2236
})();
@@ -26,6 +40,7 @@ const AppContent = () => {
2640
<SafeAreaView className="flex-1">
2741
<Header />
2842
<Body />
43+
<StatusBar barStyle={'dark-content'}/>
2944
</SafeAreaView>
3045
);
3146
};
@@ -34,7 +49,7 @@ const App = () => {
3449
return (
3550
<RecoilRoot>
3651
<AppContent />
37-
<Toast/>
52+
<Toast />
3853
</RecoilRoot>
3954
);
4055
};

‎README.md

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -36,10 +36,11 @@ API_GET_IMAGES= // getImages API endpoint, e.g. /api/getImages
3636
API_GET_SUGGESTIONS= // getChatGPTSuggestion API endpoint
3737
API_GENERATE_IMAGE= // generateImage API endpoint
3838
```
39+
5. Download **Expo Go** app from Google Play/App Store, run `npx expo start` in the terminal to start the development server, then scan the QR Code within Expo Go app or your phone's camera app.
3940

40-
5. Run the app on your preferred platform (iOS or Android) using `npx expo run:ios` or `npx expo run:android`.
41+
6. Or to build the app, run the app on your preferred platform (iOS or Android) using `npx expo run:ios` or `npx expo run:android`.
4142

42-
6. Enjoy generating and exploring images based on your text prompts! 🌈
43+
7. Enjoy generating and exploring images based on your text prompts! 🌈
4344

4445
## Additional Information ℹ️
4546

‎ios/Podfile.lock

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -361,6 +361,8 @@ PODS:
361361
- React-jsinspector (0.71.6)
362362
- React-logger (0.71.6):
363363
- glog
364+
- react-native-netinfo (9.3.9):
365+
- React-Core
364366
- React-perflogger (0.71.6)
365367
- React-RCTActionSheet (0.71.6):
366368
- React-Core/RCTActionSheetHeaders (= 0.71.6)
@@ -485,6 +487,7 @@ DEPENDENCIES:
485487
- React-jsiexecutor (from `../node_modules/react-native/ReactCommon/jsiexecutor`)
486488
- React-jsinspector (from `../node_modules/react-native/ReactCommon/jsinspector`)
487489
- React-logger (from `../node_modules/react-native/ReactCommon/logger`)
490+
- "react-native-netinfo (from `../node_modules/@react-native-community/netinfo`)"
488491
- React-perflogger (from `../node_modules/react-native/ReactCommon/reactperflogger`)
489492
- React-RCTActionSheet (from `../node_modules/react-native/Libraries/ActionSheetIOS`)
490493
- React-RCTAnimation (from `../node_modules/react-native/Libraries/NativeAnimation`)
@@ -576,6 +579,8 @@ EXTERNAL SOURCES:
576579
:path: "../node_modules/react-native/ReactCommon/jsinspector"
577580
React-logger:
578581
:path: "../node_modules/react-native/ReactCommon/logger"
582+
react-native-netinfo:
583+
:path: "../node_modules/@react-native-community/netinfo"
579584
React-perflogger:
580585
:path: "../node_modules/react-native/ReactCommon/reactperflogger"
581586
React-RCTActionSheet:
@@ -643,6 +648,7 @@ SPEC CHECKSUMS:
643648
React-jsiexecutor: 7894956638ff3e00819dd3f9f6f4a84da38f2409
644649
React-jsinspector: d5ce2ef3eb8fd30c28389d0bc577918c70821bd6
645650
React-logger: 9332c3e7b4ef007a0211c0a9868253aac3e1da82
651+
react-native-netinfo: 22c082970cbd99071a4e5aa7a612ac20d66b08f0
646652
React-perflogger: 43392072a5b867a504e2b4857606f8fc5a403d7f
647653
React-RCTActionSheet: c7b67c125bebeda9fb19fc7b200d85cb9d6899c4
648654
React-RCTAnimation: c2de79906f607986633a7114bee44854e4c7e2f5
@@ -660,4 +666,4 @@ SPEC CHECKSUMS:
660666

661667
PODFILE CHECKSUM: ebe432ad56513222ebfc09b56e491909e15bf652
662668

663-
COCOAPODS: 1.12.0
669+
COCOAPODS: 1.12.1

‎ios/imggenrn/Info.plist

Lines changed: 79 additions & 79 deletions
Original file line numberDiff line numberDiff line change
@@ -1,82 +1,82 @@
11
<?xml version="1.0" encoding="UTF-8"?>
22
<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
33
<plist version="1.0">
4-
<dict>
5-
<key>CFBundleDevelopmentRegion</key>
6-
<string>$(DEVELOPMENT_LANGUAGE)</string>
7-
<key>CFBundleDisplayName</key>
8-
<string>AI Image Gen</string>
9-
<key>CFBundleExecutable</key>
10-
<string>$(EXECUTABLE_NAME)</string>
11-
<key>CFBundleIdentifier</key>
12-
<string>$(PRODUCT_BUNDLE_IDENTIFIER)</string>
13-
<key>CFBundleInfoDictionaryVersion</key>
14-
<string>6.0</string>
15-
<key>CFBundleName</key>
16-
<string>$(PRODUCT_NAME)</string>
17-
<key>CFBundlePackageType</key>
18-
<string>$(PRODUCT_BUNDLE_PACKAGE_TYPE)</string>
19-
<key>CFBundleShortVersionString</key>
20-
<string>1.0.0</string>
21-
<key>CFBundleSignature</key>
22-
<string>????</string>
23-
<key>CFBundleURLTypes</key>
24-
<array>
25-
<dict>
26-
<key>CFBundleURLSchemes</key>
27-
<array>
28-
<string>com.hhtam.imggenrn</string>
29-
</array>
30-
</dict>
31-
<dict>
32-
<key>CFBundleURLSchemes</key>
33-
<array>
34-
<string>exp+img-gen-rn</string>
35-
</array>
36-
</dict>
37-
</array>
38-
<key>CFBundleVersion</key>
39-
<string>1</string>
40-
<key>LSRequiresIPhoneOS</key>
41-
<true/>
42-
<key>NSAppTransportSecurity</key>
43-
<dict>
44-
<key>NSAllowsArbitraryLoads</key>
45-
<true/>
46-
<key>NSExceptionDomains</key>
47-
<dict>
48-
<key>localhost</key>
49-
<dict>
50-
<key>NSExceptionAllowsInsecureHTTPLoads</key>
51-
<true/>
52-
</dict>
53-
</dict>
54-
</dict>
55-
<key>UILaunchStoryboardName</key>
56-
<string>SplashScreen</string>
57-
<key>UIRequiredDeviceCapabilities</key>
58-
<array>
59-
<string>armv7</string>
60-
</array>
61-
<key>UIRequiresFullScreen</key>
62-
<false/>
63-
<key>UIStatusBarStyle</key>
64-
<string>UIStatusBarStyleDefault</string>
65-
<key>UISupportedInterfaceOrientations</key>
66-
<array>
67-
<string>UIInterfaceOrientationPortrait</string>
68-
<string>UIInterfaceOrientationPortraitUpsideDown</string>
69-
</array>
70-
<key>UISupportedInterfaceOrientations~ipad</key>
71-
<array>
72-
<string>UIInterfaceOrientationPortrait</string>
73-
<string>UIInterfaceOrientationPortraitUpsideDown</string>
74-
<string>UIInterfaceOrientationLandscapeLeft</string>
75-
<string>UIInterfaceOrientationLandscapeRight</string>
76-
</array>
77-
<key>UIUserInterfaceStyle</key>
78-
<string>Light</string>
79-
<key>UIViewControllerBasedStatusBarAppearance</key>
80-
<false/>
81-
</dict>
82-
</plist>
4+
<dict>
5+
<key>CFBundleDevelopmentRegion</key>
6+
<string>$(DEVELOPMENT_LANGUAGE)</string>
7+
<key>CFBundleDisplayName</key>
8+
<string>AI Image Gen</string>
9+
<key>CFBundleExecutable</key>
10+
<string>$(EXECUTABLE_NAME)</string>
11+
<key>CFBundleIdentifier</key>
12+
<string>$(PRODUCT_BUNDLE_IDENTIFIER)</string>
13+
<key>CFBundleInfoDictionaryVersion</key>
14+
<string>6.0</string>
15+
<key>CFBundleName</key>
16+
<string>$(PRODUCT_NAME)</string>
17+
<key>CFBundlePackageType</key>
18+
<string>$(PRODUCT_BUNDLE_PACKAGE_TYPE)</string>
19+
<key>CFBundleShortVersionString</key>
20+
<string>1.0.0</string>
21+
<key>CFBundleSignature</key>
22+
<string>????</string>
23+
<key>CFBundleURLTypes</key>
24+
<array>
25+
<dict>
26+
<key>CFBundleURLSchemes</key>
27+
<array>
28+
<string>com.hhtam.imggenrn</string>
29+
</array>
30+
</dict>
31+
<dict>
32+
<key>CFBundleURLSchemes</key>
33+
<array>
34+
<string>exp+img-gen-rn</string>
35+
</array>
36+
</dict>
37+
</array>
38+
<key>CFBundleVersion</key>
39+
<string>1</string>
40+
<key>LSRequiresIPhoneOS</key>
41+
<true/>
42+
<key>NSAppTransportSecurity</key>
43+
<dict>
44+
<key>NSAllowsArbitraryLoads</key>
45+
<true/>
46+
<key>NSExceptionDomains</key>
47+
<dict>
48+
<key>localhost</key>
49+
<dict>
50+
<key>NSExceptionAllowsInsecureHTTPLoads</key>
51+
<true/>
52+
</dict>
53+
</dict>
54+
</dict>
55+
<key>UILaunchStoryboardName</key>
56+
<string>SplashScreen</string>
57+
<key>UIRequiredDeviceCapabilities</key>
58+
<array>
59+
<string>armv7</string>
60+
</array>
61+
<key>UIRequiresFullScreen</key>
62+
<false/>
63+
<key>UIStatusBarStyle</key>
64+
<string>UIStatusBarStyleDefault</string>
65+
<key>UISupportedInterfaceOrientations</key>
66+
<array>
67+
<string>UIInterfaceOrientationPortrait</string>
68+
<string>UIInterfaceOrientationPortraitUpsideDown</string>
69+
</array>
70+
<key>UISupportedInterfaceOrientations~ipad</key>
71+
<array>
72+
<string>UIInterfaceOrientationPortrait</string>
73+
<string>UIInterfaceOrientationPortraitUpsideDown</string>
74+
<string>UIInterfaceOrientationLandscapeLeft</string>
75+
<string>UIInterfaceOrientationLandscapeRight</string>
76+
</array>
77+
<key>UIUserInterfaceStyle</key>
78+
<string>Light</string>
79+
<key>UIViewControllerBasedStatusBarAppearance</key>
80+
<false/>
81+
</dict>
82+
</plist>

‎package-lock.json

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

‎package.json

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -8,18 +8,19 @@
88
"web": "expo start --web"
99
},
1010
"dependencies": {
11+
"@react-native-community/netinfo": "^9.3.9",
1112
"axios": "^1.3.5",
1213
"expo": "~48.0.10",
14+
"expo-dev-client": "~2.1.6",
15+
"expo-splash-screen": "~0.18.1",
1316
"expo-status-bar": "~1.4.4",
1417
"nativewind": "^2.0.11",
1518
"react": "18.2.0",
1619
"react-native": "0.71.6",
1720
"react-native-dotenv": "^3.4.8",
1821
"react-native-toast-message": "^2.1.6",
1922
"recoil": "^0.7.7",
20-
"tailwindcss": "^3.3.1",
21-
"expo-dev-client": "~2.1.6",
22-
"expo-splash-screen": "~0.18.1"
23+
"tailwindcss": "^3.3.1"
2324
},
2425
"devDependencies": {
2526
"@babel/core": "^7.20.0",

0 commit comments

Comments
 (0)