rn-adaptbyte

AdaptByte is a lightweight and modular React Native UI library, engineered for efficiency and adaptability. With a focus on minimalism, it provides streamlined components that are easy to customize, ensuring fast performance and seamless integration. Perfect for developers aiming to build scalable, high-performing apps with a clean and lightweight design.

This UI Library is build using react-native-unistyles, so you need to follow unistyle installation below: Please take a note this version 0.4.0 only support for old architecture, if you wanted running in new architecture please use version 1.0.0

Web Demo

Installation

yarn add rn-adaptbyte

Make sure you have already install for peer dependecies below:

1. react-native-gesture-handler
2. react-native-reanimated
3. react-native-safe-area-context
4. react-native-vector-icons
5. react-native-linear-gradient

or can install by using

yarn add react-native-gesture-handler react-native-reanimated react-native-safe-area-context react-native-vector-icons react-native-linear-gradient

cd ios && pod install

Manual Setup

Vector Icons Setup

IOS

Edit Info.plist and add a property called Fonts provided by application (or UIAppFonts if Xcode autocomplete is not working):

Add UIAppFonts with value

<key>UIAppFonts</key>
<array>
  <string>AntDesign.ttf</string>
  <string>Entypo.ttf</string>
  <string>EvilIcons.ttf</string>
  <string>Feather.ttf</string>
  <string>FontAwesome.ttf</string>
  <string>FontAwesome5_Brands.ttf</string>
  <string>FontAwesome5_Regular.ttf</string>
  <string>FontAwesome5_Solid.ttf</string>
  <string>FontAwesome6_Brands.ttf</string>
  <string>FontAwesome6_Regular.ttf</string>
  <string>FontAwesome6_Solid.ttf</string>
  <string>Foundation.ttf</string>
  <string>Ionicons.ttf</string>
  <string>MaterialIcons.ttf</string>
  <string>MaterialCommunityIcons.ttf</string>
  <string>SimpleLineIcons.ttf</string>
  <string>Octicons.ttf</string>
  <string>Zocial.ttf</string>
  <string>Fontisto.ttf</string>
</array>

Android

Edit android/app/build.gradle (NOT android/build.gradle) and add:

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

React Native Unistyle Setup

Since version 0.4.0 only support for old architecture you need to install react-native-unistyles version 2, you can follow command:

yarn add react-native-unistyles@^2.31.0

Then

cd ios && pod install

After installation successfull, please create this file at you root project

// unistyles.ts
import {
  BORDERRADIUS,
  BREAKPOINTS,
  COLORS,
  DARK_COLORS,
  DURATION,
  FONT,
  HEIGHT_WINDOW,
  LENGTH,
  SPACING,
  WIDTH_WINDOW,
  TYPOGRAPHY,
} from 'rn-adaptbyte';
import {UnistylesRegistry} from 'react-native-unistyles';

const LIGHT_THEME = {
  adaptbyte: {
    colors: {
      ...COLORS,
      // Replaced color for adaptbyte component here
    },
    font: FONT,
    typography: TYPOGRAPHY,
    length: LENGTH,
    borderRadius: BORDERRADIUS,
    spacing: SPACING,
    duration: DURATION,
    dimension: {
      height: HEIGHT_WINDOW,
      width: WIDTH_WINDOW,
    },
  },
  // Define your custom theme
} as const;

export const DARK_THEME = {
  adaptbyte: {
    colors: {
      ...DARK_COLORS,
      // Replaced color for adaptbyte component here
    },
    font: FONT,
    typography: TYPOGRAPHY,
    length: LENGTH,
    borderRadius: BORDERRADIUS,
    spacing: SPACING,
    duration: DURATION,
    dimension: {
      height: HEIGHT_WINDOW,
      width: WIDTH_WINDOW,
    },
  },
  // Define your custom theme
} as const;

// if you defined breakpoints
type AppBreakpoints = typeof BREAKPOINTS;

// if you defined themes
type AppThemes = {
  light: typeof LIGHT_THEME;
  dark: typeof DARK_THEME;
};

