CODEWITHSUNDEEP
cssreactjsreact-nativeflexbox
PPP
PPP

Reputation: 1850

React Native margin acts inside of object, not outside

Go to https://snack.expo.io/HJV601djf and open login_screen/components/Form.js. As you can see, the textInput has the style

  textInput: {
    flex:1,
    height: 50,
    marginBottom: 20
  }

You can see that the user icons are not aligned with the text input. If I take marginBottom out, everything goes ok, but with marginBottom: 20 the icons get dealigned. I can probably fix that by making the text input get aligned vertically too, but I'll not know the cause of the problem.

How can marginBottom affect the insides of UserInput if it's supposed to add space only on the outside?

Printscreen if you don't want to wait to load the app:

enter image description here

Upvotes: 1

Views: 1756

Answers (1)

Pritish Vaidya
Pritish Vaidya

Reputation: 22189

This is happening because , in your UserInput.js, you are trying to merge the styles for the textInput while the Image / Icon styles are remaining the same, therefore it is misaligned.

The optimum way to solve this would be to add a textInputContainer style to the component and set the margin to it as

TextInput.js

<View style={mergeObjects(this.props.containerStyle ? StyleSheet.flatten(this.props.containerStyle) : {}, StyleSheet.flatten(styles.inputWrapper))}>

Form.js

<UserInput
          containerStyle={styles.textInputContainer}
          style={styles.textInput}
          source={{uri:'http://www.free-icons-download.net/images/user-icon-74490.png'}}
          placeholder="e-mail"
          autoCapitalize={'none'}
          returnKeyType={'done'}
          autoCorrect={false}
        />

and the styles

textInputContainer : {
        marginBottom: 20
  },

Here's the snack for the same

Upvotes: 1

Related Questions