bamlab/react-native-make

A collection of everyday React Native CLI tools

Everyday tools for simpler React Native development

⚙️ Setup

In your react-native project folder, run:

yarn add -D @bam.tech/react-native-make
# OR
npm i -D @bam.tech/react-native-make

Please note: This plugin only supports react-native-cli v2+

📚 Usage

Once installed, plugins are available through the React Native CLI

You can get the list of available plugins by running react-native -h within your project's folder

Command	Description
set-icon	generate platform specific app icons
set-splash	generate platform specific splash screens

💻 Local development

• Pull latest version
• cd react-native-make
• Run yarn then yarn link
• Launch a new project with react-native init
• In your React Native project, yarn link @bam.tech/react-native-make
• In the package.json of your React Native project, in dependencies add "@bam.tech/react-native-make" : "0.0.0"

Changes in 3.0.0

Since 3.0.0, splashscreens for iOS are created via Xcode’s storyboard, so as to meet Apple's new requirements as of April 2020.

Disclaimer: To better understand your usage of this tool, basic analytics have been enabled. It only records commands usage as anonymous page views and does not identify users in any way

react-native-make's Issues

Show status bar above splash screen on Android

When opening the app, the status bar appears for a moment, then hides while the splash screen is shown, and then re-appears. Is it possible to show the status bar all the time?

Splash screen feels "artificial" instead of native - blank screen still shows temporarily before splash image appears (Android)

Thanks for the work here. The previous yo rn-toolbox:assets approach did not use react-native-splash-screen or any javascript code. With this, as soon as you opened your app - even during the 'opening' animation - your splash screen would show, and the app would open fast.

However with react-native-make, the app first 'opens up', shows a blank screen for a second (white for me), and then shows your splash screen before fading it out. This whole process is also a little slower - suggesting that the javascript splash screen is "artificial" and actually just extending the app open time.

Tested on Android but may also apply to iOS if the native vs javascript suspicion applies!

Feature Request: Android, Generate Round Icons

At the moment using the set-icon command, you are unable to generate a different, rounded version of the icon, such as creating another icon file with the name 'ic_launcher_round' in all minmap folders.

Using this package, since no rounded image is set in the manifest, new android versions (android version 10 for instance) will crop the default icon into a circle, often not looking very professional.

One temporary solution until the ability to generate a rounded icon is introduced, is to alter the AndroidManifest and add android:roundIcon="@mipmap/ic_launcher" which means android will no longer crop the icon and instead just display your default android icon. Since your default icon can already be slightly rounded and be transparent, this looks fine.

Fetch package names from the platform files

As mentioned in #18 , the package name is not necessarily the platform packages names, but instead of passing in the values through cli, it is much more feasible to fetch the package names from the platform files, and therefore avoid another unnecessary step. This is the same method used by react-native in the linking process.
...
I am working on a PR for this, and should have it available in a day or two, after fully testing.

Script not properly searching for "MainActivity.java"

Hi,

the set-splash command doesn't work if the folder structure leading to MainActivity.java is not the default one / has been changed. In my case, the actual path of MainActivity.java is:

./android/app/src/main/java/com/nerdybirdy/boilerplate/MainActivity.java
                            com.nerdybirdy.boilerplate <- package name

This is because I renamed my a app using react-native-rename, which inserts the "extra folder" when changing the bundle name to "com.nerdybirdy.boilerplate"

The script is searching for the file in a directory based on the "name" value of the package.json, which leads to it failing to find the file:

./android/app/src/main/java/com/nbboilerplate/MainActivity.java
                            com.nbboilerplate <- not the package name, but "com" + packageJson.name

I guess a solution would be to control/override the path leading to MainActivity.java with an extra command-line parameter. Would that be possible to add to your super helpful toolset? :)

Thanks!

iOS does not update Splashscreen from Command line build

I have created some scripts that update Splash Screen Image with version number. Once this script runs I run
"react-native set-splash"
with the path set to the updated splash image.
I see that Images.xcasset/SplashImage.imageset is updated with new Splash Images. However when I build iOS using
"react-native run-ios"
The app launches with the previous version of the Splash image
Only to update is to open Xcode and Launch the workspace through that.
Any steps we can do from command line (clean cache etc) that could help rectify this?

