DOCSEARCHbyAlgolia
Submit Docs

React Native Template Strong

website·Indexed 29 days ago

https://svbutko.github.io/react-native-template-strong/

A comprehensive template for React Native applications featuring a structured module system, Redux state management with AsyncThunks and Slices, and built-in support for localization, theming, and navigation. Includes documentation on internal configurations for Hermes and Proguard, e2e testing with Detox, and UI development with Storybook.

Tokens
25.5K
Snippets
153
Records
222
Agent score
75%

What's inside React Native Template Strong

  1. Overview of the react-native-template-strong project goals

    The react-native-template-strong repository provides a standardized foundation for new React Native projects to ensure consistency across teams and accelerate development. It includes pre-configured core features such as:

    • Essential dependencies for orientation, localization, navigation, and environment management.
    • TypeScript and ESLint (with strict rules and plugins) configuration.
    • A complete testing suite including Storybook, Jest, and Detox.
    • A library of shared styles, components, and helper functions.
    • Predefined common user behavior scenarios and page structures.
    • A unified code structure and documented development processes for tasks like app publishing and splash screen creation.

  2. Use the PrimaryButton component

    The PrimaryButton is the standard button component for the project. It supports multiple built-in type scenarios to apply different styles based on the type prop. It extends PressableProps, meaning it accepts all standard React Native Pressable properties in addition to its own specific props.
    <PrimaryButton 
  type={ButtonType.solid} 
  label="Select date" 
  onPress={onPress} 
/>

  3. Use ImageCropPickerButton for image selection and cropping

    The ImageCropPickerButton component provides a user interface for photo selection, image capturing, or removing an existing image. It displays a button with an icon when no image is selected and shows the selected image once picked. It internally utilizes PhotoTakingButton for the button UI and react-native-image-crop-picker for the picking functionality.

  4. Use the TouchablePlatform component for cross-platform buttons

    The TouchablePlatform component is a platform-friendly touchable button built on top of Pressable. It is used internally by components like PrimaryButton and RadioButton to provide consistent touch feedback across iOS and Android.
    <TouchablePlatform style={styles.container} onPress={onButtonPress}>
  <Text style={labelStyle} numberOfLines={1}>
    {label}
  </Text>
</TouchablePlatform>

  5. Use SectionListWrapper to handle loading and error states in lists

    The SectionListWrapper is a wrapper around the standard React Native SectionList. It manages the UI based on a provided LoadState, automatically displaying the appropriate data, loading indicators, or error messages to the user.
    return (
  <SectionListWrapper
      stickySectionHeadersEnabled={true}
      sections={sections}
      ListHeaderComponent={<BalanceListHeader balance={balance} />}
      loadState={loadState}
      renderItem={renderItem}
      renderSectionHeader={renderSectionHeader}
      error={error}
      tryAgain={tryAgain}
      onRefresh={pullToRefresh}
      onEndReached={loadMore}
      ListEmptyComponent={<EmptyView title={localization.empty.payment} description={localization.empty.paymentDescription} />}
  />
);

  6. Understand the react-native-template-strong project structure

    The project follows a modular directory structure to separate concerns between core logic, shared components, and testing. Key top-level directories include:

    • src: The main application source code.
    • resources: Static assets including images, fonts (.ttf), and iOS symbols (SF symbols).
    • tests: Jest unit and integration tests.
    • e2e: Detox end-to-end tests.
    • mocks: Module mocks used for testing.
    • patches: Dependency patches created via patch-package.
    • storybook: Storybook stories for UI component development.

  7. Manage application navigation roots

    The root defines the application's layout structure and is the first UI element users interact with. Roots can be changed dynamically during the application lifecycle to transition between different high-level layouts (e.g., switching from a login stack to a tabs-based layout after successful authentication). All root definitions are located in src/navigation/roots.ts, where each root is exported separately.

  9. Core dependencies of the React Native Strong template

    The React Native Strong template is built primarily using the following core technologies: React Native Navigation for routing, Redux Toolkit for state management, and TypeScript for type safety.

  10. Manage environment variables with react-native-config

    The project uses react-native-config to manage environment-specific variables. The following primitive environment files are supported:

    • .env: Common variables
    • .env.dev: Development
    • .env.test: Test
    • .env.staging: Staging
    • .env.production: Production

    Predefined variables available across these environments include API_URL (API endpoint), ENVIRONMENT (the currently active environment), and IGNORE_NET_INFO (used to toggle NetInfo during development).

  11. Organize feature modules in react-native-template-strong

    In the react-native-template-strong architecture, feature-specific logic is encapsulated within the src/modules directory. Each module folder should contain all dependencies required for that specific feature to ensure modularity. A standard module structure includes:

    • Screen(s) for the feature
    • Redux state definitions
    • Redux slices for state transitions
    • A components sub-directory for UI components used exclusively within that module.
    src
└───modules
    └───companyOffers
        ├── CompanyOffers.tsx        (Screen)
        ├── companyOffersSlice.ts    (Redux Slice)
        ├── companyOffersState.ts     (Redux State)
        └───components               (Module-specific components)
            ├── CompanyOfferItem.tsx
            └── CompanyOffersHeader.tsx