react-native-smart-city

Getting started

1. Install package dependencies:

• Using Yarn: yarn add react-native-reanimated@^1.10.1

2. Install:

• Using npm: npm install @eohjsc/react-native-smart-city --save
• Using Yarn: yarn add @eohjsc/react-native-smart-city

3. Compile application using react-native run-android

Mostly automatic installation

$ react-native link @eohjsc/react-native-smart-city

Usage

1. StackNavigator

• You can see the screens or components that the library is supporting in the folder /@eohjsc/react-native-smart-city/index.js

import {
  UnitStack,
  AddMemberStack,
  AddSubUnitStack,
  AddDeviceStack,
  AddGatewayStack,
  SCContext,
  AddLGDeviceStack,
  initSCConfig,
  AddUnitStack,
  AutomateStack,
  NotificationStack,
} from '@eohjsc/react-native-smart-city';
import Config from 'react-native-config';
import { createNativeStackNavigator } from '@react-navigation/native-stack';

const Stack = createNativeStackNavigator();

const YourStack = () => {
  useEffect(() => {
    const config = {
      apiRoot: Config.API_ROOT,
      GOOGLE_MAP_API_KEY: Config.GOOGLE_MAP_API_KEY,
      LG_CLIENT_ID: Config.LG_CLIENT_ID,
      LG_REDIRECT_URI_APP: Config.LG_REDIRECT_URI_APP,
      LG_URL: Config.LG_URL,
      VCONNEX_CLIENT_ID: Config.VCONNEX_CLIENT_ID,
      VCONNEX_REDIRECT_URI_APP: Config.VCONNEX_REDIRECT_URI,
      pusherAppKey: Config.PUSHER_APP_KEY,
      pusherAppCluster: Config.PUSHER_APP_CLUSTER,
      language,
      setCurrentSensorDisplay,
      appName: Config.APP_NAME,
      packageName: Config.APP_PACKAGE_NAME, //  Your package name is required
      versionCode: Config.APP_VERSION_CODE, //  Your app version is required
    };
    initSCConfig(config);
  }, [language, setCurrentSensorDisplay]);

  // Declare yourAuthObject and params
  return (
    <Stack.Navigator>
      <Stack.Screen
        name={'MainTab'}
        component={MainTab}
        options={{
          headerShown: false,
        }}
      />
      <Stack.Screen
        name={'UnitStack'}
        component={UnitStack}
        initialParams={params}
        options={{
          headerShown: false,
        }}
      />
      <Stack.Screen
        name={'AddGatewayStack'}
        component={AddGatewayStack}
        options={{ headerShown: false }}
      />
      <Stack.Screen
        name={'AddDeviceStack'}
        component={AddDeviceStack}
        options={{ headerShown: false }}
      />
      <Stack.Screen
        name={'AddMemberStack'}
        component={AddMemberStack}
        options={{ headerShown: false }}
      />
      <Stack.Screen
        name={'AddSubUnitStack'}
        component={AddSubUnitStack}
        options={{ headerShown: false }}
      />
    </Stack.Navigator>
  );
};
const MainTab = () => {
  return (
    <Tab.Navigator>
      <Tab.Screen name={'AutomateStack'} component={AutomateStack} />
      <Tab.Screen name={'NotificationStack'} component={NotificationStack} />
    </Tab.Navigator>
  );
};

2. Use components

import React from 'react';
import { View } from 'react-native';
import { MyPinnedSharedUnit, MyUnit } from '@eohjsc/react-native-smart-city';

const MyScreen = () => {
  return (
    <View>
      <MyUnit />
      <MyPinnedSharedUnit />
    </View>
  );
};

3. Use navigate to the screens included in the '@eohjsc/react-native-smart-city' library

• You can see the list of screens, currently supported by the library in the folder /@eohjsc/react-native-smart-city/src/navigations/

import { useNavigation } from '@react-navigation/native';
const { navigate } = useNavigation();
const automate_id = 1;
const unit_id = 1;
const sensor_id = 1;

const handleNavigateScriptDetail = () => {
  navigate('UnitStack', {
    screen: 'ScriptDetail',
    params: {
      id: automate_id,
    },
  });
};

const handleNavigateDeviceDetail = () => {
  navigate('UnitStack', {
    screen: 'DeviceDetail',
      params: {
        unitId: unit_id,
        sensorId: sensor_id,
      },
  });
};

<TouchableOpacity onPress={handleNavigateScriptDetail}>
  <Text>{'Navigate to the "ScriptDetail" screen'}</Text>
</TouchableOpacity>;

<TouchableOpacity onPress={handleNavigateDeviceDetail}>
  <Text>{'Navigate to the "DeviceDetail" screen'}</Text>
</TouchableOpacity>;

4. Trigger quick action

import React from 'react';
import { View, Button } from 'react-native';
import { sendRemoteCommand } from '@eohjsc/react-native-smart-city/src/iot/RemoteControl';

export const MyFunctionalComponent = () => {
  const sensor = {
    id: 1,
    remote_control_options: {
      internet: {},
      bluetooth: {},
    },
  };
  const action = {
    color: '#00979D',
    command_prefer_over_bluetooth: true,
    command_prefer_over_googlehome: false,
    command_prefer_over_internet: false,
    googlehome_actions: [],
    icon: 'caretup',
    icon_kit: null,
    id: 1,
    key: '24240de0-5c8e-11ec-bf63-0242ac130002',
    lg_actions: [],
    name: 'Garage Up',
  };
  const handleQuickAction = async () => {
    const result = await sendRemoteCommand(sensor, action); // Action Garage Up
    if (result) {
      console.log('Successful control');
    } else {
      console.log('Control failed');
    }
  };
  return (
    <View>
      <Button
        onPress={handleQuickAction}
        title="Example trigger quick action control Garage Up"
      />
    </View>
  );
};

• sendRemoteCommand user needs to have permission to control the device, you pass in the sensor and action to it and it will run after calling render.
• sensor is a device in your Unit and action is the action key of the device..
• You can take out the sensor and action from your Unit when calling the API.UNIT.UNIT_DETAIL(unitId) it will return all devices in 1 unit.
• Or get sensor from API.DEVICE.DISPLAY(sensor.id) returns all actions of 1 device.
• Refer YourProjectPath /node_modules/@eohjsc/react-native-smart-city/src/screens/Unit/Detail.js

Sync file to EoH source

  yarn install && yarn watch