Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: add ability to set app icons #1022

Merged
merged 1 commit into from
Jul 28, 2022
Merged

feat: add ability to set app icons #1022

merged 1 commit into from
Jul 28, 2022

Conversation

tido64
Copy link
Member

@tido64 tido64 commented Jul 25, 2022

Description

Adds ability to set app icons.

iOS/macOS has the ability to set alternate icons. I've made affordances for it here, but will be implementing the actual support separately: #1023

Resolves #242.
Resolves #990.

Platforms affected

  • Android
  • iOS
  • macOS
  • Windows

Test plan

diff --git a/example/app.json b/example/app.json
index ef69fa7..3fdf9e6 100644
--- a/example/app.json
+++ b/example/app.json
@@ -13,6 +13,25 @@
       "presentationStyle": "modal"
     }
   ],
+  "android": {
+    "icons": "android/res-launcher"
+  },
+  "ios": {
+    "icons": {
+      "primaryIcon": {
+        "filename": "WindowsPhone.png",
+        "prerendered": true
+      }
+    }
+  },
+  "macos": {
+    "icons": {
+      "primaryIcon": {
+        "filename": "WindowsPhone.png",
+        "prerendered": true
+      }
+    }
+  },
   "resources": {
     "android": [
       "dist/res",

Screenshots

Android iOS macOS
Screenshot_1658762014 Simulator Screen Shot - iPhone 13 - 2022-07-25 at 17 15 43 image

@github-actions github-actions bot added platform: Android This affects Android platform: iOS This affects iOS platform: macOS This affects macOS labels Jul 25, 2022
@tido64 tido64 force-pushed the tido/app-icons branch 2 times, most recently from 75cfce9 to 5d51aff Compare July 25, 2022 15:53
@tido64 tido64 added this to the Single-app Mode milestone Jul 25, 2022
@tido64 tido64 marked this pull request as ready for review July 25, 2022 16:56
@tido64 tido64 requested review from kelset and afoxman July 25, 2022 16:56
@kelset
Copy link
Contributor

kelset commented Jul 27, 2022

tried to test it locally, and Android and iOS work fine - for some reason macos doesn't seem to work though (check icon in dock):

Screenshot 2022-07-27 at 15 57 16

I followed the repro steps + the ones from here for testing macos so I'm not sure if I'm doing something wrong?

@tido64
Copy link
Member Author

tido64 commented Jul 27, 2022

for some reason macos doesn't seem to work though (check icon in dock):

That is odd. I tried from a clean branch and got the icon:

image

Can you try cleaning out DerivedData (⇧⌘K) and rebuild?

@tido64
Copy link
Member Author

tido64 commented Jul 27, 2022

Also, can you check if the assets catalog is correctly populated:

image

Copy link
Contributor

@kelset kelset left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

after a bunch of local testing we figured out it was something with my local caching... it works fine now! Let's :shipit:

@tido64 tido64 merged commit f9ea902 into trunk Jul 28, 2022
@tido64 tido64 deleted the tido/app-icons branch July 28, 2022 13:01
ghost pushed a commit to microsoft/fluentui-react-native that referenced this pull request Aug 7, 2022
### Platforms Impacted
- [x] iOS
- [x] macOS
- [ ] win32 (Office)
- [ ] windows
- [x] android

### Description of changes

Let's bump us to the latest release of react-native-test-app, which gets us a lot of goodies :) 

1) Turbomodule support. microsoft/react-native-test-app#843
2) App icon support. microsoft/react-native-test-app#1022
3) iPad Slide Over window / multi-tasking support. microsoft/react-native-test-app#1032

We also got a designer to make us icons =). I chose the blue set over the pink set.


### Verification

I didn't test building with turbo modules, we don't quite support this yet anyway. 

Verified that SlideOver windows work on iOS. Some additional JS fixes are needed to make layout act properly though.

Android icon:
![Screen Shot 2022-08-03 at 11 54 53 AM](https://user-images.githubusercontent.com/6722175/182688353-ecc6d603-88de-42f6-8c4e-8141aecd0dc3.png)

macOS icon (dock):
![image](https://user-images.githubusercontent.com/6722175/182688427-30fcd29a-2fe4-48b8-a720-96202a2e36e2.png)


iOS icon
![Screen Shot 2022-08-03 at 10 45 12 AM](https://user-images.githubusercontent.com/6722175/182688298-3925cd20-eb9b-4d64-adb6-7dd74662b84d.png)


### Pull request checklist

This PR has considered (when applicable):
- [ ] Automated Tests
- [ ] Documentation and examples
- [ ] Keyboard Accessibility
- [ ] Voiceover
- [ ] Internationalization and Right-to-left Layouts
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
platform: Android This affects Android platform: iOS This affects iOS platform: macOS This affects macOS
Projects
None yet
2 participants