So I'm trying to use react native and aws-amplify to build a web and mobile app with one code base. Now I just added the withAuthenticator
component to my app which works fine on the mobile part but when i run the web app in the browser I'm unable to type into the authentication field that is if I click on it the cursor appears and emmediately dissapears suprisingly though if i click and hold I'm suddenly able to type aslong as I'm holding the mouse button. So after that I tried to instead create my custom authenticator which worked fine for mobile but on the web it returned the error class constructors must be invoked with 'new'
. My code is below hope someone can help me with this. Thanks!
class MySignIn extends SignIn {
constructor(props) {
super(props);
this.state = {
username: null,
password: null,
error: null,
};
this.checkContact = this.checkContact.bind(this);
this.signIn = this.signIn.bind(this);
}
render() {
if (this.props.authState !== "signIn") {
return null;
}
return (
<View style={{ flex: 1, backgroundColor: "blue" }} behavior="padding">
<Text>Stuff and Stuff</Text>
</View>
);
}
}
export default withAuthenticator(Signout, false, [
<MySignIn />,
<ConfirmSignIn />,
<VerifyContact />,
<SignUp />,
<ConfirmSignUp />,
<ForgotPassword />,
<RequireNewPassword />,
]);
class MySignIn extends SignIn
is this correct? ive usually imported class of class MySignIn extends React.Component
and that works because they have imported signIn from
import { ConfirmSignIn, ConfirmSignUp, ForgotPassword, RequireNewPassword, SignIn, SignUp, VerifyContact, withAuthenticator } from 'aws-amplify-react';
and hence this is a custom class component , hence it works
// This is my custom Sign in component
class MySignIn extends SignIn {
render() {
...
}
}
this works. Hope it helps