react-native#ViewStyle TypeScript Examples

getInputPadding = (theme: Theme, size: INPUT_SIZE): ViewStyle => {
  switch (size) {
    case INPUT_SIZE.mini:
      return {
        paddingVertical: theme.sizing.scale100,
        paddingHorizontal: theme.sizing.scale550,
      };

    case INPUT_SIZE.compact:
      return {
        paddingVertical: theme.sizing.scale200,
        paddingHorizontal: theme.sizing.scale550,
      };

    case INPUT_SIZE.default:
      return {
        paddingVertical: theme.sizing.scale400,
        paddingHorizontal: theme.sizing.scale550,
      };

    case INPUT_SIZE.large:
      return {
        paddingVertical: theme.sizing.scale550,
        paddingHorizontal: theme.sizing.scale550,
      };

    default:
      return {};
  }
}

export function Center({
  width = 240,
  height = 200,
  children,
  bgColor,
  style,
  ...rest
}: {
  width: number;
  height: number;
  bgColor: string;
  children: React.ReactNode;
  style?: StyleProp<ViewStyle>;
}) {
  return (
    <View
      style={[
        {
          justifyContent: "center",
          alignItems: "center",
          width,
          height,
          backgroundColor: bgColor,
        },
        style,
      ]}
      {...rest}
    >
      {children}
    </View>
  );
}

Shadows: { [key: string]: ViewStyle } = {
  MAIN_CONTAINER: {
    shadowOffset: {
      height: 0,
      width: 0,
    },
    shadowRadius: 15,
    shadowOpacity: 0.5,
    shadowColor: Colors.SHADOW.toString(),
  },
}

setGlobalStyles: SetGlobalStyles = {
  /**Set global styles to all floating-label-inputs container */
  containerStyles: undefined as ViewStyle | undefined,
  /**Set global custom styles to all floating-label-inputs labels */
  customLabelStyles: undefined as CustomLabelProps | undefined,
  /**Set global styles to all floating-label-inputs input */
  inputStyles: undefined as TextStyle | undefined,
  /**Set global styles to all floating-label-inputs label */
  labelStyles: undefined as TextStyle | undefined,
  /**Set global styles to all floating-label-inputs show password container */
  showPasswordContainerStyles: undefined as ViewStyle | undefined,
  /**Set global styles to all floating-label-inputs show password image */
  showPasswordImageStyles: undefined as ImageStyle | undefined,
  /**Set global style to the countdown text */
  showCountdownStyles: undefined as TextStyle | undefined,
}

static defaultProps = {
    overlayEnabled: Platform.OS !== 'ios',
    shadowEnabled: true,
    gestureEnabled: true,
    gestureVelocityImpact: GESTURE_VELOCITY_IMPACT,
    overlay: ({
      style,
    }: {
      style: Animated.WithAnimatedValue<StyleProp<ViewStyle>>;
    }) =>
      style ? (
        <Animated.View pointerEvents="none" style={[styles.overlay, style]} />
      ) : null,
  };

getRootColors = (
  theme: Theme,
  positive: boolean,
  error: boolean,
  disabled: boolean,
  isFocused: boolean
): ViewStyle => {
  if (disabled) {
    return {
      borderColor: theme.colors.inputFillDisabled,
      backgroundColor: theme.colors.inputFillDisabled,
    };
  } else if (isFocused) {
    return {
      borderColor: theme.colors.inputBorderFocused,
      backgroundColor: theme.colors.inputFillActive,
    };
  } else if (error) {
    return {
      borderColor: theme.colors.inputBorderError,
      backgroundColor: theme.colors.inputFillError,
    };
  } else if (positive) {
    return {
      borderColor: theme.colors.inputBorderPositive,
      backgroundColor: theme.colors.inputFillPositive,
    };
  } else {
    return {
      borderColor: theme.colors.inputBorder,
      backgroundColor: theme.colors.inputFill,
    };
  }
}

static defaultProps: {
        overlayEnabled: boolean;
        shadowEnabled: boolean;
        gestureEnabled: boolean;
        gestureVelocityImpact: number;
        overlay: ({ style, }: {
            style: Animated.WithAnimatedValue<StyleProp<ViewStyle>>;
        }) => JSX.Element | null;
    };

