types#Screens TypeScript Examples

The following examples show how to use types#Screens. You can vote up the ones you like or vote down the ones you don't like, and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
Source File: insightDrawer.tsx    From iotc-cpm-sample with MIT License 4 votes vote down vote up 
/**
 * This navigator doesn't actually navigate to any screen.
 * It is used to have a drawer for chart management by levereging on what react-navigation already offers (gestures, styles...).
 * @param props
 */
export default function InsightDrawer(props: DrawerProps) {
  const {state, dispatch} = useContext(ConfigContext);
  const {currentScreen} = props;
  let icon: any = 'bluetooth';

  if (state.healthManager) {
    if (state.healthManager instanceof AppleHealthManager) {
      icon = ({size}: {size: number}) => (
        <Image
          source={require('../assets/health_kit.png')}
          style={{width: 60, height: 60}}
        />
      );
    } else if (state.healthManager instanceof GoogleFitManager) {
      icon = ({size}: {size: number}) => (
        <Image
          source={require('../assets/google_fit.png')}
          style={{width: size, height: size - 5}}
        />
      );
    }
  }

  if (
    !state.device ||
    !state.device.items ||
    currentScreen !== Screens.INSIGHT_SCREEN
  ) {
    return null;
  }
  return (
    <SafeAreaView style={style.container}>
      <View style={style.header}>
        <IconButton
          icon={icon}
          size={30}
          style={{marginLeft: -5, marginRight: 20}}
        />
        <View style={{width: '60%', paddingBottom: 100}}>
          <View style={{flexDirection: 'row'}}>
            <Headline>Sync options</Headline>
            <IconButton
              onPress={() => {
                props.close();
              }}
              icon="chevron-left"
              style={{marginLeft: 40, marginTop: -5}}
            />
          </View>
          <Detail>Which kind of device data would you like to show?</Detail>
        </View>
      </View>
      <Name style={{marginBottom: 20}}>{state.device.name}</Name>
      <Divider />
      <ScrollView>
        {state.device.items.map((item, index) => (
          <View style={style.itemContainer} key={`view-${item.id}`}>
            <Item style={{width: 150}}>{item.name}</Item>
            {/* pass extra parameter to the ref in order to process and enable only valid ids */}
            <Switch
              {...{refId: `${item.parentId}/${item.id}`}}
              value={item.enabled}
              onValueChange={async current => {
                await item.enable(current);
                // dispatch is needed to update state of device items
                dispatch({
                  type: 'HEALTH_CONNECT',
                  payload: state.device,
                });
              }}
            />
          </View>
        ))}
      </ScrollView>
    </SafeAreaView>
  );
}