I am building an application which uses react native on expo dev. I am trying to add a button in the top left corner which is adjacent to some text o the right hand side, I have used marginRight: 'auto' for this and it does display as expected on the web version but on the app version on Android it appears centered as if the margin styling is ignored, any solutions?
<View style={styles.header}>
<View style={styles.headerTop}>
<Text style={styles.headerText}>Question {currentQuestion+1}/{questions.length}</Text>
<TouchableOpacity
onPress={() => navigation.navigate("Home")}
style= {styles.exitButton}
>
<Text style={styles.buttonText}>Exit</Text>
</TouchableOpacity>
</View>
<Text style={styles.timer}>{timer}</Text>
</View>
header: {
flexGrow: 0,
padding: 8,
},
headerTop: {
flexDirection: 'row-reverse',
},
headerText: {
fontSize: 24,
textAlign: 'right',
},
exitButton: {
padding: 12,
paddingHorizontal: 12,
backgroundColor: '#1BA7F9',
borderRadius: 12,
marginRight: 'auto',
},
buttonText: {
fontSize: 20,
}
You have specified 'row-reverse' for header-top
headerTop: {
flexDirection: 'row-reverse',
},
So, instead of marginRight: 'auto', try using marginLeft: 'auto',
exitButton: {
padding: 12,
paddingHorizontal: 12,
backgroundColor: '#1BA7F9',
borderRadius: 12,
marginLeft: 'auto',
},
This should fix the issue. I tried it in the emulator and works fine. Attaching the screenshot.
Related
I want to make a specific underline behind text in a specific area of the title, like this:
How do I do it with React Native?
This is the situation right now:
<View style={[styles.container, {width}]}>
<Image source={item.image} style={[styles.image, {width, resizeMode: 'contain'}]}/>
<View style={{flex: 0.2}}>
<Text style={[styles.title]}>{item.title}</Text>
</View>
</View>
const styles = StyleSheet.create({
container: {
flex: 1,
alignItems: 'center',
justifyContent: 'center'
},
image: {
flex: 0.6,
justifyContent:'center'
},
title: {
fontWeight: "600",
fontSize: "26",
color: 'black',
textAlign: 'center',
}
})
I've seen this thread with css Thick underline behind text
You have to position the title absolute to achieve that.
In the following code, I have implemented an example I hope it will help you.
<View style={{marginTop: 20, height: 200, position: 'relative'}}>
<View style={styles.line}></View>
<Text style={styles.title}>Specific Title</Text>
</View>
const styles = StyleSheet.create({
title: {
fontSize: 44,
fontWeight: '500',
lineHeight: 45,
position: 'absolute',
top: 20,
},
line: {
marginTop: 40,
marginLeft: 50,
borderRadius: 10,
height: 15,
width: 100,
backgroundColor: '#3F8ED6',
},
})
result
I have problem with keyboard, when i click the button to show password the TextInput get blur, and hide the keyboard.
i want to keep keyboard open when the button clicks.
i have found a workaround it works well with ios but doesn't work with android? is it a public problem?
what should i do?
<View>
<TextInput ref={inputRef} secureTextEntry={secure} style={styles.input} {...rest} />
<TouchableWrapper style={styles.secureTextWrapper} onPress={_handleSecureTextEntryChange}>
secure ? 'show' : 'hide'
</TouchableWrapper>
</View>
This is how I did my password input, I created a container representing the TextInput with some borders. Inside the container a title and passwordContainer.
passwordContainer:
TextInput
TouchableOpacity with the icons
<SafeAreaView style={styles.inputContainer}>
<Text style={styles.titleInput}>{title}</Text>
<View style={styles.textContainer}>
<Ionicons name={iconLeft} size={22} color="#1F2341" />
<TextInput
style={styles.textInput}
placeholder={placeholder}
onChangeText={propertyChange}
placeholderTextColor="#3f4783"
secureTextEntry={secureText}
enablesReturnKeyAutomatically
value={value}
/>
<TouchableOpacity onPress={onSecurePress}>
<Ionicons name={iconRight} size={22} color="rgba(31, 35, 65, 0.7)" />
</TouchableOpacity>
</View>
</SafeAreaView>;
onSecurePress:
onSecurePress={() => setSecureText(!secureText)}
style:
const styles = StyleSheet.create({
inputContainer: { marginBottom: 15 },
textContainer: {
backgroundColor: "rgba(255,255,255,0.8)",
alignItems: "center",
flexDirection: "row",
height: 50,
paddingLeft: 10,
//borderWidth: 4,
borderRadius: 15,
borderWidth: 0.5,
borderColor: "rgba(0,0,0,0.2)",
marginHorizontal: 20,
marginVertical: 5,
shadowOffset: { height: 2, width: 2 },
shadowColor: "black",
shadowOpacity: 0.1,
},
titleInput: {
marginHorizontal: 20,
marginVertical: 5,
paddingLeft: 10,
color: "#6E6E6E",
},
textInput: {
width: "80%",
padding: 10,
},
errorContainer: { marginLeft: "10%" },
errorMessage: {
color: "#e74d3c",
fontFamily: "MontserratItalic",
},
});
This is my code and below you can find the image where I am not able to scroll.
I have tried using scrollview and also tried dimensions and also tried adding view tag in the top but still not working. What should I do to overcome this behavior? I am not able to fix it and tried many hours fixing it but still not able to achieve the scroll.
const data = useContext(BlogContext);
const singleBlog = data.filter((blog) => blog.title === route.params.title);
return (
<View style={styles.container}>
<ScrollView contentContainerStyle={styles.outer}>
{singleBlog.length > 0 &&
singleBlog.map((blog) => (
<View key={Math.random()}>
<Image source={{ uri: blog.image }} style={styles.blogImage} />
<Text style={styles.title}>{blog.title}</Text>
<View style={styles.authorAndDate}>
<Text style={styles.author}>
<Text style={{ fontWeight: "500" }}>Wriiten by: </Text>
{blog.author === null ? "unknown" : blog.author}
</Text>
<Text style={styles.date}>
{new Date(blog.published_at).toDateString()}
</Text>
</View>
<Text style={styles.description}>{blog.description}</Text>
</View>
))}
{/* <StatusBar style="light" /> */}
</ScrollView>
</View>
);
};
const styles = StyleSheet.create({
blogImage: {
width: "100%",
height: "40%",
marginBottom: 5,
},
title: {
fontFamily: "Poppins_600SemiBold",
textTransform: "capitalize",
fontSize: 40,
fontWeight: "600",
paddingHorizontal: 10,
},
authorAndDate: {
flexDirection: "row",
justifyContent: "space-between",
marginHorizontal: 10,
borderBottomColor: "#BDBDBD",
borderBottomWidth: 1,
paddingBottom: 10,
marginBottom: 10,
},
author: {
fontFamily: "Poppins_500Medium",
textTransform: "capitalize",
fontSize: 18,
fontWeight: "700",
color: "#434343",
},
date: {
color: "#878787",
fontFamily: "Poppins_500Medium",
textTransform: "capitalize",
fontWeight: "500",
fontSize: 14,
},
description: {
color: "#555555",
fontFamily: "Poppins_400Regular",
fontWeight: "400",
paddingHorizontal: 10,
fontSize: 20,
lineHeight: 31,
},
container: {
flexGrow: 1,
borderColor: "red",
borderWidth: 4,
},
outer: {
flex: 1,
// borderColor: "red",
borderWidth: 4,
},
inner: {
flexGrow: 1,
},
});
export default SingleBlogScreen;
enter image description here
In this Image, I am not able to scroll.
I have found the solution for the above issue
changing the blogImage height from 60% -> 600
fixed the issue and now scroll is working
thanks to #wojtek2939 for helping....
I am trying to have clickable text or a button on top of my Expo maps. My provider is google, and when I try to render text that is clickable on top of my maps it fails. The text shows up, but does not register click events. Any ideas?
Here is some code: (see at the bottom I am loading Return to home. )
<SafeAreaView style={{flex: 1, backgroundColor: HOMESCREEN_BACKGROUND}}>
<View style={styles.container}>
<StatusBar backgroundColor="blue" barStyle="light-content" />
<View style={styles.topBar}>
<Text style={styles.cityText}>
{this.state.city}, {this.state.region}
</Text>
<Text style={styles.usernameText}>
{this.props.user.uid}
</Text>
</View>
<MapView
ref={this.map}
style={styles.map} provider="google" customMapStyle={NIGHT_MAP_STYLE}
initialRegion={{
latitude: this.props.reduxMap.latitude,
longitude: this.props.reduxMap.longitude,
latitudeDelta: this.props.reduxMap.latitudeDelta,
longitudeDelta: this.props.reduxMap.longitudeDelta,
}}
showsScale={true}
showsUserLocation={true}
onChange={(event) => this.handleMapViewChange(event)}
>
{/* {this.renderRelevantQueues()} */}
<Text style={styles.returnToHome} onPress={this.snapMapViewToUser} >Return to home</Text>
</MapView>
<View style={styles.bottomBar}>
<Text style={styles.backText} onPress={() => this.handleBackButtonClicked()}>
Back
</Text>
{this.renderReturnToCurrentLocationSvg()}
</View>
</View>
</SafeAreaView>
In response to some questions about this post.
You can see the text, but you can't click it?
I can see a button or text or really whatever on top of the map. However, the click event is not firing when I physically click on the element.
what does renderReturnToCurrentLocationSvg doing ? does it render view or image that might be infront of your text layer?
This is actually commented out in my code but it renders a series of pins and radiuses around them on the map from a database. Removed the function and the issue still persists.
Can you add styles of current screen?
Yes, here they are:
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: HOMESCREEN_BACKGROUND
},
topBar: {
height: 200,
backgroundColor: HOMESCREEN_BACKGROUND,
},
map: {
flex: 1,
flexDirection: 'column'
},
returnToHome: {
color: 'white',
position: 'absolute',
fontSize: 30,
marginLeft: '30%'
},
createQueue: {
color: 'white',
marginLeft: '50%',
fontSize: 30
},
loadingTxt: {
textAlign: 'center',
fontSize: 18,
marginTop: "100%",
marginLeft: "25%",
width: 200
},
topBar: {
height: '10%',
backgroundColor: HOMESCREEN_BACKGROUND,
justifyContent: 'center',
alignItems: 'center',
borderBottomColor: 'grey',
borderBottomWidth: 1
},
bottomBar: {
height: '10%',
backgroundColor: HOMESCREEN_BACKGROUND,
flexDirection: 'row',
borderTopColor: 'grey',
borderTopWidth: 1,
},
backText: {
color: 'white',
fontSize: 30,
marginLeft: 0
},
cityText: {
color: 'white',
fontSize: 30,
},
usernameText: {
color: 'grey'
}
});
I use React Native 0.55, and I want to display a kind of icon on top of a , like this : http://b3.ms/qpknagGre9BR
For now, I use this :
<View style={styles.cardContainer}>
<Image source={iconPlayers} style={styles.iconTop} />
<View style={styles.cardBox}>
<View style={styles.container}>
<Text style={styles.txtTitle}>
My title
</Text>
</View>
</View>
</View>
And my styles :
cardBox: {
borderRadius: 20,
backgroundColor: "#FFF",
padding: 5,
marginBottom: 10,
borderColor: "#DDD",
elevation: 4,
paddingTop: 40,
},
cardContainer: {
marginTop: 40,
},
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center'
},
txtTitle: {
color: "#000",
textAlign: "center",
fontWeight: "bold",
},
iconTop: {
width: 60,
height: 60,
zIndex: 999,
position: "absolute",
top: -30,
elevation: 4,
alignSelf: "center",
},
It's crazy because now it works, but I have a problem, I can't put elevation: 4 on styles for an <Image /> element, I have a Warning.
If I remove the elevation: 4, of my styles, the image is shown behind the cardBox.
How can I achieve what I want without any warning ... ? Thanks.
** EDIT **
I wrapper the <Image /> in a <View />, and I put elevation property to the wrapper, and it works.
I thought elevation was for boxShadow for android, but it impacts the zIndex.
I am trying your code in snack expo, which uses the latest react-native version (55.4). There is no warning in applying elevation to Image property, it just works fine and the image is also above the card. If your react-native version gives warning just wrap it in a View and apply elevation to that View. Also, remember zIndex gets affected by your Views elevation (only Android). Since you have applied elevation: 4 to card box, you must give elevation >= 4 for your Image component else it will draw beneath the card box.
snack example: https://snack.expo.io/B14UPA9Bm
You can also avoid Zindex by changing the order of components,
// Render the image component after your card box this way you can avoid setting the zIndex
<View style={styles.cardContainer}>
<View style={styles.cardBox}>
<View style={styles.container}>
<Text style={styles.txtTitle}>
My title
</Text>
</View>
</View>
<Image source={iconPlayers} style={styles.iconTop} />
</View>
cardBox: {
borderRadius: 20,
backgroundColor: "#FFF",
padding: 5,
marginBottom: 10,
borderColor: "#DDD",
elevation: 4,
paddingTop: 40,
},
cardContainer: {
marginTop: 40,
},
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center'
},
txtTitle: {
color: "#000",
textAlign: "center",
fontWeight: "bold",
},
iconTop: {
width: 60,
height: 60,
//zIndex: 999, not required now
position: "absolute",
top: -30,
elevation: 4,
alignSelf: "center",
},
Check and tell if it works in Android and iOS. thanks