// override library types
declare module 'react-native-unistyles' {
  export interface UnistylesBreakpoints extends AppBreakpoints {}
  export interface UnistylesThemes extends AppThemes {}
}

UnistylesRegistry.addBreakpoints(BREAKPOINTS)
  .addThemes({
    // You can destruct to customize the global color
    // example
    // {
    light: LIGHT_THEME,
    dark: DARK_THEME,
    // }
  })
  .addConfig({
    adaptiveThemes: true,
  });

After that, you need to import unistyles.ts in App.tsx

import "./unistyles" // add this App.tsx

For usage documentation unistyle, you can check out this unistyle version 2 documentation.

Change and Replace component colors

You can change the color inside component by replace the colors inside unistyles.ts

Example

const LIGHT_THEME = {
  adaptbyte: {
    colors: {
      ...COLORS,
      // Replaced color for adaptbyte component here
    },
    font: FONT,
    typography: TYPOGRAPHY,
    length: LENGTH,
    borderRadius: BORDERRADIUS,
    spacing: SPACING,
    duration: DURATION,
    dimension: {
      height: HEIGHT_WINDOW,
      width: WIDTH_WINDOW,
    },
  },
  // Define your custom theme
} as const;

1. Change the button color at the comment // Replace color for adaptbyte component here, you can put object desctruct like:

    colors: {
      ...COLORS_ADAPTBYTE,
      button: {
        ...COLORS_ADAPTBYTE.button,
        primary: SELLER_CENTER_COLORS.primary._700, // custom color
        hover: COLORS_ADAPTBYTE.button.disabled, // custom color
        textDisabled: COLORS_ADAPTBYTE.primaryWhiteHex, // custom color
      },
    }

for button its have own color here that you can replace:

  button: {
    primary: string;
    linearGradient: {
      color1: string;
      color2: string;
    };
    hover: string;
    pressed: string;
    disabled: string;
    textDisabled: string;
    textNormal: string;
  };

2. Change the input color for input is same with button you only need to destruct input color its have own color here that you can replace:

  input: {
    transparent: {
      borderColor: string;
      backgroundColor: string;
      labelColor: string;
      textColor: string;
      errorBorderColor: string;
      errorBackgroundColor: string;
      disabledTextColor: string;
    };
    primary: {
      borderColor: string;
      backgroundColor: string;
      labelColor: string;
      textColor: string;
      errorBorderColor: string;
      errorBackgroundColor: string;
      disabledTextColor: string;
    };
    secondary: {
      borderColor: string;
      backgroundColor: string;
      labelColor: string;
      textColor: string;
      errorBorderColor: string;
      errorBackgroundColor: string;
      disabledTextColor: string;
    };
    searcbox: {
      leftIconColor: string;
      rightIconColor: string;
      borderColor: string;
    };
  };

3. Change the theme colors First thing, you need to find what color you want to replace, then replace by using same way use object desctruct, example you want to replace color for error._500 then you can do :

error: {
        ...COLORS_ADAPTBYTE.error,
        _500: SELLER_CENTER_COLORS.danger._600, // custom color
      },

so all component that use error._500 will replace with custom color, then you can use theme colors error._500 inside your project with custom color

React Native Reanimated Setup

Add reanimated plugin to babel.config.js

module.exports = {
  presets: ['module:@react-native/babel-preset'],
  plugins: [
    'react-native-reanimated/plugin', //Add this
  ],
};

Custom Font Configuration

If you want to add custom font family and apply for all text inside this library you need to add some configuration, but if not want add custom font its not required and you can skip this but the font family will take default as react native project

Custom font family configuration:

1. Add your .ttf font for normal and italic to src/assets/fonts, make sure you add ttf file supported variabel font not static font for make it accept all font weight customization

2. Add asset to your react-native.config.js or you can create file if not exist

Change unistyles configuration for using custom font

