Comments (6)
Hey @AlexUzan ,
this is how your package.json should look like:
{
"name": "Package Name",
"version": "0.0.1",
"private": true,
"scripts": {
"start": "react-native start",
"test": "jest",
"lint": "eslint ."
},
"dependencies": {
...
// Following paths should be relative to your project directory
"stream-chat-react-native": "link:../stream-chat-react-native/native-package",
"stream-chat-react-native-core": "link:../stream-chat-react-native"
},
"devDependencies": {
...
},
}
Also you will need to blacklist the node_modules directories of stream-chat-react-native
folder via metro config to avoid conflict. Here is the metro.config.js file that I have. you will see blacklisted directories on lines 141-146 in following snippet,
/* eslint-env node */
function resolvePath(...parts) {
const thisPath = PATH.resolve.apply(PATH, parts);
if (!FS.existsSync(thisPath)) return;
return FS.realpathSync(thisPath);
}
function isExternalModule(modulePath) {
return modulePath.substring(0, __dirname.length) !== __dirname;
}
function listDirectories(rootPath, cb) {
FS.readdirSync(rootPath).forEach(fileName => {
if (fileName.charAt(0) === '.') return;
let fullFileName = PATH.join(rootPath, fileName),
stats = FS.lstatSync(fullFileName),
symbolic = false;
if (stats.isSymbolicLink()) {
fullFileName = resolvePath(fullFileName);
if (!fullFileName) return;
stats = FS.lstatSync(fullFileName);
symbolic = true;
}
if (!stats.isDirectory()) return;
const external = isExternalModule(fullFileName);
cb({rootPath, symbolic, external, fullFileName, fileName});
});
}
function buildFullModuleMap(
moduleRoot,
mainModuleMap,
externalModuleMap,
_alreadyVisited,
_prefix,
) {
if (!moduleRoot) return;
const alreadyVisited = _alreadyVisited || {},
prefix = _prefix;
if (alreadyVisited && alreadyVisited.hasOwnProperty(moduleRoot)) return;
alreadyVisited[moduleRoot] = true;
listDirectories(
moduleRoot,
({fileName, fullFileName, symbolic, external}) => {
if (symbolic)
return buildFullModuleMap(
resolvePath(fullFileName, 'node_modules'),
mainModuleMap,
externalModuleMap,
alreadyVisited,
);
const moduleMap = external ? externalModuleMap : mainModuleMap,
moduleName = prefix ? PATH.join(prefix, fileName) : fileName;
if (fileName.charAt(0) !== '@') moduleMap[moduleName] = fullFileName;
else
return buildFullModuleMap(
fullFileName,
mainModuleMap,
externalModuleMap,
alreadyVisited,
fileName,
);
},
);
}
function buildModuleResolutionMap() {
const moduleMap = {},
externalModuleMap = {};
buildFullModuleMap(baseModulePath, moduleMap, externalModuleMap);
// Root project modules take precedence over external modules
return Object.assign({}, externalModuleMap, moduleMap);
}
function findAlernateRoots(
moduleRoot = baseModulePath,
alternateRoots = [],
_alreadyVisited,
) {
const alreadyVisited = _alreadyVisited || {};
if (alreadyVisited && alreadyVisited.hasOwnProperty(moduleRoot)) return;
alreadyVisited[moduleRoot] = true;
listDirectories(moduleRoot, ({fullFileName, fileName, external}) => {
if (fileName.charAt(0) !== '@') {
if (external) alternateRoots.push(fullFileName);
} else {
findAlernateRoots(fullFileName, alternateRoots, alreadyVisited);
}
});
return alternateRoots;
}
function getPolyfillHelper() {
let getPolyfills;
// Get default react-native polyfills
try {
getPolyfills = require('react-native/rn-get-polyfills');
} catch (e) {
getPolyfills = () => [];
}
// See if project has custom polyfills, if so, include the PATH to them
try {
const customPolyfills = require.resolve('./polyfills.js');
getPolyfills = (function(originalGetPolyfills) {
return () => originalGetPolyfills().concat(customPolyfills);
})(getPolyfills);
} catch (e) {
//ignore
}
return getPolyfills;
}
const PATH = require('path');
const FS = require('fs'),
blacklist = require('metro-config/src/defaults/blacklist');
const repoDir = PATH.dirname(PATH.dirname(__dirname));
const moduleBlacklist = [
new RegExp(repoDir + '/projects/stream-chat-react-native/examples/NativeMessaging/.*'),
new RegExp(repoDir + '/projects/stream-chat-react-native/examples/ExpoMessaging/.*'),
new RegExp(repoDir + '/projects/stream-chat-react-native/native-package/node_modules/.*'),
new RegExp(repoDir + '/projects/stream-chat-react-native/expo-package/.*'),
new RegExp(repoDir + '/projects/stream-chat-react-native/node_modules/.*'),
],
baseModulePath = resolvePath(__dirname, 'node_modules'),
// watch alternate roots (outside of project root)
alternateRoots = findAlernateRoots(),
// build full module map for proper
// resolution of modules in external roots
extraNodeModules = buildModuleResolutionMap();
module.exports = {
resolver: {
blacklistRE: blacklist(moduleBlacklist),
extraNodeModules,
useWatchman: false,
},
watchFolders: [PATH.resolve(__dirname)].concat(alternateRoots),
// transformer: {
// babelTransformerPath: require.resolve('./compiler/transformer'),
// },
serializer: {
getPolyfills: getPolyfillHelper(),
},
};
Hope that helps :)
from stream-chat-react-native.
Hi @vishalnarkhede, thank you for your help !
I am having trouble installing the dependencies from a github repo the way you suggested:
"stream-chat-react-native": "https://github.com/MyFork/stream-chat-react-native:../stream-chat-react-native/native-package",
"stream-chat-react-native-core": "https://github.com/MyFork/stream-chat-react-native:../stream-chat-react-native"
Above is what I have right now in my package.json, but yarn does not find it (404 error). From my understanding neither yarn nor npm support linking subdirectories of github repos as dependencies (yarnpkg/yarn#4725).
How do you do it ? Do you have some kind of workaround ?
I found a useful tool allowing to publish packages to github repos the same way you would for npm so I might try this: https://github.com/ramasilveyra/gitpkg
from stream-chat-react-native.
Hey @AlexUzan , for me, I just have clone of these repos on my local machine. So I use them as following for development.
"dependencies": {
...
// Following paths should be relative to your project directory
"stream-chat-react-native": "link:../stream-chat-react-native/native-package",
"stream-chat-react-native-core": "link:../stream-chat-react-native"
},
And for sample apps, I replace them with their corresponding npm packages
"dependencies": {
"stream-chat-react-native": "^0.3.9",
// don't need to include `stream-chat-react-native-core`, since its already dependency of `stream-chat-react-native`
},
from stream-chat-react-native.
@AlexUzan Can you give me an update if gitpkg
tool worked for you?
from stream-chat-react-native.
@vishalnarkhede Yes, gitpkg
has been working great for production builds, thank you for your help !
from stream-chat-react-native.
Thanks really great to hear @AlexUzan :)
Closing this issue now!!
from stream-chat-react-native.
Related Issues (20)
- [🐛] Offline Mode Unread Count Out of Sync HOT 4
- [🐛] Unable to resolve PermissionsAndroid
- [🐛] Reply count is not updated after coming back from a Thread screen HOT 14
- [🐛] Thread messages have gone when a user start typing HOT 1
- [🐛] 🔥 Getting error and crashing while trying to upload a video. HOT 1
- [🐛] canceling giphy does not scroll messagelist to the last image HOT 1
- [🐛] Order of image picker images is incorrect HOT 3
- [🐛] The InputBox and SendButton goes wrong when users copy and paste multiple times in the textarea HOT 3
- [🐛] Unwanted channels are created with different multiple users HOT 6
- [🐛] Missing channelQueries table on fresh install HOT 2
- Allow for attaching custom attachments in message input
- [🐛] `EmptyStateIndicator` from `Channel` not hidden when new message is sent HOT 5
- [🐛] Export namespace should be first transformed by `@babel/plugin-transform-export-namespace-from`. HOT 3
- Customize background for MessageContent HOT 2
- [🐛] 🔥 Attachment picker sheet covers the entire chat when rendered inside a collapsed container HOT 4
- [🐛] Image upload in message input doesn't work on Android 14 (Pixel 5a) HOT 11
- Customise Chat Bubble for other user HOT 8
- Pasting images or files from clipboard into message input HOT 2
- [🐛] OverlayProvider is raising "Illegal invocation at Headers.has" on web when using Expo and Expo Router HOT 3
- [🐛] Unable to auth user due to "user_details is a required field" HOT 8
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from stream-chat-react-native.