Bee English

Preview: Youtube

Contents

1. Technical
2. Project Scaffolding
3. Alias
4. Core Component
5. Custom Component
6. 🚀 Getting Started
7. How to create new Service
8. How to create new Flow
9. How to use Lottie Animation

Technical

• Package Management
  • Yarn
• State Management
  • Redux
• Routing and Navigation
  • React Navigation for native mobile
• Connect API
  • Axios
• Local Storage
  • MMKV for React Native
  • Redux Persist
• Animation Handler
  • Reanimated3
  • React Native Gesture Handler
  • React Native Animated API
  • Lottie for React Native

Project Scaffolding

src
├── @type                     #define commons type use in project
├── assets                    #contain file image, svg, animation config, ... in project
│
├── components
│   ├── bases                 #define base component for project
│   ├── commons               #define custom component for project
│   └── utils                 #define utils for component
│
├── hooks                     #define custom hook
├── navigation
│   ├── index.ts              #export all method, variable, and components
│   ├── routes.ts             #define all screen route in project
│   ├── RootStack.tsx         #contain all stack in project
│   ├── RootApp.tsx           #contain RootStack, loading modal, message modal
│   └── NavigationService.ts  #define 'navigationRef' and all method to interact with it
│
├── redux                     #define all end point for api
│   ├── reducers              #define all reducer in project
│   ├── store                 #define store for project with Redux Persist - MMKV storage
│   └── selectors             #define all selector in project
│
├── screens
│   ├── HomeScreen
│   │   ├── components        #define common component for screen
│   │   ├── index.tsx         #define and export screen component
│   │   └── type.ts           #define common type for screen
│   ├── ...
│   └── index.ts              #export all screen
│
├── services
│   ├── PokemonService.ts     #define all method to connect api of service
│   ├── ...
│   └── index.ts              #export all service
│
├── themes
│   ├── baseStyles.ts         #define base style for style sheet create by method 'makeStyles'
│   ├── colors.ts             #define color palette
│   ├── font.ts               #define font, fontSize in project
│   ├── normalize.ts          #define responsive method
│   ├── style.ts              #define utils, type, hook for style of project theme
│   └── index.ts              #export all theme method and constants
│
├── utils
│   ├── ...
│   └── helper.ts             #define helper function for project
│
└── App.tsx

Alias

• @type: ./src/@type
• @assets: ./src/assets
• @components: ./src/components
• @hooks: ./src/hooks
• @navigation: ./src/navigation
• @redux: ./src/redux
• @screens: ./src/screens
• @themes: ./src/themes
• @utils: ./src/utils
• @services: ./src/services
• @i18n: ./src/i18n

Core Component

• Container
• Block
• Text
• TextInput
• Image
• StatusBar

Custom Component

• Circle Progress

  • Props

    | Name | Type | Default value | Require | | --------------------------------------- | ---------------------- | ------------- | ------- | | step | number | | ✅ | | totalStep | number | | ✅ | | size | number | | ✅ | | strokeWidth | number | 10 | | | totalStepColor | string | orange | | | stepColor | string | greyLight | | | progressContainerStyles | StyleProp<ViewStyle> | {} | | | progressValueProps | CommonTextProps | undefined | | | onCompleteAnimation(isFinish?: boolean) | Function | ()=>{} | |

  • How to use

    <CircleProgress size={150} step={50} totalSteps={100} strokeWidth={10} />
    

• Progress

  • Props

    | Name | Type | Default value | Require | | --------------------------------------- | ---------------------- | ------------- | ------- | | step | number | | ✅ | | totalStep | number | | ✅ | | strokeHeight | number | 10 | | | totalStepColor | string | orange | | | stepColor | string | greyLight | | | progressContainerStyles | StyleProp<ViewStyle> | {} | | | onCompleteAnimation(isFinish?: boolean) | Function | ()=>{} | |

  • How to use

    <Progress
      strokeHeight={10}
      step={80}
      totalSteps={100}
      progressContainerStyles={{
        paddingHorizontal: 10,
      }}
    />
    

• LinearGradient

  • Props

    | Name | Type | Default value | Require | | -------------- | -------------------------------------- | ------------- | ------- | | colors | string[] | | ✅ | | containerStyle | StyleProp<ViewStyle> | {} | | | orientation | horizontal or vertical or number | vertical | | | revers | boolean | false | | | transform | Partial<TransformedProps> | {} | |

  • How to use

    <LinearGradient
      colors={['#FFEFAD', '#FFC107']}
      containerStyle={{ flex: 1 }}
      transform={{ rotation: 20 }}
    />
    

• ShadowBlock

  • Props

    • Component is extended all props from Block component
    • External Props

    | Name | Type | Default value | Require | | -------------------------- | ----------------- | ------------- | ------- | | shadowHeight | number | 5 | | | shadowPosition | top or bottom | bottom | | | shadowLabel | string | undefined | | | shadowLabelTextStyle | CommonTextProps | undefined | | | shadowLabelContainerStyle | BlockProps | undefined | | | shadowBackgroundColor | string | #ccc | | | containerPaddingVertical | number | undefined | | | containerPaddingHorizontal | number | undefined | | | containerPaddingRight | number | undefined | | | containerPaddingLeft | number | undefined | | | containerPaddingTop | number | undefined | | | containerPaddingBottom | number | undefined | |

  • How to use

    <ShadowBlock
      row
      marginTop={20}
      space="between"
      paddingHorizontal={20}
      containerPaddingHorizontal={20}
    >
      <Block width={10} height={10} backgroundColor="red" />
      <Progress
        step={10}
        totalSteps={100}
        strokeHeight={10}
        progressContainerStyles={{
          flex: 1,
          marginStart: 10,
        }}
      />
    </ShadowBlock>
    

• ShadowButton

  • Props

    • Component is extended all props from Pressable (native component from ReactNative) component
    • External Props

    | Name | Type | Default value | Require | | ----------------- | ----------------------- | ------------- | ------- | | buttonWidth | number or string | 5 | | | buttonHeight | number or string | #ccc | | | buttonBorderSize | number | undefined | | | buttonBorderColor | string or ReactNode | undefined | | | containerStyle | StyleProp<ViewStyle> | undefined | | | shadowHeight | number | 5 | | | buttonRadius | number | 5 | | | buttonColor | string | primary | | | disabled | boolean | undefined | | | shadowButtonColor | string | greyLight | |

  • How to use

    <ShadowButton
      buttonHeight={45}
      buttonBorderSize={2}
      buttonBorderColor={
        <Block style={StyleSh