@ubkinfotech/student-erp

Enterprise-grade, modular Student ERP foundation for React Native. Designed for production apps that want reusable ERP screens and API logic without coupling to the host app’s navigation or Redux setup.

• Framework: React Native (Metro)
• HTTP: Axios (shared client via provider)
• Data fetching: React Query
• Authentication: external token injection (no Bearer by default)
• Modules: Transport, TimeTable, Notes, Syllabus, Homework, Attendance, NoticeBoard, Subject, Teacher

Install

npm i @ubkinfotech/student-erp

Requirements

• Your app must already include React Query:

npm i @tanstack/react-query

• For some modules, the host app must install these libraries (they are not bundled):
  • Homework upload: react-native-document-picker, react-native-image-picker
  • Attendance calendar: react-native-calendars

Provider

All modules use a shared Axios client created by ERPProvider.

Basic

import React from 'react';
import {ERPProvider} from '@ubkinfotech/student-erp';

export function AppRoot() {
  return (
    <ERPProvider baseUrl={API_BASE_URL} authToken={authToken} fileBaseUrl={FILE_BASE_URL}>
      <App />
    </ERPProvider>
  );
}

Async token callback

import React from 'react';
import AsyncStorage from '@react-native-async-storage/async-storage';
import {ERPProvider} from '@ubkinfotech/student-erp';

export function AppRoot() {
  return (
    <ERPProvider baseUrl={API_BASE_URL} getAuthToken={() => AsyncStorage.getItem('token')}>
      <App />
    </ERPProvider>
  );
}

Module Imports

import {
  ERPProvider,
  AttendanceByDayScreen,
  AttendanceMonthlyScreen,
  HomeworkScreen,
  LibraryIssuedBooksScreen,
  NoticeBoardScreen,
  NotesScreen,
  StudentRouteDetailsScreen,
  SubjectScreen,
  SyllabusScreen,
  TeacherScreen,
  TimeTableScreen,
} from '@ubkinfotech/student-erp';

Tested Integration (Reference)

The modules are verified inside the host app using a “switcher” screen:

• Transportnpm.jsx

Examples

Transport

import React from 'react';
import {ERPProvider, StudentRouteDetailsScreen} from '@ubkinfotech/student-erp';

export function TransportExample() {
  return (
    <ERPProvider baseUrl={API_BASE_URL} authToken={authToken} fileBaseUrl={FILE_BASE_URL}>
      <StudentRouteDetailsScreen />
    </ERPProvider>
  );
}

TimeTable

import React from 'react';
import {ERPProvider, TimeTableScreen} from '@ubkinfotech/student-erp';

export function TimeTableExample({classId, sectionId, sessionId}: any) {
  return (
    <ERPProvider baseUrl={API_BASE_URL} authToken={authToken}>
      <TimeTableScreen classId={classId} sectionId={sectionId} sessionId={sessionId} />
    </ERPProvider>
  );
}

Notes (View + Download)

Notes needs host app callbacks to open PDFs/images and to download.

import React from 'react';
import {Alert, Platform, ToastAndroid} from 'react-native';
import {useNavigation} from '@react-navigation/native';
import ImageView from 'react-native-image-viewing';
import RNFetchBlob from 'react-native-blob-util';
import {ERPProvider, NotesScreen} from '@ubkinfotech/student-erp';