getInputEnhancerPadding = (theme: Theme, size: INPUT_SIZE): ViewStyle => {
  switch (size) {
    case INPUT_SIZE.mini:
      return {
        paddingVertical: 0,
        paddingHorizontal: theme.sizing.scale400,
      };

    case INPUT_SIZE.compact:
      return {
        paddingVertical: 0,
        paddingHorizontal: theme.sizing.scale400,
      };

    case INPUT_SIZE.default:
      return {
        paddingVertical: 0,
        paddingHorizontal: theme.sizing.scale300,
      };

    case INPUT_SIZE.large:
      return {
        paddingVertical: 0,
        paddingHorizontal: theme.sizing.scale200,
      };

    default:
      return {};
  }
}

renderWebview = (
    content: string,
    style: StyleProp<ViewStyle>,
    props: WebViewProps = {}
  ) => (
    <WebView
      scrollEnabled={false}
      hideKeyboardAccessoryView={true}
      keyboardDisplayRequiresUserAction={false}
      originWhitelist={['*']}
      style={style}
      onError={(syntheticEvent) => {
        const { nativeEvent } = syntheticEvent;
        console.warn('WebView error: ', nativeEvent);
      }}
      allowFileAccess={true}
      domStorageEnabled={false}
      automaticallyAdjustContentInsets={true}
      bounces={false}
      dataDetectorTypes="none"
      {...props}
      javaScriptEnabled={true}
      source={{ html: content }}
      ref={this._webview}
      onMessage={this.onMessage}
    />
  );

function SimulatedButton(props: {textColor?: string}) {
  const {dispatch} = useContext(ConfigContext);
  const {orientation} = useScreenDimensions();

  const viewStyle: ViewStyle = orientation == 'portrait' ? {} : {};
  return (
    <View style={{alignItems: 'center', ...viewStyle}}>
      <CPMText style={props.textColor ? {color: props.textColor} : {}}>
        Don't have a code?
      </CPMText>
      <CPMButton
        style={style.button}
        mode="contained"
        onPress={() => {
          // set simulation. data will not be sent to IoTCentral
          dispatch({
            type: 'CONNECT',
            payload: null,
          });
        }}>
        Use simulated code
      </CPMButton>
    </View>
  );
}

function DefaultCardHeader(
  props: React.PropsWithChildren<DefaultCardHeaderProps>,
) {
  const {children, style, theme} = props;
  const headerStyle: StyleProp<ViewStyle> = [styles.cardHeader];
  if (style) {
    headerStyle.push(style);
  }
  return (
    <View
      style={[
        styles.cardHeader,
        style,
        {
          borderTopLeftRadius: theme.borderRadius,
          borderTopRightRadius: theme.borderRadius,
        },
      ]}>
      {children}
    </View>
  );
}

export default function Avatar(props: Props) {
  let { firstName, lastName, size, containerStyle } = props;

  let avatarSize: StyleProp<ViewStyle> = {
    width: size,
    height: size,
    borderRadius: Math.round(size / 2),
  };
  let textSize: StyleProp<TextStyle> = {
    fontSize: Math.round(size / 2),
  };

  return (
    <View style={[styles.avatar, containerStyle, avatarSize]}>
      <Text
        style={[styles.nameInitial, textSize]}
      >{`${firstName[0]}${lastName[0]}`}</Text>
    </View>
  );
}

LoadingTile = connect(
  (state: { base: { currentTheme: string } }) => ({
    theme: state.base.currentTheme,
  })
)(({ style, theme }: { style?: ViewStyle; theme: string }) => {
  return (
    <View
      animation={{
        from: { opacity: 1 },
        to: { opacity: 0.5 },
      }}
      duration={300}
      direction="alternate"
      iterationCount={Infinity}
      style={[
        styles.loadingTile,
        theme === "dark" ? styles.dark : styles.light,
        style,
      ]}
      useNativeDriver
    />
  );
})

DetachedHeader.Container = ({
  children,
  style,
}: {
  children: JSX.Element;
  style?: ViewStyle;
}) => {
  const insets = useSafeAreaInsets();
  return (
    <Animated.View
      style={[
        { position: 'absolute', top: 0, left: 0, right: 0, paddingTop: insets.top  },
        style,
      ]}
    >
      {children}
    </Animated.View>
  );
};

