CODEWITHSUNDEEP
androidreactjsreact-nativemobiletouchableopacity
TheMAAAN
TheMAAAN

Reputation: 517

React Native marginTop offsetting text position in TouchableOpacity

So I have just started developing in React Native and run across this issue where for some reason my text doesn't "move" along with the touchable opacity when I try to set marginTop on touchable opacity. Here is what I mean:

enter image description here

This becomes:

enter image description here

The relevant code is as follows (for the second image). For the first image, the code is exactly the same except there is no marginTop. Here it is:

import React, { Component } from 'react';
import {
  Platform,
  StyleSheet,
  Text,
  View,
  TouchableOpacity
} from 'react-native';

export default class App extends Component {
  render() {
    return (
      <TouchableOpacity style={styles.loginButton}>
        <Text style={styles.buttonText}>Login</Text>
      </TouchableOpacity>
    );
  }
}

const styles = StyleSheet.create({
  loginButton: {
    backgroundColor: 'lightblue',
    height: '20%',
    justifyContent: 'center',
    borderRadius: 20,
    marginTop: 30%
  },
  buttonText: {
    textAlign: 'center',
    fontSize: 20,
  },
});

Upvotes: 0

Views: 1029

Answers (1)

yangguang1029
yangguang1029

Reputation: 1823

use actual pixel number instead of percent number

import {Dimensions} from 'react-native'
const {height} = Dimensions.get('window')
marginTop: 0.3 * height

try and you will get it right

Upvotes: 1

Related Questions