Luna - a React Native Web boilerplate

Last update: Jun 16, 2022

Logo

๐ŸŒ’ Luna

๐ŸŒ’ Luna is a React Native boilerplate with minimal configuration so your app can run on Android, IOS and Web concurrently.

โญ Features:

๐Ÿ›ธ Usage

โš ๏ธ Please be sure your environment is set up correctly for React Native CLI.
๐Ÿ”— https://reactnative.dev/docs/environment-setup

npx react-native init MyAppName --template @notorious112/luna

Use the above command to start a new React Native app using this template. After that, all the commands from below are available:

npm run web

Runs the app in the web.
Open http://localhost:3000 to view it in the browser.

The page will reload if you make edits.
You will also see any lint errors in the console.

npm run start

Start Metro Bundler.

npm run android

Launches the app for Android in debug mode.

npm run ios

Launches the app for IOS in debug mode.

๐Ÿ› Debugging

  • React Native CLI

This template only works with the new CLI. Please make sure that:

  • your environment is set up correctly for React Native CLI.
  • you have uninstalled the legacy react-native-cli first (npm uninstall -g react-native-cli) for the below command to work. If you wish to not use npx, you can also install the new CLI globally (npm i -g @react-native-community/cli or yarn global add @react-native-community/cli).

If you tried the above and still get the @notorious112/luna: Not found error, please try adding the --ignore-existing flag to force npx to ignore any locally installed versions of the CLI and use the latest. Further information can be found here: https://github.com/react-native-community/cli#about

๐Ÿ“ƒ License

๐Ÿ“ƒ This project is released under the MIT License.
๐Ÿ’ป By contributing, you agree that your contributions will be licensed under its MIT License.

๐Ÿšง Work in progress ๐Ÿšง

โš ๏ธ This template is currently under development, but we consider it stable.
๐Ÿ™ Please feel free to try it out and open an issue if you find any problems.

GitHub

