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 am trying to create a Modal in react native so that when i click the transfer button, it prompts for a user password to complete the transaction. The challenge i have is that, it does not work as expected.
The screen looks thus :
after the modal has been triggered by clicking the transfer button the modal covers the whole screen like so
honestly, i dont know what and where to start from.
My code is looking thus :
import {
ImageBackground,
Modal,
ScrollView,
StyleSheet,
Text,
TextInput,
TouchableOpacity,
View,
} from 'react-native';
import {Picker} from '#react-native-picker/picker';
import React, { useState } from 'react';
import { useNavigation } from '#react-navigation/native';
const LocalPayments = () => {
const navigation = useNavigation();
const [modalVisible, setModalVisible] = useState(false);
return (
<View style={styles.container}>
<View style={styles.space} />
<ScrollView
contentContainerStyle={{
justifyContent: 'space-between',
alignItems: 'center',
}}>
<ImageBackground
source={{
uri: 'asset:/logo/bg.JPG',
}}
imageStyle={{borderRadius: 6}}
style={{
top: -30,
paddingTop: 95,
alignSelf: 'center',
width: 328,
height: 115,
borderadius: 9,
justifyContent: 'center',
alignSelf: 'center',
alignItems: 'center',
}}>
<View>
<Text style={styles.accText}>Wallet Balance</Text>
<Text style={styles.text}> 250,000 </Text>
</View>
</ImageBackground>
<View
style={{
borderRadius: 5,
borderWidth: 1,
overflow: 'hidden',
height: 35,
padding: 0,
borderColor: '#00BB23',
}}>
{
<Picker
style={{
width: 300,
height: 55,
borderBottomWidth: 1,
}}
itemStyle={{
fontSize: 25,
fontFamily: 'Poppins-Medium',
}}>
<Picker.Item label="Select Bank" value="accNum" />
</Picker>
}
</View>
<TextInput
placeholder="Destination Account"
onChangeText={creditAccount => this.setState({creditAccount})}
style={styles.input}
/>
<TextInput
placeholder=" Amount"
onChangeText={amount => this.setState({amount})}
style={styles.input}
/>
<TextInput
placeholder=" Narration"
onChangeText={description => this.setState({description})}
style={styles.input}
/>
<View
style={{
borderRadius: 5,
borderWidth: 1,
overflow: 'hidden',
height: 35,
padding: 0,
top: 10,
borderColor: '#00BB23',
}}>
{
<Picker
style={{
width: 300,
height: 55,
borderBottomWidth: 1,
}}
itemStyle={{
fontSize: 25,
fontFamily: 'Poppins-Medium',
}}>
<Picker.Item label="Currency" value="accNum" />
<Picker.Item label="NGN" value="NGN" />
</Picker>
}
</View>
<TouchableOpacity
onPress={() => {
setModalVisible(true);
}}
style={styles.button}>
<Text style={styles.loginbtn}> Transfer </Text>
</TouchableOpacity>
<Modal visible={modalVisible} onRequestClose={() => setModalVisible(false)}>
<View>
<Text>Hello From Modal</Text>
<TouchableOpacity>
<Text>Modal! Modal!</Text>
</TouchableOpacity>
</View>
</Modal>
</ScrollView>
</View>
);
};
export default LocalPayments;
const styles = StyleSheet.create({
container: {
paddingTop: 40,
flex: 1,
flexDirection: 'row',
justifyContent: 'space-between',
},
accText: {
top: -50,
paddingTop: 10,
justifyContent: 'center',
alignItems: 'center',
fontFamily: 'Poppins-Medium',
fontSize: 12,
color: 'white',
textAlign: 'center',
},
text: {
top: -50,
fontSize: 20,
color: 'white',
textAlign: 'center',
fontFamily: 'Poppins-Bold',
},
input: {
top: 10,
width: 300,
height: 55,
margin: 10,
fontSize: 12,
borderColor: '#00BB23',
fontFamily: 'Poppins-Bold',
borderRadius: 5,
borderWidth: 1,
marginBottom: 30,
},
button: {
marginTop: 40,
width: 150,
height: 50,
padding: 10,
borderRadius: 10,
backgroundColor: '#00BB23',
alignItems: 'center',
},
Regbutton: {
width: 150,
height: 52,
padding: 10,
borderRadius: 10,
backgroundColor: '#ffffff',
alignItems: 'center',
borderWidth: 2,
borderColor: '#030303',
},
loginbtn: {
color: '#ffff',
fontSize: 15,
fontFamily: 'Poppins-Medium',
},
AccountBalance: {
fontSize: 13,
fontWeight: 'bold',
textAlign: 'left',
},
loginbtn2: {
color: '#030303',
fontSize: 20,
fontWeight: 'bold',
},
logo: {
width: 150,
height: 150,
},
space: {
top: 10,
width: 10,
height: 20,
},
space2: {
width: 10,
height: 10,
},
imageStyle: {
flexDirection: 'row',
justifyContent: 'center',
padding: 5,
margin: 2,
height: 15,
width: 15,
resizeMode: 'stretch',
marginBottom: 8,
marginTop: 8,
alignItems: 'center',
},
});
i just need help here to be clear and consise, the Modal should show on half of the screen, and not cover the full screen.
Edits
Upon applying the code as spoken, its just transparent, but it just hides here, i am kind of lost somehow
here is what it looks like now and the source code i applied ..
import {
ImageBackground,
Modal,
ScrollView,
StyleSheet,
Text,
TextInput,
TouchableOpacity,
View,
} from 'react-native';
import {Picker} from '#react-native-picker/picker';
import React, {useState} from 'react';
import {useNavigation} from '#react-navigation/native';
const LocalPayments = () => {
const navigation = useNavigation();
const [modalVisible, setModalVisible] = useState(false);
return (
<View style={styles.container}>
<View style={styles.space} />
<ScrollView
contentContainerStyle={{
justifyContent: 'space-between',
alignItems: 'center',
}}>
<ImageBackground
source={{
uri: 'asset:/logo/bg.JPG',
}}
imageStyle={{borderRadius: 6}}
style={{
top: -30,
paddingTop: 95,
alignSelf: 'center',
width: 328,
height: 115,
borderadius: 9,
justifyContent: 'center',
alignSelf: 'center',
alignItems: 'center',
}}>
<View>
<Text style={styles.accText}>Wallet Balance</Text>
<Text style={styles.text}> 250,000 </Text>
</View>
</ImageBackground>
<View
style={{
borderRadius: 5,
borderWidth: 1,
overflow: 'hidden',
height: 35,
padding: 0,
borderColor: '#00BB23',
}}>
{
<Picker
style={{
width: 300,
height: 55,
borderBottomWidth: 1,
}}
itemStyle={{
fontSize: 25,
fontFamily: 'Poppins-Medium',
}}>
<Picker.Item label="Select Bank" value="accNum" />
</Picker>
}
</View>
<TextInput
placeholder="Destination Account"
onChangeText={creditAccount => this.setState({creditAccount})}
style={styles.input}
/>
<TextInput
placeholder=" Amount"
onChangeText={amount => this.setState({amount})}
style={styles.input}
/>
<TextInput
placeholder=" Narration"
onChangeText={description => this.setState({description})}
style={styles.input}
/>
<View
style={{
borderRadius: 5,
borderWidth: 1,
overflow: 'hidden',
height: 35,
padding: 0,
top: 10,
borderColor: '#00BB23',
}}>
{
<Picker
style={{
width: 300,
height: 55,
borderBottomWidth: 1,
}}
itemStyle={{
fontSize: 25,
fontFamily: 'Poppins-Medium',
}}>
<Picker.Item label="Currency" value="accNum" />
<Picker.Item label="NGN" value="NGN" />
</Picker>
}
</View>
<TouchableOpacity
onPress={() => {
setModalVisible(true);
}}
style={styles.button}>
<Text style={styles.loginbtn}> Transfer </Text>
</TouchableOpacity>
<Modal
animationType="slide"
transparent={true}
visible={modalVisible}
onRequestClose={() => setModalVisible(false)}>
<View style={styles.modal}>
<Text>Hello From Modal</Text>
<TouchableOpacity>
<Text>Modal! Modal!</Text>
</TouchableOpacity>
</View>
</Modal>
</ScrollView>
</View>
);
};
export default LocalPayments;
const styles = StyleSheet.create({
container: {
paddingTop: 40,
flex: 1,
flexDirection: 'row',
justifyContent: 'space-between',
},
modal: {
top: '50%',
height: '50%',
},
accText: {
top: -50,
paddingTop: 10,
justifyContent: 'center',
alignItems: 'center',
fontFamily: 'Poppins-Medium',
fontSize: 12,
color: 'white',
textAlign: 'center',
},
text: {
top: -50,
fontSize: 20,
color: 'white',
textAlign: 'center',
fontFamily: 'Poppins-Bold',
},
input: {
top: 10,
width: 300,
height: 55,
margin: 10,
fontSize: 12,
borderColor: '#00BB23',
fontFamily: 'Poppins-Bold',
borderRadius: 5,
borderWidth: 1,
marginBottom: 30,
},
button: {
marginTop: 40,
width: 150,
height: 50,
padding: 10,
borderRadius: 10,
backgroundColor: '#00BB23',
alignItems: 'center',
},
Regbutton: {
width: 150,
height: 52,
padding: 10,
borderRadius: 10,
backgroundColor: '#ffffff',
alignItems: 'center',
borderWidth: 2,
borderColor: '#030303',
},
loginbtn: {
color: '#ffff',
fontSize: 15,
fontFamily: 'Poppins-Medium',
},
AccountBalance: {
fontSize: 13,
fontWeight: 'bold',
textAlign: 'left',
},
loginbtn2: {
color: '#030303',
fontSize: 20,
fontWeight: 'bold',
},
logo: {
width: 150,
height: 150,
},
space: {
top: 10,
width: 10,
height: 20,
},
space2: {
width: 10,
height: 10,
},
imageStyle: {
flexDirection: 'row',
justifyContent: 'center',
padding: 5,
margin: 2,
height: 15,
width: 15,
resizeMode: 'stretch',
marginBottom: 8,
marginTop: 8,
alignItems: 'center',
},
});
Use top and height to control Modal position. Something like this would work:
<Modal
animationType="slide"
transparent={true}
visible={modalVisible}>
<View style={styles.modal}>
<Button
onPress={() => setModalVisible(!modalVisible)}
title="Hide modal"/>
</View>
</Modal>
const styles = StyleSheet.create({
modal: {
top: '50%',
height: '50%',
...
}
});
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'm having some troubles displaying information which I believe they have to do with the Flexbox Properties, but no matter how I play around with the Styles I don't get to fit everything in some components.
First I have this Component which is a Simple Card Component where I pass my data from API:
<PartidoItem
localImage={logoLocal}
marcadorLocal={marcadorLocal}
time={date}
partidoId={partidoId}
estatus={estatus}
minute={elapsed}
estadio={estadio}
marcadorVisita={marcadorVisita}
visitImage={logoVisita}
onSelect={estatus !== 'NS' && estatus !== 'TBD' ? () => {
selectPartidoHandler(partidoId, tituloPartido)
}
: () => { }
}
/>
This comes from this Component:
import React from 'react';
import { View, Text, Image, StyleSheet, TouchableNativeFeedback, TouchableOpacity, Platform } from 'react-native';
import Card from '../UI/Card';
import Colors from '../../constants/Colors';
const PartidoItem = props => {
let TouchableCmp = TouchableOpacity;
if (Platform.OS === 'android' && Platform.Version >= 21) {
TouchableCmp = TouchableNativeFeedback;
}
return (
<Card style={styles.product}>
<View style={styles.touchable}>
<TouchableCmp onPress={props.onSelect} useForeground>
<View style={styles.container}>
<View style={styles.column}>
<View style={styles.imageContainer}>
<Image
resizeMode="cover"
style={styles.image}
source={{ uri: props.localImage }}
/>
</View>
</View>
<View style={styles.column}>
<Text style={styles.number}>{props.marcadorLocal}</Text>
</View>
{props.estatus === 'NS' || props.estatus === 'TBD'
? <View style={styles.column}>
<Text style={styles.date}>{props.time}</Text>
<Text style={styles.title}>{props.estadio}</Text>
</View>
: props.estatus === 'FT' ?
<View style={styles.column}>
<Text style={styles.title2}>Final</Text>
<Text style={styles.title}>{props.estadio}</Text>
</View>
:
<View style={styles.column}>
<Text style={styles.title}>Tiempo:</Text>
<Text style={styles.title}>{props.minute} '</Text>
</View>
}
<View style={styles.column}>
<Text style={styles.number}>{props.marcadorVisita}</Text>
</View>
<View style={styles.column}>
<View style={styles.imageContainer}>
<Image
resizeMode="cover"
style={styles.image}
source={{ uri: props.visitImage }}
/>
</View>
</View>
</View>
</TouchableCmp>
</View>
</Card>
);
};
const styles = StyleSheet.create({
product: {
height: 100,
margin: 20,
justifyContent: 'center',
alignItems: 'center',
},
touchable: {
borderRadius: 10,
},
container: {
flex: 1,
flexDirection: 'row',
justifyContent: 'center',
alignItems: 'center',
},
column: {
flexDirection: 'column',
alignItems: 'center',
justifyContent: 'center',
height: '100%',
width: '20%',
},
space_between_columns: {
width: 100
},
box: {
height: 50,
width: 50
},
imageContainer: {
width: '100%',
height: '70%',
borderTopLeftRadius: 10,
borderTopRightRadius: 10,
overflow: 'hidden',
marginHorizontal: 10,
overflow: 'hidden',
},
image: {
width: '100%',
height: '100%',
flex: 1,
},
hora: {
fontSize: 14,
color: '#888',
fontWeight: 'bold',
textAlign: 'center',
},
number: {
fontSize: 50,
marginVertical: 4,
fontWeight: 'bold',
justifyContent: 'center',
color: Colors.secondary,
},
title: {
fontSize: 14,
marginVertical: 4,
fontWeight: 'bold',
textAlign: 'center',
//flexWrap: 'wrap',
flex: 2,
flexGrow: 1,
},
title2: {
fontSize: 14,
marginVertical: 4,
fontWeight: 'bold',
textAlign: 'center',
color: 'red',
},
date: {
fontSize: 14,
marginVertical: 4,
textAlign: 'center',
flex: 1,
flexGrow: 1,
marginHorizontal: 2,
},
});
export default PartidoItem;
Which Holds this Component as well:
import React from 'react';
import { View, StyleSheet } from 'react-native';
//Importacion de los colores
import Colors from "../../constants/Colors";
const Card = props => {
return (
<View style={{...styles.card, ...props.style}}>
{props.children}
</View>
);
};
const styles = StyleSheet.create({
card: {
shadowColor: 'black',
shadowOpacity: 0.26,
shadowOffset: { width: 0, height: 2 },
shadowRadius: 8,
elevation: 5,
borderRadius: 10,
backgroundColor: Colors.background,
}
});
export default Card;
Now the problem is that when I see it in the Android Emulator and it has large Strings I see this:
As you can see the Component is the one in the Primary Box and the Property "Estadio" is too big that doesn't show completely
The same happens when I check this on my iOS device (through Expo):
Is there a way to get this info to fit into that space so it shows the Full Name?
Kind Regards
PD: After Change Advise on first Answer this is the result with the Logos not showing correctly:
Try this for your styles :
const styles = StyleSheet.create({
product: {
height: 120,
margin: 20,
justifyContent: 'center',
alignItems: 'center',
},
touchable: {
borderRadius: 10,
},
container: {
flex: 1,
flexDirection: 'row',
justifyContent: 'center',
alignItems: 'center',
},
column: {
flexDirection: 'column',
alignItems: 'center',
justifyContent: 'center',
height: '100%',
},
space_between_columns: {
width: 100
},
box: {
height: 50,
width: 50
},
imageContainer: {
width: 100,
height: 100,
borderTopLeftRadius: 10,
borderTopRightRadius: 10,
overflow: 'hidden',
marginHorizontal: 10,
overflow: 'hidden',
},
image: {
width: '100%',
height: '100%',
flex: 1,
},
hora: {
fontSize: 14,
color: '#888',
fontWeight: 'bold',
textAlign: 'center',
},
number: {
fontSize: 50,
marginVertical: 4,
fontWeight: 'bold',
justifyContent: 'center',
color: Colors.secondary,
},
title: {
fontSize: 14,
margin: 5,
fontWeight: 'bold',
textAlign: 'center',
//flexWrap: 'wrap',
flex: 2,
flexGrow: 1,
},
title2: {
fontSize: 14,
marginVertical: 4,
fontWeight: 'bold',
textAlign: 'center',
color: 'red',
},
date: {
fontSize: 14,
marginVertical: 4,
textAlign: 'center',
flex: 1,
flexGrow: 1,
marginHorizontal: 2,
},
});
I want to implement react-native-modal-dropdown functionality in my app,
here is the code
<View style={styles.viewStyle}>
<Text style={styles.textStyle}>{Strings.Location}</Text>
<View style={styles.input}>
<Image
style={styles.mapIcon}
source={require('../assets/map_pic_icon.png')}
/>
<ModalDropdown
onSelect={(index, value) => { this.setState({ selected: value }) }}
options={['option 1', 'option 2', 'option 3', 'option 4']}
defaultValue={Strings.Gaston}
dropdownTextStyle={{ backgroundColor: '#fff', fontSize: 18, color: colors.black }}/*Style here*/
textStyle={{ fontSize: 18, color: colors.gunmetal, alignSelf: 'flex-start', marginLeft: 10 }}
dropdownStyle={{ flex: 1, width: '90%', marginVertical: 10, borderWidth: 1, borderColor: colors.light_gray }}
style={{ flex: 1, width: '100%', backgroundColor: colors.white, justifyContent: 'center' }}
/>
<Image
style={styles.iconStyle}
source={require('../assets/down_arrow_blue.png')}
/>
</View>
</View>
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: colors.white,
},
viewStyle: {
margin: 10,
},
input: {
height: 50,
width: '100%',
marginTop: 8,
borderRadius: 2,
borderColor: colors.light_gray,
fontSize: 20,
borderWidth: 1,
flexDirection: 'row',
justifyContent: 'space-around'
},
iconStyle: {
margin: 20,
alignSelf: 'flex-end'
},
mapIcon: {
margin: 10,
alignSelf: 'center',
},
});
using this code my screen looks like this
my problem is when i click on blue color down arrow image then drodown is not opening it is only opening when i click on text .
How to solve this
And one more issue is dropdown width is not aligning properly to parent.
It is coming like this
Can anyone please tell me how to show dropdown list when icon is clicked and how to align the drodownlist list width properly.