import { LIGHT_THEME } from 'rn-adaptbyte';
const theme = {
  light: {
    adaptbyte: {
      ...LIGHT_THEME.adaptbyte
      font: {
        // Here you custom font
        normal: {
          light: 'PlusJakartaSans-Light',
          regular: 'PlusJakartaSans-Regular',
          medium: 'PlusJakartaSans-Medium',
          bold: 'PlusJakartaSans-Bold',
          extrabold: 'PlusJakartaSans-ExtraBold',
        },
        italic: {
          light: 'PlusJakartaSans-LightItalic',
          regular: 'PlusJakartaSans-Italic',
          medium: 'PlusJakartaSans-MediumItalic',
          bold: 'PlusJakartaSans-ExtraBoldItalic',
          extrabold: 'PlusJakartaSans-ExtraBoldItalic',
        },
      }
    }
  }
}

module.exports = {
  assets: ['src/assets/fonts'], // Add this
};

3. Run in root project

npx react-native-asset

Will link font asset to your project

Usage

Button

Button Demo

1. Button
2. TextButton

import {Button, TextButton} from 'rn-adaptbyte';

// ...

// Text Button
<View style={styles.row}>
  <TextButton title="Default" onPress={() => {}} />
  <TextButton title="Disabled" disabled onPress={() => {}} />
  <TextButton title="Underline" underline onPress={() => {}} />
  <TextButton title="Small" size="small" onPress={() => {}} />
  <TextButton title="Medium" weight="medium" onPress={() => {}} />
  <TextButton
    title="Custom Color"
    textColor={COLORS.danger}
    onPress={() => {}}
  />
</View>

// Button
<Button title="Default" onPress={() => {}} />
<Button title="Large" variant="large" onPress={() => {}} />
<Button title="Small" variant="small" onPress={() => {}} />
<Button title="Disabled" disabled onPress={() => {}} />
<Button
  title="Loading"
  loadingMessage="Loading..."
  isLoading
  onPress={() => {}}
/>
<Button title="Outlined" mode="outlined" onPress={() => {}} />
<Button title="Danger" mode="red" onPress={() => {}} />
<Button title="Light" mode="light" onPress={() => {}} />

Input

Input Demo

1. Input
2. Input Date
3. Input Otp
4. Input Phone Number
5. Input Select

import {Input, InputDate, InputSelect} from 'rn-adaptbyte';

// ...

// Input
<Input label="Primary" variant="primary" />
<Input label="Disabled" variant="primary" disabled />
<Input label="Error" variant="primary" errorText="Error description" />
<Input
  label="Helper Text"
  variant="primary"
  helperText="Helper text goes here"
/>

// Input Date
<InputDate
  label="Date"
  variant="primary"
  title="Select Date"
  config={{
    onSelectDate: () => {},
    submitText: 'Submit',
  }}
/>

// Input Select
<InputSelect
  label="Select"
  variant="primary"
  listData={[
    { name: 'List 1' },
    { name: 'List 2' },
    { name: 'List 3' },
    { name: 'List 4' },
    { name: 'List 5' },
  ]}
  onSelect={(item) => {
    console.log(item);
  }}
/>

// Input Otp
<Heading text="Input Otp" variant="h6-small" onPress={() => {}} />
<InputOtp
  defaultOtp={['', '', '', '']}
  exInputStyle={{
    height: 80,
    width: 73,
  }}
  onChangeText={() => {}}
  otpLength={4}
  style={{}}
/>

<Spacer height={12} />

// Input Phone Number
<Heading
  text="Input Phone Number"
  variant="h6-small"
  onPress={() => {}}
/>

<InputPhoneNumber
  errorText=""
  exTextInputStyle={{}}
  onBlur={() => {}}
  phoneCodeConfig={{
    text: '+60',
  }}
  phoneNumberRegex={/^[1-9][0-9]{7,9}$/}
  placeholder="Phone Number"
  variant="primary"
/>

Typography

Typography Demo

1. Display
2. Heading
3. Paragraph

