CODEWITHSUNDEEP
javascriptreactjsreact-native
Jack23
Jack23

Reputation: 1396

Style in react-native

I'm trying to adjust the homepage but I don't know how to change the position of the Text.

I have this code: 

return (
      <View style={style.container}>
        <View style={style.page}>
          <Icon
            name="user-circle"
            color="#56cbbe"
            size={70}
            onPress={() => Actions.visualizzaprofilo({ cf: Username })}
          />

          <Text
            style={{
              paddingBottom: 15,
              textAlign: "center",
              fontSize: 15,
              color: "#56cbbe",
              fontWeight: "bold"
            }}
            onPress={() => Actions.visualizzaprofilo({})}
          >
            Visualizza il Profilo
          </Text>

          <Text style={{ textAlign: "center", fontSize: 20 }}>
            {"Benvenuto"}
          </Text>
          <Text
            style={{
              textAlign: "center",
              fontSize: 20,
              color: "#56cbbe",
              fontWeight: "bold"
            }}
          >
          <TouchableOpacity
            style={[style.button, style.buttonOK]}
            onPress={() => this.checkFunction()}
          >
            <Text style={style.buttonTesto}>Inizia</Text>
          </TouchableOpacity>

            {this.modProfilo({  })}

            {this.eliminaProfilo({  })}

            {this.sensorCheck()}

            {this.logout()}


        </View>
      </View>

Where for example modProfilo (and also the other have the same style):

modProfilo({}) {
            <Text
              style={{ color: "#56cbbe", paddingTop: 20 }}
              onPress={() => Actions.modificaprofilo({ })}
            >
              MODIFICA PROFILO
            </Text>

I need to transform the first image in the second one, how can i Do??

Upvotes: 0

Views: 43

Answers (3)

Gunasekaran
Gunasekaran

Reputation: 41

Added a View (let id be OuterView) and add button inside it. Add below styles in your code:

OuterView: {
    flex: 1,
    flexDirection: 'row',
  },

buttonsStyle: {
    flex: 1,
  }

Upvotes: 1

Srijan
Srijan

Reputation: 257

Enclose them in a view with flexDirection set to row and justifyContent set to space-between:

return (
  <View style={style.container}>
    ...
<View style={{flexDirection:'row', justifyContent:'space-between'}}>

        {this.modProfilo({  })}

        {this.eliminaProfilo({  })}

        {this.sensorCheck()}

        {this.logout()}

    </View>
...
  </View>

Upvotes: 1

Ikram Khan Niazi
Ikram Khan Niazi

Reputation: 805

flexDirection: 'row'

This will do the required job. BY default the flex direction is vertical. U just need to change into horizontal.

Upvotes: 1

Related Questions