milvasoft / expo-boilerplate

Architectures, methods and much more that We use while developing mobile applications

Expo Boilerplate

Architectures, methods and much more that We use while developing mobile applications

• Boilerplate Features
• Structure
  • Assets
  • Components
  • Helpers
  • Hooks
  • Localization
  • Modules
  • Network
  • Providers
  • Routers
  • Store
  • Styles
  • Utils
• Run in Dev Environment
• Code Push
• Run Expo Go
• Expo Project Link

Boilerplate Features:

• Routing
• Redux Toolkit
• Test
• Network
• Theme
• Local Storage
• Provider example
• Notifications
• Dark Theme Support
• Multi Language Support
• Folder Structure
• TypeScript
• Eslint
• Font
• Splash
• Code Push
• Toast Message

Expo Boilerplate Structure

src
 ├── assets
     ├── animation
     ├── enums
     ├── images
     └── languages
 ├── helpers,  
     ├── global
     ├── localization
     ├── router
     ├── storage
     └── toast
 ├── components
     ├── ErrorComponent
        ├── ErrorComponent.test
        ├── index
	├── style
        └── type	
     ├── GeneralActivityIndicator
     ├── NotFoundComponent
     └── ToastMessage
 ├── hooks
     ├── useTheme
     └── useThemedStyles
 ├── localization
     ├── en
     └── tr
 ├── modules
     └── app
         ├── api
         ├── components
         ├── redux
         ├── screens
         ├── services
         ├── types
         └── utils
     └── profile
         ├── api
         ├── components
         ├── redux
         ├── screens
         ├── services
         ├── types
         └── utils	 
 ├── providers 
     ├── AppLoadingProvider
     ├── ErrorBoundary
     ├── Localization
     ├── NetworkInfoContainer
     ├── Notification
     ├── ThemeListener
     ├── ThemeProvider
     └── Toast
 ├── routers
     ├── BottomNavigation
     └── ProfileStack
 ├── store
     ├── rootReducer
     └── store
 ├── styles
     ├── fonts
     ├── padding
     ├── theme
     ├── toast
     └── typography
 └── utils
     ├── Routes
     └── ScreenOptions

Assets

Assets used in the project.
Sample: color, images, svg etc.

Components

Components Folder containing base components in the project.
Sample: ErrorComponent, ToastMessage etc.

Helpers

Helpers Folder containing base functions in the project.
Sample: storage process, redux management from out of components etc.

Hooks

Hooks Folder containing base hooks in the project.
Sample: useTheme etc.

Localization

Localization Settings.
Sample: tr, en etc.

Modules

The Modules is a special folder. It allows you to manage your application more easily by dividing it into modules according to business logic.

Modules have their own files inside;

• Component (CustomButton, CustomLayout etc.)
• Screens (HomeScreen, ProfileScreen etc.)
• Redux (AppSlice, Store etc.)
• Utils (Helper Function etc. )
• API (API request, routes)
• Services

In this way, it provides a simpler and easier development process by searching the codes related to the Module only in that folder.

Providers

Providers Folder containing base providers and container in the project.
Sample: ThemeProvider, Localization etc.

Routers

Everything about routing.

Screens

Store Settings

Styles

Base Style Settings
Sample: fonts, padding etc.

Utils

Utils Folder containing base utils and container in the project.
Sample: Routes Type, ScreenOptions etc.

Run in Dev Environment

• Setting up the development environment: https://reactnative.dev/docs/environment-setup.
• Install dependencies: npx expo install ( yarn install or npm install).
• Run on both Android & iOS: npx expo start (or yarn start).
• Run on Android: yarn android (or npm run android).
• Run on iOS: yarn ios (or npm run ios).
• Run on Test: yarn test (or npm run test).
• ✨ Don't forget to enable eslint ✨

Code Push

• expo-update documentation link : https://docs.expo.dev/workflow/publishing/
• Run on eas update
• ✨ Don't forget to local expo-cli and node version check ✨

Run Expo Go

Expo Project Link

https://expo.dev/%40aliburhankeskin/milvasoft-expo-boilerplate?serviceType=eas&distribution=expo-go&scheme=&channel=master&sdkVersion=50.0.0

