how to change background colour of border radius in react native using flex

Question

I am using flex to design a react native page. I have used flex to design entire screen, my issue is I have created a radius for a menu style as in below code. how can I

function Home() {
  return (
    <View style={styles.container}>
      <View style={styles.header}>
      </View>
      <View style={styles.footer}>
        <Text style={styles.title}>Innovative solution</Text>
      </View>
      <View style={styles.stomach}></View>

      <View style={styles.menu}>
       <Text> how to change brown background colour of radius  </Text>
       </View>
      <View style={styles.lastfoot}>
        <Text></Text>
      </View>
    </View>
  );
}

export default Home;

want to change background colour brown of border radius of menu style ie inherited from container style

// style sheet of react native

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: 'brown',
  },
  header: {
    flex: 0.5,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: 'brown',
  },
  
  lastfoot: {
    flex: 0.5,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#f3f4fc',
  },
  stomach: {
    flex: 5,
    backgroundColor: '#f3f4fc',
    paddingVertical: 50,
    paddingHorizontal: 30,
    textAlign: 'center',
    shadowRadius: 1,
    borderTopLeftRadius: 40,
    borderTopRightRadius: 40,
  },
  footer: {
    flex: 2,
    justifyContent: 'center',
    alignItems: 'center',
  },

  title: {
    color: 'white',
    fontSize: 30,
    fontWeight: 'bold',
  },

  menu: {
    flex: 0.5,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: 'white',
    overflow: 'hidden',
    borderRadius: 28,
    overflow: 'hidden',
    paddingBottom: 5,
  },
  
  
});

Answer 1

Just add a wrapper element to the menu and give it a background

  function Home() {
    return (
    <View style={styles.container}>
      <View style={styles.header}>
      </View>
      <View style={styles.footer}>
        <Text style={styles.title}>Innovative solution</Text>
      </View>
      <View style={styles.stomach}></View>
      <View style={styles.menuContainer}>
      <View style={styles.menu}>
       <Text> how to change brown background colour of radius  </Text>
       </View>
      </View>
      <View style={styles.lastfoot}>
        <Text></Text>
      </View>
    </View>
  );
}

export default Home;

And now add a background color to that element

    const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: 'brown',
  },
  header: {
    flex: 0.5,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: 'brown',
  },
  
  lastfoot: {
    flex: 0.5,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#f3f4fc',
  },
  stomach: {
    flex: 5,
    backgroundColor: '#f3f4fc',
    paddingVertical: 50,
    paddingHorizontal: 30,
    textAlign: 'center',
    shadowRadius: 1,
    borderTopLeftRadius: 40,
    borderTopRightRadius: 40,
  },
  footer: {
    flex: 2,
    justifyContent: 'center',
    alignItems: 'center',
  },

  title: {
    color: 'white',
    fontSize: 30,
    fontWeight: 'bold',
  },

  menu: {
    flex: 0.5,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: 'white',
    overflow: 'hidden',
    borderRadius: 28,
    overflow: 'hidden',
    paddingBottom: 5,
  },
  const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: 'brown',
  },
  header: {
    flex: 0.5,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: 'brown',
  },
  
  lastfoot: {
    flex: 0.5,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#f3f4fc',
  },
  stomach: {
    flex: 5,
    backgroundColor: '#f3f4fc',
    paddingVertical: 50,
    paddingHorizontal: 30,
    textAlign: 'center',
    shadowRadius: 1,
    borderTopLeftRadius: 40,
    borderTopRightRadius: 40,
  },
  footer: {
    flex: 2,
    justifyContent: 'center',
    alignItems: 'center',
  },

  title: {
    color: 'white',
    fontSize: 30,
    fontWeight: 'bold',
  },

  menu: {
    flex: 0.5,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: 'white',
    overflow: 'hidden',
    borderRadius: 28,
    overflow: 'hidden',
    paddingBottom: 5,
  },
  
  menuContainer: {
    backgroundColor: 'red',
  },
});
  
});