0.2.3 • Published 4 months ago

rn-adaptbyte v0.2.3

Weekly downloads
-
License
MIT
Repository
github
Last release
4 months ago

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.

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

or can install by using

yarn add react-native-gesture-handler react-native-reanimated react-native-safe-area-context react-native-vector-icons
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 Reanimated Setup

Add reanimated plugin to babel.config.js

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

Nativewind Setup

Follow the instructions for installing NativeWind v4.

Modify your tailwind.config.js

// tailwind.config.js

+ const { nextui } = require("@malberee/nextui-native/plugin")

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    './src/**/*.{js,jsx,ts,tsx}',
    'node_modules/rn-adaptbyte/src/**/*.{js,jsx,ts,tsx}',
    'node_modules/rn-adaptbyte/lib/**/*.{js,jsx,ts,tsx}',
  ],
  presets: [require("nativewind/preset")],
  theme: {
    extend: {},
  },
  darkMode: "class",
+ plugins: [nextui()] ,
}

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

module.exports = {
  assets: ['src/assets/fonts'], // Add this
};
  1. Run in root project
npx react-native-asset

Will link font asset to your project

  1. Wrap you element in App.tsx with AdaptByteContext.Provider

Make sure you add both for normal and italic, and string value must be same with font PostScript Name not a filename of your ttf file.

<AdaptByteContext.Provider
  value={{
    fontFamily: {
      normal: 'PlusJakartaSans-Regular',
      italic: 'PlusJakartaSans-Italic',
    },
  }}
>
  <App />
</AdaptByteContext.Provider>

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" />

  {/* 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>

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

react-nativeiosandroid
@storybook/addon-storysourcereact-native-calendars
0.2.3

4 months ago

0.2.2

4 months ago

0.2.1

4 months ago

0.2.0

4 months ago

0.1.2

5 months ago

0.1.0

5 months ago

0.0.1

5 months ago