0

I need to align the error message to center of the warning icon. It is from aws-amplify-react-native.

Any way to customize this? i am using the screens as it is same from the aws-react-native.

    import {
      Authenticator,
      AmplifyTheme,
      Greetings,
      SignIn,
      ConfirmSignIn,
      RequireNewPassword,
      SignUp,
      ConfirmSignUp,
      VerifyContact,
      ForgotPassword,
      AuthPiece,
    } from "aws-amplify-react-native";


render(){
      return(
           <Authenticator errorMessage={map}
                  hideDefault
                  amplifyConfig={awsmobile}
                  signUpConfig={signUpConfig}>
                    <Loading/>
                    <SignIn/>
                    <ConfirmSignIn/>
                    <VerifyContact/>
                    <SignUp signUpConfig={signUpConfig}/>
                    <ConfirmSignUp/>
                    <ForgotPassword/>
                    <RequireNewPassword />
                </Authenticator>
)
}

enter image description here

sejn
  • 2,040
  • 6
  • 28
  • 82

2 Answers2

0
<View style={{flexDirection:'row', alignItems:'center'>
<Icon/>
<Text>{warningmessage}</Text>
</View>

this alignItems on row will solve your problem.

Harish Jangra
  • 381
  • 5
  • 16
  • don't have Icon or text to make this styles inside my code. I have added my imports in the above question. I am directly using the package imports in my screens. – sejn Mar 19 '20 at 10:00
0
  <View style={{flexDirection:'row'}}>
    <Icon/>
    <Text style={{textAlignVertical:"center"}}>{warningmessage}</Text>
    </View>

It will center the text vertically. Add textAlign: 'center' and it will center the text horizontally.

Asad
  • 563
  • 3
  • 16
  • I don't have Icon or text to make this styles inside my code. I have added my imports in the above question – sejn Mar 19 '20 at 09:59