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

how to dynamically control the indicatorStyle react navigation 5x

I have 4 screens, then I used the Style indicator to get a white border. However my border on the outros screen is too big and the restaurantes screen is small. How can I put a different width of the Style indicator for each screen? I'm using react navigation 5x Look how it is https://i.stack.imgur.com/9D5UW.png
https://i.stack.imgur.com/eVgHi.png
My code
import React from 'react';
import { createMaterialTopTabNavigator } from '#react-navigation/material-top-tabs';
import Restaurantes from '../pages/Restaurantes';
import Mercados from '../pages/Mercados';
import Farmácias from '../pages/Farmácias';
import Outros from '../pages/Outros';
const Tab = createMaterialTopTabNavigator();
export default function Routes() {
return (
<>
<Tab.Navigator
tabBarOptions={{
allowFontScaling: false,
activeTintColor: '#111',
inactiveTintColor: '#a8a8a8',
indicatorStyle: {
height: 23,
width: 80,
position: 'absolute',
left: '3%',
marginBottom: 12,
borderRadius: 15,
marginLeft: 5,
backgroundColor: '#fff',
},
tabStyle: {
marginLeft: 10,
paddingLeft: 20,
},
labelStyle: {
fontSize: 12,
width: 100,
},
style: {
backgroundColor: '#5f12b8',
},
}}
>
<Tab.Screen name="restaurantes" component={Restaurantes} />
<Tab.Screen name="mercados" component={Mercados} />
<Tab.Screen name="farmácias" component={Farmácias} />
<Tab.Screen name="outros" component={Outros} />
</Tab.Navigator>
</>
);
}

You can use 'renderIndicator'.
I will give you an example.
Copy paste the below code inside your 'tabBarOptions'
renderIndicator: (route) => {
if (!route.getTabWidth()) {
return null;
}
return (
<View style={{
width: route.getTabWidth(),
height: '100%',
left: route.navigationState.index * route.getTabWidth(),
backgroundColor: 'orange',
alignItems: 'center',
justifyContent: 'center',
}}>
<View style={{
position: 'absolute',
width: '80%',
backgroundColor: '#fff',
borderRadius: 15,
height: 20,
}}></View>
</View>
)},
}}
This should fix your issue. Some simple tweaking is necessary. If you need more help. Please do ask.
I will link the docs for you as well.
https://reactnavigation.org/docs/material-top-tab-navigator/#tabbaroptions

React-Navigation: aligning header to center

I am having trouble aligning my custom header to the middle of the header in a Stack Navigation.
This is my current view:
I would like to have the menu icon to the left and the title centered.
My current code for the screenOptions in the StackNavigator are
headerStyle: {
backgroundColor: "#a5ade8",
height: 80
},
headerTintColor: "#383f42",
headerTitleStyle: {
fontFamily: "heebo-black",
fontSize: 24
}
My code in my custom header is:
return (
<View style={styles.container}>
<MaterialIcons
name="menu"
style={styles.icon}
size={24}
onPress={openDrawer}
/>
<View>
<Text style={styles.headerTitle}>{title}</Text>
</View>
</View>
);
}
const styles = StyleSheet.create({
container: {
flex:1,
height: "100%",
flexDirection: "row",
alignItems: "center",
justifyContent: "center",
},
headerTitle: {
fontFamily: "heebo-black",
fontSize: 24,
color: "#383f42",
letterSpacing: 1,
},
icon: {
position: "absolute",
left: 16
}
});
I have set my width to 100% in my header, however it takes only takes the space of the text...
Any help would be greatly appreciated!

Have you tried to use the headerTitleAlign option in screenOptions?
const HomeStackNavigator = () => {
return (
<Stack.Navigator
initialRouteName="Reviews"
screenOptions={{
headerTitleAlign: "center"
}}
>
<Stack.Screen
name="Reviews"
component={Home}
options={{
headerTitle: () => (
<View style={styles.container}>
<View>
<Text style={styles.headerTitle}>Reviews App</Text>
</View>
</View>
),
headerLeft: () => (
<MaterialIcons name="menu" size={35} style={styles.icon} />
)
}}
/>
</Stack.Navigator>
);
};
const styles = StyleSheet.create({
container: {
flex: 1,
height: "100%",
flexDirection: "row",
alignItems: "center"
},
headerTitle: {
fontSize: 24,
color: "#383f42",
letterSpacing: 1
},
icon: {
marginLeft: 10
}
});

try
textAlign:'center'
at the header title styles

Can you see the example here in this expo-snack , there in place of icon ive used text and your header is aligned center.
Hope it helps. feel free for doubts

How to display transparent images in react-native?

