title: React Native - create curved edge for shape
body: <p><strong>Summary of problem</strong></p>
  
  <p>I have the following bottom navigation bar for an app I'm building and I'm not sure how to style it since it's more complex than anything I've styled in the past.  I'm having trouble styling the curved top edge of the white part and the area between the blue/green circle and the white part.</p>
  
  <p>I included what the navigation bar should look like from the mockups since one of them seems to blend in.  The black background above the white part between the green/blue circle and the white part shouldn't be styled with this Navigation bar, that should be the background seen behind the navigation bar.</p>
  
  <p>Any help would be greatly appreciated!</p>
  
  <p><a href="https://i.stack.imgur.com/9T1qn.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/9T1qn.png" alt="Navigation Bar Example"></a>
  <strong>Summary Code</strong></p>
  
  <pre><code>  &lt;View style={styles.container}&gt;
    &lt;/View&gt;
  
  container: {
      width: windowWidth,
      height: windowHeight * 0.1020935961,
      backgroundColor: "white",
      flexDirection: "row",
      justifyContent: "space-around",
      borderTopLeftRadius: -50,
      borderTopRightRadius: -50
    }
  </code></pre>
  
  <p><strong>Full Code</strong></p>
  
  <pre><code>const CustomTabNav = () =&gt; (
    &lt;View style={styles.container}&gt;
      &lt;TouchableOpacity
        style={styles.instant}
        onPress={() =&gt; {
          NavigationService.navigate("Home");
        }}
      &gt;
        &lt;Image
          style={styles.homeImage}
          source={require("~/assets/images/homeIcon.png")}
        /&gt;
      &lt;/TouchableOpacity&gt;
      &lt;TouchableOpacity
        style={styles.ovalCopy}
        onPress={() =&gt; NavigationService.navigate("Competitions")}
      &gt;
        &lt;LinearGradient
          start={{ x: 0, y: 1 }}
          end={{ x: 1, y: 0 }}
          colors={[buttonGradientBlueColor, buttonGradientGreenColor]}
          style={styles.linearGradient}
        &gt;
          &lt;Image
            style={styles.plusImage}
            source={require("~/assets/images/plus.png")}
          /&gt;
        &lt;/LinearGradient&gt;
      &lt;/TouchableOpacity&gt;
      &lt;TouchableOpacity
        style={styles.instant}
        onPress={() =&gt; NavigationService.navigate("Competitions")}
      &gt;
        &lt;Image
          style={styles.instantImage}
          source={require("~/assets/images/competitions.png")}
        /&gt;
      &lt;/TouchableOpacity&gt;
    &lt;/View&gt;
  );
  
  const styles = StyleSheet.create({
    container: {
      width: windowWidth,
      height: windowHeight * 0.1020935961,
      backgroundColor: "white",
      flexDirection: "row",
      justifyContent: "space-around",
      borderTopLeftRadius: -50,
      borderTopRightRadius: -50
    },
    homeImage: {
      width: windowWidth * 0.05,
      height: windowWidth * 0.05
    },
    instant: {
      flexDirection: "column",
      // alignSelf: 'center',
      justifyContent: "center"
    },
    instantImage: {
      width: windowWidth * 0.05,
      height: windowWidth * 0.05
    },
    ovalCopy: {
      width: 64,
      height: 64,
    },
    linearGradient: {
      borderRadius: 50, //TODO: make sure this is correct
      width: 64,
      height: 64,
      shadowColor: "#0a0b12cc",
      shadowOffset: {
        width: 0,
        height: -10
      },
      shadowRadius: 60,
      shadowOpacity: 1,
      alignItems: 'center',
      justifyContent: 'center'
    },
    plusImage: {
      width: windowWidth*0.064,
      height: windowWidth*0.064
    }
  });
  </code></pre>