Feature: Dynamically remove alpha channel if present in opaque PNGs

We were running into an issue where we had an opaque PNG that was exported out of Illustrator that had an alpha channel (see Finder Info screenshot):

This would get rejected by the app store with the following message:

[31m[Transporter Error Output]: ERROR ITMS-90717: “Invalid App Store Icon. The App Store Icon in the asset catalog in ‘jenzy.app’ can’t be transparent nor contain an alpha channel.”

It confused us because there is an alpha channel in it even though it is opaque. We were able to re-save the image without an alpha channel (even though it looks identical) and solved the problem. Obviously, we could've just done this in the first place but it would be nice if this tool stripped it out for you since it is not allowed via Apple's guidelines.

Or, at least make a note in the documentation that this can happen (having an alpha channel on an opaque image).

After re-save, all is well:

Splash screen doesn't work on iOS

I used the command react-native set-splash --path ./splash.png --background #F5861F

but only works in android pretty well, however in iOS only shows a blank black screen, when I inspect with Xcode I can check that the storyboard of splash screen is the default by react-native, and only has the image saved in the folder but is not being used in any place

black splash screen on iOS 14, iPhone 8 Plus

First, thanks for making a great library.

Recently, I updated iOS version (13 -> 14). Suddenly Splash screen is not shown up on iPhone 8 Plus (Device and Simulator, both)

I am not sure this is react-native-make bug.

With the image

Without the image

other simulators are ok.

[question] iOS: App keeps using old splash screen

I used this tool to create a splash screen for my app around 1.5 years ago. Now, when using it to update my splash screen, the app keeps using the old splash screen on iOS.

The LaunchScreen.xib is updated and a SplashImage image set is created in Images.xcassets, but the old LaunchImage image set remains in that same folder. The setting for Asset Catalog Launch Image Set Name is still set to LaunchImage, and changing it to SplashImage causes a build error: None of the input catalogs contained a matching launch image set named "SplashImage".

Clearing the setting causes the app to build successfully but display a completely black splash screen.

Use as launch screen is also selected in the LaunchScreen.xib's Interface Builder Document.

I have also tried removing the app from the device, restarting it and reinstalling the app.

Setting [RNSplashScreen showSplash:@"LaunchScreen" inRootView:rootView]; in my AppDelegate.m file shows the splash screen, but only after first showing the earlier mentioned black screen for a second or 2.

On Android, the correct splash screen seems to be displayed, but the app never gets past it anymore.

Does anyone know what I could be doing wrong?

[Feature] Support Monorepo ?

How to use this CLI while we use RN monorepo package like : https://github.com/brunolemos/react-native-web-monorepo/ ?

Feature Request: Add command line parameter to configure package name

By default, the command is using the name field from package.json to search for MainActivity.java and AppDelegate.m. In our project, the path to these files is different from what is in package.json. Can you add an option to configure this from the command line?

Android - running set-icon removes the application tag

react-native set-icon --platform android --path ./assets/app-icon-android-transparent.png

thes start application tag from AndroidManifest disappears

Warning: Accessing non-existent property 'padLevels' of module exports inside circular dependency

Hello,

Platform: macOS

react-native -v
react-native-cli: 2.0.1
react-native: 0.63.4

node -v
v14.15.1

I get this error when I run the following command :

  react-native set-icon --platform ios --path ./assets/icons/icon-ios.png

(node:34911) Warning: Accessing non-existent property 'padLevels' of module exports inside circular dependency
(Use `node --trace-warnings ...` to show where the warning was created)

Before that, I'm only done yarn add -D @bam.tech/react-native-make

What did I miss?

Black splashscreen in Ios 14.4

Hi,

I'm facing an issue related splash screen running on simulators with Ios 14.4.
Looks like it's no taken SplashScreen.storyboard. The splash screen is comming black.

Attached image.

Regards

Question: react-native android app icons: why isn't the empty space around the image preserved?

I have created icons for a react-native app on android.

For example, this is the xxxhdpi icon. The black frame is not part of the image.
It is just for showing the white margins around it:

When I install the app, the white margins are removed and the image is displayed as follows on Android 8 (the black background is the wallpaper):

I expected the white margins to be kept. How do I keep it?

---

Image by Peri Priatna from Pixabay

error: None of the input catalogs contained a matching launch image set named "LaunchImage".

I'm getting the following error when i'm trying to archive my app

/* com.apple.actool.errors */
/Users/distiller/ccr-mobile/ios/CoachCare/Images.xcassets: error: None of the input catalogs contained a matching launch image set named  "LaunchImage".
/* com.apple.actool.document.notices */

I followed all of the steps in the readme including creating the storyboard. Any thoughts?

Features from generator-rn-toolbox

Are the deployment configuration features from generator-rn-toolbox going to be imported here ?

Cannot runt Metro Bundler: Something went wrong installing the "sharp" module

I installed react-native-make by

npm i --save @bam.tech/react-native-make

I run the the commands to generate icons and success both for android and for ios. I test the Apps, no problems on android, but when I run ios I get:

I I removed the package npm remove @bam.tech/react-native-make and all worked fine.

After some days I noticed that I run the installation command giving --save option instead of -D. Could be this the problem? Unfortunately until next Monday I have no access to dev pc, so I have no chances to try it just now.

I could wait until Monday to check, but if someone could confirm immediately that the problem could be this, on Monday I will have more time to do other things.

set-splash ignores app id

the build ignores the app id which is something like io.app.client
it uses the app segment only

Cannot read property 'split' of undefined.

I have a bug trying to use this library

step to reproduce :

• yarn add -D @bam.tech/react-native-make
• react-native set-splash --path ./src/assets/splash.png --resize contain --background "#1EB582"
  error: error Cannot read property 'split' of undefined.

i can't execute any other command.

version :

react-native-cli: 2.0.1
react-native: 0.59.9
node: 12.10.0

Unexpected token {

warn Package @bam.tech/react-native-make has been ignored because it contains invalid configuration. Reason: Unexpected token {
error Unrecognized command "set-icon".
info Run "react-native --help" to see a list of all available commands.

Found out it comes from :

node node_modules/@bam.tech/react-native-make/react-native.config.js
node_modules/@bam.tech/react-native-make/dist/rn-plugin.config.js:12
    catch {
          ^

SyntaxError: Unexpected token {
    at createScript (vm.js:80:10)
    at Object.runInThisContext (vm.js:139:10)
    at Module._compile (module.js:617:28)
    at Object.Module._extensions..js (module.js:664:10)
    at Module.load (module.js:566:32)
    at tryModuleLoad (module.js:506:12)
    at Function.Module._load (module.js:498:3)
    at Module.require (module.js:597:17)
    at require (internal/module.js:11:18)
    at Object.<anonymous> (/Users/osedea/Projects/Verifik8/Verifik8/node_modules/@bam.tech/react-native-make/react-native.config.js:15:20)

On node v8.16.0.

Works with node v12.13.0.

Should there be an engine attribute in the package.json? Or compiled to be compatible with a lower version of node?

Command in the latest version doesn't work on iOS

Hi guys,

I have installed the last version and I have tried to set-icon on iOS but the command only change the launcher on android but not on iOS. With previous version (1.0.3) work perfectly.

"@bam.tech/react-native-make": "3.0.0",
node: 10.16.0
react: 16.13.1
react-native: 0.63.1

Commands used:

react-native set-icon --path src/resources/assets/images/image.png
react-native set-icon --platform ios src/resources/assets/images/image.png

I hope you could help me
Thanks!

Unexpected close tagline in sax.js

React Native 0.61.4
react-native-make: 1.0.3

The android build command is getting failed, following is the error:

Unexpected close tagLine: 30Column: 16Char: > at error (../node_modules/sax/lib/sax.js:651:10) at strictFail (../node_modules/sax/lib/sax.js:677:7) at closeTag (../node_modules/sax/lib/sax.js:871:9) at SAXParser.write (../node_modules/sax/lib/sax.js:1436:13) at new XmlDocument (../node_modules/xmldoc/lib/xmldoc.js:261:15) at readManifest (../node_modules/@react-native-community/cli-platform-android/build/config/readManifest.js:38:10) at Object.projectConfig (../node_modules/@react-native-community/cli-platform-android/build/config/index.js:59:46) at Object.get project [as project] (../node_modules/react-native/node_modules/@react-native-community/cli/build/tools/config/index.js:114:50) at ../node_modules/react-native/node_modules/@react-native-community/cli/build/commands/config/config.js:8:452 at Array.forEach ()

Install error 'glib-object.h' file not found

Hi, is anyone getting an error when trying to install the react-native-make package?

Running yarn/npm install give an error:

In file included from .../src/common.cc.25:
/usr/local/include/vips/vips8:35:10: fatal error: 'glib-object.h' file not found

Running on MacOS (Catalina)
node: v12.16.1

Unrecognized command "set-icon"

After installing via npm, I am unable to run react-native set-icon, I get this error:

error Unrecognized command "set-icon".
info Run "react-native --help" to see a list of all available commands.

resource style/SplashScreen_SplashTheme not found

Thanks for this great module. I used it to install the app Icon and it worked like a charm.

When I type this command:
react-native set-splash --path ~/Documents/icon.png --resize center --background "#b2eaff"
and then:
react-native run-android

The project fail to compile with that error:

* What went wrong:
Execution failed for task ':app:processDebugResources'.
> Android resource linking failed
  error: resource style/SplashScreen_SplashTheme (aka com.sally:style/SplashScreen_SplashTheme) not found.
  error: failed linking references.

import is being duplicated in the set-splash command

in MainActivity.java
this import is being duplicated in the set-splash command

import org.devio.rn.splashscreen.SplashScreen;
import com.facebook.react.ReactActivity;

I think it's this code that does this, is there a way to optimize?

./src/modules/setSplashScreen/android/service.ts

<!--StartFragment-->  
applyPatch(mainActivityPath, {    
  pattern: /^(.+?)(?=import)/gs,    
  patch: 'import android.os.Bundle;\n' + 'import org.devio.rn.splashscreen.SplashScreen;\n', 
});
<!--EndFragment-->

The generator creates a CodePushButton event if I answered "No" in the setup

The problem

During the setup, I chose

? Please confirm the react-native project name (as in react-native-init <PROJECT_NAME>) DashIn
? Do you want to enable Code Push ? No
? Do you want to enable Firebase Crashlytics ? No

However, in the cheatcode page, there still was a CodePushButton component, which imports react-native-code-push, which is not installed in the project

Steps to reproduce

rnmake an app

answer n for codepush and crashlytics

React-navigation version is incompatible with imports

The problem

During setup, "react-navigation": "^4.0.0" is installed and used in the RootNavigator.tsx with import { createStackNavigator } from 'react-navigation';

However, since react-navigation 4.x, createStackNavigator was moved to another package : react-navigation-stack

-> https://reactnavigation.org/docs/en/stack-navigator.html

Step to reproduce

rnmake an app

Suggestions

• Add react-navigation-stack to the packages
• Modify template to import createStackNavigator from react-navigation-stack

set-splash return an error "unsupported image format" about png file

Hello. I tried to make a splash screen through command react-native set-splash --path ./assets/logo.png

however I take an error message that, [Error: Input file contains unsupported image format] and also cannot make launch images.

Is anybody know this issue?

Blank black screen

I've ran the following;

yarn add -D @bam.tech/react-native-make
yarn add react-native-splash-screen
cd ios && pod install

I've got an splash screen image;

splashscreen.png

I've ran;

react-native set-splash --path "splashscreen.png" --background "#ffffff" --resize contain

And then added;

import SplashScreen from 'react-native-splash-screen';
SplashScreen.hide();

But when I run the app in the iPhone simulator, all I get is a blank black screen for a second or two and then into the app.

Is there any issues running this in the simulator? Or have I missed a step?

Push 3.0.1 to npm

Could you please push your latest version (3.0.1) to npm?

SplashScreen not hiding in Android

Hi, I haven't complete the iOS one, but I hope my Android case helps you.
I will try to update this comment after I complete the iOS one.

For my case (RN 0.61) in Android, it seems like the library messes up my MainActivity.java so I just discard the changes made to it and it worked.

The the library adds:

import android.os.Bundle;
import org.devio.rn.splashscreen.SplashScreen;
...
@Override
    protected void onCreate(Bundle savedInstanceState) {
SplashScreen.show(this, R.style.SplashScreenTheme);        anything_that_exists_here();
        super.onCreate(savedInstanceState);
SplashScreen.show(this, R.style.SplashScreenTheme);    }

to the android/app/src/main/java/com/project_name/MainActivity.java

1. import android.os.Bundle and import org.devio.rn.splashscreen.SplashScreen are already there for my case, but since they are not the 1st and 2nd imports, the library forcefully adding the imports made it double imports. This is not the reason it didn't work though.

2. The real culprit is that SplashScreen.show(this, R.style.SplashScreenTheme); is added after the anything_you_had_here(); \n super.onCreate(savedInstanceState);. So yeah, there is a bug in this library that the line adding is messed up.

I don't have the time to do a PR for the moment but I hope this helps @yleflour track down the bug both on the Android and iOS (if present) side and fix it. Good luck guys!

===
For completeness, you just need:

protected void onCreate(Bundle savedInstanceState) {
    SplashScreen.show(this, R.style.SplashScreenTheme);
    super.onCreate(savedInstanceState);
}

Once you do this, then the library will detect SplashScreen.show(this, R.style.SplashScreenTheme); successfully next time so you won't ever have to manually do this again.

Sharp module issue when verifying installed packages

Something went wrong installing the "sharp" module

Module did not self-register: '/xxxx/node_modules/sharp/build/Release/sharp.node'.

• Remove the "node_modules/sharp" directory, run "npm install" and look for errors
• Consult the installation documentation at https://sharp.pixelplumbing.com/en/stable/install/
• Search for this error at https://github.com/lovell/sharp/issues

Package @bam.tech/react-native-make has been ignored because it contains invalid configuration

Hello,

Context :
Platform : MacOS

$react-native -v
react-native-cli: 2.0.1
react-native: 0.60.4

I get this error when i run the following command :

react-native set-splash --path src/assets/logo.png --background "#f9f4f0" --resize center

warn Package @bam.tech/react-native-make has been ignored because it contains invalid configuration. Reason: Cannot find module '/Users/mcoeur/Documents/Dev/MyApp/node_modules/@react-native-community/cli/package.json'
Require stack:
- /Users/mcoeur/Documents/Dev/MyApp/node_modules/@bam.tech/react-native-make/dist/rn-plugin.config.js
- /Users/mcoeur/Documents/Dev/MyApp/node_modules/@bam.tech/react-native-make/react-native.config.js
- /Users/mcoeur/Documents/Dev/MyApp/node_modules/import-fresh/index.js- /Users/mcoeur/Documents/Dev/MyApp/node_modules/cosmiconfig/dist/loaders.js
- /Users/mcoeur/Documents/Dev/MyApp/node_modules/cosmiconfig/dist/createExplorer.js
- /Users/mcoeur/Documents/Dev/MyApp/node_modules/cosmiconfig/dist/index.js
- /Users/mcoeur/Documents/Dev/MyApp/node_modules/react-native/node_modules/@react-native-community/cli/build/tools/config/readConfigFromDisk.js
- /Users/mcoeur/Documents/Dev/MyApp/node_modules/react-native/node_modules/@react-native-community/cli/build/tools/config/index.js
- /Users/mcoeur/Documents/Dev/MyApp/node_modules/react-native/node_modules/@react-native-community/cli/build/commands/install/install.js
- /Users/mcoeur/Documents/Dev/MyApp/node_modules/react-native/node_modules/@react-native-community/cli/build/commands/index.js
- /Users/mcoeur/Documents/Dev/MyApp/node_modules/react-native/node_modules/@react-native-community/cli/build/cliEntry.js
- /Users/mcoeur/Documents/Dev/MyApp/node_modules/react-native/node_modules/@react-native-community/cli/build/index.js
- /Users/mcoeur/Documents/Dev/MyApp/node_modules/react-native/cli.js
- /Users/mcoeur/.nvm/versions/node/v12.8.0/lib/node_modules/react-native-cli/index.js
error Unrecognized command "set-splash".
info Run "react-native --help" to see a list of all available commands.

I followed this blog post to install everything : https://blog.bam.tech/developper-news/set-up-your-react-native-splash-screen-in-15-minutes

What did I miss ?

can't install react-native-make

Hello!!

npm install --save-dev @bam.tech/react-native-make

then

Installation fails and an error appears.

The splat operator '@' cannot be used to reference a variable in an expression. '@bam' can only be used as a command argument. Use '$ bam' to reference a variable in an expression.

how can i do?

Splash screen not showing on iOS

I only get a black screen on ios.
If you adjust the x3 image size to 2400, it works normally.

error Android project not found.

When I used this package, my main AndroidManifest.xml was modified and the opening <Application> tag was deleted so I kept on getting the following error on $npx react-native run-android:

error Android project not found. Are you sure this is a React Native project? If your Android files are located in a non-standard location (e.g. not inside 'android' folder), consider setting 'project.android.sourceDir' option to point to a new location. Run CLI with --verbose flag for more details.

I tried $npx react-native upgrade as a suggested solution and it too failed with the following error:

error Unexpected close tag
Line: 30
Column: 16
Char: >. Run CLI with --verbose flag for more details.
Error: Unexpected close tag
Line: 30
Column: 16
Char: >
    at error (/.../node_modules/sax/lib/sax.js:651:10)
    at strictFail (/.../node_modules/sax/lib/sax.js:677:7)

I had to revert using git to fix the lost <application...> tag.

react-native: ~0.63.4,
react-native-make: 3.0.3

Thank you.

How can I set notification icon?

Is there a way to set notification icon with this package?

Android splash is skewed to the left

My splash screen worked ok on iphone, ipad, android but with Resolution 2200 x 2480 it was skewed left. Can anyone help me with a solution?

Recent Apps Icon not changed in iOS

First of all, awesome tool, and I'm coming from the deprecated toolbox too. But I did notice this time around that the recent Apps Icon didn't get changed on iOS, but it did for Android... top left corner. Anything different that needs to be done for that one?

SplashScreen does not take up the screen size on a Ipad

Hello,

I just installed version 3.0.0 of @bam.tech/react-native-make

When I run the following command, my image does not take all the screen on an ipad :

react-native set-splash --platform ios --resize cover --path

Android how to auto generate ic_forground and ic_round?

I run command set icon on android, it genarate ic_launcher, but it not auto genarate ic_launcher_foreground, and ic_launcher_round in mimap like manual create adaptive icon by Android studio.
Did i do anything wrong? Thank you.

[Improvement]: Support small-sized logo splashes and adaptive icon background images

Hello,

first of all thank you for providing this generator, i don't think there is another comparable tool out there!

I have two issues, which i think could be improved:

1. Support logo splashes: The problem is currently i have to specify a 3000x3000 image with set-splash --resize=center with a small logo in the center and huge outer area of transparent pixels to achieve the wanted result of displaying just a small logo in the center (or i did something wrong).

2. Support adaptive icon background images: It would be nice to provide a background image to the set-icon generator to generate more sophisticated adaptive icons (e.g. gradient background / foreground with shadow)

Thanks!
Sebastian

Android Adaptive Icons Are Incorrect

When trying to use the tool to generate icons, the adaptive Android icons don't look right. See the screenshot below, app in question is "Long Hollow". You can see in the app drawer, the icon looks very bad.

Upgrade Sharop to 0.28.0 for compatibility fixes on M1 processors

It doesn't work on the new M1 Apple processors. Throws up this error:

npm ERR! ../src/common.cc:25:10: fatal error: 'vips/vips8' file not found
npm ERR! #include <vips/vips8>
npm ERR!          ^~~~~~~~~~~~
npm ERR! 1 error generated.
npm ERR! make: *** [Release/obj.target/sharp/src/common.o] Error 1
npm ERR! gyp ERR! build error
npm ERR! gyp ERR! stack Error: `make` failed with exit code: 2

It can be fixed by updating to 0.28.0 as seen here: lovell/sharp#2460 (comment)

Generated android icons are not sharp?

I've created an image icon, with a size of 1024x1024. As logo there is only one A letter. This letter is around 60% of an icon space. The problem is, that this icon looks like "upscaled" from smaller size on my Xiaomi MI 9T Pro. Asked frineds for check on different android devices, all say same, they are definitely not sharp. I've checked different images, sizes up to 4096x4096, all looks same.

As proof, here are both, screenshot and icon file.

Anything i'm doing wrong?!