[iOS] custom app naming best practice? ~breaking currently!

[julesmoretti]

Description

When creating a new project name and trying to set a custom app name, when trying to deploy it on my phone or through simulator I get test errors.

Reproduction Steps and Sample Code

These are the steps so far where I get hic ups:

react-native init secretInHouseProjectName
cd secretInHouseProjectName

create a directory called src with an index.js file with the following:

import React, { Component } from 'react';
import {
  StyleSheet,
  Text,
  View
} from 'react-native';

export default class App extends Component {
  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.welcome}>
          Welcome to React Native!
        </Text>
        <Text style={styles.instructions}>
          To get started, edit index.android.js
        </Text>
        <Text style={styles.instructions}>
          Double tap R on your keyboard to reload,{'\n'}
          Shake or press menu button for dev menu
        </Text>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  },
  instructions: {
    textAlign: 'center',
    color: '#333333',
    marginBottom: 5,
  },
});

Edited:
app.json

{
  "name": "unique.public.app",
  "displayName": "unique.public.app"
}

index.ios.js and index.android.js

import { AppRegistry } from 'react-native';
import App from "./src/";
AppRegistry.registerComponent('unique.public.app', () => App);

package.json
"name": "unique.public.app",

Deleted the following:
/ios
/android
/node_modules

npm i
react-native upgrade
react-native run-ios

At this point the app loads on the simulator but I get BUILD FAILED

  ^~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
