2

I'm setting up some screens for an app using React-Native, and I want to fully understand how Flexbox works.

I'm trying to set the marginHorizontal property in style of textinput and button, but nothing happens.

If I set the specific value of width I do not have any problem.

Why marginHorizontal does not work properly?

The first image is what I get using marginHorizontal (the size of the button doesn't change and the margin from board is not 10);

The second image is what I get when I use width prop (the button size changes according the value of width).

I just wonder why with the marginHorizontal prop, nothing happens.

enter image description here enter image description here

import React, { Component } from 'react'
import {Text, StyleSheet, View, TextInput, TouchableOpacity} from 'react-native'
import Swiper from 'react-native-swiper';
import {Button} from 'react-native-elements'

const formInputColor = 'rgba(255, 255, 255, 0.2)'
const formInputPlaceholderColor = 'rgba(255, 255, 255, 0.7)'

export default class RegisterFormComponent extends Component{

  render(){
      return(
        <Swiper 
          style={styles.wrapper}
          loop = {false}
        >

        <View style={styles.slide1}>

          <View style={styles.topContainer1}>

          <Text 
            style={styles.text}>What's you mail?
          </Text>

          <TextInput
            placeholder = "Email"
            placeholderTextColor = {formInputPlaceholderColor}
            returnKeyType = "next"
            style = {styles.formInput}
          />

          <Text 
            style={styles.underText}
            multiline={true}>blablablablablablablablablablablablablablablablablablablablablablablablablablablablablablabla
          </Text>

          <Button
            style={styles.buttonStyle}
            //textStyle = {styles.buttonTextStyle}        
            //loading={false}
          >
          </Button>

          </View>

          <View style={styles.bottomContainer1}>
          </View>

        </View>


        <View style={styles.slide2}>

        <View style={styles.topContainer1}>

            <Text 
              style={styles.text}>Choose your password
            </Text>

            <TextInput
              placeholder = "Password"
              placeholderTextColor = {formInputPlaceholderColor}
              secureTextEntry
              returnKeyType = "go"
              style = {styles.formInput}
            />

            </View>

            <View style={styles.bottomContainer1}>
            </View>
        </View>
        <View style={styles.slide3}>
          <Text style={styles.text}>And simple</Text>
        </View>
      </Swiper>
      )
  }
}

const styles = StyleSheet.create({
  wrapper: {
    flex: 1
  },
  slide1: {
    flex: 1,
    backgroundColor: '#3498db',
  },
  buttonStyle: {
    backgroundColor: '#2980b9', 
    marginTop: 10, 
    height: 25,
    marginHorizontal: 10
  },
  buttonTextStyle: {
    fontSize: 10
  },
  topContainer1: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center'
  },
  logoStyle: {
    width: 100, 
    height: 100, 
  }, 

  bottomContainer1: {
    flex: 1,
  },
  formInput:{
    height: 40, 
    backgroundColor: formInputColor, 
    color: '#FFF',
    marginHorizontal: 10,
    paddingHorizontal: 10,
    textAlignVertical: 'top'
  },
  slide2: {
    flex: 1,
    backgroundColor: '#97CAE5'
  },
  slide3: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#92BBD9'
  },
  text: {
    color: '#000',
    fontSize: 20,
    padding: 10,
    fontWeight: 'bold'
  }, 
  underText: {
    color: 'black',
    fontSize: 12,
    marginTop: 8,
    textAlign: 'center',
    width: 300
  }
})
Michael Benjamin
  • 346,931
  • 104
  • 581
  • 701
xcsob
  • 837
  • 1
  • 12
  • 27
  • I am not sure what you try to achieve, but you code and styles working properly. If you have issues with your button, the only thing you need to add is `title` prop and remove `height:25` from styles. – Ziyo Feb 01 '19 at 21:00
  • I set the title, but nothing changed. I added two screenshots. The first one is when I use marginHorizontal, basically the button size doesn't change. The second image is what I want to achieve: I can get this changing the width of the button. I'm wondering, why if I use the marginHorizontal it doesn't work. – xcsob Feb 01 '19 at 23:56
  • Check that Button's docs. In the meantime I created your desired design here: https://snack.expo.io/@ziyoshams/stackoverflow – Ziyo Feb 02 '19 at 04:45
  • @Ziyo thank you. I was wondering why the button size change if I add the width prop, and not if I add marginHorizontal. – xcsob Feb 02 '19 at 06:55

0 Answers0