react-native-btaskee-mini-app

Setup

npm install --save react-native-btaskee-mini-app

--- or ---

yarn add react-native-btaskee-mini-app

Don't forget to run pod install after that !

Require: Please setup

• react native navigation (https://reactnavigation.org/docs/getting-started/)
• react-native-device-info (https://github.com/react-native-device-info/react-native-device-info#installation)
• react-native-localize DOCS (https://github.com/zoontek/react-native-localize)

Example usage

import { NavigationContainer, useNavigation } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import React from 'react';
import { Text, TouchableOpacity, View } from 'react-native';
import BtaskeeMiniApp, { BTASKEE_HOME_TYPE, BTASKEE_ENV } from 'react-native-btaskee-mini-app';

const Stack = createStackNavigator();
const HomeScreen = () => {
  const navigation = useNavigation();
  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <TouchableOpacity
        style={{ borderWidth: 1, backgroundColor: 'orange', padding: 10 }}
        onPress={() => {
          navigation.navigate('BTaskeeScreen');
        }}
      >
        <Text>bTaskee</Text>
      </TouchableOpacity>
    </View>
  );
};

const BtaskeeScreen = () => {
  return (
     <BtaskeeMiniApp
      userInfo={{
        name: 'test',
        phone: '0834567133',
        email: '[email protected]',
        address:{
          homeType: BTASKEE_HOME_TYPE.APARTMENT,
          fullAddress:'bTaskee Thailand, Phaya Thai Road, Thung Phaya Thai, Ratchathewi, Bangkok, Thailand',
          shortAddress:'Phaya Thai Road Khwaeng Thung Phaya Thai',
          description: 'Floor 1, room 105, block A',
          lat: 13.753812456259901,
          lng: 100.5316611541049,
          city: 'Bangkok',
          district: 'Ratchathewi',
        }
      }}
      config={{
        env: BTASKEE_ENV.DEV,
        locale: 'en',
        partnerCode: 'TEST',
        apiKey: '',
        apiKeyGoogleMap: ''
      }}
    />
  );
};

const App = () => {
  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen name="HomeScreen"  component={HomeScreen} />
        <Stack.Screen
          options={{headerShown: false}}
          name="BTaskeeScreen"
          component={BtaskeeScreen}
        />
      </Stack.Navigator>
    </NavigationContainer>
  );
};

export default App;

Run Example

cd example
yarn
cd ios && pod install && cd ..
yarn ios

Preview

| Cleaning service | Air-conditioner service | | :---------------------------------------------------------------: | :------------------------------------------------------------------------: | | | | | Cleaning service | Air-conditioner service | | | |

Props:

| userInfo: object | | | | | -------- | -------- | -------- | --------------------------------------------------------------------------------------------- | | name | string | require | | | phone | string | require | | | email | string | optional |We need the user's email to send their booking status notification via | | address | object | optional |homeType used to determine the type of house. Can be BTASKEE_HOME_TYPE.APARTMENT for apartment, BTASKEE_HOME_TYPE.HOME for normal house or TASKEE_HOME_TYPE.VILLA for villafullAddress full address shortAddress short address description used to describe the exact location lat latitudelng longitudecity ex: "Bangkok" or "Krung Thep Maha Nakhon" or "Krung Thep" or "กรุงเทพมหานคร"district ex: "Ratchathewi" or "เขตราชเทวี" or "ราชเทวี" |

| config: object | | | | | -------- | -------- | -------- | --------------------------------------------------------------------------------------------- | | env | BTASKEE_ENV | require | BTASKEE_ENV.DEV for development or BTASKEE_ENV.PRODUCTION for production | | locale | string | require | Used to display mini app language. Can be vi for Vietnamese, en for English, th for Thai | | partnerCode | string | require | Contact bTaskee for information | | apiKey | string | require |Contact bTaskee for information | | apiKeyGoogleMap | string | optional |Used to get the location from Google Map|

NOTE: We need the user's address to determine the appointment location, so you need to pass either userInfo.address or config.apiKeyGoogleMap or both.

License

MIT