react-native

React native how to place a view bottom center

enter image description hereenter image description here

<View style={{flex: 1}}>
      <View
        style={{
          flex: 4,
          backgroundColor: '#0096FF',
          justifyContent: 'center',
          paddingHorizontal: '5%',
        }}>
        <Text style={{color: '#e2ffff', fontSize: 14, fontFamily: 'Poppins'}}>
          Sales-Today
        </Text>
        <View style={{flexDirection: 'row'}}>
          <Text
            style={{
              color: 'white',
              fontSize: 25,
              fontFamily: 'Poppins-SemiBold',
            }}>
            ₹ 2,945769.34
          </Text>
          <Feather
            name="refresh-cw"
            size={20}
            color="#bde2ff"
            style={{alignSelf: 'center', marginLeft: '3%'}}
          />
        </View>
        <View
          style={[
            {
              borderWidth: 4,
              borderColor: 'rgba(0,0,0,0.2)',
              height: 48,
              width: 48,
              borderRadius: 8,
              backgroundColor: '#6638f0',
              position: 'absolute',
              bottom: 0,
              zIndex: 1,
              alignSelf: 'center',
            },
           
          ]}
        />
      </View>

      <View style={{flex: 6, backgroundColor: 'white'}}></View>
    </View>

I want to create a white card at the center of the parent view in my react native application.But the view is not centered at the bottom of first view.Help me to overlay the cardview with parent view.

Solution

  • Working Example: https://snack.expo.dev/@msbot01/smart-cereal

    import React from 'react';
import { StatusBar } from 'expo-status-bar';
import { SafeAreaView, Text, StyleSheet, View } from 'react-native';
import HomeScreen from './HomeScreen';

export default function App() {
  return (
    <View style={{flex: 1, backgroundColor:'green'}}>
      <View style={{flexDirection:'row', backgroundColor:'yellow', width:'90%',  justifyContent:'space-between', alignItems:'center', position:'absolute', top:150, zIndex:10, marginLeft:'5%', marginRight:'5%', height:100, padding:10, borderRadius:10}}>
        <View
          style={{
              borderWidth: 4,
              borderColor: 'rgba(0,0,0,0.2)',
              height: 48,
              width: 48,
              borderRadius: 8,
              backgroundColor: 'blue',
              bottom: 0,
              zIndex: 1,
              alignSelf: 'center',
            }}
        />
        <View
          style={{
              borderWidth: 4,
              borderColor: 'rgba(0,0,0,0.2)',
              height: 48,
              width: 48,
              borderRadius: 8,
              backgroundColor: 'blue',
              
              bottom: 0,
              zIndex: 1,
              alignSelf: 'center',
            }}
        />
        <View
          style={{
              borderWidth: 4,
              borderColor: 'rgba(0,0,0,0.2)',
              height: 48,
              width: 48,
              borderRadius: 8,
              backgroundColor: 'blue',
              
              bottom: 0,
              zIndex: 1,
              alignSelf: 'center',
            }}
        />
      </View>
      <View
        style={{
          backgroundColor: '#0096FF',
          justifyContent: 'center',
          paddingHorizontal: '5%',
          height:200,
          marginBottom:75
        }}>
        <Text style={{color: '#e2ffff', fontSize: 14, fontFamily: 'Poppins'}}>
          Sales-Today
        </Text>
        <View style={{flexDirection: 'row'}}>
          <Text
            style={{
              color: 'white',
              fontSize: 25,
              fontFamily: 'Poppins-SemiBold',
            }}>
            ₹ 2,945769.34
          </Text>
        </View>
      </View>

      <Text>New Section</Text>
      
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    justifyContent: 'center',
    alignItems: 'center',
  },
});