lunatiquecoder / luna Goto Github PK
View Code? Open in Web Editor NEWLuna - a React Native + Next.js template. Built with TypeScript :heart:
Home Page: https://luna-gamma.vercel.app/
License: MIT License
Luna - a React Native + Next.js template. Built with TypeScript :heart:
Home Page: https://luna-gamma.vercel.app/
License: MIT License
Initializing the monorepo with tamagui via the "yarn create luna-app" command, would not stop loading tamagui.
I used tamagui and React Native and Expo before. I reinstalled my yarn tool and checked the artifacts. But it still would not stop initializing tamagui. It just loads that way without stopping:
terminal: yarn create luna-app
yarn create v1.22.19
[1/4] ๐ Resolving packages...
[2/4] ๐ Fetching packages...
[3/4] ๐ Linking dependencies...
[4/4] ๐จ Building fresh packages...
success Installed "[email protected]" with binaries:
- create-luna-app
โ What is the name of the app? ยท lunatestapp
โ Choose your CLI ยท Expo (Monorepo) - with create-tamagui
โ Creating your Tamagui (@tamagui/create-tamagui) app...
Iยดm using a macbook pro 2015 with vs code.
Thank you for your help.
Is your feature request related to a problem? Please describe.
React.FC has a few downsides and is not recommended to use it. For more information: facebook/create-react-app#8177
Describe the solution you'd like
Please remove all occurrences.
Coming soon
Describe the bug
The CLI tool yarn create luna-app
fails during the creation of a project with expo for RN
Node.js v18.13.0
error Command failed.
Exit code: 1
Command: /opt/homebrew/bin/create-expo-app
Arguments: my-luna-app --template @create-luna-app/expo@latest
Directory: /Users/jonsherrard/projects/solito-apps
Output:
at ChildProcess.exithandler (node:child_process:419:12)
at ChildProcess.emit (node:events:513:28)
at maybeClose (node:internal/child_process:1091:16)
at ChildProcess._handle.onexit (node:internal/child_process:302:5) {
code: 1,
killed: false,
signal: null,
cmd: 'yarn create expo-app my-luna-app --template @create-luna-app/expo@latest',
stdout: 'yarn create v1.22.19\n' +
'[1/4] Resolving packages...\n' +
'[2/4] Fetching packages...\n' +
'[3/4] Linking dependencies...\n' +
'[4/4] Building fresh packages...\n' +
'success Installed "[email protected]" with binaries:\n' +
' - create-expo-app\n' +
'info Visit https://yarnpkg.com/en/docs/cli/create for documentation about this command.\n',
stderr: 'โ Locating project files.โ Locating project files.โ น Locating project files.โ ธ Locating project files.โ ผ Locating project files.node:events:491\n' +
" throw er; // Unhandled 'error' event\n" +
' ^\n' +
'\n' +
"Error: ENOENT: no such file or directory, open '/var/folders/lv/hg_m8flx56z455spv6qfnx5h0000gn/T/.create-expo-app/template-cache/@create-luna-app/expo-3.0.3.tgz'\n" +
"Emitted 'error' event on ReadStream instance at:\n" +
' at emitErrorNT (node:internal/streams/destroy:151:8)\n' +
' at emitErrorCloseNT (node:internal/streams/destroy:116:3)\n' +
' at process.processTicksAndRejections (node:internal/process/task_queues:82:21) {\n' +
' errno: -2,\n' +
" code: 'ENOENT',\n" +
" syscall: 'open',\n" +
" path: '/var/folders/lv/hg_m8flx56z455spv6qfnx5h0000gn/T/.create-expo-app/template-cache/@create-luna-app/expo-3.0.3.tgz'\n" +
'}\n' +
'\n' +
'Node.js v18.13.0\n' +
'error Command failed.\n' +
'Exit code: 1\n' +
'Command: /opt/homebrew/bin/create-expo-app\n' +
'Arguments: my-luna-app --template @create-luna-app/expo@latest\n' +
'Directory: /Users/jonsherrard/projects/solito-apps\n' +
'Output:\n' +
'\n'
}
Describe the bug
Error: Unable to resolve module expo-modules-core from /Users/XXX/Projects/MyAppName/node_modules/burnt/build/BurntModule.ios.js: expo-modules-core could not be found within the project or in these directories:
To Reproduce
Steps to reproduce the behavior:
npx react-native init MyAppName --template @criszz77/luna
cd MyAppName
cd ios:pods
yarn ios
Expected behavior
While I research an issue, I found that discussion, which says that there a library specifically for pure react native.
What do you think about library? If you are not okay with that, than probably it would be better to install required expo-modules-core
Desktop:
Smartphone:
Is your feature request related to a problem? Please describe.
Currently, Luna is using react-app-rewired and customize-cra to configure webpack without ejecting, however those libraries seem unmaintained.
Describe the solution you'd like
Use CRACO instead.
When using native modules in react native, eg. Bluetooth (only for android & IOS)
Can I still develop the app most of the time on the web for speed?
and only when need to check the native module run on android?
Is your feature request related to a problem? Please describe.
There are new versions available for Luna's dependecies.
Describe the solution you'd like
Please update dependencies.
Describe the bug
Any version above 2.3.2 will get an error of webpack@5 here on this line of code: https://github.com/software-mansion/react-native-gesture-handler/blob/2.4.2/src/utils.ts#L1
I believe this would be the solution: https://stackoverflow.com/a/70333147/14056591
To Reproduce
npx react-native init MyAppName --template @criszz77/luna
yarn add react-native-gesture-handler
yarn web
Compiled with problems:X
ERROR in ./node_modules/react-native-gesture-handler/lib/module/utils.js 41:31-46
Should not import the named export 'version'.'split' (imported as 'rnVersion') from default-exporting module (only default export is available soon)
Expected behavior
Expected react-native-gesture-handler to work on the web with latest versions.
Describe the bug
I guess that Fast Refresh do not work well because of react-native-web should recompile react-native syntax to html etc.
But I don't understand why in between saving changes in project and reloading I can notice that my changes was recompiled and loaded by browser, but Fast Refresh anyways reloading page.
Could you recommend how to fix because I believe that ~70% Fast Refreshes could perform w/o reloadings? Or please explain why it is not possible or enough complicated to do.
To Reproduce
The behavior appears in original empty project.
Expected behavior
Less amount of reloadings.
Is your feature request related to a problem? Please describe.
microbrowsers (like google search, or the minibrowsers used to parse a site behind a URL used when sharing an app URL to social media) require a non-React site with proper OpenGraph tags
Right now, any app built on this template will be invisible to search engines and links to the app (even though they are well-formed / useful URLs #43 ) will have useless cards show up in social apps
Describe the solution you'd like
This...is hard.
Relevant reading:
I think making this template work correctly with server side rendering for those that want it is the best way to go, as it is the most flexible by far. However I may be misunderstanding either how difficult that is, or that pre-render is seperate/orthogonal as a solution and just as valid
Describe alternatives you've considered
My work projects right now use firebase dynamic links which at least provides something nice when users do social sharing, but it doesn't allow for truly link-specific content to show up as a nice shared card like when Open Graph tags are used really well
Additional context
I lost the link but there was an information article I read recently on the theme "You still need an HTML website" that talked about how unreliable network connections, small network connections, crap mobile devices etc all contribute to a small-percentage chance that users have a bad experience on your site. And then it argued that it is not a small percentage of your users, it is a small percentage of visits across all users, and that after some number of bad experiences a user leaves, and this affects your entire audience. It was fairly convincing, especially combined with the idea of SEO and microbrowsers needing non-javascript support when the app is delivered
Describe the bug
yarn add react-native-reanimated
.react-native-gesture-handler
installation documentation to use GestureHandlerRootView
, then the page is blank on the web.src/index.js
import 'react-native-gesture-handler';
...
App.tsx
import {GestureHandlerRootView} from 'react-native-gesture-handler';
...
const TabbedApp = () => {
return (
<SafeAreaProvider initialMetrics={initialWindowMetrics}>
<GestureHandlerRootView style={{flex: 1}}> // add
<NavigationContainer>
<TopTabNavigator />
</NavigationContainer>
</GestureHandlerRootView> // add
</SafeAreaProvider>
);
};
To Reproduce
Use default template
Expected behavior
These popular libraries should work fine on the web, no?
Describe the bug
yarn create luna-app
fails with the following error:
error Cannot create "/usr/local/bin/create-luna-app" due to insufficient permissions.
I then ran yarn config set prefix ~/.local
to tame the error, which makes yarn create luna-app
apparently succeed. The terminal shows:
success Installed "[email protected]" with binaries:
- create-luna-app
[#########...########] 113/113?
โ What is the name of the app? ยท mylunaapp
โ Choose your CLI ยท React Native
โ Installed!
But mylunaapp is nowhere to be found on the machine :-(
I'm already building react-native apps on this machine.
Am I missing something obvious?
Desktop (please complete the following information):
Is your feature request related to a problem? Please describe.
We are misusing typeRoots and they are not working properly anyway. Should be a breaking change with [email protected] according to microsoft/TypeScript#37708
Describe the solution you'd like
Simply remove typeRoots from tsconfig.json.
CRACO now supports Create React App 5 and it has some shiny new docs: https://craco.js.org/
Is your feature request related to a problem? Please describe.
I think every app needs a bootsplash. Nothing that slows app load down (that's a negative user experience) but it does take a moment for the bundle to load on web and mobile.
As an "every app needs it" problem (like react-navigation) with a solution that is singular in the community (react-native-bootsplash) I think it qualifies for adding it in even a basic template like here
Further, every app needs it but they all have different actual assets, so the names used should be generic if possible, and easy to regenerate asset catalogs for web/mobile from a command line tool (react-native-bootsplash provides one)
Describe the solution you'd like
Integrate react-native-bootsplash, using generic asset names, with help in that repo to land the web PR zoontek/react-native-bootsplash#278
Describe alternatives you've considered
Integrating react-native-bootsplash manually in all my apps built on this ๐ like I am doing now
But using v2 so I don't have Android12 support yet, and without the web PR yet so I also have custom web loading indicators
I keep remembering and forgetting this, and it is something I want to do for the react-native-firebase-authentication-example as well - but I should make (or anyone could :-), but I'll do it eventually) a .github/workflow that publishes the template to github pages so people may use it live
Describe the bug
Right now luna (and react-native-firebase-authentication-example) have react-native-vector-icons fonts in android/app/src/main/assets/fonts
and we include the react-native-vector-icons build.gradle reference in the tail end of android/app/buld.gradle
In v9.1.0 of react-native-vector-icons they have changed how they do the build-time copy of fonts on android, and the build for apps based on this template breaks on duplicate resource errors.
Root cause appears to be that they are copied to a different (but still valid location now) and it was only working in the past (inclusion + copy) because the copy was overwriting the included fonts, resulting in a coincidentally working build
oblador/react-native-vector-icons#1416 (comment)
Maintainer says:
You should pick one approach, either manually copying them to your fonts folder, or copying on build with gradle. To fix this error simply remove the duplicates in packages/public-app/android/app/src/main/assets/fonts, they are most likely out of date anyways.
Seems like we should remove the fonts from android/app/src/main/fonts
and just rely on the build-time copy, I think? That will result in fonts that are up to date by default.
Also apparently the fonts themselves are updated, so if they have been copied out to web or to ios and committed outside of the react-native-vector-icons module, they should be removed there if at all possible and reference the module's up to date contents
To Reproduce
Steps to reproduce the behavior:
Expected behavior
Screenshots
If applicable, add screenshots to help explain your problem.
Desktop (please complete the following information):
Smartphone (please complete the following information):
Additional context
Add any other context about the problem here.
Describe the bug
<Button title={"title"} onPress={()=>alert('test click')} />
does not respond to clicks.
Inspecting the element in Chrome tools sends me to an iframe that masks the application.
To Reproduce
Steps to reproduce the behavior:
app.tsx
with
export default () => <Button title={"test"} onPress={()=>alert("test")} />
yarn web
Expected behavior
Alert "test"
Desktop (please complete the following information):
Is your feature request related to a problem? Please describe.
Luna is being described as a boilerplate with minimal configuration. However, react-native-elements is not necessary and can be removed.
Describe the solution you'd like
Remove react-native-elements
Describe the bug
Hi there! I was unable to use this template with the provided instructions
To Reproduce
Try to install the template using either the default (yarn)
mike@osxvm-spare:~/work/EquityResidences/equityresidences/packages/public-app (main) % npx react-native init MyAppName --template @plaut-ro/luna --npm
###### ######
### #### #### ###
## ### ### ##
## #### ##
## #### ##
## ## ## ##
## ### ### ##
## ######################## ##
###### ### ### ######
### ## ## ## ## ###
### ## ### #### ### ## ###
## #### ######## #### ##
## ### ########## ### ##
## #### ######## #### ##
### ## ### #### ### ## ###
### ## ## ## ## ###
###### ### ### ######
## ######################## ##
## ### ### ##
## ## ## ##
## #### ##
## #### ##
## ### ### ##
### #### #### ###
###### ######
Welcome to React Native!
Learn once, write anywhere
โ Downloading template
error Error: Command failed: npm install --save --save-exact @plaut-ro/luna
npm ERR! code E404
npm ERR! 404 Not Found - GET https://registry.npmjs.org/@plaut-ro%2fluna - Not found
npm ERR! 404
npm ERR! 404 '@plaut-ro/luna@*' is not in this registry.
npm ERR! 404 You should bug the author to publish it (or use the name yourself!)
npm ERR! 404
npm ERR! 404 Note that you can also install from a
npm ERR! 404 tarball, folder, http url, or git url.
...or npm, neither work:
mike@osxvm-spare:~/work/EquityResidences/equityresidences/packages/public-app (main) % npx react-native init MyAppName --template @plaut-ro/luna --npm
###### ######
### #### #### ###
## ### ### ##
## #### ##
## #### ##
## ## ## ##
## ### ### ##
## ######################## ##
###### ### ### ######
### ## ## ## ## ###
### ## ### #### ### ## ###
## #### ######## #### ##
## ### ########## ### ##
## #### ######## #### ##
### ## ### #### ### ## ###
### ## ## ## ## ###
###### ### ### ######
## ######################## ##
## ### ### ##
## ## ## ##
## #### ##
## #### ##
## ### ### ##
### #### #### ###
###### ######
Welcome to React Native!
Learn once, write anywhere
โ Downloading template
error Error: Command failed: npm install --save --save-exact @plaut-ro/luna
npm ERR! code E404
npm ERR! 404 Not Found - GET https://registry.npmjs.org/@plaut-ro%2fluna - Not found
npm ERR! 404
npm ERR! 404 '@plaut-ro/luna@*' is not in this registry.
npm ERR! 404 You should bug the author to publish it (or use the name yourself!)
npm ERR! 404
npm ERR! 404 Note that you can also install from a
npm ERR! 404 tarball, folder, http url, or git url.
Expected behavior
Successful install
Screenshots
Desktop (please complete the following information):
Additional context
I did all the troubleshooting about removing global react-native-cli installs etc - they were not there to begin with (I try to never install global packages...) but I did it just to make sure. You never know! It had no effect.
I was able to do it using the git url though:
npx react-native init MyAppName --template https://github.com/plaut-ro/luna
--> success!
it also works with --template plaut-ro/luna
which I suppose goes right to github as well, without the @
I generally know my way around the react-native command line (e.g., I script install demos for react-native-firebase, which I maintain, all the time - https://github.com/mikehardy/rnfbdemo/blob/master/make-demo.sh) but I'm always open to learn something new. Maybe I'm missing something here?
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.