Styjun

I decided to integrate flow in my project and unable to solve some types errors.i searched a lot but couldn't find what will be the types for below values.

eg.

1. Type for references


2. type for Props for consturctor


3. Type for this.localNotifications(variable)


4. How to define type for when we bind method.

I am sharing my code below and with errors I am getting. Thanks in advance

 /*** @flow*/

 import Component from 'react';
 import * as React from 'react';
import 
 Text,
 View,
 Image,
 TouchableOpacity,
 AppState,
 Alert,
 TextInput
 from 'react-native';
import Auth from 'aws-amplify';
import KeyboardAwareScrollView from 'react-native-keyboard-aware-scroll-view';
import PhoneInput from 'react-native-phone-input';
import 
 StackActions,
 NavigationActions,
 NavigationScreenProps
 from 'react-navigation';
import ProgressDialog from 'react-native-simple-dialogs';
import styles from './Styles';
import FloatingLabelInput, CTAButton from 'Components';
import strings from '../../../utility/locales/i18n';
import AppUtil from 'Library/Utils/AppUtil';
import * as DateUtil from 'Library/Utils/DateUtil';
import R from 'Resources';
import inject, observer from 'mobx-react/native';
import Query from 'react-apollo';
import USER_TYPE, USER_ONBOARDING_STEP from 'Library/Constants';
import * as UserQueries from 'AppSyncQueries/UserQueries';
import LocalNotification from '../../../Components/LocalNotification/LocalNotification';
import PushNotificationController from '../../../Components/LocalNotification/PushNotificationController';
import moment from 'moment';
type Props = NavigationScreenProps & ;
type passwordRef = ;

type State = 
 userName: string,
 password: string,
 loading: boolean,
 valid: boolean,
 shouldLoadProfile: boolean
;

@inject('loginUserStore', 'userAccountStore', 'measurementUnitStore')
@observer
export class Login extends Component<Props, State> 
 static navigationOptions = 
 title: strings('login.title'),
 header: null
 ;

 constructor(props) 
 super(props);
 this.passwordRef = React.createRef();
 this.state = 
 userName: '',
 password: '',
 loading: false,
 valid: false,
 shouldLoadProfile: false,
 startProgramDate: this.props.userAccountStore.programStartDate
 ;
 this.updateInfo = this.updateInfo.bind(this);
 this.localNotification = new LocalNotification();
 this.scheduleLocalNotification = this.scheduleLocalNotification.bind(this);
 

 onChangeText(key: string, value: string) 
 this.setState( password: value );
 

 updateInfo() 
 this.setState(
 valid: this.phone.isValidNumber()
 );
 

 gotoDashboard() 
 this.props.navigation.dispatch(AppUtil.resetAction('Dashboard', ));
 


 completeNewPassword(user: any) 
 this.props.navigation.navigate('SetPassword', user: user );
 


 startPasswordReset() 
 const title = strings('login.password_reset_required_title');
 const message = strings('login.password_reset_required_message');
 Alert.alert(title, message, [
 
 text: 'Ok',
 onPress: () => 
 this.props.navigation.navigate('ResetPassword', 
 userName: this.phone.getValue()
 );
 
 
 ]);
 

 render() 
 return (
 <KeyboardAwareScrollView
 style= backgroundColor: R.Colors.COLOR_APP_BACKGROUND 
 scrollEnabled
 extraScrollHeight=50
 enableResetScrollCoords
 resetScrollToCoords= x: 0, y: 0 
 >
 <View style=styles.container>
 AppUtil.renderProgressBar(
 this.state.loading,
 strings('common_message.please_wait')
 )

 <Image source=R.Images.logo style=styles.appLogo />

 <View style=styles.loginContainer>
 <TextInput
 style= height: 35, color: '#929CA5', fontSize: 14 
 editable=false
 selectTextOnFocus=false
 value='Phone Number'
 />

 <View style=styles.userName>
 <PhoneInput
 onPressFlag=this.onPressFlag
 ref=ref => 
 this.phone = ref;
 
 />
 </View>

 <View style= marginTop: 15, marginLeft: 1 >
 <FloatingLabelInput
 style=styles.textField
 secureTextEntry
 label='Password'
 returnKeyType='done'
 ref=this.passwordRef
 value=this.state.password
 onChangeText=text => this.setState( password: text )
 />
 </View>

 <View style=styles.forgotPasswordBtnContainer>
 <TouchableOpacity onPress=this.gotoForgotPassword.bind(this)>
 <Text style=styles.forgotPasswordBtn>Forgot Password?</Text>
 </TouchableOpacity>
 </View>

 <CTAButton
 label='LOGIN'
 isEnabled=true
 onClick=this.loginClick.bind(this)
 style= marginTop: 30 
 />

 </View>
 <PushNotificationController />
 </View>
 </KeyboardAwareScrollView>
 );
 

If you check code of constructor you will find many variables and references are used.Still I would love to describe each error , That will helpful to understand

1. Missing type annotation for props.(for constructor props)




2. Cannot assign React.createRef() to this.passwordRef because property passwordRef is missing in Login[1]




3. Cannot assign this.updateInfo.bind(...) to this.updateInfo because property updateInfo is not writable.




4. Cannot assign new LocalNotification() to this.localNotification because property localNotification is missing in Login[1]