Welcome to NeNews Getting Started Guides

To install this project follow the instructions below.

• Ensure you have Node LTS version 20.12+ and npm 10.5+ installed
• The latest version of iOS Simulator (preferably iOS 17.4+)
• The latest version of Android Emulator (preferably API 34+)

Before we start, install all the project dependencies with npm and generate native code prebuild.

npm install

# generate native source code for /ios and /android
npx expo prebuild

# run on an iOS simulator
npm run ios

# run on an Android emulator
npm run android

Building a project will compile the app into an almost ready-to-use state and generate which for Android will generate .apk that you can install on an Android phone and for iOS you can run it in a Simulator or iPhone.

• Ensure you have eas-cli installed on your machine.
• Ensure you have fastlane installed on your machine.

# install eas-cli globally using npm
npm install -g eas-cli

# install fastlane using homebrew
brew install fastlane

Build For iOS (Preview)

npm run build:ios-preview

# for ios it will run the app in simulator

Build For Android (Preview)

npm run build:android-preview
    
# output: build-*.apk (you can install this apk in your emulator / android device)
    

For a production build, you will need to tweak eas.json and have an active Apple Developer Account to build for the iOS platform.

NeNews comes with prettier to format any new codes automatically

# check the existing codebase for a new formatting before applying it
npm run prettier:check
    
# format the whole codebase and apply the changes
npm run prettier:format

/app - contains the file-based expo router

/assets - includes the fonts and image assets

/components - contains all the core components

/data - includes the mock data for the resources

/store - zustand store to manage reused state

You may change the color scheme used by editing the tailwind configuration.

• Ensure that you follow the tailwind.config.js format from Tailwind CSS website.
• Ensure that the fonts supports both iOS and Android (e.g Google Fonts)

// tailwind.config.js
{
  theme: {
    extend: {
      fontFamily: {
        sans: ['open_sans'], // font's that you have define in app.json
      }
    }
  }
}    

Font location: assets/fonts and assets/fonts_android

The default color scheme consists of 22 color variants in total or you my define your custom color scheme to change the overall app theme.

// tailwind.config.js
{
  theme: {
    extend: {
      colors: {
        primary: colors.lime, // colors.teal, colors.rose
        // 'primary': {
        //     '50': '#effef7',
        //     '100': '#dafeef',
        //     '200': '#b8fadd',
        //     '300': '#81f4c3',
        //     '400': '#43e5a0',
        //     '500': '#1acd81',
        //     '600': '#0fa968',
        //     '700': '#108554',
        //     '800': '#126945',
        //     '900': '#11563a',
        //     '950': '#03301f'
        // }
      }
    }
  }
}

// config/colors.ts
colors['primary'] = {
  '50': colors.lime['50'],
  '100': colors.lime['100'],
  '200': colors.lime['200'],
  '300': colors.lime['300'],
  '400': colors.lime['400'],
  '500': colors.lime['500'],
  '600': colors.lime['600'],
  '700': colors.lime['700'],
  '800': colors.lime['800'],
  '900': colors.lime['900'],
  '950': colors.lime['950'],
};    

You may generate more custom colors from UiColors app.

To ensure that the Google Map component can be rendered the Google API key is required and the value should be updated in the app.json file.

{
  "googleMapsApiKey": "YOUR-GOOGLE-MAPS-API-KEY-HERE"
}