rn: Fix coding errors caught by TypeScript

Author: swansontec

packages/edge-login-ui-rn/src/components/screens/existingAccout/ChangePasswordScreen.js

@@ -128,7 +128,6 @@ class ChangePasswordScreenComponent extends React.Component<Props, State> {
           returnKeyType="go"
           secureTextEntry
           value={this.props.confirmPassword}
-          isSelected={this.state.focusSecond}
           label={s.strings.re_enter_new_password}
           onChangeText={(password: string) =>
             this.props.validateConfirmPassword(password)

packages/edge-login-ui-rn/src/components/screens/newAccount/NewAccountUsernameScreen.js

@@ -78,7 +78,7 @@ const NewAccountUsernameScreenComponent = ({
           label={s.strings.username}
           onChangeText={validateUsername}
           onSubmitEditing={handleNext}
-          placeholeder={s.strings.choose_username_input_placeholder}
+          placeholder={s.strings.choose_username_input_placeholder}
           returnKeyType="go"
           value={username}
           isClearable

packages/edge-login-ui-rn/src/components/screens/newAccount/NewAccountWelcomeScreen.js

@@ -8,7 +8,6 @@ import { sprintf } from 'sprintf-js'
 import { LOGO_BIG, WELCOME_LOCK, WELCOME_SHIELD_KEY } from '../../../assets'
 import s from '../../../common/locales/strings.js'
 import * as Constants from '../../../constants/index.js'
-import * as Styles from '../../../styles/index.js'
 import { type Branding } from '../../../types/Branding.js'
 import { type Dispatch, type RootState } from '../../../types/ReduxTypes.js'
 import { logEvent } from '../../../util/analytics.js'
@@ -145,11 +144,7 @@ const getStyles = cacheStyles((theme: Theme) => ({
   },
   actions: {
     marginTop: theme.rem(4.5)
-  },
-  nextButtonUpStyle: Styles.PrimaryButtonUpScaledStyle,
-  nextButtonUpTextStyle: Styles.PrimaryButtonUpTextScaledStyle,
-  nextButtonDownTextStyle: Styles.PrimaryButtonUpTextScaledStyle,
-  nextButtonDownStyle: Styles.PrimaryButtonDownScaledStyle
+  }
 }))
 
 export const NewAccountWelcomeScreen = connect<{}, DispatchProps, OwnProps>(

packages/edge-login-ui-rn/src/components/themed/AccountInfo.js

@@ -52,7 +52,7 @@ const AccountInfoComponent = ({
   const spacings = sidesToMargin(mapSides(fixSides(marginRem, 0.5), theme.rem))
   const [isExpanded, setIsExpanded] = useState(false)
 
-  const animatedRef = useAnimatedRef<View>(null)
+  const animatedRef = useAnimatedRef<View>()
   const expanded = useSharedValue(false)
   const rotation = useSharedValue(0)
   const height = useSharedValue(0)

packages/edge-login-ui-rn/src/components/themed/BackButton.js

@@ -15,7 +15,7 @@ import {
 const isIos = Platform.OS === 'ios'
 
 type Props = {
-  onPress(): void,
+  onPress?: () => void,
   marginRem?: number[] | number,
   disabled?: boolean
 }

packages/edge-login-ui-rn/src/components/themed/Checkbox.js

@@ -1,7 +1,7 @@
 // @flow
 
 import * as React from 'react'
-import { StyleSheet, TouchableWithoutFeedback, View } from 'react-native'
+import { type TextStyle, TouchableWithoutFeedback, View } from 'react-native'
 import { cacheStyles } from 'react-native-patina'
 import SimpleLineIcons from 'react-native-vector-icons/SimpleLineIcons'
 
@@ -14,14 +14,14 @@ import {
 import { EdgeText } from './EdgeText'
 
 type Props = {
-  textStyle: StyleSheet.Styles,
+  textStyle: TextStyle,
   children: React.Node,
   value: boolean,
-  ellipsizeMode?: string,
+  ellipsizeMode?: 'head' | 'middle' | 'tail' | 'clip',
   numberOfLines?: number,
   disabled?: boolean,
   marginRem?: number[] | number,
-  onChange(boolean): void
+  onChange: (value: boolean) => void
 }
 
 const CheckboxComponent = ({

packages/edge-login-ui-rn/src/components/themed/EdgeText.js

@@ -2,7 +2,7 @@
 // copied EdgeText component from 'edge-react-gui'
 
 import * as React from 'react'
-import { type Text as TextProps, StyleSheet, Text } from 'react-native'
+import { type TextProps, type TextStyle, Text } from 'react-native'
 import { cacheStyles } from 'react-native-patina'
 
 import {
@@ -13,9 +13,9 @@ import {
 
 type OwnProps = {
   children: React.Node,
-  ellipsizeMode?: string,
+  ellipsizeMode?: 'head' | 'middle' | 'tail' | 'clip',
   numberOfLines?: number,
-  style?: StyleSheet.Styles
+  style?: TextStyle
 }
 
 class EdgeTextComponent extends React.PureComponent<

packages/edge-login-ui-rn/src/components/themed/EdgeTextFieldOutlined.js

@@ -1,12 +1,13 @@
 // @flow
 
-// $FlowFixMe = forwardRef is not recognize by flow?
-import React, { forwardRef, useRef } from 'react'
+import * as React from 'react'
 import {
+  type TextInputProps,
+  type TextStyle,
+  type ViewStyle,
   Platform,
   Text,
   TextInput,
-  TextInputProps,
   TouchableOpacity,
   TouchableWithoutFeedback,
   View
@@ -16,7 +17,6 @@ import Animated, {
   Extrapolate,
   interpolate,
   interpolateColor,
-  SharedValue,
   useAnimatedStyle,
   useSharedValue,
   withTiming
@@ -28,6 +28,7 @@ import {
   useEffect,
   useImperativeHandle,
   useMemo,
+  useRef,
   useState
 } from '../../util/hooks'
 import { fixSides, mapSides, sidesToMargin } from '../../util/sides'
@@ -45,32 +46,23 @@ const ANIMATION_STATES = {
   ERROR: 2
 }
 
-type InputOutlineProps = {
+type InputOutlineProps = TextInputProps & {
   label?: string,
   error?: string,
 
   marginRem?: number | number[],
   isClearable: boolean,
   size?: 'big' | 'small',
   showSearchIcon?: boolean,
-  onClear: () => void,
-
-  ...TextInputProps
-}
-
-type InputOutline = {
-  focus: () => void,
-  blur: () => void,
-  isFocused: () => boolean,
-  clear: () => void
+  onClear?: () => void
 }
 
 type CornerBorderProps = {
   theme: Theme,
   corner: 'left' | 'right',
   cornerHeight: { height: number },
-  placeholderSize: SharedValue,
-  colorMap: SharedValue
+  placeholderSize: Animated.SharedValue<number>,
+  colorMap: Animated.SharedValue<number>
 }
 
 const getColor = (
@@ -128,7 +120,8 @@ const CornerBorder = ({
   )
 }
 
-const EdgeTextFieldOutlinedComponent = forwardRef(
+// $FlowFixMe = forwardRef is not recognize by flow?
+const EdgeTextFieldOutlinedComponent = React.forwardRef(
   (props: InputOutlineProps, ref) => {
     const {
       error,
@@ -149,7 +142,7 @@ const EdgeTextFieldOutlinedComponent = forwardRef(
     const [containerHeight, setContainerHeight] = useState(0)
 
     // animation
-    const inputRef: { current: InputOutline } = useRef<TextInput>(null)
+    const inputRef = useRef<TextInput>(null)
     const placeholderMap = useSharedValue(
       value ? ANIMATION_STATES.FOCUSED : ANIMATION_STATES.INIT
     )
@@ -198,18 +191,18 @@ const EdgeTextFieldOutlinedComponent = forwardRef(
       [error]
     )
 
-    const handleFocus = () => {
+    const handleFocus = e => {
       placeholderMap.value = withTiming(ANIMATION_STATES.FOCUSED)
       if (!errorState()) colorMap.value = withTiming(ANIMATION_STATES.FOCUSED)
       focus()
-      if (onFocus) onFocus()
+      if (onFocus) onFocus(e)
     }
 
-    const handleBlur = () => {
+    const handleBlur = e => {
       if (!value) placeholderMap.value = withTiming(ANIMATION_STATES.INIT) // blur
       if (!errorState()) colorMap.value = withTiming(ANIMATION_STATES.INIT) // inactive
       blur()
-      if (onBlur) onBlur()
+      if (onBlur) onBlur(e)
     }
 
     const handleChangeText = (text: string) => {
@@ -430,11 +423,11 @@ const getSizeStyles = (
   const placeholderSizeScale = 0.2
   let paddingVertical = theme.rem(PADDING_VERTICAL)
   let hintLeftMargin = -theme.rem(0.25)
-  const inputStyles = [styles.input]
-  const placeholderTextStyles = [styles.placeholderText]
-  const placeholderPaddingStyles = [styles.placeholder]
-  const placeholderSpacerPaddingStyles = [styles.placeholderSpacer]
-  const inputContainerStyles = [styles.inputContainer]
+  const inputStyles: TextStyle[] = [styles.input]
+  const placeholderTextStyles: TextStyle[] = [styles.placeholderText]
+  const placeholderPaddingStyles: TextStyle[] = [styles.placeholder]
+  const placeholderSpacerPaddingStyles: ViewStyle[] = [styles.placeholderSpacer]
+  const inputContainerStyles: ViewStyle[] = [styles.inputContainer]
   const prefixStyles = [styles.prefix]
   const suffixStyles = [styles.suffix]
   if (showSearchIcon) {

packages/edge-login-ui-rn/src/components/themed/IconSignal.js

@@ -17,8 +17,8 @@ type IconProps = {
 }
 
 type Props = {
-  enabledIcon: React.Component<IconProps>,
-  disabledIcon: React.Component<IconProps>,
+  enabledIcon: React.ComponentType<IconProps>,
+  disabledIcon: React.ComponentType<IconProps>,
   enabled: boolean
 }
 
@@ -34,13 +34,11 @@ const IconSignalComponent = ({
     <View style={styles.container}>
       <View style={styles.icon}>
         <Fade visible={enabled}>
-          {/* $FlowFixMe */}
           <EnabledIcon size={theme.rem(1.1)} color={theme.positiveText} />
         </Fade>
       </View>
       <View style={styles.icon}>
         <Fade visible={!enabled}>
-          {/* $FlowFixMe */}
           <DisabledIcon size={theme.rem(1.1)} color={theme.warningText} />
         </Fade>
       </View>

packages/edge-login-ui-rn/src/types/Theme.js

@@ -1,12 +1,25 @@
 // @flow
 
+type FontWeight =
+  | 'normal'
+  | 'bold'
+  | '100'
+  | '200'
+  | '300'
+  | '400'
+  | '500'
+  | '600'
+  | '700'
+  | '800'
+  | '900'
+
 export type Theme = {|
   // The app scaling factor, which is the height of "normal" text:
   rem(size: number): number,
 
   pressedOpacity: number,
   fontFamily: string,
-  fontWeightBold: string,
+  fontWeightBold: FontWeight,
 
   // Icons
   icon: string,