Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

React Native - position "absolute" not working in Android

Somehow position: 'absolute' is not working in Android. It's working with iOS, but in Android it's not rendering. Does anybody know how to set position: "absolute" on an Android device?

Button: {
  position: "absolute",
  right: 0,
  top: 0,
  borderRadius: 4,
  borderWidth: 2,
  width: 100,
  height: 40,
  borderColor: 'red',
  backgroundColor: "rgb(72, 120, 166)",
}
like image 370
user9468014 Avatar asked Jul 05 '18 11:07

user9468014


1 Answers

Wrapping the Button inside a View will work for both Android & iOS:

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

export default class App extends Component {
  render() {
    return (
      <View style={styles.container}>
        <View style={styles.buttonView}>
        <Button style={styles.button} title={"Click"}/>
        </View>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
    paddingTop: Constants.statusBarHeight,
    backgroundColor: '#ecf0f1',
  },
  buttonView: {
    position: "absolute",
    right: 0,
    top: 0
  },
  button:{
    borderRadius: 4,
    borderWidth: 2,
    width: 100,
    height: 40,
    borderColor: 'red',
    backgroundColor: "rgb(72, 120, 166)",
  }
});
like image 115
Dinith Minura Avatar answered Nov 01 '22 12:11

Dinith Minura