🚀 CodSodRNKit - Ultimate React Native Boilerplate

✨ Why Choose CodSodRNKit?

CodSodRNKit provides a professionally configured React Native environment designed for production-ready applications. Skip the tedious setup and dive straight into building amazing features for your app.

🎯 Key Features

• 📱 Modern Tech Stack: Built with React Native, TypeScript, and the latest libraries
• 🌓 Theming: Built-in support for light/dark mode with react-native-unistyles
• 🌎 Internationalization: Ready-to-use i18n setup with multiple languages
• ⚡ State Management: Integrated Redux Toolkit for global state
• 📊 Data Fetching: TanStack Query (React Query) for efficient data management
• 🔐 Authentication Flow: Complete auth screens and navigation
• 🧩 Component Library: Pre-built UI components to accelerate development
• 🧪 Testing: Jest and React Testing Library configured
• ⚙️ CI/CD Ready: Basic GitHub Actions workflow included
• 🔍 Code Quality: ESLint, Prettier, and TypeScript strict mode

🛠️ Development Experience

• 📂 Organized Structure: Intuitive project structure that scales
• 🔄 Hot Reloading: Fast refresh for rapid development
• 📝 Type Safety: Full TypeScript support with strict mode
• 🧭 Navigation: React Navigation v7 pre-configured
• 🔌 API Integration: Axios setup with interceptors
• 💾 Storage: MMKV for high-performance storage
• 🎨 Styling: Flexible styling with react-native-unistyles
• 📱 Responsive Design: Built with responsive layouts in mind
• 🔄 State Persistence: Redux persistence configured
• 📊 Performance Monitoring: Basic performance tracking setup

🚀 Quick Start

Create a new project using our template with a single command:

npx @react-native-community/cli@latest init MyApp --template @codsod/react-native-kit

That's it! Your project is ready to run with all the features mentioned above!

📚 Tech Stack

Core

• React Native - Build native apps using React
• TypeScript - JavaScript with syntax for types

UI & Navigation

• @react-navigation/native - Routing and navigation
• react-native-screens - Native navigation primitives
• react-native-safe-area-context - Handle safe area
• @react-navigation/native-stack - Native stack navigator
• react-native-gesture-handler - Native gesture system
• react-native-unistyles - Universal styling solution

State Management & Data Fetching

• react-redux - React bindings for Redux
• @reduxjs/toolkit - The official Redux toolset
• @tanstack/react-query - Async data management
• react-native-mmkv - Fast storage solution

Internationalization

• i18next - Internationalization framework
• react-i18next - React integration for i18next
• @os-team/i18next-react-native-language-detector - Language detection
• intl-pluralrules - Pluralization support

Network & API

• axios - Promise-based HTTP client

Utilities

• react-native-keyboard-aware-scroll-view - Handle keyboard appearance
• react-native-reanimated - Animation library
• react-native-restart - Restart React Native app

Testing

• jest - JavaScript testing framework
• @testing-library/react-native - Testing utilities

📋 Project Structure

The template follows a feature-based structure to keep your code organized and maintainable:

src/
├── api/                # API services and config
├── assets/             # Static assets (images, fonts)
├── components/         # Reusable UI components
├── hooks/              # Custom React hooks
├── navigation/         # Navigation configuration
├── screens/            # Screen components
├── services/           # Business logic services
├── store/              # Redux store and slices
├── theme/              # Styling themes and constants
├── translations/       # i18n translations
└── utils/              # Utility functions

📱 Features In Detail

🌓 Theming System

Switch between light and dark modes with a well-structured theming system:

// Access theme in your components
import { useStyles } from "@/theme";

function MyComponent() {
  const { styles, theme } = useStyles();

  return (
    <View style={styles.container}>
      <Text style={{ color: theme.colors.text }}>Themed Text</Text>
    </View>
  );
}

🌎 Internationalization

Easily add multi-language support to your app:

// Using translations in components
import { useTranslation } from "react-i18next";

function MyComponent() {
  const { t } = useTranslation();

  return <Text>{t("hello_world")}</Text>;
}

📊 API Integration

Pre-configured Axios instance with interceptors for authentication and error handling:

// Example API call
import { api } from "@/api";

async function fetchData() {
  try {
    const response = await api.get("/endpoint");
    return response.data;
  } catch (error) {
    // Error handling
  }
}

🧩 Available Screens

The template includes several pre-built screens to get you started:

• Authentication: Login, Register, Forgot Password
• Onboarding: Introduction slides for new users
• Home: Main dashboard layout
• Profile: User profile management
• Settings: App settings with theme toggle and language selection

📈 Performance Optimization

CodSodRNKit is built with performance in mind:

• Efficient re-rendering with React.memo and useCallback
• MMKV for high-performance storage
• Optimized list rendering with FlatList
• React Native's new architecture ready

🧪 Testing

Write reliable tests using the pre-configured testing environment:

import { render, fireEvent } from "@testing-library/react-native";
import MyComponent from "./MyComponent";

test("component renders correctly", () => {
  const { getByText } = render(<MyComponent />);
  const element = getByText("Hello World");
  expect(element).toBeTruthy();
});

