document autolinking setup for libraries with example app but no yarn workspaces

[vonovak]

This is a continuation of #1100. While I'm able to build the react-native-community/datetimepicker example project, autolinking of native modules does not work on android (didn't try ios yet) 😩

EDIT: I'm not sure if it's because of custom project.android.sourceDir, might be unrelated

It's possible I'm doing something wrong (configuring the cli wrong). Using RN 0.62.2 and cli 4.8.0. My react-native-config.js

const root = process.cwd();

module.exports = {
 dependencies: {
 datetimepicker: {
 root,
 },
 },
 project: {
 android: {
 sourceDir: './example/android',
 },
 },
};

why autolinking does not work? It's because the datetimepicker dependency of the example project is not found by

cli/packages/platform-android/native_modules.gradle

Line 225 in c4b49b4

def reactNativeConfigOutput = this.getCommandOutput(reactNativeConfigCommand, this.root)

it's because the output of react-native config is different based on where it's executed from:

running `react-native config` from repo root

vojta@Vojta-MacBook-Pro datetimepicker (fix/ios-module-rn-62)*$ pwd
/Users/vojta/dev/_own/datetimepicker
vojta@Vojta-MacBook-Pro datetimepicker (fix/ios-module-rn-62)*$ node -e "console.log(require('react-native/cli').bin);"
/Users/vojta/dev/_own/datetimepicker/node_modules/@react-native-community/cli/build/bin.js
vojta@Vojta-MacBook-Pro datetimepicker (fix/ios-module-rn-62)*$ /Users/vojta/dev/_own/datetimepicker/node_modules/@react-native-community/cli/build/bin.js config
{
 "root": "/Users/vojta/dev/_own/datetimepicker",
 "reactNativePath": "/Users/vojta/dev/_own/datetimepicker/node_modules/react-native",
 "dependencies": {
 "datetimepicker": {
 "root": "/Users/vojta/dev/_own/datetimepicker",
 "name": "datetimepicker",
 "platforms": {
 "ios": {
 "sourceDir": "/Users/vojta/dev/_own/datetimepicker/ios",
 "folder": "/Users/vojta/dev/_own/datetimepicker",
 "pbxprojPath": "/Users/vojta/dev/_own/datetimepicker/ios/RNDateTimePicker.xcodeproj/project.pbxproj",
 "podfile": null,
 "podspecPath": "/Users/vojta/dev/_own/datetimepicker/RNDateTimePicker.podspec",
 "projectPath": "/Users/vojta/dev/_own/datetimepicker/ios/RNDateTimePicker.xcodeproj",
 "projectName": "RNDateTimePicker.xcodeproj",
 "libraryFolder": "Libraries",
 "sharedLibraries": [],
 "plist": [],
 "scriptPhases": []
 },
 "android": {
 "sourceDir": "/Users/vojta/dev/_own/datetimepicker/android",
 "folder": "/Users/vojta/dev/_own/datetimepicker",
 "packageImportPath": "import com.reactcommunity.rndatetimepicker.RNDateTimePickerPackage;",
 "packageInstance": "new RNDateTimePickerPackage()"
 }
 },
 "assets": [],
 "hooks": {},
 "params": []
 }
 },
 "commands": [
 ...
 ],
 "options": [
 ...
 ]
 },
 {
 "name": "log-android",
 "description": "starts logkitty"
 },
 {
 "name": "run-android",
 "description": "builds your app and starts it on a connected Android emulator or device",
 "options": [
 ...
 ]
 }
 ],
 "assets": [],
 "platforms": {
 "ios": {},
 "android": {}
 },
 "project": {
 "ios": {
 "sourceDir": "/Users/vojta/dev/_own/datetimepicker/ios",
 "folder": "/Users/vojta/dev/_own/datetimepicker",
 "pbxprojPath": "/Users/vojta/dev/_own/datetimepicker/ios/RNDateTimePicker.xcodeproj/project.pbxproj",
 "podfile": null,
 "podspecPath": "/Users/vojta/dev/_own/datetimepicker/RNDateTimePicker.podspec",
 "projectPath": "/Users/vojta/dev/_own/datetimepicker/ios/RNDateTimePicker.xcodeproj",
 "projectName": "RNDateTimePicker.xcodeproj",
 "libraryFolder": "Libraries",
 "sharedLibraries": [],
 "plist": [],
 "scriptPhases": []
 },
 "android": {
 "sourceDir": "/Users/vojta/dev/_own/datetimepicker/example/android",
 "isFlat": true,
 "folder": "/Users/vojta/dev/_own/datetimepicker",
 "stringsPath": "/Users/vojta/dev/_own/datetimepicker/example/android/app/src/main/res/values/strings.xml",
 "manifestPath": "/Users/vojta/dev/_own/datetimepicker/example/android/app/src/main/AndroidManifest.xml",
 "buildGradlePath": "/Users/vojta/dev/_own/datetimepicker/example/android/build.gradle",
 "settingsGradlePath": "/Users/vojta/dev/_own/datetimepicker/example/android/settings.gradle",
 "assetsPath": "/Users/vojta/dev/_own/datetimepicker/example/android/app/src/main/assets",
 "mainFilePath": "/Users/vojta/dev/_own/datetimepicker/example/android/app/src/main/java/com/example/MainApplication.java",
 "packageName": "com.example",
 "packageFolder": "com/example",
 "appName": "app"
 }
 }
}