<ScrollView style={styles.container}>
  {/* Display Component */}
  <View style={styles.containerTitle}>
    <Typography.Paragraph
      align="center"
      color="white"
      weight="extrabold"
      text="Display Component"
    />
  </View>
  <Typography.Display text="Display 01" weight="light" variant="01" />
  <Typography.Display text="Display 02" weight="light" variant="02" />

  {/* Heading Component */}
  <View style={styles.containerTitle}>
    <Typography.Paragraph
      align="center"
      color="white"
      weight="extrabold"
      text="Heading Component"
    />
  </View>
  <Typography.Heading text="Heading H1" variant="h1" />
  <Typography.Heading text="Heading H1-small" variant="h1-small" />
  <Typography.Heading text="Heading H2" variant="h2" />
  <Typography.Heading text="Heading H2-small" variant="h2-small" />
  <Typography.Heading text="Heading H3" variant="h3" />
  <Typography.Heading text="Heading H3-small" variant="h3-small" />
  <Typography.Heading text="Heading H4" variant="h4" />
  <Typography.Heading text="Heading H4-small" variant="h4-small" />
  <Typography.Heading text="Heading H5" variant="h5" />
  <Typography.Heading text="Heading H5-small" variant="h5-small" />
  <Typography.Heading text="Heading H6" variant="h6" />
  <Typography.Heading text="Heading H6-small" variant="h6-small" />

  {/* Paragraph Component */}
  <View style={styles.containerTitle}>
    <Typography.Paragraph
      align="center"
      color="white"
      weight="extrabold"
      text="Paragraph Component"
    />
  </View>
  <Typography.Paragraph text="Paragraph Subheading" variant="Subheading" />
  <Typography.Paragraph text="Paragraph 01" variant="01" />
  <Typography.Paragraph text="Paragraph 02" variant="02" />
  <Typography.Paragraph text="Paragraph 03" variant="03" />
  <Typography.Paragraph text="Paragraph Caption" variant="Caption" />
  <Typography.Paragraph text="Paragraph Footer" variant="Footer" />
  <Typography.Paragraph text="Paragraph Tags" variant="Tags" />

  {/* Small Component */}
  <View style={styles.containerTitle}>
    <Typography.Paragraph
      align="center"
      color="white"
      weight="extrabold"
      text="Small Component"
    />
  </View>
  <Typography.Small text="Small 01" variant="s1" />
  <Typography.Small text="Small 02" variant="s2" />
  <Typography.Small text="Small 03" variant="s3" />

  {/* Font Weight */}
  <View style={styles.containerTitle}>
    <Typography.Paragraph
      align="center"
      color="white"
      weight="extrabold"
      text="Font Weight"
    />
  </View>
  <Typography.Heading text="Light" variant="h1" weight="light" />
  <Typography.Heading text="Regular" variant="h1" weight="regular" />
  <Typography.Heading text="Medium" variant="h1" weight="medium" />
  <Typography.Heading text="Bold" variant="h1" weight="bold" />
  <Typography.Heading text="Extrabold" variant="h1" weight="extrabold" />
  <View style={{ height: 100 }} />
  
</ScrollView>

Modal

Modal Demo

1. BottomSheet
2. PopupModal

