CODEWITHSUNDEEP
cssreactjsreact-nativeflexbox
khaliloos benk
khaliloos benk

Reputation: 87

How to put a button down using flex?

i ve using some issues using react-native with flexbox, so i want to put the button to the down using flex-end but i can't so if there's someone who can help me i will be thankful.

    <View style={style.conatainer}>
              <Text style={style.text}> Welcome </Text>
                <View style={style.bottom}>
                  <Button 
                    icon="camera" 
                    mode="contained" 
                    onPress={() => console.log('Pressed')}>
                    Get started
                  </Button>
                </View>      


          </View>

    const style=StyleSheet.create({
  conatainer:{
    flex:1,
    alignItems:'center',
    justifyContent:'center',

  },

  text:{
    fontSize:38,
    fontWeight:'200',
    backgroundColor:'#000',
    color:'#fff',
    display:'flex',
    justifyContent:'center',


  },

  bottom: {
    display:'flex',
    flexDirection:'column',
    justifyContent:'flex-end',
    height:'50%',
    backgroundColor:'#BDBDBD'

  },
  button:{
    display:'flex',
    justifyContent:'center',
    height:'100%'
  }
})

i'm all ears, for more details or something like that.

Upvotes: 0

Views: 1886

Answers (4)

JuanKman94
JuanKman94

Reputation: 112

You need to set the align-self to "flex-end", property to the <button>, check this fiddle.

Also, check this awesome reference guide for flex in css-tricks

The gist of the fiddle:

.component {
  display: flex;
  flex-flow: column wrap;
  align-items: center;
  justify-content: center;
  min-height: 20rem;
  background-color: #666;
}

.text {
  flex: 0 1;
  background-color: #000;
  color: #fff;
}

.bottom {
  flex: 1 1;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: green;
}

.bottom button {
  flex: 0 1;
  align-self: flex-end;
}

Upvotes: 0

Ian Vasco
Ian Vasco

Reputation: 1340

I suggest you to create another container for the text

export default class App extends React.Component {
  render() {
    return (
      <View style={style.conatainer}>
        <View style={style.textContainer}>
          <Text style={style.text}>"Welcome"</Text>
        </View>
        <View style={style.bottom}>
          <Button
            icon="camera"
            style={style.button}
            onPress={() => console.log("Pressed")}
            title="Get started">
          </Button>
        </View>
      </View>
    );
  }
}

const style = StyleSheet.create({
  conatainer: {
    flex: 1,
    flexDirection: "column",
    justifyContent: "center"
  },
  textContainer: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center"
  },
  text: {
    fontSize: 38,
    fontWeight: "200",
    backgroundColor: "#000",
    color: "#fff",
    justifyContent: "center",
    alignItems: "center"
  },
  bottom: {
    backgroundColor: "#BDBDBD",
    justifyContent: 'flex-end'
  },
  button: {
    height: 50
  }
});

Upvotes: 1

hong developer
hong developer

Reputation: 13926

The button does not go down because it is affected by the center value set in the parent's view, container. Delete the center settings of the parent's view.

Remove justifyContent from container. and Remove flexDirection from bottom

 import * as React from 'react';
import { Text, View, StyleSheet,Button,TouchableOpacity } from 'react-native';
import Constants from 'expo-constants';

// You can import from local files
import AssetExample from './components/AssetExample';

// or any pure javascript modules available in npm
import { Card } from 'react-native-paper';

export default class App extends React.Component {
  render() {
    return (
    <View style={style.conatainer}>
              <Text style={style.text}> Welcome </Text>
                  <TouchableOpacity 
                    style={style.bottom}
                    icon="camera" 
                    mode="contained" 
                    onPress={() => console.log('Pressed')} >
                    <Text>Get started </Text>
                    </TouchableOpacity> 
          </View>
    );
  }
}

    const style=StyleSheet.create({
  conatainer:{
    flex:1,
    alignItems:'center',
    justifyContent:'center'
  },

  text:{
    fontSize:38,
    fontWeight:'200',
    backgroundColor:'#000',
    color:'#fff',
    display:'flex', 
  },

  bottom: {
    flex:1,
    justifyContent:'flex-end',
    backgroundColor:'#BDBDBD'

  },
});

Upvotes: 1

olejniczag
olejniczag

Reputation: 394

I prepared a demo for you, I did what was told in Hong's answer. It worked in sandbox, so maybe there will be another issue in another place of your app.

I removed justifyContent from conatainer and flexDirection from bottom.

One thing that may be interesting to you is that flexbox is default (and only) display option in React Native. Therefore you don't have to tell any element to display: flex because it's already happening.

Link to working demo is here

So if there are any other issues, please let me know and I'll improve my answer.

Upvotes: 0

Related Questions