@mujohn/ui

Reusable React Native UI library with typed components, hooks, utilities, and theme support.

Install

npm install @mujohn/ui

Install required peer packages:

npm install react react-native @react-native-async-storage/async-storage @react-native-clipboard/clipboard react-native-raw-bottom-sheet react-native-reanimated react-native-render-html react-native-safe-area-context react-native-toast-message react-native-vector-icons react-native-walkthrough-tooltip

If you use react-native-reanimated, make sure your app has the Reanimated Babel plugin configured in babel.config.js.

Android Setup

If you use AppIcon or any component that depends on react-native-vector-icons, add this line in android/app/build.gradle:

apply from: "../../node_modules/react-native-vector-icons/fonts.gradle"

File path:

android/app/build.gradle

Import Example

import {
  AppCountryCodePicker,
  AppDropdown,
  AppHeader,
  AppIcon,
  AppInput,
  AppRBSheet,
  AppText,
  AppTooltip,
} from '@mujohn/ui';

Quick Usage

AppIcon

<AppIcon type="AntDesign" name={'checkcircle'} size={20} color="#26356E" />

AppInput Default

<AppInput
  placeholder="Search Country"
  value={searchQuery}
  onChangeText={(txt) => onChangeSearch(txt)}
  leftIcon={<AppIcon type="Feather" name="search" size={20} color="#26356E" />}
/>

AppInput Phone

<AppInput
  value={phoneNumber}
  returnKeyType="done"
  inputBg="#FFFFFF"
  onChangeText={handleChange}
  translatePlaceholder="translate.phone_placeholder"
  keyboardType="phone-pad"
  error={errors?.phoneNumber}
  isPhoneInput
  leftIcon={
    <AppCountryCodePicker
      phoneField="phoneCode"
      setPhoneCode={handleChange}
      isCodeVisible
    />
  }
/>

AppDropdown

const Options: any[] = [
  { _id: 0, label: 'Option 1' },
  { _id_: 1, label: 'Option 2' },
];

<AppDropdown
  label="Choose Network"
  data={Options}
  placeholder="Select Network"
  value={stateVal || 'Select Network'}
  onPress={handleDropdown}
/>;

AppHeader

<AppHeader
  left={{ icon: { name: 'chevron-back', type: 'Ionicons' } }}
  title="wallet.title"
  right1={{ child: <View style={{ width: 40 }} /> }}
/>

AppTopTab

<AppTopTab
  options={[
    { key: 'personal', label: 'Individual' },
    { key: 'business', label: 'Business' },
  ]}
  value={formData.accountType}
  onChange={(key) => handleChange('accountType', key)}
/>

AppRBSheet

const sheetRef = useRef<RBSheetRefProps>(null);

<AppRBSheet ref={sheetRef} label="Title">
  <AppText>Select your preferred fiat currency</AppText>
</AppRBSheet>;

AppToast

AppToast.show({
  message: 'Profile updated successfully',
  type: 'success',
});

AppToast.showMsg('Profile updated successfully', 'success');

AppTooltip

<AppTooltip visible={true} content="AppTooltip Title">
  <AppIcon
    name="info"
    type="Feather"
    size={18}
    color="#666666"
    onPress={() => {}}
  />
</AppTooltip>

Example App Setup

import React from 'react';
import { SafeAreaView } from 'react-native';
import Toast from 'react-native-toast-message';
import {
  ThemeProvider,
  AppAlertProvider,
  AlertHost,
  AppButton,
  AppCard,
  AppInput,
  AppText,
  toastConfig,
} from '@mujohn/ui';

export function App() {
  return (
    <ThemeProvider>
      <SafeAreaView style={{ flex: 1, padding: 16 }}>
        <AppAlertProvider>
          <AppCard>
            <AppText variant="title">JohnCreation UI</AppText>
            <AppInput label="Email" placeholder="[email protected]" />
            <AppButton title="Continue" />
          </AppCard>
          <AlertHost />
          <Toast config={toastConfig} />
        </AppAlertProvider>
      </SafeAreaView>
    </ThemeProvider>
  );
}

Included Modules

Components

• AlertHost
• AppAlert
• AppAvatar
• AppBottomButton
• AppBottomSheet
• AppButton
• AppCard
• AppCountryCodePicker
• AppDatePicker
• AppDropdown
• AppHeader
• AppIcon
• AppInput
• AppLoader
• AppLogo
• AppModal
• AppMoment
• AppName
• AppOTP
• AppPlayerControls
• AppProgressBar
• AppRBSheet
• AppRenderHTML
• AppSafeArea
• AppStatusBar
• AppSwitch
• AppTabBar
• AppText
• AppTextLogoScreen
• AppTimer
• AppToast
• AppTooltip
• AppTopTab
• AppUnderMaintenanceScreen

Hooks

• useTheme()
• useDebounce()
• useCountdown()
• useKeyboard()
• usePagination()

Utilities

• formatCurrency()
• formatDate()
• responsiveSize()
• validateEmail()
• storage

Friendly Guide

1. Install @mujohn/ui and the peer packages.
2. Add the vector icons font line to android/app/build.gradle.
3. Import components from @mujohn/ui.
4. Use AppInput for normal and phone inputs.
5. Use AppDropdown, AppTopTab, and AppRBSheet for selection flows.
6. Use AppTooltip and AppToast for helper UI and notifications.
7. Mount Toast with toastConfig in your app root if you use toast messages.

Publish Flow

cd JohnCreation
npm install
npm run release:check
npm run pack:ui
npm run publish:ui