https://github.com/Notorious112/luna
Comments
  • 1. Template not found error / with workaround

    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)

    
    [email protected]:~/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/[email protected]*' 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:

    
    [email protected]:~/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/[email protected]*' 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?

    Reviewed by mikehardy at 2021-10-28 02:17
  • 2. @mikehardy/lint battles

    A bunch of little battles I just won with eslint + prettier ;-)

    Each comment has what I learned and the reference

    what a pain in the ... haha

    yarn lint:all is now completely clean with these, including in a real project where there are switch statements and export const enums and such

    Reviewed by mikehardy at 2021-11-28 20:45
  • 3. feat(pages): auto-deploy to github-pages on merge to master

    Fixes #37

    First publish will fail as the gh-pages branch doesn't exist and Pages (in repo settings) isn't configured to use it

    This should create the gh-pages branch first time it runs Then configure Pages in repo settings to use the gh-pages branch Then manually run the workflow again in the Actions tab on the repo (it responds to "workflow_dispatch" event, so you can run it manually)

    It works! https://github.com/invertase/react-native-firebase-authentication-example/runs/4423730053?check_suite_focus=true https://invertase.github.io/react-native-firebase-authentication-example/

    Reviewed by mikehardy at 2021-12-05 19:32
  • 4. Converge with upstream (react-native-typescript-template, and react-native/template)

    I know you're on vacation, please feel free to let this sit, it is not urgent.

    As I worked on this template both by layering a template on it, and building multiple work projects on it, the differences between the upstream templates, and the amount of code here became worrisome

    I think it will be a real maintenance burden, and the absolute modules pathing is a brand new concept for most people, making the template require that much more to learn in order to use it, plus requiring the deletion of a bunch of boilerplate to use it (the components etc).

    Related #29 - and the comments there

    As I was going to remove the absolute paths I realized all the work I was doing was in code copied from the default New App Screen in react-native, and I thought, why are we repeating this? Why aren't we referencing it?

    I looked at react-native-typescript-template, and they just use the whole thing by reference. So much easier!

    When I tried to do that on web, there was one problem with an import of react-native/Libraries/DevTools/openUrlInBrowser which I solved with a tiny patch-package.

    I attempted to solve it via a shim + webpack alias - and I still think that's possible, to just override the import with a shim vs a patch - but I was unsuccessful and the patch was easy so I went that direction.

    Once I referenced that all via import instead of code here, the app was so small, it made sense to just do the navigator in the App.tsx for demonstration purposes, with the react-native-typescript-template used directly, then wrapped

    When I pasted their code in, the styles did not match, so I just copied in their eslint/prettier in order to have the same style as the community template, and yarn lint:all && yarn test:all all pass.

    Much less to maintain, fewer decisions to defend with regard to design

    What do you think?

    Reviewed by mikehardy at 2021-11-28 18:09
  • 5. Not work with GestureHandlerRootView on web

    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?

    Reviewed by 1280103995 at 2022-05-26 10:12
  • 6. fix(paths): use directory-relative paths

    If this template is used to init a project, then the app directory itself is moved, the components inside app lose their ability to resolve and lint:types no longer works

    If I use directory-relative paths, everything appears fine

    Related: https://github.com/invertase/react-native-firebase-authentication-example/pull/3

    This was the only change I needed in this template when layering that one on top

    Reviewed by mikehardy at 2021-11-26 12:39
  • 7. Button onPress does not respond to clicks; Cannot inspect elements;

    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
    Reviewed by tylerssn at 2022-03-05 22:58
  • 8. fix: vector-icons android double-include, ios navigation stack crash, dependencies

    Each commit here is it's own thing really, but easier to do one PR with multiple clean commits that may be reviewed one at a time easily, then rebase-merge, versus 7 different PRs I think

    Each commit has a descriptive message and should be clean, anyway :-)

    Reviewed by mikehardy at 2022-03-05 21:08
  • 9. feat(web): add web-compatible linking and titling in react-navigation

    I am new to the web stuff and forgot that managing the title URL in the browser bar is really important.

    Not only does it pay to have the web title bar look nice (for bookmarking) but URL management is important for aesthetics, again for bookmarking (deep link recognition and page routing...) but most importantly: so the back button doesn't destroy your app's navigation state

    So this adds a semi-fancy page title function as an example, and adds a third tab + config that shows how the whole thing works using the web-compatible version of react-navigation linking

    As a PR it's kind of "meh" at the same time that I immediately noticed I needed it 2 layers up in my work projects, curious what you think here? If it looks good I'll expand it for the auth template

    Reviewed by mikehardy at 2021-12-04 20:24
  • 10. CI should publish web app to github pages

    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

    Reviewed by mikehardy at 2021-12-04 19:51
  • 11. Replace react-app-rewired with CRACO

    This PR implements CRACO and removes unmaintainted packages. It seems to me that react-native-vector-icons work out of the box with CRACO, so Iโ€™m thinking to remove them.

    I would love if you could also have a chance to test those changes and see how they work for you.

    Fixes(#21)

    Reviewed by criszz77 at 2021-11-13 10:25
  • 12. Configured deep linking

    Summary

    This PR improves deep linking and shows my journey trying to learn and understand them.

    Steps to configure:

    1. Be sure to add yourschemename to your linking prefixes.

    2. npx uri-scheme add yourschemename

    To test it, run:

    npx uri-scheme open yourschemename://details

    Edit: I managed to make it work for Android only by the above commands. Opening [yourschemename]://details from the website section of a contact (from the phonebook) for example won't wont.

    Troubleshooting:

    Simply remove @types/react-dom from package.json for the time being. Uninstall not required.

    • localhost:3000 not working for Android

    Use 10.0.2.2 instead of localhost

    Reviewed by criszz77 at 2022-06-10 23:09
  • 13. handle microbrowsers well

    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

    Reviewed by mikehardy at 2021-12-09 17:16
  • 14. Integrate bootsplash, standarize generic icon / splash names

    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 https://github.com/zoontek/react-native-bootsplash/pull/278

    Describe alternatives you've considered Integrating react-native-bootsplash manually in all my apps built on this :laughing: 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

    Reviewed by mikehardy at 2021-12-09 16:57
  • 15. fix(web): force no zoom on web

    Hey @criszz77 - this is more of a question, I am using this on my work projects because otherwise it's possible for the screen state on mobile (where people touch and drag etc) to become a bit wierd.

    I don't like it though, and I think I'm wondering whether to investigate the underlying cause more (it's possible for navigation drawers to slide off screen on web as their method of hiding I think - meaning when a user zooms out via mobile pinch gesture they can see the nav bar off to the side)

    The question is: how much is disabling zoom a known thing on web? Is it as big a deal as I think it is? (that is: I feel like it damages accessibility because if an element is hard to read a user may no longer just zoom in to read it I think...)

    Reviewed by mikehardy at 2021-12-09 15:10
  • 16. feat(404, web-linking): nested web linking, clean URLs, 404 page

    Who knew web-compatible navigation would be subtle? I did not.

    I need to handle these things though, and none were handled with this template or my previous knowledge:

    • deep links
    • 404 pages
    • web compatible routing (that is: URL <--> route name correspondence) with nested navigators

    So after reading the react-navigation docs about deep linking and playing with it here I got it all working: https://reactnavigation.org/docs/configuring-links/

    Features used:

    • nested linking config (but react-navigation types are busted there? I had to ts-ignore. Haven't logged it yet) https://reactnavigation.org/docs/configuring-links/#handling-nested-navigators

    • URL 'cleaning' on our default first screen path https://reactnavigation.org/docs/configuring-links/#omitting-a-screen-from-path

    • 404 / catch all routing: https://reactnavigation.org/docs/configuring-links/#handling-unmatched-routes-or-404

    If you like this and merge it, I think it handles all of the navigation cases that I've come across as I build and QA the web part of my work projects. Took a while to get there!

    Reviewed by mikehardy at 2021-12-06 05:53
A set of classes and react components to make work your react-native app in a browser. (with some limitations obviously)

React Native for Web A set of classes and react components to make work your react-native app in a browser. (with some limitations obviously) GitHub r

Jun 1, 2022
React Native Webview with Javascript Bridge
React Native Webview with Javascript Bridge

Please take a look at this issue first React Native WebView Javascript Bridge I have been testing and reading a lot of way to safely create a bridge b

Jun 17, 2022
A React Native wrapper for Safari View Controller.

React Native Safari View React Native Safari View is a Safari View Controller wrapper for React Native. Documentation Install Usage Example Methods Ev

May 19, 2022
Simple React Native Android module to use Android's WebView inside your app
Simple React Native Android module to use Android's WebView inside your app

react-native-webview-android Simple React Native Android module to use Android's WebView inside your app (with experimental html file input support to

May 8, 2022
Crosswalk's WebView for React Native on Android.

react-native-webview-crosswalk Crosswalk's WebView for React Native on Android. Dependencies 0.4.0+: react-native >=0.32.0, react >= 15.3.0 0.3.0+: re

Jun 16, 2022
React Native adapter for building hybrid apps with Turbolinks 5
React Native adapter for building hybrid apps with Turbolinks 5

React Native Turbolinks A implementation of Turbolinks for iOS and Turbolinks Android for React Native. Getting started yarn add react-native-webview

May 17, 2022
A monorepo boilerplate for react web and react native. Uses react-native-web to reduce time invested in making the same components for mobile and web

Monorepo template Get Started Run the following command to install all the dependencies in the right location yarn lerna bootstrap yarn workspace @mar

Jan 9, 2022
Palo-mern-boilerplate - A MERN stack (Mongo, Express, React, Node) boilerplate to get Palowans up and running quickly.

palo MERN boilerplate A MERN stack (Mongo, Express, React, Node) boilerplate to get Palowans up and running quickly. Commands: npm install # install b

Jun 5, 2022
Jun 25, 2022
A simple Ethereum prediction market boilerplate build on top of Moralis Web3 SDK + Ethereum Boilerplate + Chainlink + OpenZeppelin. Happy BUIIDL!

ethereum-prediction-market-boilerplate This Project is a fork of Ethereum Boilerplate and demostrates how you can build your own Ethereum Prediction M

Jun 19, 2022
Boilerplate-tailwind - A simple boilerplate using NextJS, Typescript, Tailwind, Jest, Storybook and more

This is a Next.js boilerplate using TailwindCSS and other cool stuff. Most of th

May 19, 2022
Next-boilerplate - Basic Next.js boilerplate ready to use in any type of websites
Next-boilerplate - Basic Next.js boilerplate ready to use in any type of websites

Basic Next.js boilerplate ready to use in any type of websites. View demo ยป My L

May 21, 2022
Solana-boilerplate - Lightweight boilerplate for Solana dapps. Allows quick building and prototyping
Solana-boilerplate - Lightweight boilerplate for Solana dapps. Allows quick building and prototyping

Solana Boilerplate Lightweight boilerplate for Solana dapps. Allows quick buildi

Apr 14, 2022
hopify boilerplate for embedded apps. Built and re-written from the official Shopify CLI's app boilerplate

Shopify boilerplate for embedded apps. Built and re-written from the official Shopify CLI's app boilerplate, but moved it to Typescript, and more modularized, so you can use any frontend framework you want. I left it comes by default, with React.

Jun 20, 2022
React Native boilerplate supporting multiple platforms: Android, iOS, macOS, Windows, web, browser extensions, Electron.
React Native boilerplate supporting multiple platforms: Android, iOS, macOS, Windows, web, browser extensions, Electron.

React Native Universal Monorepo ( ?? WIP) A React Native monorepo boilerplate supporting multiple platforms: Android, iOS, macOS, Windows, web, browse

Jun 17, 2022
React Native boilerplate supporting multiple platforms: Android, iOS, macOS, Windows, web, browser extensions, Electron.
React Native boilerplate supporting multiple platforms: Android, iOS, macOS, Windows, web, browser extensions, Electron.

React Native boilerplate supporting multiple platforms: Android, iOS, macOS, Windows, web, browser extensions, Electron.

Jun 17, 2022
Fluent UI web represents a collection of utilities, React components, and web components for building web applications.

Fluent UI Web Fluent UI web represents a collection of utilities, React components, and web components for building web applications. This repo is hom

Jun 26, 2022
Fluent UI web represents a collection of utilities, React components, and web components for building web applications.

Fluent UI Web Fluent UI web represents a collection of utilities, React components, and web components for building web applications. This repo is hom

Jun 20, 2022
Fluent UI web represents a collection of utilities, React components, and web components for building web applications.

Fluent UI web represents a collection of utilities, React components, and web components for building web applications.

Jun 27, 2022