running `react-native config` from /example

vojta@Vojta-MacBook-Pro android (fix/ios-module-rn-62)*$ pwd
/Users/vojta/dev/_own/datetimepicker/example/android
vojta@Vojta-MacBook-Pro android (fix/ios-module-rn-62)*$ node -e "console.log(require('react-native/cli').bin);"
/Users/vojta/dev/_own/datetimepicker/node_modules/@react-native-community/cli/build/bin.js
vojta@Vojta-MacBook-Pro android (fix/ios-module-rn-62)*$ /Users/vojta/dev/_own/datetimepicker/node_modules/@react-native-community/cli/build/bin.js config
{
 "root": "/Users/vojta/dev/_own/datetimepicker",
 "reactNativePath": "/Users/vojta/dev/_own/datetimepicker/node_modules/react-native",
 "dependencies": {},
 "commands": [
 {
 "name": "log-ios",
 "description": "starts iOS device syslog tail"
 },
 {
 "name": "run-ios",
 "description": "builds your app and starts it on iOS simulator",
 "examples": [
 ...
 ],
 "options": [
 ...
 ]
 },
 {
 "name": "log-android",
 "description": "starts logkitty"
 },
 {
 "name": "run-android",
 "description": "builds your app and starts it on a connected Android emulator or device",
 "options": [
 ...
 ]
 }
 ],
 "assets": [],
 "platforms": {
 "ios": {},
 "android": {}
 },
 "project": {
 "ios": {
 "sourceDir": "/Users/vojta/dev/_own/datetimepicker/ios",
 "folder": "/Users/vojta/dev/_own/datetimepicker",
 "pbxprojPath": "/Users/vojta/dev/_own/datetimepicker/ios/RNDateTimePicker.xcodeproj/project.pbxproj",
 "podfile": null,
 "podspecPath": "/Users/vojta/dev/_own/datetimepicker/RNDateTimePicker.podspec",
 "projectPath": "/Users/vojta/dev/_own/datetimepicker/ios/RNDateTimePicker.xcodeproj",
 "projectName": "RNDateTimePicker.xcodeproj",
 "libraryFolder": "Libraries",
 "sharedLibraries": [],
 "plist": [],
 "scriptPhases": []
 },
 "android": {
 "sourceDir": "/Users/vojta/dev/_own/datetimepicker/example/android",
 "isFlat": true,
 "folder": "/Users/vojta/dev/_own/datetimepicker",
 "stringsPath": "/Users/vojta/dev/_own/datetimepicker/example/android/app/src/main/res/values/strings.xml",
 "manifestPath": "/Users/vojta/dev/_own/datetimepicker/example/android/app/src/main/AndroidManifest.xml",
 "buildGradlePath": "/Users/vojta/dev/_own/datetimepicker/example/android/build.gradle",
 "settingsGradlePath": "/Users/vojta/dev/_own/datetimepicker/example/android/settings.gradle",
 "assetsPath": "/Users/vojta/dev/_own/datetimepicker/example/android/app/src/main/assets",
 "mainFilePath": "/Users/vojta/dev/_own/datetimepicker/example/android/app/src/main/java/com/example/MainApplication.java",
 "packageName": "com.example",
 "packageFolder": "com/example",
 "appName": "app"
 }
 }
}

At this point, I'm not sure if this is a bug or a feature. 😄 How do I make this work? What is the right way to link a library with its example project? Thank you!

[thymikee]

Left a comment under the PR. The library is expected to have example/package.json, like a normal app would do. Actually, you likely not need the custom config at all. All you need to do is to run the example from the example/ directory, again, like you would do for a normal app.

Check how slider does it: https://github.com/react-native-community/react-native-slider

[thymikee]

Closing, we can discuss details in the PR: react-native-datetimepicker/datetimepicker#146

[thymikee]

Let's reopen this and think about what's wrong here, as this setup should work as well. The conifg command should output the same, regardless the directory its ran from, unless there's some extra package.json, which doesn't seem to be the case here.

It would still be best to examine the mentioned PR do see what's wrong.

cc @grabbou

[vonovak]

The config command should output the same, regardless the directory its ran from

hmm, now I see that I'm using process.cwd() in the config file 😆If I change root to absolute path it works. But how to get around it? Should CLI ensure where the config script is executed from?

[thymikee]

You probably want to set root to __dirname.

[vonovak]

right! Thanks. Works for me, I'm happy now. Feel free to close this if you want.

[thymikee]

Great. It would be lovely to document this better. I'll rephrase the issue and leave it open so we don't forget. Thanks for the cooperation!