export function NotesExample() {
  const navigation = useNavigation();

  const openFile = ({url, extension, name}: any) => {
    if (extension === 'pdf') {
      navigation.navigate('FeesReport', {filepath: url, name: name || 'File'});
      return;
    }
    if (['jpg', 'jpeg', 'png', 'webp'].includes(String(extension).toLowerCase())) {
      Alert.alert('Image', 'Open image preview in your screen using ImageView');
      return;
    }
    Alert.alert('Unsupported File', 'This file type is not supported for direct viewing.');
  };

  const downloadFile = async ({url, filename}: any) => {
    if (Platform.OS === 'android') {
      ToastAndroid.showWithGravityAndOffset('Downloading Started !', ToastAndroid.LONG, ToastAndroid.BOTTOM, 25, 50);
    }
    const docPath = RNFetchBlob.fs.dirs.DocumentDir;
    await RNFetchBlob.config({
      path: `${docPath}/${filename}`,
      fileCache: true,
      addAndroidDownloads: {
        useDownloadManager: true,
        notification: true,
        title: filename,
        description: filename,
        storeInDownloads: true,
      },
    }).fetch('GET', url);
  };

  return (
    <ERPProvider baseUrl={API_BASE_URL} authToken={authToken} fileBaseUrl={FILE_BASE_URL}>
      <NotesScreen
        onOpenFile={({url, extension, item}) => openFile({url, extension, name: item?.title})}
        onDownloadFile={({url, filename}) => downloadFile({url, filename})}
      />
    </ERPProvider>
  );
}

Syllabus

import React from 'react';
import {ERPProvider, SyllabusScreen} from '@ubkinfotech/student-erp';

export function SyllabusExample({classId}: any) {
  return (
    <ERPProvider baseUrl={API_BASE_URL} authToken={authToken} fileBaseUrl={FILE_BASE_URL}>
      <SyllabusScreen
        classId={classId}
        onOpenFile={({url, extension, item}) => {
          if (extension === 'pdf') {
            navigation.navigate('FeesReport', {filepath: url, name: item?.subject_title || 'Syllabus'});
          }
        }}
      />
    </ERPProvider>
  );
}

Homework (List + Upload)

Homework supports upload internally (modal). You only need onOpenFile if you want to view PDFs/images.

import React from 'react';
import {ERPProvider, HomeworkScreen} from '@ubkinfotech/student-erp';

export function HomeworkExample() {
  return (
    <ERPProvider baseUrl={API_BASE_URL} authToken={authToken} fileBaseUrl={FILE_BASE_URL}>
      <HomeworkScreen
        onOpenFile={({url, extension, item}) => {
          if (extension === 'pdf') {
            navigation.navigate('FeesReport', {filepath: url, name: item?.title || item?.name || 'Homework'});
          }
        }}
      />
    </ERPProvider>
  );
}

Attendance (Calendar + Monthly)

import React from 'react';
import {ERPProvider, AttendanceByDayScreen, AttendanceMonthlyScreen} from '@ubkinfotech/student-erp';

export function AttendanceExample({studentId, sessionId}: any) {
  return (
    <ERPProvider baseUrl={API_BASE_URL} authToken={authToken}>
      <AttendanceByDayScreen studentId={studentId} sessionId={sessionId} />
      <AttendanceMonthlyScreen studentId={studentId} sessionId={sessionId} />
    </ERPProvider>
  );
}

NoticeBoard (List + Details)

By default, details opens inside a modal. If you prefer navigation, use onOpenNotice.

import React from 'react';
import {ERPProvider, NoticeBoardScreen} from '@ubkinfotech/student-erp';

export function NoticeExample() {
  return (
    <ERPProvider baseUrl={API_BASE_URL} authToken={authToken}>
      <NoticeBoardScreen />
    </ERPProvider>
  );
}

Subject

import React from 'react';
import {ERPProvider, SubjectScreen} from '@ubkinfotech/student-erp';

export function SubjectExample() {
  return (
    <ERPProvider baseUrl={API_BASE_URL} authToken={authToken}>
      <SubjectScreen />
    </ERPProvider>
  );
}

Teacher

Teacher requires sessionId and uses fileBaseUrl for teacher images.

import React from 'react';
import {ERPProvider, TeacherScreen} from '@ubkinfotech/student-erp';

export function TeacherExample({sessionId}: any) {
  return (
    <ERPProvider baseUrl={API_BASE_URL} authToken={authToken} fileBaseUrl={FILE_BASE_URL}>
      <TeacherScreen sessionId={sessionId} />
    </ERPProvider>
  );
}

Notes on Authentication

The default header is:

• Authorization: <token>

If your backend uses a different header shape, configure the provider using custom headers via headers in ERPProvider.