class SendButton extends React.Component<{
  /**
   * Content to be shared.
   */
  shareContent: ShareContent;

  /**
   * View style, if any.
   */
  style?: ViewStyle;
}> {
  static defaultProps: {
    style: typeof styles.defaultButtonStyle;
  };

  render() {
    return <RCTFBSendButton {...this.props} />;
  }
}

CheckboxGroup: React.FC<CheckboxGroupProps> = ({
  direction = Direction.Vertical,
  values,
  onValueChange = () => {},
  style,
  children,
  ...rest
}) => {
  const _containerStyle: StyleProp<ViewStyle> = [
    {
      flexDirection: direction === Direction.Horizontal ? "row" : "column",
      overflow: "hidden",
    },
  ];

  if (direction !== Direction.Vertical) {
    _containerStyle.push({
      alignItems: "center",
    });
  }

  return (
    <View style={[{ minHeight: 40 }, style]} {...rest}>
      <Provider value={{ values, onValueChange, direction }}>
        <View style={_containerStyle}>{children}</View>
      </Provider>
    </View>
  );
}

export function getStyleShadow(): ViewStyle {
  return {
    ...Platform.select({
      android: {
        elevation: 4,
      },
      ios: {
        shadowColor: 'darkgray',
        shadowOffset: {height: 1, width: 1},
        shadowOpacity: 1,
        shadowRadius: 1,
      },
    }),
  };
}

export function CircleView(props: {
  style?: ViewStyle;
  size?: number;
  color?: string;
  children?: JSX.Element | JSX.Element[]; 
}){

  const size = props.size ?? 30;

  const containerStyle = {
    height: size,
    aspectRatio: 1,
    borderRadius: size/2,
    backgroundColor: props.color ?? 'white',
  };

  return (
    <View style={[containerStyle, props.style]}>
      {props.children}
    </View>
  );
}

defaultButton: StyleProp<ViewStyle> = {
  elevation: 0,
  height: 48,
}

AnimatedCircle = Animated.createAnimatedComponent(
  Circle
) as React.ComponentClass<
  Animated.AnimateProps<ViewStyle, CircleProps & { style?: any }>
>

AnimatedPath = Animated.createAnimatedComponent(
  Path
) as any as React.ComponentClass<
  Animated.AnimateProps<ViewStyle, PathProps & { style?: ViewStyle }>,
  any
>

AccountManagement = ({
  account,
  forgetKey,
  forgetAccount,
  addKey,
  navigation,
  accounts,
}: PropsFromRedux & {navigation: MainNavigation}) => {
  const [username, setUsername] = useState(account.name);
  useLockedPortrait(navigation);

  useEffect(() => {
    const unsubscribe = navigation.addListener('focus', () => {
      setUsername(account.name);
    });
    return unsubscribe;
  }, [navigation, account.name]);
  if (!username) return null;
  return (
    <SafeArea style={styles.safeArea}>
      <FocusAwareStatusBar barStyle="light-content" backgroundColor="black" />

      <ScrollView>
        <UserPicker
          username={username}
          accounts={accounts.map((acc) => acc.name)}
          onAccountSelected={(name) => {
            setUsername(name);
          }}
        />
        {//@ts-ignore
        translate('settings.keys.disclaimer').map((e, i) => (
          //@ts-ignore
          <Text key={i} style={styles[e.style_do_not_translate]}>
            {e.text}
          </Text>
        ))}
        <Separator height={20} />
        <Key
          type={KeyTypes.posting}
          containerStyle={styles.keyOdd as ViewStyle}
          account={accounts.find((e) => e.name === username)}
          forgetKey={forgetKey}
          navigation={navigation}
        />
        <Key
          type={KeyTypes.active}
          containerStyle={styles.keyEven as ViewStyle}
          account={accounts.find((e) => e.name === username)}
          forgetKey={forgetKey}
          navigation={navigation}
        />
        <Key
          type={KeyTypes.memo}
          containerStyle={styles.keyOdd as ViewStyle}
          account={accounts.find((e) => e.name === username)}
          forgetKey={forgetKey}
          navigation={navigation}
        />
        <Separator height={20} />
        <EllipticButton
          style={styles.button}
          title="FORGET ACCOUNT"
          onPress={() => {
            if (username) forgetAccount(username);
          }}
        />
        <Separator height={50} />
      </ScrollView>
    </SafeArea>
  );
}

