Develop Reference

Object(...) is not a function - Material UI

Please help me with this error.
I am trying to apply some styling for the MUI dropdown but I am getting this Object(...) is not a function error
import { makeStyles } from "#material-ui/core/styles";
const dropDownStyle = makeStyles({
formControl: {
"& .MuiInputBase-root": {
color: "#6EC177",
borderColor: "#6EC177",
borderWidth: "1px",
borderStyle: "solid",
borderRadius: "100px",
minWidth: "120px",
justifyContent: "center",
},
"& .MuiSelect-select.MuiSelect-select": {
paddingRight: "0px",
},
},
select: {
width: "auto",
fontSize: "12px",
"&:focus": {
backgroundColor: "transparent",
},
},
selectIcon: {
position: "relative",
color: "#6EC177",
fontSize: "14px",
},
paper: {
borderRadius: 12,
marginTop: 8,
},
list: {
paddingTop: 0,
paddingBottom: 0,
"& li": {
fontWeight: 200,
paddingTop: 8,
paddingBottom: 8,
fontSize: "12px",
},
"& li.Mui-selected": {
color: "white",
background: "#6EC177",
},
"& li.Mui-selected:hover": {
background: "#6EC177",
},
},
});
export default dropDownStyle;`
Object(...) is not a functionObject(...) is not a functionObject(...) is not a function
Error:
MUI and React version

React Native. While component props changed, one depended element re-renders but another - not

CardItem receives the cardIsLocked prop, which changes frequently and depends on user actions.
TouchableOpacity, that affected by this prop, reflects all app state correctly all the time. I can or can't press on it accordingly to my expectations. That is why I know that its disabled prop re-renders well. But prop style of top View component - doesn't.
So, all interaction works as demanded but styles not re-renders. How could this difference be possible during usage of the same prop cardIsLocked?
Thanks for ideas.
const CardItem = (props) => {
const card = props.card;
const cardIsLocked = props.cardIsLocked;
const handler = props.handler.bind(this, { card });
return (
<View style={cardIsLocked // <-- not causes re-renders
? styles.cardLocked
: styles.cardActive}>
<TouchableOpacity
disabled={cardIsLocked} // <-- causes re-renders
style={styles.innerCardSpace}
onPress={handler}
>
<View style={styles.card}>
<Text style={styles.text}>{card.cardName}</Text>
</View>
</TouchableOpacity>
</View>
);
};
export default CardItem;
const styles = StyleSheet.create({
cardActive: {
padding: 1,
borderWidth: 1,
borderRadius: 3,
maxWidth: 30,
minWidth: 30,
height: 50,
borderColor: "#00ee00",
},
cardLocked: {
padding: 1,
borderWidth: 1,
borderRadius: 3,
maxWidth: 30,
minWidth: 30,
height: 50,
borderColor: "#black",
},
innerCardSpace: {
flex: 1,
justifyContent: "center",
alignContent: "center",
flexDirection: "column",
margin: 1,
},
card: {
height: 26,
width: 46,
alignItems: "center",
backgroundColor: "#white",
},
text: { fontWeight: "700", fontSize: 10 },
});

Just to formalize the answer.
The error is the # at the beginning of the color's name.
The # must be used when declaring code RGB like #eeff00. For colors declared as names the # isn't necessary
So the re-rendering is occurring. But the problem is when any attribute of style has an unacceptable format, React doesn't apply it, and tries to keep the last identical attribute or will do nothing.
The code fixed
const styles = StyleSheet.create({
cardActive: {
padding: 1,
borderWidth: 1,
borderRadius: 3,
maxWidth: 30,
minWidth: 30,
height: 50,
borderColor: "#00ee00",
},
cardLocked: {
padding: 1,
borderWidth: 1,
borderRadius: 3,
maxWidth: 30,
minWidth: 30,
height: 50,
borderColor: "black",
},
innerCardSpace: {
flex: 1,
justifyContent: "center",
alignContent: "center",
flexDirection: "column",
margin: 1,
},
card: {
height: 26,
width: 46,
alignItems: "center",
backgroundColor: "white",
},
text: { fontWeight: "700", fontSize: 10 },
});

Creating shadow design in react native

I am trying to create a UI in react-native like in the below picture:
Until now I can do only like this:
But is there any proper way to do that?
<View style={styles.frame1}>
<View style={styles.frameBefore}></View>
<View style={styles.frame2}>
<TextInput/>
</View>
</View>
frame1: {
flexDirection: 'row',
margin: 10,
borderColor: LightColorLine,
borderStyle:'solid',
borderWidth: 0.5,
backgroundColor: LightColorBackgr,
padding:10,
},
frame2:{
backgroundColor: LightColorTextBackgr,
padding: -50,
flex: 0.98,
},
frameBefore:{
width: 0,
height: 60,
borderRightWidth: 0.9,
borderColor: LightColorLine,
borderStyle:'solid',
shadowColor: '#000000',
shadowOffset: {
width: 0,
height: 10,
},
shadowOpacity: 0.25,
shadowRadius: 3.84,
elevation: 5,
flex: 0.01,
transform: [{
rotate: '45deg'
}]
},

Here is the closest I was able to get
The tricky part was creating the shadow on an angle, especially considering the API's React-Native provide for shadows differ so much between iOS and Android.
To overcome this I used a linear gradient which is not included by React Native by default. I used expo-linear-gradient but there a few others you can use if you would prefer.
export const Triangle = props => (
<View style={props.style}>
<LinearGradient
colors={['black', 'transparent']}
start={[0, 0]}
end={[0.5, 0.5]}
style={styles.triangleShadow}
/>
<View style={styles.triangle} />
</View>
);
export default class App extends React.Component {
render() {
return (
<View style={styles.container}>
<View style={styles.card}>
<Text style={styles.text}>Be Cool.</Text>
<Triangle style={styles.topLeftTriangle} />
<Triangle style={styles.bottomRightTriangle} />
</View>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
paddingTop: Constants.statusBarHeight,
backgroundColor: '#ecf0f1',
padding: 32,
},
text: {
fontSize: 18,
padding: 32,
paddingVertical: 48,
fontWeight: 'bold',
borderWidth: 1,
backgroundColor: '#F66F6F',
color: 'white',
borderColor: 'gray',
},
card: {
borderWidth: 1,
padding: 8,
borderColor: 'gray',
},
triangle: {
width: 0,
height: 0,
backgroundColor: 'transparent',
borderStyle: 'solid',
borderRightWidth: 80,
borderTopWidth: 80,
borderRightColor: 'transparent',
borderTopColor: '#ecf0f1',
},
triangleShadow: {
height: 90,
width: 90,
position: 'absolute',
top: 0,
left: 0,
},
topLeftTriangle: {
position: 'absolute',
top: -10,
left: -10,
},
bottomRightTriangle: {
position: 'absolute',
bottom: -10,
right: -10,
transform: [{ rotate: '180deg' }],
},
});

React Native borderRadius one corner not round

Hello this is the code I'm using:
menuItemButtonContainer: {
marginRight: 1,
marginLeft: 1,
marginTop: 1,
marginBottom: 1,
paddingRight: 1,
paddingLeft: 1,
paddingTop: 1,
paddingBottom: 1,
borderRadius: 10,
overflow: 'hidden',
position: "absolute",
backgroundColor: 'white',
borderWidth: 1,
borderColor: colors.navy
},
but for some reason the top right corner is not round. I've been cudgeling my brain for a day.
This is the component code
<Native.View
style={[styles.menuItemButtonContainer, {width: 50, height: 30, marginLeft: 0}]}><Native.TouchableHighlight
underlayColor={colors.darkGray}
onPress={this.orderObjectChange.bind(this, 'ADD', item.id)}
style={{
justifyContent: 'center',
alignItems: 'center'
}}><Native.View><Components.Text
style={{color: colors.navy}}>ADD</Components.Text></Native.View></Native.TouchableHighlight></Native.View>

Styles you written works, Please see the below. May be border style getting overridden by some other styles in your application.Inspect that element to see.

As I have reviewed your code and as per that, you try by using below property to give corner radius one bye one for all the corner
borderBottomLeftRadius: 10
borderBottomRightRadius: 10
borderTopLeftRadius: 10
borderTopRightRadius: 10

Try the border radius on each corner as follows:
menuItemButtonContainer: {
marginRight: 1,
marginLeft: 1,
marginTop: 1,
marginBottom: 1,
paddingRight: 1,
paddingLeft: 1,
paddingTop: 1,
paddingBottom: 1,
borderTopLeftRadius: 10, //Top Left Corner
borderTopRightRadius: 10,// Top Right Corner
borderBottomLeftRadius: 10,// Bottom Left Corner
borderBottomRightRadius: 10, // Bottom Right Corner
overflow: 'hidden',
position: "absolute",
backgroundColor: 'white',
borderWidth: 1,
borderColor: colors.navy
},

You may also use the sx prop like this:
sx={{"& .MuiOutlinedInput-root": {
borderRadius: '0 10px 0 0'
}}}

How do make textinput background transparent on map on react-native

How can I make the outer textinput background transparent so that it look like its inside the map, not on top? Thanks in advance!
<View style={styles.container}>
<TextInput style={styles.input}/>
<MapView style={styles.map}/>
</View>
var styles = StyleSheet.create ({
container: {
flex: 1,
justifyContent: 'center',
backgroundColor: '#F5FCFF',
},
map: {
flex: 1,
},
input: {
height: 36,
padding: 10,
margin: 18,
fontSize: 18,
borderWidth: 1,
borderRadius: 10,
borderColor: '#48BBEC',
backgroundColor: 'rgba(0,0,0,0)',
}
})

Finally got it answer! Thanks to jpea!
<View style={styles.container}>
<MapView style={styles.map}/>
<View style={styles.inputView}>
<TextInput style={styles.input}/>
</View>
</View>
var styles = StyleSheet.create ({
container: {
flex: 1,
justifyContent: 'center',
backgroundColor: '#F5FCFF',
},
map: {
flex: 1,
},
inputView: {
backgroundColor: 'rgba(0,0,0,0)',
position: 'absolute',
top: 0,
left: 5,
right: 5
},
input: {
height: 36,
padding: 10,
marginTop: 20,
marginLeft: 10,
marginRight: 10,
fontSize: 18,
borderWidth: 1,
borderRadius: 10,
borderColor: '#48BBEC',
backgroundColor: 'white',
}
})

Try wrapping your text input in another view and setting that view's background to transparent:
<View style={styles.container}>
<MapView style={styles.map}/>
<View style={styles.inputWrapper}>
<TextInput style={styles.inputSearch}/>
</View>
</View>
inputWrapper: {
flex: 1,
backgroundColor: 'transparent',
position: 'absolute',
top: 0,
},
inputSearch: {
backgroundColor: 'rgba(0,0,0,0.4)', // 40% opaque
color: 'white',
}