We Keep Coding

How do I listen for a click in a layer below (outside) a modal?

Tl;dr
How do I listen for a click in a layer below?
Youtube Video of problem in HD
Hello everyone,
I started yesterday with the dev.to app and now I'm facing an issue that is probably React Native specific.
If you click on your avatar in the top right corner of the dev.to app, a menu will open. Currently I have decided to use the modal brought by React Native.
import { Modal } from 'react-native';
I include it in the code as follows:
// TopBar.js
<Modal
transparent={true}
visible={modalVisible}
onRequestClose={() => {
Alert.alert('Modal has been closed.');
setModalVisible(!modalVisible);
}}>
<UserModal toggleFunction={setModalVisible} />
</Modal>
and pass the current state via the toggleFuntion prop
const [modalVisible, setModalVisible] = useState(false);
The content of the modal is structured as follows
<View style={styles.centeredView}>
<View style={styles.modalView}>
<Text style={styles.userNameText}>Sebastian Richter</Text>
<Text style={styles.userNicknameText}>#gismo1337</Text>
<View style={styles.divider} />
<Text style={styles.modalText}>Dashboard</Text>
<Text style={styles.modalText}>Create Post</Text>
<Text style={styles.modalText}>Reading list</Text>
<Text style={styles.modalText}>Settings</Text>
<View style={styles.divider} />
<Text style={styles.modalText}>Sign Out</Text>
{/* FIXME: For Development only */}
<Pressable
style={[styles.button, styles.buttonClose]}
onPress={() => setModalVisible(false)}>
<Text style={styles.textStyle}>close - for develop only</Text>
</Pressable>
</View>
</View>
const styles = StyleSheet.create({
centeredView: {
alignItems: 'center',
marginTop: 55,
},
modalView: {
width: '95%',
backgroundColor: '#161616',
borderRadius: 5,
borderWidth: 1,
borderColor: '#363636',
padding: 5,
alignItems: 'flex-start',
shadowColor: '#000',
shadowOffset: {
width: 0,
height: 2,
},
shadowOpacity: 0.25,
shadowRadius: 4,
elevation: 5,
},
modalText: {
color: 'white',
marginBottom: 15,
textAlign: 'center',
paddingLeft: 15,
},
userNicknameText: {
color: '#9C9C9C',
marginBottom: 15,
textAlign: 'center',
paddingLeft: 15,
},
userNameText: {
color: 'lightgray',
textAlign: 'center',
paddingLeft: 15,
},
divider: {
borderBottomColor: '#363636',
borderBottomWidth: 1,
width: '100%',
marginBottom: 20,
}
});
Unfortunately, when the modal is open, I now have the problem that clicking on the avatar again is not noticed. This should cause the modal to close. However, my guess is that the "layer" of the ModalView is now over it and the click doesn't arrive.
Q: Does anyone have an idea how I can sort of notice a click in a layer below?
Q: What advantages does the React Native modal bring that a view I have created myself does not have?
Repo:
https://github.com/Gismo1337/dev-to-clone/blob/main/components/TopBar.js
https://github.com/Gismo1337/dev-to-clone/blob/main/components/UserModal.js

React Native ScrollView Horizontal not working

I'm new to react native, and I'm trying to put a horizontal scrollview on my screen.
I've tried to put <ScrollView horizontal={true}> but it's not working at all, I want the blue box scrollable.
here' the image of my screen :
and this for my component code :
import React from 'react';
import {View, StyleSheet, Text, Image, ScrollView} from 'react-native';
export default function Body() {
return (
<View>
<View style={styles.jadwal}>
<ScrollView horizontal={true}>
<View style={styles.box}>
<Text style={styles.title}>Math</Text>
<View style={styles.wrap}>
<View style={styles.alert}>
<Text style={styles.pr}>3 Homework</Text>
<Image
style={styles.img}
source={require('../assets/math.png')}
/>
</View>
</View>
</View>
<View style={styles.box}>
<Text style={styles.title}>Biology</Text>
<View style={styles.wrap}>
<View style={styles.alert}>
<Text style={styles.pr}>10 Homework</Text>
<Image
style={styles.img}
source={require('../assets/math.png')}
/>
</View>
</View>
</View>
</ScrollView>
</View>
</View>
);
}
const styles = StyleSheet.create({
jadwal: {
marginLeft: 10,
flexDirection: 'row',
justifyContent: 'flex-start',
position: 'absolute',
},
box: {
height: 100,
width: 230,
borderRadius: 10,
backgroundColor: '#327fe3',
marginLeft: 10,
},
alert: {
height: 20,
marginLeft: 15,
width: 80,
borderRadius: 10,
backgroundColor: '#7CD5FF',
},
title: {
marginTop: 20,
marginLeft: 20,
fontFamily: 'MontserratSemiBold',
fontSize: 15,
color: '#fff',
},
pr: {
marginLeft: 14,
fontSize: 8,
color: '#fff',
marginTop: 4,
justifyContent: 'flex-start',
fontFamily: 'MontserratLight',
},
wrap: {
marginTop: 5,
},
img: {
height: 50,
width: 50,
marginLeft: 140,
marginTop: -35,
},
});
is there anything wrong ?, did I put the <ScrollView> on wrong position ?
Thanks for reading this, and sorry for my bad english.

There's one error of font-family cause, this font is not installed in my laptop.
Overall your scroll view is working fine.
Note: scroll view is scrolling area is in between the opening and closing tag of scroll.

How to shrink or force equal height between components in row

