CODEWITHSUNDEEP
cssreact-nativereact-native-ios
Aqsa Maan
Aqsa Maan

Reputation: 115

How to move an element to bottom of div

I am trying to implement waves image at the bottom of the screen as shown in this image below. I have tried alignSelf:'flex-end' but it does not work. If i give top with dimensions then if screen size change image top also change. how to implement waves image at the perfect bottom?

I have also tried svg but could not make it work.

Here is my code

import React from 'react';
import {
  View,
  Text,
  Dimensions,
  TextInput,
  StyleSheet,
  Image,
} from 'react-native';
import database from '@react-native-firebase/database';
import auth from '@react-native-firebase/auth';
import Otp from '../assets/otp.svg';
import Waves from '../assets/waves.svg';
import {Icon} from 'native-base';
const windowWidth = Dimensions.get('window').width;
const windowHeight = Dimensions.get('window').height;

const Login = () => {
  return (
    <View style={styles.container}>
      <View style={styles.view1}>
        <View style={styles.header}>
          <Icon type="AntDesign" name="arrowleft" style={styles.icon} />
          <View style={styles.headerView}>
            <Text style={styles.headerText}>OTP Verification</Text>
          </View>
        </View>
        <Otp width={250} height={130} style={{top: -40}} />
      </View>
      <View style={styles.view2}>
        <View style={styles.mainDiv}>
          <View style={styles.loginForm}></View>
          <View style={styles.iconDiv}></View>
        </View>
        <View style={styles.waves}>
          {/* <Waves /> */}
          <Image
            style={styles.wavesImg}
            source={require('../assets/waves.png')}
          />
        </View>
      </View>
    </View>
  );
};
export default Login;

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: 'red',
  },
  view1: {
    flex: 1,
    backgroundColor: '#e69545',
    alignItems: 'center',
    justifyContent: 'space-around',
  },
  view2: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
  },
  header: {
    // backgroundColor: 'red',
    flexDirection: 'row',
    justifyContent: 'space-around',
  },
  headerView: {alignItems: 'center', width: '80%'},
  headerText: {color: '#fff', fontSize: 27},
  icon: {
    color: '#fff',
    // width: 40,
    fontSize: 35,
  },
  mainDiv: {
    backgroundColor: '#fff',
    width: (windowWidth / 10) * 8,
    height: (windowHeight / 100) * 40,
    position: 'absolute',
    borderRadius: 25,
    top: -60,
    shadowColor: '#000',
    shadowOffset: {
      width: 0,
      height: 4,
    },
    shadowOpacity: 0.3,
    shadowRadius: 4.65,

    elevation: 8,
  },
  waves: {
    //   // height: 300,
    //   position: 'absolute',
    //   bottom: 0,
    // backgroundColor: 'green',
    // position: 'absolute',
    // top: (windowHeight / 10) * 3.1,
    width: '100%',
    height: 130,
    // alignSelf: 'flex-end',
    marginTop: (windowHeight / 10) * 3,
  },
  wavesImg: {
    width: '100%',
    height: 130,
  },
});

Upvotes: 0

Views: 345

Answers (1)

dianaqqq
dianaqqq

Reputation: 668

I think you should try to put the style for the waves like this:

waves: {
  height: 130,
  width: windowWidth, 
  bottom: 0,
  position: 'absolute'
  }

Upvotes: 1

Related Questions