- Install package dependencies:
- Using Yarn:
yarn add react-native-reanimated@^1.10.1
- Install:
- Using npm:
npm install @eohjsc/react-native-smart-city --save
- Using Yarn:
yarn add @eohjsc/react-native-smart-city
- Compile application using react-native run-android
$ react-native link @eohjsc/react-native-smart-city
- StackNavigator
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 { createStackNavigator } from '@react-navigation/stack';
// TODO: What to do with the module?
const Stack = createStackNavigator();
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>
);
};
- 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>
);
};
- 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: 'caret-up',
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 thesensor and action
to it and it will run after calling render. -
sensor
is a device in your Unit and action is theaction
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
yarn install && yarn watch