- First add your environment variables. See the installing section below for more detail on how to do so. For development environment you can use your own generated keys but for release use nebra account keys.
- Rename your application using React Native Rename. You will want to pass in the custom bundle identifier for Android and also change it manually for iOS.
This step is only required if you are picking ios and android specific changes from upstream. As upstream app is named "MakerApp" while we name it simply "Nebra". Follow below procedure to do so.
- checkout upstream main branch
- create a new branch from it "upstream_main_app_renamed".
- use React Native Rename utility to change name from "MakerApp" to "Nebra".
- temporarily commit the changes in this branch.
- use this branch to make you diff against nebra main and pick any changes if required.
- Update your theme colors in theme.ts. The theme controls the look of the application.
- Add your Hotspot and Antenna data in the makers folder. See the Makers README for more detail.
- You will need to update your App Scheme for any deep linking. There are guides for both iOS and Android.
- The basics of the Helium React Native SDK and Helium Blockchain API have been integrated into this starter app. Review the docs to learn more.
If you have already set up react native on your machine, skip to the installing section.
You will need Node, Watchman, Yarn, the React Native command line interface, Android Studio, and Xcode.
While you can use any editor of your choice to develop your app, you will need to install Xcode and Android Studio in order to set up the necessary tooling to build your React Native app for iOS and Android.
A good free editor is Visual Studio Code.
We recommend installing Node, Yarn, and Watchman using Homebrew. Run the following commands in a Terminal after installing Homebrew:
brew install node
brew install watchman
brew install yarn
If you have already installed Node on your system, make sure it is up to date with the LTS version.
Watchman is a tool by Facebook for watching changes in the filesystem. It is highly recommended you install it for better performance.
Node comes with npm, which lets you install the React Native command line interface.
Run the following command in a Terminal:
npm install -g react-native-cli
If you get an error like Cannot find module 'npmlog', try installing npm directly:
curl -0 -L https://npmjs.org/install.sh | sudo sh.
- Copy the file
.env.sample
and rename it to.env
. - Once renamed update the values within the file.
- In order for maps to load you will need to create your own Mapbox access token.
Install 3rd party dependencies
yarn install
The easiest way to install Xcode is via the Mac App Store. Installing Xcode will also install the iOS Simulator and all the necessary tools to build your iOS app.
If you have already installed Xcode on your system, make sure it is up to date.
You will also need to install the Xcode Command Line Tools. Open Xcode, then choose "Preferences..." from the Xcode menu. Go to the Locations panel and install the tools by selecting the most recent version in the Command Line Tools dropdown.
You need to install cocoapods for iOS. CocoaPods manages library dependencies for your Xcode projects.
sudo gem install cocoapods
Then install the pods for iOS
yarn pod-install
If the app is not working you may want to clean your workspace and then follow the running the app section below
npx expo install --check # this will try to fix incompatible package version in package.json. Safe to accept them.
yarn clean-install
yarn clean-start
The fastest way to run the app is on the iOS simulator. Just type:
yarn ios
You can also open the Nebra.xcworkspace
file in the /ios
folder using xcode and run the app on your device or any other simulator.
To run the app on a specific device, type:
yarn ios --device "Device Name"
To build a release version of the app:
yarn ios --configuration=release
It will always look like a gradle error. Don't try to debug gradle, mostly it won't have anything to do with gradle. Just google the error, you will most likely find that some react package needs to be updated.
# use following command to update the required package (eg netinfo)
yarn add @react-native-community/netinfo
# don't forget to run to following to fix any incompatibility between packages after installing of upgrading any package.
npx expo install --check
To distribute your app on the App Store with Xcode, a few steps are required. App signing is done automatically.
To be sure about the bundle, check the app by running following command. This will also ensure that the bundle is upto date.
npx react-native run-ios --configuration Release
Before you can upload a build of your app to App Store Connect, you must first create an app record in your App Store Connect account.
- From My Apps, click the Add button (+) in the top-left corner.
- The My Apps page is blank until you create your first app record.
- From the pop-up menu, select New App.
- In the New App dialog, select one or more platform(s) and enter the app information. The bundle ID should match that of the app you want to deploy.
- Under User Access, choose Limited Access or Full Access. If you choose Limited Access, select the users that you would like to be able to access this app.
- Click Create, and look for messages that indicate missing information.
- Under "Target" on your right hand side, click on the app.
- Go to "General"
- Under "Identity", update the version and build to the required value
To build the app for distribution:
- Refresh dependencies:
yarn install && cd ios && pod install
- In Xcode first go to Product
- Go to Scheme
- Go to Edit scheme
- Change the Build configuration to Release
To release the app, you first need to create an archive.
- In Xcode go to Product
- Click on Archive
- After the archive builds successfully, a new window will be opened with a list of all archives. The topmost one is what you just built.
- With the archive selected, click on the Distribute App button on the right.
- This will launch a wizard for selecting distribution method.
- Since you want to distribute the app to App Store, select "App Store Connect" and click on next.
- Within the "Select a destination" wizard, "upload" and click on next.
- In the next sheet, choose a signing option, then click Next. More on Distribution signing options can be found here
- If you are missing a required distribution certificate, follow the instructions in the next sheet to create it.
- Review the signing certificate, provisioning profile, and entitlements.
- Click Upload.
The TestFlight app allows testers to install and beta test your app on iOS, tvOS, and watchOS devices. Testers must receive an invite directly from you before they can begin testing with TestFlight. Once testers accept your invitation, they can install, test, send feedback, and get updates of your beta app.
TestFlight can be used on App Store Connect after your build has been uploaded.
- Choose your build.
- Set pricing and availability
- Submit your app for review. Before you submit an app, enter all the required metadata and choose if you want to release your app manually or automatically.
Error message "There are no accounts registered with Xcode. Add your developer account to Xcode" gets returned when no developer account has been set up in Xcode.
#####[Solution]
- Open Xcode.
- Go to Preferences
- Go to Accounts tab then add your account with the + sign.
Error message "No profiles for 'com.maker.makerapp' were found: Xcode couldn't find any iOS App Development provisioning profiles matching 'com.maker.makerapp'." could be returned when no provisioning profile have been set for the bundle in xcode.
#####[Solution]
- Open Xcode.
- Go to Signing and Capabilities
- Under Team, select your developer account/ Apple ID.
This error message gets returned when no simulator or device is detected.
#####[Solution]
Ensure that you have an ios simulator running, or you have an ios device plugged in.
Use the command below to check for available devices or simulators.
xcrun simctl list --json devices
This may be as a result of attempting to run the app on an IOS physical device such as iPhone without having "ios-deploy" installed.
#####[Solution]
Install ios-deploy
npm install -g ios-deploy
5. Unable to launch com.maker.makerapp because it has an invalid code signature, inadequate entitlements or its profile has not been explicitly trusted by the user.
You may need to trust the app on your IOS device.
#####[Soultion]
- On your IOS device, go to Settings
- Go to General
- Go to Device Management
- You will see a profile for the developer. Tap the name of the developer profile to establish trust.
Write targetted version of OS in both these locations. This has nothing to do with Device version. As of writing Ios 13 is the lastest version and it is supported Iphone 6 and above.
ios/Podfile : eg platform :ios, '13.0'
and
ios/MakerApp.xcodeproj/project.pbxproj (all configruations): eg. IPHONEOS_DEPLOYMENT_TARGET = 13.0;
Stashed changes
React Native requires the Java SE Development Kit (JDK). Download and install JDK 11 (versions 8-14 are supported).
- Download OpenJDK from [Temurin](https://adoptium.net/?variant=openjdk11&jvmVariant=hotspot.
- If you have several JDKs, you can select Temurin by disabling all others with the instructions below.
Leave all JDKs at their default location, under /Library/Java/JavaVirtualMachines. The system will pick the highest version by default.
To exclude a JDK from being picked by default, rename its Contents/Info.plist to Info.plist.disabled.
That JDK can still be used when $JAVA_HOME points to it, or explicitly referenced in a script or configuration.
It will simply be ignored by system's java command.
Setting up your development environment can be somewhat tedious if you're new to Android development. If you're already familiar with Android development, there are a few things you may need to configure. In either case, please make sure to carefully follow the next few steps.
Download and install Android Studio. Choose a "Custom" setup when prompted to select an installation type. Make sure the boxes next to all of the following are checked:
- Android SDK
- Android SDK Platform
- Performance (Intel ® HAXM)
- Android Virtual Device
Then, click "Next" to install all of these components.
If the checkboxes are grayed out, you will have a chance to install these components later on. Once setup has finalized and you're presented with the Welcome screen, proceed to the next step.
Android Studio installs the latest Android SDK by default. Building a React Native app with native code, however, requires the Android 28 SDK in particular. Additional Android SDKs can be installed through the SDK Manager in Android Studio.
The SDK Manager can be accessed from the "Welcome to Android Studio" screen. Click on "Configure", then select "SDK Manager".
Select the "SDK Platforms" tab from within the SDK Manager, then check the box next to "Show Package Details" in the bottom right corner. Look for and expand the Android 28 entry, then make sure the following items are all checked:
- Google APIs
- Android SDK Platform 28
- Intel x86 Atom_64 System Image
- Google APIs Intel x86 Atom_64 System Image
Next, select the "SDK Tools" tab and check the box next to "Show Package Details" here as well. Look for and expand the "Android SDK Build-Tools" entry, then make sure that 30-rc1, 29.0.3, and 28.0.3 are selected.
Finally, click "Apply" to download and install the Android SDK and related build tools.
The React Native tools require some environment variables to be set up in order to build apps with native code.
Add the following lines to your $HOME/.bash_profile config file:
export ANDROID_HOME=$HOME/Library/Android/sdk
export PATH=$PATH:$ANDROID_HOME/tools
export PATH=$PATH:$ANDROID_HOME/platform-tools
Similar to iOS, run
yarn android
yarn android --deviceId <deviceId>
You can also open the Android project in Android Studio by selecting open an existing project
and selecting the /android
folder.
- Set build version env vars.
VERSION_CODE_OFFSET
is using format5xxyyzz
. Corresponding to major, minor, patch. So v1.0.1, equal to 5010001.APPCENTER_BUILD_ID
is always0000000
. One can pick the last code offset from last android release in play store console. - Open Android Studio in terminal, supplying the values from above:
VERSION_CODE_OFFSET=5010003 APPCENTER_BUILD_ID=0000000 open Android\ Studio.app
- Build > Generate Signed APK.
- Use
com.nebra.helium.maker
keystore,prod
key. - Select
release
variant. - Copy
/android/app/release/app-release.abb
to Google Play.
- Checkout feature branch with version name
git checkout -b release/v1.0.4
. - Update the version in
package.json
to match the branch name. - Create tag after PR merged to master
git tag -a v1.0.4 -m v1.0.4
. - Push tag
git push origin --tags
.
In order to skip Helium Wallet handshake:
- Get your wallet token in
src/providers/AppLinkProvider.tsx
case 'link_wallet': {
const walletLink = record as WalletLink
if (walletLink.status === 'success' && walletLink.token) {
+ console.log(walletLink.token)
+
dispatch(appSlice.actions.storeWalletLinkToken(walletLink.token))
} else {
// TODO: handle error
}
break
}
- Set the token manually in
src/providers/AppLinkProvider.tsx
useMount(() => {
+ dispatch(appSlice.actions.storeWalletLinkToken('tb3413n3C5D8Kgf3xwnZUkheZjevksj2BQY8Pm5bWv3jC24u9yV0hm'))
+
Linking.addEventListener('url', ({ url: nextUrl }) => {
if (!nextUrl) return
const link = parseUrl(nextUrl)
if (!link) return
navToAppLink(link)
})
const getUrlAsync = async () => {
const initialUrl = await Linking.getInitialURL()
if (!initialUrl) return
const link = parseUrl(initialUrl)
if (!link) return
navToAppLink(link)
}
getUrlAsync()
})
- Tablet 7": 7" WSVGA(Tablet)
- Tablet 10": 10" WSVGA(Tablet)
- Phone 5.5": Simulator iPhone 8 Pro
- Tablet 12.9": Simulator iPad Pro 12.9" (5th Gen)
npx react-native bundle --platform android --dev false --entry-file index.js --bundle-output android/app/src/main/assets/index.android.bundle --assets-dest android/app/src/main/res/ && cd android && ./gradlew assembleDebug && cd ..