website·Indexed 29 days ago
https://thecodingmachine.github.io/react-native-boilerplate/A light, simple, and scalable starter kit for React Native development. It features a pre-configured theme system with the useTheme hook, generated styles for fonts, backgrounds, borders, and gutters, and a set of helper components including ErrorBoundary, Skeleton, SafeScreen, and variant-based asset/icon renderers. The boilerplate integrates React Navigation for app structure and Reactotron for debugging.
src/navigation folder.React Native Boilerplate v4 has removed Redux, Redux Persist, and Redux Saga to provide a more lightweight and less opinionated foundation. It now uses the following libraries for core data needs:
DefaultError molecule component is designed to be used within the ErrorBoundary component as the default error user interface. It consists of Text components for the error message and a Button that allows the user to reset the error state (e.g., to re-execute a failed query).The boilerplate architecture is organized to ensure separation of concerns. The following top-level folders in src/ are used for specific application concerns:
src/components: Application components, organized using atomic design.src/hooks: Custom hooks used across the application.src/navigation: Navigator components for handling app navigation.src/screens: Screen components representing the various app views.src/services: Data fetching and related service logic.src/theme: Application theme configuration.src/translations: Language support and internationalization configuration.useTheme hook is powered by the ThemeProvider component. This component implements the React context pattern to handle style generation, store the current theme variant, and manage theme switching across the entire application.The React Native Boilerplate is a lightweight, scalable template designed for a clear separation of concerns. Key built-in features include:
The project root and src directory contain the following essential configuration and entry files:
.env: Environment variables configuration.jest.config.js: Configuration for the Jest testing framework.jest.setup.js: Configuration for Jest mocking.tsconfig.json: TypeScript configuration.src/App.{js,tsx}: The main entry component of the application.beta lane from the ios directory.$ cd my-project/ios
$ fastlane betaSafeScreen component is a helper used to wrap screen content. It automatically provides a safe area view and a status bar. Its primary feature is the ability to display a fallback UI (via the DefaultError component) when an error occurs, either through a passed isError prop or via the application's error boundary system.import { useI18n, useUser } from '@/hooks';
import { SafeScreen } from '@/components/templates';
function Example() {
const { useFetchOneQuery } = useUser();
const fetchOneUserQuery = useFetchOneQuery(1);
return (
<SafeScreen
isError={fetchOneUserQuery.isError} // If true, the fallback UI is displayed
onResetError={fetchOneUserQuery.refetch} // Function to reset error state and retry
>
{/* Your screen content here */}
</SafeScreen>
);
}components file in the theme directory. This allows you to create style objects for specific components that leverage the theme's layout, backgrounds, and fonts.export default ({ layout, backgrounds, fonts }: ComponentTheme) => {
return {
buttonCircle: {
...layout.justifyCenter,
...layout.itemsCenter,
...backgrounds.purple100,
...fonts.gray400,
height: 70,
width: 70,
borderRadius: 35,
},
} as const satisfies Record<string, ImageStyle | TextStyle | ViewStyle>;
};Before setting up Fastlane for Android, ensure the following are completed:
.gitignore file in the android directory.&hl=en to the URL to ensure English language settings, create a Service Account, download the JSON key file, and place it at my-project/android/key.json.static/layout.ts to simplify applying common layout properties to components. These styles can be accessed via the useTheme hook.const { layout } = useTheme();