Skip to content

Elevate your English proficiency with our sleek React Native app. πŸš€ Interactive lessons, real-life conversations, and a user-friendly experience. Perfect for beginners and advanced learners. Start your language journey now!

License

Notifications You must be signed in to change notification settings

Youth-Tech/BeeEnglish

Repository files navigation

Bee English

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

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={StyleSheet.absoluteFill}>
            <LinearGradient
              colors={['#FFEFAD', '#FFC107']}
              containerStyle={{ width: '100%', height: '100%' }}
            />
          </Block>
        }
        shadowHeight={10}
        buttonRadius={8}
        shadowButtonColor="#FFC107"
        buttonColor="#FFEFAD"
        onPress={() => {
          console.log('press')
        }}
      />
  • Modal

    • Props

      Name Type Default value Require
      children ReactNode auto produce βœ…
      position top or bottom or center bottom
      onShow void function undefined
      onDismiss void function undefined
    • How to use

    • Wrap the component as a container to use

    const modalRef = useRef<ModalFunction>(null)
    const handleOpen = useCallback(() => {
    modalRef.current?.openModal()
    }, [])
    const handleDismiss = useCallback(() => {
    modalRef.current?.dismissModal()
    }, [])
    const onShow = useCallback(() => {
    console.log('Modal opened')
    }, [])
    const onDissmiss = useCallback(() => {
    console.log('Modal closed')
    }, [])
    return (
           <Modal
            position="bottom"
            ref={modalRef}
            onShow={onShow}
            onDismiss={onDismiss}
          >
           You code here
          </Modal>
  • LineChart

    • Props

      Name Type Default value Require
      data Array undefined βœ…
      width number undefined βœ…
      height number undefined βœ…
      precision number 0
      haveVerticalGuides boolean false
      haveHorizontalGuides boolean false
      haveXAxis boolean false
      haveYAxis boolean false
      axisStrokeWidth number 0.5
      axisStrokeColor string #E5E5E5
      haveDots boolean false
      dotsColor string ##FFC107
      dotsStrokeColor string #FFFFFF
      dotsStrokeWidth number 2
      rDots number 8
      labelColor string #171725
      labelFontSize string h5
      labelFontFamily string semibold
      lineColor string #FFEFAD
      lineWidth number 2
      onItemClick void functioin undefined
    • How to use

    • Line chart will be changed based on the data provided

    const data = [
      { id: 0, label: 'Mon', x: 0, y: 0 },
      { id: 1, label: 'Tues', x: 1, y: 4 },
      { id: 2, label: 'Wed', x: 2, y: 30 },
      { id: 3, label: 'Thur', x: 3, y: 15 },
      { id: 4, label: 'Fri', x: 4, y: 40 },
      { id: 5, label: 'Sat', x: 5, y: 50 },
      { id: 6, label: 'Sun', x: 6, y: 40 },
    ]
    <LineChart
      width={widthScreen}
      height={300}
      data={data}
      haveDots
      haveXAxis
      haveHorizontalGuides
      lineColor="#FFEFAD"
      onItemClick={handleItemClick}
        />

πŸš€ Getting Started

1. Installation

yarn install

# To build iOS app

cd ios
pod install
cd ..

2. Run Android

yarn android

3. Run IOS

yarn ios

How to create new Service

  1. Go to sevice folder and define new Service
  2. To export all services from new services, use exported values in the index file.

How to create new Flow

  1. Go to screens folder and define new component
  2. Config the screen name route at src/navigation/routes
  3. Config the new screen route at src/navigation/RootStack

How to use Lottie Animation ?

From Youth-Tech with πŸ’–

About

Elevate your English proficiency with our sleek React Native app. πŸš€ Interactive lessons, real-life conversations, and a user-friendly experience. Perfect for beginners and advanced learners. Start your language journey now!

Topics

Resources

License

Stars

Watchers

Forks

Languages