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

[vonovak]

This is a continuation of https://github.com/react-native-community/cli/issues/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

https://github.com/react-native-community/cli/blob/c4b49b46909a58329ce1a7d3c07bd9327bd48ee7/packages/platform-android/native_modules.gradle#L225

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: https://github.com/react-native-community/datetimepicker/pull/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!

[github-actions[bot]]

There hasn't been any activity on this issue in the past 3 months, so it has been marked as stale and it will be closed automatically if no further activity occurs in the next 7 days.

[agamswaroop619]

Hey I was interested in solving this issue, would you please help me with understanding the list of this issue. Would be of much help!