I have a Transparent Image which I am trying to display using react-native's Image Component but the Image is being displayed with a White Background.
Below is my code:
export default class DefaultCard extends Component {
constructor(props){
super(props);
console.log(props);
console.log(this.props.card.logo)
}
render() {
return (
<View style={styles.container}>
<FlipCard style={styles.card}
flipHorizontal={true}
flipVertical={false}
flip={false}
friction={40}
perspective={1000}
>
<View style={styles.face}>
<Image source={{uri : this.props.card.logo}} style={styles.logo}/> // this.props.card.logo is a transparent Image
<Text style={styles.companyName}>{this.props.card.companyName.toUpperCase()}</Text>
<Text style={styles.tagLine}>{this.props.card.tagLine}</Text>
<View style={styles.fdBottom}></View>
</View>
<View style={styles.back}>
<View style={styles.bdTop}>
<Text style={styles.fullName}>{this.props.card.fullName.toUpperCase()}</Text>
<Text style={styles.tagLine}>{this.props.card.position}</Text>
</View>
<View style={styles.detailsContainer}>
<Text style={styles.details}>{this.props.card.phoneNumber}</Text>
<Text style={styles.details}>{this.props.card.email}</Text>
<Text style={styles.details}>{this.props.card.website}</Text>
</View>
</View>
</FlipCard>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
marginTop: 20,
},
card: {
maxHeight:200,
maxWidth:300,
borderColor: '#00000000',
alignSelf: 'center',
},
face: {
height:200,
width:300,
borderColor: '#00000000',
backgroundColor: '#212121',
},
back: {
height:200,
width:300,
backgroundColor: '#4CD4E4',
},
fdBottom: {
height:36,
backgroundColor: '#4CD4E4',
borderColor: '#00000000',
marginTop: 25,
},
companyName:{
color: '#ffffff',
fontSize: 22,
marginTop: 15,
alignSelf:'center',
letterSpacing: 5
},
bdTop: {
height: 80,
backgroundColor: '#212121',
},
logo: {
marginTop:30,
height: 50,
width: 50,
alignSelf: 'center',
backgroundColor: 'transparent'
},
tagLine: {
marginTop: 5,
alignSelf:'center',
color: '#4CD4E4',
fontSize: 10,
letterSpacing: 2,
fontWeight: 'bold'
},
fullName: {
color: '#ffffff',
fontSize: 18,
marginTop: 20,
alignSelf:'center',
letterSpacing: 5
},
details: {
color: '#ffffff',
fontSize: 10,
alignSelf: 'center',
letterSpacing: 2,
marginTop: 3,
fontWeight: 'bold'
},
detailsContainer: {
marginTop: 30,
}
});
Can someone please tell me what I am doning wrong?

You have problem with your Security Image source with Apple.
If you are using HTTP connection and not https don't forget to add this
App Transport Security Settings as dictionary and into it Allow Arbitrary Loads as Boolean with value YES like in the below figure.
Info.plist
<key>NSAppTransportSecurity</key>
<dict>
<key>NSAllowsArbitraryLoads</key>
<true/>
<key>NSExceptionDomains</key>
<dict>
<key>localhost</key>
<dict>
<key>NSExceptionAllowsInsecureHTTPLoads</key>
<true/>
</dict>
</dict>
</dict>
Or you can edit it in XCode

Content of a variable is [object Undefined]

