Skip to content

Commit 9f6ee14

Browse files
mlwilkersonmlwilkerson
authored
Re-initialize example app without Expo in order to use react-native-svg 7 (#6)
* Also add DEVELOPMENT.md doc
1 parent 422a77f commit 9f6ee14

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

55 files changed

+5244
-1206
lines changed

‎DEVELOPMENT.md

+96
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,96 @@
1+
# Developing React Native Fontawesome
2+
3+
## Tasks
4+
5+
The following commands are available through `npm run`
6+
7+
| Command | Purpose |
8+
| ------- | ------------------------------------- |
9+
| dist | Transpile code into `dist/`, to be checked in so the GitHub repo can be sourced directly from a `package.json` file |
10+
| test | Run tests |
11+
12+
## Set up Development Environment (iOS)
13+
14+
Use guidelines in the [React Native](https://facebook.github.io/react-native/docs/getting-started) development docs
15+
to get your environment set up in your OS. For Mac OS X, that would look like:
16+
17+
1. `brew install node` # if you don't already have node 8.3 or later
18+
1. `brew install watchman` # watches filesystem for changes
19+
1. `npm install -g react-native-cli` # react-native CLI
20+
1. [Install XCode](https://facebook.github.io/react-native/docs/getting-started#xcode), probably from the App Store. Make sure it's version 9.4 or later. Also set up the XCode Command Line
21+
Tools.
22+
1. clone this repo
23+
24+
25+
## Launch the Example App
26+
27+
In the `examples/Hello` subdirectory, the following script commands are available:
28+
29+
| Command | Purpose |
30+
| ------- | ------------------------------------- |
31+
| start | Start JavaScript bundler, listening on a port |
32+
| ios | Build the ios XCode project (requires XCode set up) |
33+
| android | Build the Android project |
34+
| start-with-cache-reset | Useful when after modifying JavaScript modules, something isn't resolving that you're pretty sure should be there |
35+
| clean | clean out build cache. Useful when the build isn't working and you're pretty sure it should be |
36+
37+
In one terminal tab:
38+
1. `cd examples/Hello`
39+
1. `npm install`
40+
1. `npm run start`
41+
42+
This will get the JavaScript bundler running and listening for connections from a device or iOS Simulator.
43+
44+
In another terminal tab:
45+
1 `cd examples/Hello`
46+
1. `react-native link react-native-svg` # to link the native components in the ios project
47+
1. `npm run ios`
48+
49+
This will build the project via XCode, launch the iOS Simulator, and when the project builds successfully,
50+
install the app into the Simulator and have it connect to the JavaScript bundler. When it's all built and loaded,
51+
it will render the view for the example app--with Font Awesome icons.
52+
53+
### Dealing with Flaky Build Problems
54+
55+
Seems like things don't always go smoothly and you have to [use some hackery](https://github.com/facebook/react-native/issues/21490#issuecomment-427280927) to get the build unjammed.
56+
57+
Try this:
58+
1. shutdown any instances of the bundler you have running.
59+
1. `npm run clean`
60+
1. `npm run start-with-cache-reset` # from the examples/Hello directory
61+
62+
From another terminal tab:
63+
1. `npm run ios`
64+
65+
## Update Example App to Use a Newer Version of this Component
66+
67+
For now, we're just using the GitHub repo as our source for development versions. This means that when you want to
68+
test changes to the component using the example app, you'll have to push the component changes to a development branch
69+
and then update the `package.json` of the example app to pull the component from that branch.
70+
71+
Here's the step-by-step:
72+
73+
1. make changes to this component
74+
1. `npm run dist` # to transpile via babel into `dist/`
75+
1. `git commit` # whatever changes you're trying to commit
76+
1. `git push origin my-dev` # to whatever topic branch you're working on, say "my-dev"
77+
1. Modify `examples/Hello/package.json` and find the line that looks like this:
78+
`"@fortawesome/react-native-fontawesome": "^0.0.1"`
79+
And change it to something like this:
80+
`"@fortawesome/react-native-fontawesome": "https://github.com/FortAwesome/react-native-fontawesome#my-dev"`
81+
1. `npm update` or `yarn upgrade` # insist that packages be updated, in this case, that the code from the GitHub branch be pulled down into node_modules
82+
1. Launch the Example App using the instructions above.
83+
84+
## Releasing a new version
85+
86+
<a name="release"></a>
87+
88+
1. Edit `package.json` and update the version number
89+
1. Add new contributors to the `contributors` section
90+
1. Update the `CHANGELOG.md`
91+
1. `npm run dist`
92+
1. `npm run test`
93+
1. `npm run publish`
94+
1. `git add . && git commit -m 'Release VERSION'`
95+
1. `git push`
96+
1. Create a [new release](https://github.com/FortAwesome/react-native-fontawesome/releases/new) with `CHANGELOG` details

‎examples/Hello/.babelrc

+1-6
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,3 @@
11
{
2-
"presets": ["babel-preset-expo"],
3-
"env": {
4-
"development": {
5-
"plugins": ["transform-react-jsx-source"]
6-
}
7-
}
2+
"presets": ["module:metro-react-native-babel-preset"]
83
}

‎examples/Hello/.buckconfig

+6
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
2+
[android]
3+
target = Google Inc.:Google APIs:23
4+
5+
[maven_repositories]
6+
central = https://repo1.maven.org/maven2

‎examples/Hello/.flowconfig

+70
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,70 @@
1+
[ignore]
2+
; We fork some components by platform
3+
.*/*[.]android.js
4+
5+
; Ignore "BUCK" generated dirs
6+
<PROJECT_ROOT>/\.buckd/
7+
8+
; Ignore unexpected extra "@providesModule"
9+
.*/node_modules/.*/node_modules/fbjs/.*
10+
11+
; Ignore duplicate module providers
12+
; For RN Apps installed via npm, "Libraries" folder is inside
13+
; "node_modules/react-native" but in the source repo it is in the root
14+
.*/Libraries/react-native/React.js
15+
16+
; Ignore polyfills
17+
.*/Libraries/polyfills/.*
18+
19+
; Ignore metro
20+
.*/node_modules/metro/.*
21+
22+
[include]
23+
24+
[libs]
25+
node_modules/react-native/Libraries/react-native/react-native-interface.js
26+
node_modules/react-native/flow/
27+
node_modules/react-native/flow-github/
28+
29+
[options]
30+
emoji=true
31+
32+
esproposal.optional_chaining=enable
33+
esproposal.nullish_coalescing=enable
34+
35+
module.system=haste
36+
module.system.haste.use_name_reducers=true
37+
# get basename
38+
module.system.haste.name_reducers='^.*/\([a-zA-Z0-9$_.-]+\.js\(\.flow\)?\)$' -> '\1'
39+
# strip .js or .js.flow suffix
40+
module.system.haste.name_reducers='^\(.*\)\.js\(\.flow\)?$' -> '\1'
41+
# strip .ios suffix
42+
module.system.haste.name_reducers='^\(.*\)\.ios$' -> '\1'
43+
module.system.haste.name_reducers='^\(.*\)\.android$' -> '\1'
44+
module.system.haste.name_reducers='^\(.*\)\.native$' -> '\1'
45+
module.system.haste.paths.blacklist=.*/__tests__/.*
46+
module.system.haste.paths.blacklist=.*/__mocks__/.*
47+
module.system.haste.paths.blacklist=<PROJECT_ROOT>/node_modules/react-native/Libraries/Animated/src/polyfills/.*
48+
module.system.haste.paths.whitelist=<PROJECT_ROOT>/node_modules/react-native/Libraries/.*
49+
50+
munge_underscores=true
51+
52+
module.name_mapper='^[./a-zA-Z0-9$_-]+\.\(bmp\|gif\|jpg\|jpeg\|png\|psd\|svg\|webp\|m4v\|mov\|mp4\|mpeg\|mpg\|webm\|aac\|aiff\|caf\|m4a\|mp3\|wav\|html\|pdf\)$' -> 'RelativeImageStub'
53+
54+
module.file_ext=.js
55+
module.file_ext=.jsx
56+
module.file_ext=.json
57+
module.file_ext=.native.js
58+
59+
suppress_type=$FlowIssue
60+
suppress_type=$FlowFixMe
61+
suppress_type=$FlowFixMeProps
62+
suppress_type=$FlowFixMeState
63+
64+
suppress_comment=\\(.\\|\n\\)*\\$FlowFixMe\\($\\|[^(]\\|(\\(<VERSION>\\)? *\\(site=[a-z,_]*react_native[a-z,_]*\\)?)\\)
65+
suppress_comment=\\(.\\|\n\\)*\\$FlowIssue\\((\\(<VERSION>\\)? *\\(site=[a-z,_]*react_native[a-z,_]*\\)?)\\)?:? #[0-9]+
66+
suppress_comment=\\(.\\|\n\\)*\\$FlowFixedInNextDeploy
67+
suppress_comment=\\(.\\|\n\\)*\\$FlowExpectedError
68+
69+
[version]
70+
^0.78.0

‎examples/Hello/.gitattributes

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
*.pbxproj -text

‎examples/Hello/.gitignore

+56-3
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,56 @@
1-
node_modules/**/*
2-
.expo/*
3-
npm-debug.*
1+
# OSX
2+
#
3+
.DS_Store
4+
5+
# Xcode
6+
#
7+
build/
8+
*.pbxuser
9+
!default.pbxuser
10+
*.mode1v3
11+
!default.mode1v3
12+
*.mode2v3
13+
!default.mode2v3
14+
*.perspectivev3
15+
!default.perspectivev3
16+
xcuserdata
17+
*.xccheckout
18+
*.moved-aside
19+
DerivedData
20+
*.hmap
21+
*.ipa
22+
*.xcuserstate
23+
project.xcworkspace
24+
25+
# Android/IntelliJ
26+
#
27+
build/
28+
.idea
29+
.gradle
30+
local.properties
31+
*.iml
32+
33+
# node.js
34+
#
35+
node_modules/
36+
npm-debug.log
37+
yarn-error.log
38+
39+
# BUCK
40+
buck-out/
41+
\.buckd/
42+
*.keystore
43+
44+
# fastlane
45+
#
46+
# It is recommended to not store the screenshots in the git repo. Instead, use fastlane to re-generate the
47+
# screenshots whenever they are needed.
48+
# For more information about the recommended setup visit:
49+
# https://docs.fastlane.tools/best-practices/source-control/
50+
51+
*/fastlane/report.xml
52+
*/fastlane/Preview.html
53+
*/fastlane/screenshots
54+
55+
# Bundle artifact
56+
*.jsbundle

‎examples/Hello/.watchmanconfig

+1-1
Original file line numberDiff line numberDiff line change
@@ -1 +1 @@
1-
{}
1+
{}

‎examples/Hello/App.js

+45-13
Original file line numberDiff line numberDiff line change
@@ -1,26 +1,58 @@
1-
import React from 'react'
2-
import { Dimensions, StyleSheet, Text, ScrollView } from 'react-native'
3-
import { Svg, Path, ClipPath, Defs, Mask, G, Rect } from 'react-native-svg'
1+
/**
2+
* Sample React Native App
3+
* https://github.com/facebook/react-native
4+
*
5+
* @format
6+
* @flow
7+
*/
8+
9+
import React, {Component} from 'react';
10+
import {Platform, StyleSheet, Text, View, Dimensions} from 'react-native';
11+
import { Svg, Rect, G, Mask, ClipPath, Path, Defs } from 'react-native-svg';
412
import { FontAwesomeIcon } from '@fortawesome/react-native-fontawesome'
513
import { faCoffee, faBeer } from '@fortawesome/free-solid-svg-icons'
614

7-
const { width, height } = Dimensions.get('window')
15+
const instructions = Platform.select({
16+
ios: 'Press Cmd+R to reload,\n' + 'Cmd+D or shake for dev menu',
17+
android:
18+
'Double tap R on your keyboard to reload,\n' +
19+
'Shake or press menu button for dev menu',
20+
});
21+
22+
const { width: windowWidth, height: windowHeight } = Dimensions.get('window')
823

9-
export default class App extends React.Component {
24+
type Props = {};
25+
export default class App extends Component<Props> {
1026
render() {
1127
return (
12-
<ScrollView style={styles.contentContainer}>
13-
<Text>Show me some icons:</Text>
28+
<View style={styles.container}>
29+
<Text style={styles.welcome}>Welcome to react-native-fontawesome!</Text>
30+
<Text style={styles.instructions}>To get started, edit App.js</Text>
31+
<Text style={styles.instructions}>{instructions}</Text>
32+
<Text style={styles.instructions}>And now, for some icons:</Text>
33+
1434
<FontAwesomeIcon icon={ faCoffee } />
1535
<FontAwesomeIcon icon={ faBeer } />
16-
</ScrollView>
17-
)
36+
</View>
37+
);
1838
}
1939
}
2040

2141
const styles = StyleSheet.create({
22-
contentContainer: {
23-
paddingVertical: 50,
24-
marginLeft: 20
42+
container: {
43+
flex: 1,
44+
justifyContent: 'center',
45+
alignItems: 'center',
46+
backgroundColor: '#F5FCFF',
47+
},
48+
welcome: {
49+
fontSize: 20,
50+
textAlign: 'center',
51+
margin: 10,
52+
},
53+
instructions: {
54+
textAlign: 'center',
55+
color: '#333333',
56+
marginBottom: 5,
2557
},
26-
})
58+
});

‎examples/Hello/android/app/BUCK

+65
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,65 @@
1+
# To learn about Buck see [Docs](https://buckbuild.com/).
2+
# To run your application with Buck:
3+
# - install Buck
4+
# - `npm start` - to start the packager
5+
# - `cd android`
6+
# - `keytool -genkey -v -keystore keystores/debug.keystore -storepass android -alias androiddebugkey -keypass android -dname "CN=Android Debug,O=Android,C=US"`
7+
# - `./gradlew :app:copyDownloadableDepsToLibs` - make all Gradle compile dependencies available to Buck
8+
# - `buck install -r android/app` - compile, install and run application
9+
#
10+
11+
lib_deps = []
12+
13+
for jarfile in glob(['libs/*.jar']):
14+
name = 'jars__' + jarfile[jarfile.rindex('/') + 1: jarfile.rindex('.jar')]
15+
lib_deps.append(':' + name)
16+
prebuilt_jar(
17+
name = name,
18+
binary_jar = jarfile,
19+
)
20+
21+
for aarfile in glob(['libs/*.aar']):
22+
name = 'aars__' + aarfile[aarfile.rindex('/') + 1: aarfile.rindex('.aar')]
23+
lib_deps.append(':' + name)
24+
android_prebuilt_aar(
25+
name = name,
26+
aar = aarfile,
27+
)
28+
29+
android_library(
30+
name = "all-libs",
31+
exported_deps = lib_deps,
32+
)
33+
34+
android_library(
35+
name = "app-code",
36+
srcs = glob([
37+
"src/main/java/**/*.java",
38+
]),
39+
deps = [
40+
":all-libs",
41+
":build_config",
42+
":res",
43+
],
44+
)
45+
46+
android_build_config(
47+
name = "build_config",
48+
package = "com.hello",
49+
)
50+
51+
android_resource(
52+
name = "res",
53+
package = "com.hello",
54+
res = "src/main/res",
55+
)
56+
57+
android_binary(
58+
name = "app",
59+
keystore = "//android/keystores:debug",
60+
manifest = "src/main/AndroidManifest.xml",
61+
package_type = "debug",
62+
deps = [
63+
":app-code",
64+
],
65+
)

0 commit comments

Comments
 (0)