I'm new to RN, I have trouble dealing with the height priority involve image which I can't seems to find a way to resolve.
Basically I want to have the Image's height to be always equal to the total height of the next view in the row (the view with styles.itemDetails).
The Image always grow to its image native height, and if I use aspectRatio it ignore the resizeMode property and won't grow to the available space.
Component:
<View style={styles.item}>
<Image style={styles.itemImg} source={source} />
<View style={styles.itemDetails}>
<Text>{poi.name}</Text>
<Text>{poi.conciseDescription}</Text>
</View>
</View>
Styles:
const styles = StyleSheet.create({
item: {
marginTop: 8,
marginHorizontal: 8,
borderRadius: 8,
backgroundColor: '#E5E5E5',
flexDirection: 'row',
},
itemImg: {
flex: 1,
borderTopLeftRadius: 8,
borderBottomLeftRadius: 8,
resizeMode: 'cover',
},
itemDetails: {
flex: 2,
margin: 16,
backgroundColor: 'green',
},
itemTitle: {
fontSize: 22,
},
});

You can get itemDetails height with onLayout event and set to image height
const [imageHeight, setImageHeight] = useState(0)
<View style={styles.item}>
<Image style={[styles.itemImg, {height: imageHeight}]} source={source} />
<View
style={styles.itemDetails}
onLayout={e => { setImageHeight(e.nativeEvent.layout.height) }}
>
<Text>{poi.name}</Text>
<Text>{poi.conciseDescription}</Text>
</View>
</View>

Try setting your itemImg to 1em:
img {height: 1em;}
<div>
<img src="http://www.w3.org/html/logo/downloads/HTML5_Logo_128.png" /> Your Text
</div>
If that doesn't work, you could try setting the parent element "item" to inline-flex and/ or remove flex: 1,.

React Native Background Color property is not working properly

I am having problem while changing the background color of View in React Native, backgroundColor property is working fine in other elements except in my Footer Element.
In the Image Snapshot you can see White color in those two top borders of Footer Element. How to remove that white color from there
</View>
</ScrollView>
<View style={styles.footer}>
</View>
</View>
footer:{
flexDirection:"row",
height:80,
borderTopLeftRadius:20,
borderTopRightRadius:20,
backgroundColor:"black",
}

You can use
return (
<View style={styles.gridItem}>
<TouchableOpacity style={{ flex: 1 }} onPress={props.onSelect}>
<View style={styles.container} >
<Text style={styles.title} numberOfLines={2}>
{props.title}
</Text>
</View>
</TouchableOpacity>
</View>
);
};
export default CategoryGridTitle;
const styles = StyleSheet.create({
gridItem: {
flex: 1,
margin: 15,
height: 150,
borderRadius: 10,
overflow: "hidden",
},
container: {
flex: 1,
borderRadius: 10,
shadowColor: "black",
shadowOpacity: 0.26,
shadowOffset: { width: 0, height: 2 },
shadowRadius: 10,
elevation: 3,
padding: 15,
justifyContent: "flex-end",
alignItems: "flex-end",
backgroundColor: '#ff6f00'
},
title: {
fontFamily: "open-sans-bold",
fontSize: 18,
textAlign: "right",
},
});

Wrap your footer with another View which has the same background as your top View component.
Like this:
<View style={{backgroundColor: "orange"}}>
<View style={styles.footer}>
...
</View>
</View>

Use the prop below to make the background red in react-native-elements.
buttonStyle={{backgroundColor: 'red'}}
You should edit the styling of a button in react-native-elements using the prop buttonStyle .
Here is the working code. The button is red in here.
export default class App extends React.Component {
constructor(props) {
super(props);
}
render() {
return (
<View>
<Button
title='Login'
buttonStyle={{
backgroundColor:'red'
}}
/>
</View>
);
}
}
Here is a working code, https://snack.expo.io/BkRgH0_HE

React Native some style causes view to not render

Hi i am a newbie in React Native, and trying to create an android app using the same. If i change the style of my view -> (backgroundColor or borrderBottom) it just doesn't render. There is no error anywhere, but on reloading the js bundle, the view and all its children fail to render. More than solving this particular issue, i am more interested in understanding why is this happening or whether i am missing something. My component in its entirety is below
import React from 'react';
import { StyleSheet, View, Text, PixelRatio, TextInput } from 'react-native';
const styles = {
container: {
paddingTop: 70,
flex: 1,
justifyContent: 'flex-start',
alignItems: 'flex-start',
backgroundColor: '#fff',
},
form: {
flex: 1,
flexDirection: 'column'
},
rowContainer: {
//backgroundColor: '#000',
},
row: {
flexDirection: 'row',
height: 44,
alignItems: 'center',
},
inputLabel: {
fontSize: 15,
paddingLeft: 15,
color: '#333'
},
textInputStyle: {
fontSize: 15,
flex: 1,
paddingLeft: 15
}
};
export default function TestComponent(props) {
return (
<View style={styles.container}>
<Text> Inside Container </Text>
<View style={styles.form}>
<Text> Inside Form </Text>
<View style={styles.rowContainer} >
<Text> Inside Row Container </Text>
<View style={styles.row}>
<Text numberOfLines={1} style={styles.inputLabel}> Bid On </Text>
<TextInput />
</View>
</View>
</View>
</View>
);
}
The above code works perfectly and all the components are rendered, however if i change the rowContainer style and uncomment backgroundColor, rowContainer and all its children are not rendered. I have no clue why this is happening. I also tried other styles inside rowContainer like
rowContainer: {
flex: 1,
flexDirection: 'column',
backgroundColor: '#000'
borderBottomWidth: 1,
borderColor: '#c8c7cc'
}
As long as rowContainer style is empty it works, if i add anything inside it, the view simply doesn't render.

The default Text color is black and the rowContainers backgroundColor is set to '#000'. So it appears as not being rendered.