Custom Views React Native - Custom shape

Question

I am Developing an app in react native, where I have to create this custom shape. Can anyone help me with this ? Here is the screenshot of view

Thanks

Answer 1

Hey you can do like this

You can check here :

https://snack.expo.dev/uoqPqcGnR

import * as React from 'react';
import { Text, View, StyleSheet } from 'react-native';
import Constants from 'expo-constants';

// You can import from local files
import AssetExample from './components/AssetExample';

// or any pure javascript modules available in npm
import { Card } from 'react-native-paper';

export default function App() {
  return (
    <View style={styles.container}>
      <View style={{flexDirection:'row'}} >
      <View style={styles.comoon} >
      </View>
     <View style={styles.common2} >
      </View>
      <Text style={styles.textSw} >setTime</Text>
       <Text style={styles.textSw2} >45:20</Text>
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    paddingTop: Constants.statusBarHeight,
    backgroundColor: '#ecf0f1',
    padding: 8,
  },
  comoon:{
height:50,width:100,backgroundColor:'green',borderRadius:5,
borderTopWidth:1,borderColor:'yellow',
borderLeftWidth:1,borderBottomWidth:1
  },
  textSw:{
    position:'absolute',
    color:'white',
    zIndex:2,
  left:70,
  top:5,

    justifyContent:'center'
  },
   textSw2:{
    position:'absolute',
    color:'white',
    zIndex:2,
  left:80,
  top:25,

    justifyContent:'center'
  },
  common2:{
height:50,width:100,backgroundColor:'green',borderRadius:5,
borderTopWidth:1,borderColor:'yellow',
borderRightWidth:1,borderBottomWidth:1
  },
  paragraph: {
    margin: 24,
    fontSize: 18,
    fontWeight: 'bold',
    textAlign: 'center',
  },
});