score:2
i ended up changing the folder structure as stated in @diegopartes answer.
in addition, i wanted to achieve the effect of being able to import from the shared folder using absolute paths from both my web and mobile directories.
for this i did the following:
web
i moved my webpack.config.js
to the root folder of the app. inside webpack.config.js i have the following configuration the allows me to import files using absolute paths:
const path = require('path');
const sharedpath = path.join(__dirname, 'shared');
const config = {
...
resolve: {
root: [sharedpath],
},
...
}
now my shared folder acts as a root folder. meaning, if i have
- shared
-- reducers
-- actions
--- todos.js
i can do an import { addtodo } from 'actions/todos'
mobile
here i went by this post which basically says:
whichever folder you want to be able to import as root from, add a package.json
file with { "name": "folder_name" }
. so for to achieve the same import as in the web app:
- shared
-- reducers
-- actions
--- todos.js
--- package.json
where the package.json
contents is:
{
"name": "actions"
}
now i can do the same import as i did in the web app from my mobile app files.
edit
regarding node_modules
, i use the same package.json
for both web and mobile. in my webpack.config
i have an array of all react native packages an these are excluded from my vendor bundle file.
score:1
did you consider to hoist node_modules?
moreover you can use lerna to achieve what you want instead of self-written solution.
score:2
to share code between web and native you should change how you are structuring your folders.
first start with a new project react-native init myproject
this will create the default structure for rn apps.
myproject
|
+-- android
+-- ios
+-- index.android.js
+-- index.ios.js
...
now create specific folders for web and shared code.
myproject
|
+-- android
+-- ios
+-- index.android.js
+-- index.ios.js
+-- web
+-- shared
----|------ index.js
...
shared/index.js
function hi() {
return 'hi';
}
module.exports = {
hi: hi
};
index.ios.js
import { hi } from './shared/';
Source: stackoverflow.com
Related Query
- Importing from shared folder from react native
- React Native app created with init not working if i moved from one folder to other
- "Error: Invalid hook call." when importing React component from shared component library in monorepo (turborepo & npm workspaces)
- Importing all files from a folder in react
- React JS styled-components importing images from public folder
- Error Running React Native App From Terminal (iOS)
- Render Content Dynamically from an array map function in React Native
- React Native - How to open route from push notification
- React-Native: How to open google play store from react native app?
- Clone and run react native projects from GitHub
- Equivalent of FlatList from React Native in React
- What's the difference between importing React's Fragment from React and React, { Fragment }?
- Calling a Android Native UI component method from React native Js code
- Unload / Release / Remove React Native View from runtime
- Remove expo from react native
- Paste from clipboard not working with React Native on iOS simulator
- Add style from props to existing component styles in React Native
- Assets destination folder is not set Skipping react native (Images not loading in the APK)
- React Native Project Running from Xcode but not from command line
- Serve files from `.well-known` folder in a React app
- React Native ListView TextInput locks up from performance optimization rendering
- Render React Native Elements from JSON
- React Native app works when run from Xcode, but crashes when run with 'react-native run-ios'
- Importing data from excel and displaying in a react component
- Detect button click from WebView in React Native
- Redirect to screen from an api interceptor (outside of component) in React Native
- How to use React Native Animate to change view flex from 0 to 1
- how can i access current location from web-page in react native webview
- React Native - NavigationActions.navigate() not navigating from within redux
- React Importing a component folder
More Query from same tag
- Need help implementing react-hook-form with Gatsby.js: form won't even post values to console
- Jest + SCSS @import issue (css modules)
- New using React: TypeError: Cannot read property 'map' of undefined
- BottomNavigation in MUI cannot resize smaller than 400px if containing 5 items
- How to render a page full of special charachters without escaping every single one
- POST request responds with 404 while GET request works fine .NET Core, React
- Material-UI v5 not working styled-components and typescript?
- How to start playing video by clicking on it without controls using React?
- Modify component specific state ( not registered on redux store ) inside a saga
- ion-slides - dynamic amount of slides
- How to set React state from localStorage?
- Chaining Redux actions
- How to write the complicated rendering loop in React?
- Jest test doesnt wait for a saga to end
- React Private Route redirects before firebase user is loaded
- Why does my store.getState(); is undefined ? (react/redux)
- How can I have multiple states in useState hook
- Make localStorage retain its content on page refresh in React
- Node/React/Redux: having problems passing api JSON object between Node and React
- How does React make props read only?
- How to get text inside Text component onPress in react-native
- How to build bundle-stats.json in create react app?
- Uncaught (in promise) Error: unable to fetch stream ${err} in react- laravel
- How to get event props in React component with rest operator?
- TypeError: books.map is not a function in react
- How to use NextJS redirects for case insensitive routes?
- React - How do I display the first value of an array as the default value in a select form?
- How to handle React Router with Node Express routing
- How to set data property for MenuItems in ExtReact?
- How do I properly set types for higher-order class components in TypeScript?