In module 'XCTest' imported from /Users/jmoretti/Git/test/secretInHouseProjectName/ios/unique.public.appTests/unique.public.appTests.m:11:
/Applications/Xcode.app/Contents/Developer/Platforms/iPhoneSimulator.platform/Developer/Library/Frameworks/XCTest.framework/Headers/XCTestAssertions.h:76:29: note: expanded from macro 'XCTAssertTrue'
    _XCTPrimitiveAssertTrue(self, expression, @#expression, __VA_ARGS__)
                            ^~~~
In module 'XCTest' imported from /Users/jmoretti/Git/test/secretInHouseProjectName/ios/unique.public.appTests/unique.public.appTests.m:11:
/Applications/Xcode.app/Contents/Developer/Platforms/iPhoneSimulator.platform/Developer/Library/Frameworks/XCTest.framework/Headers/XCTestAssertionsImpl.h:147:39: note: expanded from macro '_XCTPrimitiveAssertTrue'
        _XCTRegisterUnexpectedFailure(test, _XCTFailureDescription(_XCTAssertion_True, 1, expressionStr, [exception reason]), __VA_ARGS__); \
                                      ^~~~
/Applications/Xcode.app/Contents/Developer/Platforms/iPhoneSimulator.platform/Developer/Library/Frameworks/XCTest.framework/Headers/XCTestAssertionsImpl.h:51:20: note: expanded from macro '_XCTRegisterUnexpectedFailure'
_XCTFailureHandler(test, NO, __FILE__, __LINE__, condition, @"" __VA_ARGS__); \
                   ^~~~
/Applications/Xcode.app/Contents/Developer/Platforms/iPhoneSimulator.platform/Developer/Library/Frameworks/XCTest.framework/Headers/XCTestAssertionsImpl.h:40:48: note: passing argument to parameter 'test' here
XCT_EXPORT void _XCTFailureHandler(XCTestCase *test, BOOL expected, const char *filePath, NSUInteger lineNumber, NSString *condition, NSString * __nullable format, ...) NS_FORMAT_FUNCTION(6,7);
                                               ^
/Users/jmoretti/Git/test/secretInHouseProjectName/ios/unique.public.appTests/unique.public.appTests.m:66:3: warning: incompatible pointer types passing 'unique *' to parameter of type 'XCTestCase * _Nonnull' [-Wincompatible-pointer-types]
  XCTAssertTrue(foundElement, @"Couldn't find element with text '%@' in %d seconds", TEXT_TO_LOOK_FOR, TIMEOUT_SECONDS);
  ^~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
In module 'XCTest' imported from /Users/jmoretti/Git/test/secretInHouseProjectName/ios/unique.public.appTests/unique.public.appTests.m:11:
/Applications/Xcode.app/Contents/Developer/Platforms/iPhoneSimulator.platform/Developer/Library/Frameworks/XCTest.framework/Headers/XCTestAssertions.h:76:29: note: expanded from macro 'XCTAssertTrue'
    _XCTPrimitiveAssertTrue(self, expression, @#expression, __VA_ARGS__)
                            ^~~~
In module 'XCTest' imported from /Users/jmoretti/Git/test/secretInHouseProjectName/ios/unique.public.appTests/unique.public.appTests.m:11:
/Applications/Xcode.app/Contents/Developer/Platforms/iPhoneSimulator.platform/Developer/Library/Frameworks/XCTest.framework/Headers/XCTestAssertionsImpl.h:150:39: note: expanded from macro '_XCTPrimitiveAssertTrue'
        _XCTRegisterUnexpectedFailure(test, _XCTFailureDescription(_XCTAssertion_True, 2, expressionStr), __VA_ARGS__); \
                                      ^~~~
/Applications/Xcode.app/Contents/Developer/Platforms/iPhoneSimulator.platform/Developer/Library/Frameworks/XCTest.framework/Headers/XCTestAssertionsImpl.h:51:20: note: expanded from macro '_XCTRegisterUnexpectedFailure'
_XCTFailureHandler(test, NO, __FILE__, __LINE__, condition, @"" __VA_ARGS__); \
                   ^~~~
/Applications/Xcode.app/Contents/Developer/Platforms/iPhoneSimulator.platform/Developer/Library/Frameworks/XCTest.framework/Headers/XCTestAssertionsImpl.h:40:48: note: passing argument to parameter 'test' here
XCT_EXPORT void _XCTFailureHandler(XCTestCase *test, BOOL expected, const char *filePath, NSUInteger lineNumber, NSString *condition, NSString * __nullable format, ...) NS_FORMAT_FUNCTION(6,7);
                                               ^
/Users/jmoretti/Git/test/secretInHouseProjectName/ios/unique.public.appTests/unique.public.appTests.m:19:12: error: class 'unique' defined without specifying a base class [-Werror,-Wobjc-root-class]
@interface unique.public.appTests : XCTestCase
           ^
/Users/jmoretti/Git/test/secretInHouseProjectName/ios/unique.public.appTests/unique.public.appTests.m:19:18: note: add a super class to fix this problem
@interface unique.public.appTests : XCTestCase
                 ^
                  : NSObject 
6 warnings and 3 errors generated.



** BUILD FAILED **


The following build commands failed:
	CompileC build/Build/Intermediates/unique.public.app.build/Debug-iphonesimulator/unique.public.appTests.build/Objects-normal/x86_64/unique.public.appTests.o unique.public.appTests/unique.public.appTests.m normal x86_64 objective-c com.apple.compilers.llvm.clang.1_0.compiler

(1 failure)

Installing build/Build/Products/Debug-iphonesimulator/unique.public.app.app
Launching org.reactjs.native.example.unique-public-app
org.reactjs.native.example.unique-public-app: 54029

Then trying to do the same but on my iPhone:
react-native run-ios --device 'iPhone custom name'

which fails because no team name assigned.

=== BUILD TARGET unique.public.app OF PROJECT unique.public.app WITH CONFIGURATION Debug ===


Check dependencies

Signing for "unique.public.app" requires a development team. Select a development team in the project editor.

Code signing is required for product type 'Application' in SDK 'iOS 10.3'



** BUILD FAILED **


The following build commands failed:

	Check dependencies
(1 failure)

Then open ios/unique.public.app.xcodeproj and assigned "signing" > "team" for both my unique.public.app and unique.public.appTests Targets and closed Xcode

back to terminal react-native run-ios --device 'iPhone custom name' which runs it on my iPhone as expected with errors:

/Applications/Xcode.app/Contents/Developer/Platforms/iPhoneOS.platform/Developer/Library/Frameworks/XCTest.framework/Headers/XCTestAssertionsImpl.h:51:20: note: expanded from macro '_XCTRegisterUnexpectedFailure'
_XCTFailureHandler(test, NO, __FILE__, __LINE__, condition, @"" __VA_ARGS__); \
                   ^~~~
/Applications/Xcode.app/Contents/Developer/Platforms/iPhoneOS.platform/Developer/Library/Frameworks/XCTest.framework/Headers/XCTestAssertionsImpl.h:40:48: note: passing argument to parameter 'test' here
XCT_EXPORT void _XCTFailureHandler(XCTestCase *test, BOOL expected, const char *filePath, NSUInteger lineNumber, NSString *condition, NSString * __nullable format, ...) NS_FORMAT_FUNCTION(6,7);
                                               ^
/Users/jmoretti/Git/test/secretInHouseProjectName/ios/unique.public.appTests/unique.public.appTests.m:19:12: error: class 'unique' defined without specifying a base class [-Werror,-Wobjc-root-class]
@interface unique.public.appTests : XCTestCase
           ^
/Users/jmoretti/Git/test/secretInHouseProjectName/ios/unique.public.appTests/unique.public.appTests.m:19:18: note: add a super class to fix this problem
@interface unique.public.appTests : XCTestCase
                 ^
                  : NSObject 
6 warnings and 3 errors generated.



** BUILD FAILED **


The following build commands failed:

	CompileC build/Build/Intermediates/unique.public.app.build/Debug-iphoneos/unique.public.appTests.build/Objects-normal/arm64/unique.public.appTests.o unique.public.appTests/unique.public.appTests.m normal arm64 objective-c com.apple.compilers.llvm.clang.1_0.compiler
(1 failure)

installing and launching your app on JM i7+...
** INSTALLATION SUCCEEDED **

And does not open the app.

Solution

Better documentation on how to custom name your app and which sections should be renamed.
Therefore how do I go about custom app naming properly?

Additional Information

• React Native version: "react-native": "0.43.1"
• Platform: iOS
• Development Operating System: MacOS 10.12.4
• Dev tools: Xcode 8.3

[migueloller]

react-native eject is still not documented, but as mentioned here, the name field should be in TitleCase. Moreover, here you can see that valid names must be alphanumeric (this is a limitation of iOS and Android projects).

You should be able to leave displayName the way you have it now, but name should be alphanumeric.

I wasn't able to find the official Android and iOS resources documenting the naming limitations. Maybe somebody else knows where to find those.

[julesmoretti]

@migueloller - Thank you very much this clarifies a lot of things.

So it now works within the simulator, but does not with the react-native run-ios --device 'iPhone custom name'

I have tried killing the Packager then watchman watch-del-all then again react-native run-ios --device 'iPhone custom name' but it does not open the app on my phone anymore despite getting ** BUILD SUCCEEDED **

Appart from that there is also one last detail I would love your advice on.

When it comes to the Bundle Identifier. In Xcode the result is: org.reactjs.native.example.uniqueInHouseAppName

So do I change the name within xcode or within the app Info.plist <string>org.reactjs.native.example.$(PRODUCT_NAME:rfc1034identifier)</string>?

And for both of those what are the naming best practices?
Can I create something entirely different? like yellow.submarine.234 or does it have to contain uniqueInHouseAppName?
How many sections can the naming support (one.two.three.four.five.six.seven)?
And within these, are there any restrictions to where the app name should be located?

For anyone else this is what I did so far:

package.json

{
  "name": "uniqueInHouseAppName",
...

App.json:

{
  "name": "uniqueInHouseAppName",
  "displayName": "uniquePublicAppName"
}

index.android.js & index.ios.js

...
AppRegistry.registerComponent('uniqueInHouseAppName', () => App);

Where the app can be any component.

[migueloller]

The app bundle ID in your Info.plist is what Apple uses to uniquely identify your app in their systems. This has to be unique across all apps. Usually this is written in reverse DNS format. For example, com.example.HelloWorldApp might be the bundle ID for a hello world app built by a company that owns the domain example.com.

A couple of things, though. This is simply a convention, it's not strictly enforced (although I'm sure there are limitations to the bundle ID string). You don't need to own the domain used in the reverse DNS notation, it's simply a utility to identify various projects within your namespace (you might have multiple apps you build all live under com.example). And to answer your question about the dots, to the best of my knowledge there is probably no limitation on the dots but perhaps there is on the length of the string (I don't know this limit).

I think that app.json will eventually support specifying the bundle ID, but for now it doesn't so you can update it directly in your Info.plist or through Xcode. Also, you don't have to keep org.reactjs.native.example placeholder.

Hope this helps!