🔍 Requirements

• Node 18 or greater
• For iOS development: Mac with Xcode 10+
• For Android development: Android Studio

Follow the React Native environment setup guide to ensure your system is ready.

🏗️ Getting Started

Step 1: Start Metro

# Install dependencies
npm install
# OR
yarn install

# Start Metro bundler
npm start
# OR
yarn start

Step 2: Run Your App

For Android:

npm run android
# OR
yarn android

For iOS:

cd ios && pod install
cd ..
npm run ios
# OR
yarn ios

🎓 Learn More

Visit the CodSod YouTube Channel for detailed tutorials on React Native development and computer science education.

🤝 Contributing

We welcome contributions to improve this template! Feel free to submit issues or pull requests.

1. Fork the repository
2. Create your feature branch (git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'Add some amazing feature')
4. Push to the branch (git push origin feature/amazing-feature)
5. Open a Pull Request

🙏 Acknowledgements

This package was inspired by theCodingMachine's React Native Boilerplate and brew-react-native-kit. We are grateful for their contributions to the React Native community.

📝 License

This project is licensed under the ISC License - see the LICENSE file for details.

📝 Code Examples

🔄 API Integration

GET Request with Type Safety

interface HomeData {
  name: string;
}

// Fetch data with React Query
const {
  data: posts,
  isLoading,
  isError,
} = useCustomQuery<HomeData>("/products", "?limit=150");

// Optimize rendering
const memoizedPosts = useMemo(() => posts, [posts]);

POST Request with Error Handling

interface LoginResponse {
  success: boolean;
}

interface LoginRequestData {
  email: string;
  password: string;
}

// Mutation hook with TypeScript support
const { mutate, isPending } = useCustomPost<
  LoginResponse,
  Error,
  LoginRequestData
>("/auth/login", {
  onSuccess: ({ data }) => {
    dispatch(saveUserData(data));
  },
  onError: (e) => {
    alertFunction("Error", "An error occurred");
  },
});

🌓 Theme Management

// Check current theme
const isDarkMode = UnistylesRuntime.themeName === "dark";

// Theme switching function
const changeTheme = (mode: ThemeMode) => {
  // Save user preference
  setItem("defaultTheme", { myTheme: mode });
  // Apply theme instantly
  UnistylesRuntime.setTheme(mode);
};

// Toggle between light and dark
changeTheme(isDarkMode ? "light" : "dark");

🌍 Internationalization

// Access languages from Redux store
const { languages, defaultLanguage } = useSelector(
  (state: any) => state.settings
);

// Language change with RTL support
const changeLanguage = (lng: LanguageInterface) => {
  if (i18n.language === lng.sortName) return;

  setItem("defaultLanguage", lng);
  i18n.changeLanguage(lng.sortName);

  // Handle right-to-left languages
  const isArabic = lng.sortName === "ar";
  I18nManager.forceRTL(isArabic);
  RNRestart.restart();
};

🎨 Styling with Unistyles

// Import styling utilities
import { createStyleSheet, useStyles } from "react-native-unistyles";

// Access styles in your component
const { styles } = useStyles(stylesheet);

// Theme-aware stylesheet
const stylesheet = createStyleSheet((theme) => ({
  modalView: {
    flexDirection: "row",
    justifyContent: "space-between",
    marginTop: verticalScale(8),
  },
  // Dynamic styling with parameters
  textStyle: (isSelected: boolean) => ({
    fontFamily: isSelected ? fontFamily.semiBold : fontFamily.regular,
    color: isSelected ? theme.colors.danger : theme.colors.typography,
  }),
}));

🧭 Navigation & Authentication

// Type-safe navigation
const navigation = useNavigation<NavigationProp<HomeStackParamList>>();

// Navigate with parameters
navigation.navigate("Details", { id: 123 });

// Secure logout implementation
const onPressLogout = () => {
  // Clear all stored data
  storage.clearAll();
  // Reset application state
  dispatch({ type: types.CLEAR_REDUX_STATE });
  // Redirect to login
  navigation.reset({
    index: 0,
    routes: [{ name: "Login" }],
  });
};

📋 Performance-Optimized Lists

// Efficient FlatList implementation with memoization
<FlatList
  data={memoizedPosts?.products || []}
  renderItem={(props) => <HomeListItems {...props} navigation={navigation} />}
  keyExtractor={(item, index) => String(item?.id || index)}
  ListEmptyComponent={<EmptyComp isError={isError} isLoading={isLoading} />}
  initialNumToRender={10}
  windowSize={5}
  maxToRenderPerBatch={10}
  removeClippedSubviews={true}
/>;

// Memoized list item for optimal performance
const HomeListItems: React.FC<HomeListItemsProps> = memo(
  ({ item, navigation }) => {
    // Prevent unnecessary function recreation
    const handlePress = useCallback(() => {
      navigation.navigate("Details", { id: item.id });
    }, [item.id, navigation]);

    return (
      <Pressable onPress={handlePress} style={styles.itemContainer}>
        <Text style={styles.title}>{item.title}</Text>
      </Pressable>
    );
  }
);