mirror/iNaturalistReactNative
1
0
Fork 0
mirror of https://github.com/inaturalist/iNaturalistReactNative.git synced 2025-12-23 22:18:36 -05:00
Code Issues Packages Projects Releases Wiki Activity

Revert to using react-native-asset to link assets

Browse Source
This commit is contained in:
Ken-ichi Ueda
2023-02-09 20:41:58 -08:00
parent f76e02e4fb
commit 0e043ad3c8
8 changed files with 35 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files

40
README.md
View File

@@ -125,28 +125,28 @@ We're using Nativewind, a styling system for React Native based on Tailwind CSS.
## Creating custom icons
1. Download custom icon from Figma as an SVG file.
2. Add new icon to the iNaturalist icon set in Fontastic. Select all relevant iNaturalist icons and download the zip of icons.
3. Create a glyph file from the CSS file you just downloaded, using the following command (be sure to replace /path/to/styles with your path):
We manage our custom font with Fontastic, so these steps can probably only be done by staff.
```
npx generate-icon /path/to/styles.css --componentName=INatIcon --fontFamily=inaturalisticons > src/components/INatIcon.js
```
1. `npm install -f react-native-asset`. You'll need this to link assets.
1. Get the new icon as an SVG file.
1. Add new icon to the iNaturalist icon set in Fontastic. Select all iNaturalist icons and download the zip of icons.
1. Create a glyph file from the CSS file you just downloaded, using the following command (be sure to replace /path/to/styles with your path):
```
npx generate-icon /path/to/styles.css --componentName=INatIcon --fontFamily=inaturalisticons > src/components/INatIcon.js
```
1. When adding new icons, go to `src/components/INatIcon.js` and make two manual changes. First, edit the line `const iconSet = createIconSet( glyphMap, "inaturalisticons", "INatIcon.ttf" );` to `inaturalisticons.ttf` to match the name of the `.ttf` file you downloaded. There's a discrepency here because the `generate-icon` script makes an assumption that the name of the .ttf file is the same as the name of the component. Components need to start with a capital letter, and `inaturalisticons.tff` is likely not a name we want to change, since we're using it on the web too. We'll probably want to write our own `generate-icon` script to do this automatically. Second, add the following to your exports to make sure a user can see all custom iNat icons in the UI library:
```
export {
glyphMap
};
```
1. Add `inaturalisticons.ttf`, to `assets/fonts`.
1. Clean build folders for iOS/Android with `rm -rf ios/build && rm -rf android/app/build`.
1. Run `npx react-native-asset` to link the new assets.
1. Add your icon somewhere in the app using `<INatIcon name="compass-rose" />` where name is set to the name of your new custom icon.
1. Build the app on either platform, and you should see your custom icons.
4. When adding new icons, go to `src/components/INatIcon.js` and make two manual changes. First, edit the line `const iconSet = createIconSet( glyphMap, "inaturalisticons", "INatIcon.ttf" );` to `inaturalisticons.ttf` to match the name of the .ttf file you downloaded. There's a discrepency here because the `generate-icon` script makes an assumption that the name of the .ttf file is the same as the name of the component. Components need to start with a capital letter, and `inaturalisticons.tff` is likely not a name we want to change, since we're using it on the web too. We'll probably want to write our own `generate-icon` script to do this automatically. Second, add the following to your exports to make sure a user can see all custom iNat icons in the UI library:
```
export {
glyphMap
};
```
5. Add the .ttf file you downloaded, `inaturalisticons.ttf`, to assets/fonts
6. Clean build folders for iOS/Android with `rm -rf ios/build && rm -rf android/app/build`
7. Add your icon somewhere in the app using `<INatIcon name="compass-rose" />` where name is set to the name of your new custom icon.
8. Build the app on either platform, and you should see your custom icons
If anything goes wrong, check the [troubleshooting steps](https://github.com/oblador/react-native-vector-icons#troubleshooting) from react-native-vector-icons instructions on creating a glyph map. You can use `npx react-native-asset` to automatically link fonts in iOS/Android, but you shouldn't need to do this unless you're adding a .ttf file with a different name.
If anything goes wrong, check the [troubleshooting steps](https://github.com/oblador/react-native-vector-icons#troubleshooting) from `react-native-vector-icons` instructions on creating a glyph map.
## Troubleshooting

7
android/app/build.gradle
View File

@@ -96,12 +96,7 @@ apply from: "../../node_modules/react-native/react.gradle"
// add vector icons to project
project.ext.vectoricons = [
iconFontsDir: "../../assets/fonts/",
iconFontNames: [
'MaterialCommunityIcons.ttf',
'MaterialIcons.ttf',
'inaturalisticons.ttf'
]
iconFontNames: [ 'MaterialCommunityIcons.ttf', 'MaterialIcons.ttf' ]
]
apply from: "../../node_modules/react-native-vector-icons/fonts.gradle"

BIN
android/app/src/main/assets/fonts/inaturalisticons.ttf Normal file
View File

Binary file not shown.

6
android/link-assets-manifest.json
View File

@@ -1,6 +1,10 @@
{
"migIndex": 1,
"data": [
{
"path": "assets/fonts/Whitney-BookItalic-Pro.otf",
"sha1": "15854f60175a0e82b794c259431ec45ea4b40103"
},
{
"path": "assets/fonts/Whitney-Light-Pro.otf",
"sha1": "d15560faea2b18aef9867a1d2b9e2efb54b17b5b"
@@ -11,7 +15,7 @@
},
{
"path": "assets/fonts/inaturalisticons.ttf",
"sha1": "76435d11edb09f7914ebf9cb388db461c50d7fda"
"sha1": "0830dfea4d6996a890dfe05a1e1a67ae3eaf0ad4"
}
]
}

BIN
assets/fonts/MaterialCommunityIcons.ttf
View File

Binary file not shown.

BIN
assets/fonts/MaterialIcons.ttf
View File

Binary file not shown.

8
ios/iNaturalistReactNative.xcodeproj/project.pbxproj
View File

@@ -7,7 +7,6 @@
objects = {
/* Begin PBXBuildFile section */
0085E50460D749DB8D818C1F /* inaturalisticons.ttf in Resources */ = {isa = PBXBuildFile; fileRef = 81076C08FFF24C36A0725EEE /* inaturalisticons.ttf */; };
00E356F31AD99517003FC87E /* iNaturalistReactNativeTests.m in Sources */ = {isa = PBXBuildFile; fileRef = 00E356F21AD99517003FC87E /* iNaturalistReactNativeTests.m */; };
13B07FBC1A68108700A75B9A /* AppDelegate.mm in Sources */ = {isa = PBXBuildFile; fileRef = 13B07FB01A68108700A75B9A /* AppDelegate.mm */; };
13B07FBF1A68108700A75B9A /* Images.xcassets in Resources */ = {isa = PBXBuildFile; fileRef = 13B07FB51A68108700A75B9A /* Images.xcassets */; };
@@ -15,6 +14,7 @@
374CB22F29943E63005885ED /* Whitney-BookItalic-Pro.otf in Resources */ = {isa = PBXBuildFile; fileRef = 374CB22E29943E63005885ED /* Whitney-BookItalic-Pro.otf */; };
7EBBE0515B6D88FD724A5C47 /* libPods-iNaturalistReactNative.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 7DD42FAECED8C66268DDB37F /* libPods-iNaturalistReactNative.a */; };
81AB9BB82411601600AC10FF /* LaunchScreen.storyboard in Resources */ = {isa = PBXBuildFile; fileRef = 81AB9BB72411601600AC10FF /* LaunchScreen.storyboard */; };
896925E9AF0F4FA497FD25E1 /* inaturalisticons.ttf in Resources */ = {isa = PBXBuildFile; fileRef = 9E889D9DF17243EC828D2A57 /* inaturalisticons.ttf */; };
A252B2AEA64E47C9AC1D20E8 /* Whitney-Light-Pro.otf in Resources */ = {isa = PBXBuildFile; fileRef = BA9D41ECEBFA4C38B74009B3 /* Whitney-Light-Pro.otf */; };
BA2479FA3D7B40A7BEF7B3CD /* Whitney-Medium-Pro.otf in Resources */ = {isa = PBXBuildFile; fileRef = D09FA3A0162844FF80A5EF96 /* Whitney-Medium-Pro.otf */; };
/* End PBXBuildFile section */
@@ -43,8 +43,8 @@
27F9BBBBAB49ABBAF88433C9 /* Pods-iNaturalistReactNative.debug.xcconfig */ = {isa = PBXFileReference; includeInIndex = 1; lastKnownFileType = text.xcconfig; name = "Pods-iNaturalistReactNative.debug.xcconfig"; path = "Target Support Files/Pods-iNaturalistReactNative/Pods-iNaturalistReactNative.debug.xcconfig"; sourceTree = "<group>"; };
374CB22E29943E63005885ED /* Whitney-BookItalic-Pro.otf */ = {isa = PBXFileReference; lastKnownFileType = file; name = "Whitney-BookItalic-Pro.otf"; path = "../assets/fonts/Whitney-BookItalic-Pro.otf"; sourceTree = "<group>"; };
7DD42FAECED8C66268DDB37F /* libPods-iNaturalistReactNative.a */ = {isa = PBXFileReference; explicitFileType = archive.ar; includeInIndex = 0; path = "libPods-iNaturalistReactNative.a"; sourceTree = BUILT_PRODUCTS_DIR; };
81076C08FFF24C36A0725EEE /* inaturalisticons.ttf */ = {isa = PBXFileReference; explicitFileType = undefined; fileEncoding = 9; includeInIndex = 0; lastKnownFileType = unknown; name = inaturalisticons.ttf; path = ../assets/fonts/inaturalisticons.ttf; sourceTree = "<group>"; };
81AB9BB72411601600AC10FF /* LaunchScreen.storyboard */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = file.storyboard; name = LaunchScreen.storyboard; path = iNaturalistReactNative/LaunchScreen.storyboard; sourceTree = "<group>"; };
9E889D9DF17243EC828D2A57 /* inaturalisticons.ttf */ = {isa = PBXFileReference; explicitFileType = undefined; fileEncoding = undefined; includeInIndex = 0; lastKnownFileType = unknown; name = inaturalisticons.ttf; path = ../assets/fonts/inaturalisticons.ttf; sourceTree = "<group>"; };
BA9D41ECEBFA4C38B74009B3 /* Whitney-Light-Pro.otf */ = {isa = PBXFileReference; explicitFileType = undefined; fileEncoding = 9; includeInIndex = 0; lastKnownFileType = unknown; name = "Whitney-Light-Pro.otf"; path = "../assets/fonts/Whitney-Light-Pro.otf"; sourceTree = "<group>"; };
C544256CF572EB52B9E2B9CB /* Pods-iNaturalistReactNative.release.xcconfig */ = {isa = PBXFileReference; includeInIndex = 1; lastKnownFileType = text.xcconfig; name = "Pods-iNaturalistReactNative.release.xcconfig"; path = "Target Support Files/Pods-iNaturalistReactNative/Pods-iNaturalistReactNative.release.xcconfig"; sourceTree = "<group>"; };
D09FA3A0162844FF80A5EF96 /* Whitney-Medium-Pro.otf */ = {isa = PBXFileReference; explicitFileType = undefined; fileEncoding = 9; includeInIndex = 0; lastKnownFileType = unknown; name = "Whitney-Medium-Pro.otf"; path = "../assets/fonts/Whitney-Medium-Pro.otf"; sourceTree = "<group>"; };
@@ -157,7 +157,7 @@
BA9D41ECEBFA4C38B74009B3 /* Whitney-Light-Pro.otf */,
D09FA3A0162844FF80A5EF96 /* Whitney-Medium-Pro.otf */,
374CB22E29943E63005885ED /* Whitney-BookItalic-Pro.otf */,
81076C08FFF24C36A0725EEE /* inaturalisticons.ttf */,
9E889D9DF17243EC828D2A57 /* inaturalisticons.ttf */,
);
name = Resources;
sourceTree = "<group>";
@@ -258,7 +258,7 @@
13B07FBF1A68108700A75B9A /* Images.xcassets in Resources */,
A252B2AEA64E47C9AC1D20E8 /* Whitney-Light-Pro.otf in Resources */,
BA2479FA3D7B40A7BEF7B3CD /* Whitney-Medium-Pro.otf in Resources */,
0085E50460D749DB8D818C1F /* inaturalisticons.ttf in Resources */,
896925E9AF0F4FA497FD25E1 /* inaturalisticons.ttf in Resources */,
);
runOnlyForDeploymentPostprocessing = 0;
};

6
ios/link-assets-manifest.json
View File

@@ -1,6 +1,10 @@
{
"migIndex": 1,
"data": [
{
"path": "assets/fonts/Whitney-BookItalic-Pro.otf",
"sha1": "15854f60175a0e82b794c259431ec45ea4b40103"
},
{
"path": "assets/fonts/Whitney-Light-Pro.otf",
"sha1": "d15560faea2b18aef9867a1d2b9e2efb54b17b5b"
@@ -11,7 +15,7 @@
},
{
"path": "assets/fonts/inaturalisticons.ttf",
"sha1": "76435d11edb09f7914ebf9cb388db461c50d7fda"
"sha1": "0830dfea4d6996a890dfe05a1e1a67ae3eaf0ad4"
}
]
}