expo-boilerplate's Issues

Error: error:0308010C:digital envelope routines::unsupported

Describe the bug
When trying to use the boilerplate in web mode, I get anerror:0308010C:digital envelope routines::unsupported error.

› Metro waiting on exp://192.168.1.205:19000
› Scan the QR code above with Expo Go (Android) or the Camera app (iOS)

› Web is waiting on http://localhost:19006

› Press a │ open Android
› Press w │ open web

› Press j │ open debugger
› Press r │ reload app
› Press m │ toggle menu

› Press ? │ show all commands

› Open in the web browser...
› Press ? │ show all commands
node:internal/crypto/hash:71
  this[kHandle] = new _Hash(algorithm, xofLen);
                  ^

Error: error:0308010C:digital envelope routines::unsupported
    at new Hash (node:internal/crypto/hash:71:19)
    at Object.createHash (node:crypto:133:10)
    at module.exports (/home/shift3/Documents/Github/expo-boilerplate/node_modules/webpack/lib/util/createHash.js:135:53)
    at NormalModule._initBuildHash (/home/shift3/Documents/Github/expo-boilerplate/node_modules/webpack/lib/NormalModule.js:417:16)
    at handleParseError (/home/shift3/Documents/Github/expo-boilerplate/node_modules/webpack/lib/NormalModule.js:471:10)
    at /home/shift3/Documents/Github/expo-boilerplate/node_modules/webpack/lib/NormalModule.js:503:5
    at /home/shift3/Documents/Github/expo-boilerplate/node_modules/webpack/lib/NormalModule.js:358:12
    at /home/shift3/Documents/Github/expo-boilerplate/node_modules/loader-runner/lib/LoaderRunner.js:373:3
    at iterateNormalLoaders (/home/shift3/Documents/Github/expo-boilerplate/node_modules/loader-runner/lib/LoaderRunner.js:214:10)
    at Array.<anonymous> (/home/shift3/Documents/Github/expo-boilerplate/node_modules/loader-runner/lib/LoaderRunner.js:205:4)
    at Storage.finished (/home/shift3/Documents/Github/expo-boilerplate/node_modules/webpack/node_modules/enhanced-resolve/lib/CachedInputFileSystem.js:55:16)
    at /home/shift3/Documents/Github/expo-boilerplate/node_modules/webpack/node_modules/enhanced-resolve/lib/CachedInputFileSystem.js:91:9
    at /home/shift3/Documents/Github/expo-boilerplate/node_modules/graceful-fs/graceful-fs.js:123:16
    at FSReqCallback.readFileAfterClose [as oncomplete] (node:internal/fs/read_file_context:68:3) {
  opensslErrorStack: [ 'error:03000086:digital envelope routines::initialization error' ],
  library: 'digital envelope routines',
  reason: 'unsupported',
  code: 'ERR_OSSL_EVP_UNSUPPORTED'
}

Node.js v18.15.0
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

To Reproduce
Steps to reproduce the behavior:

1. expo start
2. select w
3. See error

Expected behavior
I expect the boilerplate to work in web mode.

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

Desktop (please complete the following information):

• OS: Ubuntu 22.04
• Browser Firefox
• Version 111

Smartphone (please complete the following information):
None

Additional context
I was able to get the android app working.

Which version of node is this project working under?

Click login button in the login screen don't move to the home screen

Can you fixed?

ReferenceError: ErrorUtils is not defined

Hello!

I would like to use your nice boilerplate for my expo app. But I'm running into an issue testing your repo code.

Steps
=-=-=-

1. I cloned your repo.

2. Ran 'expo install'

3. Ran 'expo start:web'
   

4. Opened http://172.20.10.5:19006/ with Chrome

Expected
-=-=-=-=-=-
To see some UI / UX

Actual
=-==-=-=-

1. Getting the blank screen in Chrome.

Troubleshooting
-=-=-=-=-=-=-=

1. DevTools shows the following errors in the console spew

2. It seems the runtime can't reference ErrorUtils

Best wishes,
Gleb