CODEWITHSUNDEEP
react-native
Masoud Tavakkoli
Masoud Tavakkoli

Reputation: 1020

how I can cut part of a view in React native

I'm developing an app in React Native. In App menu we have a half circle view around every button that I have no Idea how to implement that.

second problem is shadows. I use elevation property. It's ok in almost every where but not here.

UI Image

This is what I could create enter image description here

Any Idea How to implement this?

Upvotes: 4

Views: 4079

Answers (1)

AKAP
AKAP

Reputation: 526

One of the way you can implement such design is by using absolute positions along with elevation.

Here is the code I used to test it. It might help you get an idea.

Component

import React, { Component } from 'react';
import { Text, View } from 'react-native';

class App extends Component<Props> {
  render() {
    return (
      <View style={styles.backgroundContainer}>
        <View style={styles.appMenu}>
          <View style={styles.curve} />

          <View style={styles.iconContainer}>
            <View style={[styles.iconWrapper, styles.icon1]}>
              <View style={styles.icon}>
                <Text style={styles.text}>i-1</Text>
              </View>
            </View>
            <View style={[styles.iconWrapper, styles.icon2]}>
              <View style={styles.icon}>
                <Text style={styles.text}>i-2</Text>
              </View>
            </View>
            <View style={[styles.iconWrapper, styles.icon3]}>
              <View style={styles.icon}>
                <Text style={styles.text}>i-3</Text>
              </View>
            </View>
          </View>
        </View>
      </View>
    );
  }
}

corresponding styles 

import { StyleSheet, Dimensions } from 'react-native';

const window = Dimensions.get('window');
const { width, height } = window;

const styles = StyleSheet.create({
    backgroundContainer: {
      flex: 1,
      alignItems: 'stretch',
      justifyContent: 'center',
      backgroundColor: 'black',
    },

    appMenu: {
      height: 300,
      width: width,
      justifyContent: 'flex-end',
      backgroundColor: '#f5f5f5',
      overflow: 'hidden',
    },

    curve: {
      position: 'absolute',
      left: - width * 0.5,
      bottom: - width * 1.5,
      height: width * 2,
      width: width * 2,
      borderTopLeftRadius: width ,
      borderTopRightRadius: width,
      backgroundColor: 'white',
      elevation: 40,
    },

    iconContainer: {
      flexDirection: 'row',
      elevation: 40,
      position: 'absolute',
      bottom: 0,
      height: 300,
      width: width,
      justifyContent: 'space-around',
    },

    iconWrapper: {
      width: 74,
      height: 74,
      borderRadius: 37,
      justifyContent: 'center',
      alignItems: 'center',
      backgroundColor: '#f5f5f5',
      overflow: 'hidden',
    },
    icon: {
      width: 60,
      height: 60,
      borderRadius: 30,
      elevation: 12,
      backgroundColor: 'white',
      justifyContent: 'center',
      alignItems: 'center',
    },
    icon1: {
      marginTop: 85,
    },
    icon2: {
      marginTop: 60,
    },
    icon3: {
      marginTop: 85,
    },
    text: {
      color: '#414141',
      fontSize: 20,
      fontWeight: 'bold',
      textAlign: 'center',
    }
});

Hope it helps.

Upvotes: 2

Related Questions