DefaultStyles: {
  header: TextStyle;
  centerFragment: ViewStyle;
  centeredButton: ViewStyle;
  elevated: ViewStyle;
  itemName: TextStyle;
  itemDetail: TextStyle;
} = {
  header: {
    fontWeight: 'bold',
    fontSize: 24,
  },
  centerFragment: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  centeredButton: {
    width: 230,
    height: 50,
    marginVertical: 20,
    justifyContent: 'center',
  },
  elevated: {
    ...Platform.select({
      ios: {
        shadowColor: "'rgba(0, 0, 0, 0.14)'",
        shadowOffset: {
          width: 0,
          height: 3,
        },
        shadowOpacity: 0.25,
        shadowRadius: 3.84,
        elevation: 5,
      },
      android: {
        elevation: 2,
      },
    }),
  },
  itemName: {
    fontWeight: 'bold',
    fontSize: 16,
  },
  itemDetail: {
    fontSize: 14,
  },
}

ToastProvider: React.FC<ToastProviderProps> = ({ children, overrides }) => {
  const initialState = useMemo(() => ({ ...defaults, ...overrides }), [overrides]);
  const [state, dispatch] = useReducer(reducer, initialState);

  const insets = useSafeAreaInsets();

  const toast = useMemo(
    () => ({
      show(options: ToastOptions) {
        const newState: ToastParams = { ...initialState, ...options, visibility: true };
        newState.position === 'bottom' && Keyboard.dismiss();
        dispatch({ type: ToastActionType.SHOW, payload: newState });
      },
      hide() {
        dispatch({ type: ToastActionType.HIDE });
      },
    }),
    [initialState]
  );

  const computedStyle = useMemo(() => {
    const base: StyleProp<ViewStyle> = {
      position: 'absolute',
      left: insets.left,
      right: insets.right,
      width: undefined,
      alignItems: 'center',
    };
    let style: StyleProp<ViewStyle>;
    if (state.position === 'bottom') {
      style = {
        ...base,
        bottom: insets.bottom,
      };
      return style;
    }
    if (state.position === 'top') {
      style = {
        ...base,
        top: insets.top,
        bottom: undefined,
      };
      return style;
    }
    style = {
      ...base,
      top: insets.top,
      bottom: insets.bottom,
      justifyContent: 'center',
    };
    return style;
  }, [insets, state.position]);

  useEffect(() => {
    dispatch({ type: ToastActionType.HYDRATE, payload: initialState });
  }, [initialState]);

  return (
    <ToastContext.Provider value={toast}>
      <Portal.Host>{children}</Portal.Host>
      <Portal>
        <Snackbar
          onDismiss={toast.hide}
          style={types[state.type]}
          wrapperStyle={computedStyle}
          duration={state.duration}
          visible={state.visibility}
          action={state.action ? { label: state.actionLabel, onPress: state.action } : undefined}
        >
          <Icon size={20} name={icons[state.type]} color="#ffffff" />
          <Text style={styles.message}>{` ${state.message}`}</Text>
        </Snackbar>
      </Portal>
    </ToastContext.Provider>
  );
}

function TouchableStyles({ pressed }: { pressed: boolean }): ViewStyle {
    if (pressed) {
        return { opacity: 0.5 };
    } else {
        return { opacity: 1 };
    }
}

isViewStyle = (style: ViewProps["style"]): style is ViewStyle => {
  return (
    typeof style === "object" &&
    style !== null &&
    Object.keys(style).includes("height")
  );
}

AnimatedSvg = Animated.createAnimatedComponent(
  Svg
) as React.ComponentClass<
  Animated.AnimateProps<ViewStyle, SvgProps & { style: ViewStyle }>,
  any
>

flatTextInputContainerStyle: StyleProp<ViewStyle> = {
  height: 75,
  marginBottom: 10,
}

@observable
    protected contentAnimation: { animation: Animatable.Animation, duration: number, delay: number, style?: StyleProp<ViewStyle> } = null;