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.

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

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:

1. Replace the content of app.tsx with

   export default () => <Button title={"test"} onPress={()=>alert("test")} />

2. Run yarn web
3. Click on the button

Expected behavior
Alert "test"

Desktop (please complete the following information):

• Browser: Brave browser
• Version: 1.36

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.

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.

Coming soon

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?

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):

• OS: macOS 11.6.1

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?

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

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'
}

CRACO now supports Create React App 5 and it has some shiny new docs: https://craco.js.org/

dilanx/craco#426 (comment)

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.

Thanks your template 👏 👏 👏

Describe the bug

1. i run yarn add react-native-reanimated.
2. according to the 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

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:

1. npx react-native init MyAppName --template @criszz77/luna
2. cd MyAppName
3. cd ios:pods
4. 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:

• OS: macOS ventura
• Version 13.1

Smartphone:

• Device: iphone se 3rd generation
• OS: iOS16.2

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.

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:

• isomorphic react ? unsure this is a useful knowledge path
  https://necolas.github.io/react-native-web/docs/rendering/#server-api - server side rendering (the most flexible! you serialize state to client on all responses and accept state back, server re-hydrates a Context server-side in order to know how to render next screen etc...) but it works, here's one using Redux though I think a Context could work: https://www.freecodecamp.org/news/server-side-rendering-your-react-app-in-three-simple-steps-7a82b95db82e/
• just adding open graph tags? https://stackoverflow.com/questions/50968603/sharing-on-social-media-the-url-does-not-render-any-meta-data in combo with for example https://github.com/s-yadav/react-meta-tags
• pre-rendering cornerstone pages? (same stackoverflow link above)

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

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

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.

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):

• OS: Ubuntu 22.04
• yarn v1.22.19

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.

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:

1. Go to '...'
2. Click on '....'
3. Scroll down to '....'
4. See error

Expected behavior

• up to date fonts at all times referenced directly from react-native-vector-icons
• a working build on all platforms

Screenshots
If applicable, add screenshots to help explain your problem.

Desktop (please complete the following information):

• OS: [e.g. iOS]
• Browser [e.g. chrome, safari]
• Version [e.g. 22]

Smartphone (please complete the following information):

• Device: [e.g. iPhone6]
• OS: [e.g. iOS8.1]
• Browser [e.g. stock browser, safari]
• Version [e.g. 22]

Additional context
Add any other context about the problem here.