CODEWITHSUNDEEP
cssreact-nativeflexbox
Lucas Farleigh
Lucas Farleigh

Reputation: 1188

Can't align button to the bottom left of the screen - React Native

I would like to position my button to the bottom left of the screen. I have tried using bottom: 0 and left: 0, but that did not do anything. I researched a bit and discovered that I need to set the position: 'absolute'. However, when I do this, my button disappears completely.

How can I position by the button to the bottom left of the screen?

Here is my code:

    import React, { Component } from 'react';
import { Button,Alert, TouchableOpacity,Image } from 'react-native'

import {
  AppRegistry,
  StyleSheet,
  Text,
  View,
} from 'react-native';

class Project extends Component {
  render() {
    return (
      <View style={{backgroundColor: '#375D81', flex: 1}}>
         <View style = {styles.container}>
           <TouchableOpacity style = {styles.buttonText} onPress={() => { Alert.alert('You tapped the button!')}}>
             <Text>
              Button
             </Text>
           </TouchableOpacity>
        </View>
      </View>
    );
  }
}

const styles = StyleSheet.create({
 main: {
   backgroundColor: 'blue'
 },
 container: {
  alignItems: 'center',
 },
  buttonText: {
      borderWidth: 1,
      padding: 25,      
      borderColor: 'black',
      backgroundColor: '#C4D7ED',
      borderRadius: 15,
      bottom: 0,
      left: 0,
      width: 100,
      height: 100,
      position: 'absolute'
   }
});

AppRegistry.registerComponent('Project', () => Project);

Upvotes: 0

Views: 7541

Answers (3)

Abraham
Abraham

Reputation: 9885

You just need to set a width and height to your button then:

 justifyContent: 'flex-end'

That's it

App.js

import React from 'react';
import { View, TouchableOpacity, Text } from 'react-native';
import styles from './styles';

class Example extends React.Component {
  render() {
    return (
      <View style={styles.container}>
        <TouchableOpacity style={styles.button}>
          <Text style={styles.text}>Button</Text>
        </TouchableOpacity>
      </View>
    );
  }
}

export default Example;

styles.js

export default {
  container: {
    flex: 1,
    justifyContent: 'flex-end',
  },

  button: {
    justifyContent: 'center',
    textAlign: 'center',
    width: 70,
    height: 40,
    backgroundColor: 'green',
    borderRadius: 10,
    margin: 20,
  },
  text: {
    color: 'white',
    textAlign: 'center',
    margin: 10,
  },
};

You will get something like this:

See Expo Snack: snack.expo.io/@abranhe/button-left

Upvotes: 1

designorant
designorant

Reputation: 2411

You've forgotten to flex your container. Add: flex: 1 in there and you're all good:

container: {
  alignItems: 'center',
  flex: 1
},

Upvotes: 2

Ryan Turnbull
Ryan Turnbull

Reputation: 3944

React-native elements are "rendered" from the top left when defining their position absolutely. This means when you are defining bottom: 0 and left: 0, this is rendering the item where you want horizontally, but vertically it will be off the screen. switch to

position 'absolute',
bottom: 100,
left: 0,

This should be what you are looking for

Upvotes: 0

Related Questions