Is it possible to change the width of just a top "header" thing using popup-menu in react native?

Question

Using React Native react-native-popup-menu is it possible to style the menu, so it'll look something like this below?

I have this at the moment, with no clue how to make the above one:

Current code used for styling:

  <MenuOptions optionsContainerStyle={{marginLeft: 70, marginTop: 10, backgroundColor: "lightgray", borderBottomLeftRadius: 10, borderBottomRightRadius: 10, borderTopLeftRadius: 20, borderTopRightRadius: 20}}>
    <View style={{height: 200}}>
      <ScrollView>
        {state.data.map((item) => {
          return (
            <MenuOption
              key={item["ArticleId"]}
            
              onSelect={() => {
                props.setBudTextCallBack(item["Name"])
              }}
            
              customStyles={
                {
                  optionWrapper: {height: 30, backgroundColor: "silver", marginLeft: 5, marginRight: 5, marginTop: 5, marginBottom: 1},
                  optionText: {fontSize: 18, color: "#faf3ea"},
                }
              }

              text={item["Name"]}
            />
          );
        })}
     </ScrollView>
    </View>
  </MenuOptions>

Is it possible, to change somehow the width of just this top header "kategoria"?

Answer 1

Working example Link: https://snack.expo.io/@msbot01/fascinated-pretzels

Working example is given below

import React, { Component } from 'react';
import { Text, View, StyleSheet, Image } from 'react-native';
import Constants from 'expo-constants';
import { MenuProvider } from 'react-native-popup-menu';
import {
  Menu,
  MenuOptions,
  MenuOption,
  MenuTrigger,
} from 'react-native-popup-menu';


export default class NoApproval extends Component<Props> {
  constructor(props) {
    super(props);
    this.state = {
      color: 'orange'
    }    
    
  }
render(){
  return (
    <MenuProvider>
      <View>
      <Text>Hello world!</Text>
      <Menu style={{backgroundColor:'orange', height:60, alignItems:'center', margin:10, borderRadius:30, paddingLeft:20, flexDirection:'row'}} onBackdropPress={() => this.setState({color:'orange'})}>
      <View style={{height:40, width:40, justifyContent:'center', alignItems:'center', borderWidth:2, borderRadius:30, borderColor:'white'}}>
        <Image
          style={{height:20,width:20}}
          source={{uri: 'https://img.icons8.com/offices/344/folder-invoices.png'}}
        />
      </View>
        <MenuTrigger text='Kategoria' style={{backgroundColor:this.state.color, height:60, justifyContent:'center', marginLeft:5, borderTopLeftRadius:20, borderTopRightRadius:20, width:100, alignItems:'center'}} onPress={() => this.setState({color:'#d4d6d5'})}/>
        <MenuOptions optionsContainerStyle={{marginTop:60, backgroundColor:'#d4d6d5', marginLeft:5,  shadowOpacity: 0, shadowOffset: { width: 0, height: 0 }, shadowColor:'red'}}>
          <MenuOption onSelect={() => alert(`Save`)} text='Save' style={{marginLeft:10}}>
            <Text style={{color: 'white'}}>Save</Text>
          </MenuOption>
          <MenuOption onSelect={() => alert(`Delete`)} style={{marginLeft:10, }}>
            <Text style={{color: 'white'}}>Delete</Text>
          </MenuOption>
          <MenuOption onSelect={() => alert(`Not called`)} disabled={true} text='Disabled' />
        </MenuOptions>
      </Menu>
    </View>
  </MenuProvider>
  );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    paddingTop: Constants.statusBarHeight,
    backgroundColor: '#ecf0f1',
    padding: 8,
  },
  paragraph: {
    margin: 24,
    fontSize: 18,
    fontWeight: 'bold',
    textAlign: 'center',
  },
});