Problem
I am creating a simple app using React Native and firebase where users can post to the web and see what other people have posted. You can upload things to the servers but when you try and render the posts using a flatlist, the posts say [object Undefined] instead of what is on the server. I would love help fixing this.
Code
import React, { Component } from 'react';
import { StyleSheet, Text, View, Image, TextInput, ScrollView, TouchableHighlight, Button, FlatList } from 'react-native';
import { Font } from 'expo';
import * as firebase from 'firebase';
const firebaseConfig = {
apiKey: "API-key",
authDomain: "candidtwo.firebaseapp.com",
databaseURL: "https://candidtwo.firebaseio.com",
storageBucket: "candidtwo.appspot.com",
};
const firebaseApp = firebase.initializeApp(firebaseConfig);
var fontLoaded = false;
var ref = firebase.database().ref('posts');
var newPostRef = ref.push();
var postWidth = 350;
export default class App extends React.Component {
state = {
fontLoaded: false,
};
componentDidMount() {
Expo.Font.loadAsync({
'JosefinSans-Regular.ttf': require('./JosefinSans-Regular.ttf'),
});
}
constructor(props) {
super(props);
this.state = { postInput: ""}
}
componentWillMount(){
this.getItems();
}
getItems(){
var items = [];
var query = ref.orderByKey();
query.once ('value', (snap) => {
snap.forEach ( (child) => {
items.push(child.val());
});
}).then(() => {
this.setState({firebaseItems: items});
});
}
renderItem({ items, index }) {
return <View>
<View style={{width: 360, height: 250, backgroundColor: '#1daff1', alignItems: 'center', justifyContent: 'center', borderRadius: 10, paddingLeft: 10, paddingRight:10}}>
<Text style={{ fontFamily: 'JosefinSans-Regular.ttf', fontSize: 22, color: '#ffffff', textAlign: 'center'}}>
{/*{toString(reverse(items))}*/} {toString(items)}
</Text>
</View>
<View style={{width:360, height: 40, borderRadius: 10, backgroundColor: '#147aa8', flexDirection: 'row',paddingLeft:5}} >
<Image source={require('./CandidtwoImages/unlove.png')} />
<Text style={{ fontFamily: 'JosefinSans-Regular.ttf', fontSize: 22, color: '#ffffff', paddingRight: 5, paddingTop:5}}>
-
</Text>
<Image source={require('./CandidtwoImages/undislike.png')} />
<Text style={{ fontFamily: 'JosefinSans-Regular.ttf', fontSize: 22, color: '#ffffff', paddingRight: 5, paddingTop:5}}>
-
</Text>
<Image source={require('./CandidtwoImages/comments.png')} />
<Text style={{ fontFamily: 'JosefinSans-Regular.ttf', fontSize: 22, color: '#ffffff', paddingRight: 5, paddingTop:5}}>
-
</Text>
</View>
<View style={{width: 1, height: 6, backgroundColor: '#e8e8e8'}} />
</View>;
}
render() {
return (
<View style={styles.container}>
<View style={styles.button}>
<View style={{width: 1, height: 30, backgroundColor: '#e8e8e8'}} />
<Button
onPress={() => this.setState({ fontLoaded: true })}
title="Get started anonymously!"
color="#fe8200"
accessibilityLabel="Run the app"
/>
</View>
{this.state.fontLoaded ? (
<View style={styles.container}>
<Text style={{ fontFamily: 'JosefinSans-Regular.ttf', fontSize: 16 }}>
Whats on your mind? Create a post!
</Text>
<TextInput
style={{height:40, width: 320, borderColor: '#303030', borderWidth: 1}}
onChangeText={(postInput)=>this.setState({postInput})}
value={this.state.postInput}
/>
<Button
style={{justifyContent: 'center'}}
onPress={() => {
newPostRef.set({ content:this.state.postInput });
this.setState({ postInput: "Your post was succsesfully uploaded! :)" })
}}
title=" + "
color="#fe8200"
/>
<ScrollView>
<Text style={{ fontFamily: 'JosefinSans-Regular.ttf', fontSize: 16 }}>
Adjust the size of posts:
</Text>
<TextInput
style={{height:40, width: 100, borderColor: '#303030', borderWidth: 1}}
onChangeText={(postWidth)=>this.setState({postWidth})}
value={this.state.postWidth}
/>
<View style={{width: 1, height: 6, backgroundColor: '#e8e8e8'}} />
<View style={{width: parseInt(this.state.postWidth), height: 250, backgroundColor: '#1daff1', alignItems: 'center', justifyContent: 'center', borderRadius: 10, paddingLeft: 10, paddingRight:10}} >
<Text style={{ fontFamily: 'JosefinSans-Regular.ttf', fontSize: 22, color: '#ffffff', textAlign: 'center'}}>
Why do android phones have higher inital quality than apple phones, but apple phones have a more consistent amount of quality throughout their years?
</Text>
</View>
<View style={{width: parseInt(this.state.postWidth), height: 40, borderRadius: 10, backgroundColor: '#147aa8', flexDirection: 'row',paddingLeft:5}} >
<Image source={require('./CandidtwoImages/unlove.png')} />
<Text style={{ fontFamily: 'JosefinSans-Regular.ttf', fontSize: 22, color: '#ffffff', paddingRight: 5, paddingTop:5}}>
3
</Text>
<Image source={require('./CandidtwoImages/undislike.png')} />
<Text style={{ fontFamily: 'JosefinSans-Regular.ttf', fontSize: 22, color: '#ffffff', paddingRight: 5, paddingTop:5}}>
1
</Text>
<Image source={require('./CandidtwoImages/comments.png')} />
<Text style={{ fontFamily: 'JosefinSans-Regular.ttf', fontSize: 22, color: '#ffffff', paddingRight: 5, paddingTop:5}}>
8
</Text>
</View>
<View style={{width: 1, height: 6, backgroundColor: '#e8e8e8'}} />
<FlatList
data = {this.state.firebaseItems}
renderItem={this.renderItem}
/>
</ScrollView>
</View>) : (null) }
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 8,
backgroundColor: '#e8e8e8',
alignItems: 'center'
},
button: {
flex: 1,
backgroundColor: '#e8e8e8',
alignItems: 'center'
},
});
Firebase database layout
posts:
ipaurfiauerspfna(random example key):
content: "hello world"
apiergnfpiarngaenig:
content: "test"
helpful warning message[![warning][2]][2] VirtualizedList: missing keys for items, make sure to specify a random key property on every item or provide a custom keyExtractor.

You are trying to pull firebaseItems from state before you have set it (due to the delay in query response), so this will throw an error. To fix this, declare it is a state variable in your constructor. EG
export default class App extends React.Component {
...
constructor(props) {
super(props);
this.state = {
postInput: "",
firebaseItems: [],
}
}

Looks like you haven't set some variables yet, you are going to want to extend your current code of:
state = {
fontLoaded: false,
};
to
state = {
postInput: "", // Or some other default
fontLoaded: false,
};