<SafeAreaView style={{ flex: 1 }}>
  <View style={styles.container}>
    {/* Bottom Sheet */}
    <>
      {/* Close Button */}
      <Typography.Paragraph
        color="black"
        weight="extrabold"
        text="BottomSheet Component"
      />
      <Typography.Paragraph
        color="black"
        weight="extrabold"
        text="Variant: closeButton"
      />
      <Button
        title="Open BottomSheet"
        onPress={() => setVisibleBottomSheetClose(true)}
      />
      <BottomSheet
        usingKeyboardAvoidingView={true}
        title="Open BottomSheet"
        variant="closeButton"
        isVisible={isVisibleBottomSheetClose}
        onClosePress={() => setVisibleBottomSheetClose(false)}
      >
        <View style={{ paddingBottom: 10, marginTop: 20 }}>
          <Typography.Paragraph text="BottomSheet Content" />
          <Input
            style={{ marginBottom: 20 }}
            variant="primary"
            label="Input for test keyboard avoiding"
          />
          <View>
            <Button
              title="Close BottomSheet"
              onPress={() => setVisibleBottomSheetClose(false)}
            />
          </View>
        </View>
      </BottomSheet>

      {/* Normal */}
      <Typography.Paragraph
        color="black"
        weight="extrabold"
        text="Variant: normal"
        style={{ marginTop: 20 }}
      />
      <Button
        title="Open BottomSheet"
        onPress={() => setVisibleBottomSheetNormal(true)}
      />
      <BottomSheet
        title="Open BottomSheet"
        variant="normal"
        isVisible={isVisibleBottomSheetNormal}
        onClosePress={() => setVisibleBottomSheetNormal(false)}
        usingKeyboardAvoidingView={true}
      >
        <View style={{ paddingBottom: 10, marginTop: 20 }}>
          <Typography.Paragraph text="BottomSheet Content" />
          <Input
            style={{ marginBottom: 20 }}
            variant="primary"
            label="Input for test keyboard avoiding"
          />
          <View>
            <Button
              title="Close BottomSheet"
              onPress={() => setVisibleBottomSheetNormal(false)}
            />
          </View>
        </View>
      </BottomSheet>
    </>

    {/* Modal */}
    <>
      <Typography.Paragraph
        color="black"
        weight="extrabold"
        text="Modal Component"
        style={{ marginTop: 20 }}
      />
      <Button title="Open Modal" onPress={() => setVisibleModal(true)} />

      <PopupModal isVisible={isVisibleModal} usingKeyboardAvoidingView={true}>
        <Input style={{ marginBottom: 20 }} variant="primary" label="Name" />
        <Input style={{ marginBottom: 20 }} variant="primary" label="Email" />
        <Input
          style={{ marginBottom: 20 }}
          variant="primary"
          label="Password"
          isPassword
        />
        <Button title="Close Modal" onPress={() => setVisibleModal(false)} />
      </PopupModal>
    </>
  </View>
</SafeAreaView>

Container

Container Demo

1. Container

<Container
  backgroundColor="#F7F9F2"
  barBackgroundColor="white"
  barStyle="dark-content"
  headerConfig={{
    headerText: 'Container Demo',
    onBackPress: () => navigation.goBack(),
    style: {
      backgroundColor: 'white',
    },
    underline: true,
  }}
  isHeader
  isKeyboardAvoiding
>
  <View style={styles.button}>
    <Typography.Paragraph
      color="black"
      weight="extrabold"
      text="Container Left Title"
    />
    <Button
      title="Container Left Title"
      onPress={() => navigation.navigate('LeftTitle')}
    />
  </View>

  <View style={styles.button}>
    <Typography.Paragraph
      color="black"
      weight="extrabold"
      text="Container Middle Title"
    />
    <Button
      title="Container Middle Title"
      onPress={() => navigation.navigate('MiddleTitle')}
    />
  </View>

  <View style={styles.button}>
    <Typography.Paragraph
      color="black"
      weight="extrabold"
      text="Container No Header"
    />
    <Button
      title="Container No Header"
      onPress={() => navigation.navigate('NoHeader')}
    />
  </View>

  <View style={styles.button}>
    <Typography.Paragraph
      color="black"
      weight="extrabold"
      text="Container With Footer"
    />
    <Button
      title="Container With Footer"
      onPress={() => navigation.navigate('WithFooter')}
    />
  </View>

  <View style={styles.button}>
    <Typography.Paragraph
      color="black"
      weight="extrabold"
      text="Container With Right Content"
    />
    <Button
      title="Container With Right Content"
      onPress={() => navigation.navigate('WithRightContent')}
    />
  </View>
</Container>

AdaptByte CLI

Adaptbyte CLI is command line interface can be use for adding the component inside root of project. So after you adding the component to root project you can start customize the component as you want without using it from node_modules. This features is supposed to help urgent changes for the component or you need extra customization the component that cannot support from props. You can check cli below:

You can running

npx adaptbyte-cli add TypographyDisplay

Replace TypographyDisplay for component that want to add:

1. TypographyDisplay
2. TypographyHeading
3. TypographyParagraph
4. Button
5. TextButton
6. Input
7. InputDate
8. InputOtp
9. InputNumber
10. InputSelect
11. PopupModal
12. BottomSheet
13. Container

Contributing

See the contributing guide to learn how to contribute to the repository and the development workflow.

License

MIT

Made with create-react-native-library