React Native - position "absolute" not working in Android

17,626

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)",
  }
});
Share:
17,626

Related videos on Youtube

user9468014
Author by

user9468014

Updated on August 22, 2022

Comments

  • user9468014
    user9468014 over 1 year

    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)",
    }