npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

expo-router-redux-template

v1.0.6

Published

An expo template featuring expo-router, reduxjs-toolkit, react-native-reanimated, and redux-persist for cross-platform mobile app development.

Downloads

50

Readme

Expo Router + Reduxjs toolkit + Redux-persist

Overview

This is a starter template for building mobile applications using Expo and React Native. This template is designed to help you kickstart your mobile app development by providing a solid foundation, project structure, and some commonly used features.

Features

  • Ready-to-Use Configuration: The template includes pre-configured settings for Expo, Expo Router, Redux Toolkit, and Redux Persist.
  • Theme Support: Easily customize the appearance of your app with theme support, including light and dark modes.
  • Authentication Handling: The template provides a starting point for implementing user authentication using Redux and protected routing access with Expo Router.
  • Redux Setup: Get started with state management using Redux Toolkit and predefined slices for common app state, such as authentication and settings.
  • Responsive UI: The template includes responsive UI components and theming to create a consistent user experience on various devices.
  • Navigation: Utilize React Navigation and Expo router for smooth navigation between screens and tabs.
  • Animations: Elevate your app's user experience with dynamic animations powered by React Native Reanimated.
  • Custom Fonts: Pre-configured with a selection of fonts to elevate your app's typography effortlessly.

Usage

To create a new mobile app project using this template as an Expo template, follow these steps:

  1. Create a new Expo project based on this template using the following command:

    npx create-expo-app my-new-app --template expo-router-redux-template

    or

    yarn create expo-app my-new-app --template expo-router-redux-template
  2. Navigate to the project directory:

    cd my-new-app
  3. To launch your app and run it on an emulator, physical device, or web browser, start the Expo development server using one of the following commands:

    • For Android:

      yarn android
    • For iOS:

      yarn ios
    • For web development:

      yarn web

These commands will initiate the Expo development server and allow you to preview and test your app on different platforms.

You can then begin customizing the template to suit your project's requirements. Refer to the project structure and comments in the code for guidance.

Project Structure

The project structure follows the Ducks pattern recommended in the Redux documentation, combined with the typical layout for a React Native and Expo Router project. Below is a concise overview of the key directories:

  • /app: Contains layouts and screens (or routes).

  • /assets: Stores static assets such as images and fonts.

  • /common: A collection of common utilities and components that can be reused across your app.

    • /hooks: Custom React hooks designed specifically for your app.

    • /components: Generic UI components that are reusable throughout your project.

  • /constants: Houses various constants, including Colors, Fonts etc.

  • /features: Individual features or modules of your application.

    • /feature: A feature in the app

      • featureSlice.ts: Holds Redux logic for the feature.

      • FeatureComponent.tsx: A component related to this feature.

  • /store: Includes redux-related files

    • configureStore.ts: Responsible for the configuration and setup of your redux store.

    • reducer.ts: Contains the root reducer.

Feel free to adapt and expand upon this structure as needed to suit the specific requirements of your project.

Customize and Extend

Feel free to customize and extend this template to build your mobile app. You can add new components, screens, Redux slices, and libraries to suit your project's needs.

Happy coding! 🚀