Hi I want to get underline for only 2 letters but getting for full text how to get underline only for first 2 letters, Below is the code i have used to get underline for text.
<Text
style={{
textDecorationLine: "underline",
textDecorationColor: "#F88022",
textDecorationStyle: "solid",
marginTop: SCREENHEIGHT * 0.08,
fontFamily: "Outfit-Regular",
fontSize: SCREENHEIGHT * 0.023,
color: "#0C0C0C",
}}
>
Contract Details
</Text>
use Text component inside Text component
<Text>
your rest of the text
<Text
style={{
textDecorationLine: "underline",
textDecorationColor: "#F88022",
textDecorationStyle: "solid",
marginTop: SCREENHEIGHT * 0.08,
fontFamily: "Outfit-Regular",
fontSize: SCREENHEIGHT * 0.023,
color: "#0C0C0C",
}}>
your underline text
</Text>
</Text>
Use this code:
<View style={{flexDirection: 'row'}}>
<Text>The Other Text </Text>
<Text
style={{
textDecorationLine: "underline",
textDecorationColor: "#F88022",
textDecorationStyle: "solid",
marginTop: SCREENHEIGHT * 0.08,
fontFamily: "Outfit-Regular",
fontSize: SCREENHEIGHT * 0.023,
color: "#0C0C0C",
}}
>
Contract Details
</Text>
<Text>The Other Text </Text>
</View>
Related
I need to create component like
Here is part of my code
<ImageBackground source={{uri}} style={{width: 234, height: 165, marginTop: 10, borderRadius: 10}}>
<Text style={{margin: 10, fontSize: 24, fontWeight: 'bold', color: 'white'}}>
Test
</Text>
<Text style={{marginLeft: 7, marginTop: 80, color: 'white'}}>
<Icons name="distance" size={25} style={{color: 'white'}}></Icons>
<Text style={{color: 'white'}}>
2 KM
</Text>
<Text> </Text>
<Icons name="star" size={25} style={{color: 'white'}}></Icons>
<Text style={{color: 'white'}}>
4.9
</Text>
</Text>
</ImageBackground>
Prop style borderRadius doesn't works with component ImageBackground.
I tried to use various wrappers, but didn't get any results, also I tried to use Image component, but this component cannot contain other components (Text for ex.)
Use this way
<ImageBackground
style={{height: 100, width: 100}}
imageStyle={{ borderRadius: 6}} < -- like this -->
source={{ uri: 'www.imageislocatedhere.com }}
>
How to change the font color of the button, the problem is that the font color doesn't look good so each time the user tap on the button I need to change the font color too.
My approach:
Normal Button
Pressed Button
<TouchableHighlight
underlayColor="#E5E6EA"
onPress={onOpen2}
style={{
fontFamily: "AktivGroteskCorp",
paddingLeft: 15,
paddingRight: 15,
borderRadius: 25.5,
flexDirection: "row",
justifyContent: "center",
marginBottom: 15,
width: vw * 67.2,
height: vw * 13.6,
alignItems: "center",
alignSelf: "center",
borderColor: "#E5E6EA",
borderWidth: 1,
}}
>
<Text
style={{
color: "#ffffff",
fontWeight: "bold",
fontSize: 16,
textAlign: "center",
alignSelf: "center",
}}
>
LOG IN
</Text>
</TouchableHighlight>
Here is a functional way
First, create useState then manipulate it on onPressIn/onPressOut
const TouchableHighlightExample = () => {
const [BtnColor, setBtnColor] = useState("red");
return (
<View>
<TouchableHighlight onPressIn={()=>setBtnColor("blue")} onPressOut={()=>setBtnColor("red")}>
<View>
<Text style={{color: BtnColor}}>Touch Here</Text>
</View>
</TouchableHighlight>
</View>
);
}
using onPressIn and onPressOut
https://reactnative.dev/docs/pressable#onpressin
state = {
fontColor: 'red',
}
<TouchableHighlight
onPressIn={()=>{ this.setState({fontColor:'blue'});}}
onPressOut={()=>{ this.setState({fontColor:'red'});}}
>
<Text
style={{
color: this.state.fontColor,
}}
>
LOG IN
</Text>
</TouchableHighlight>
I want to opactiy my imagebackground not text over image
Anyone help me?
<ImageBackground
imageStyle={{ borderRadius: 100 / 4}}
style={styles.image}
source={{ uri: "example.com/" + itemData.item.image}}
>
<View style={styles.includetitle}>
<Text style={styles.title}>
{itemData.item.title}
</Text>
</View>
</ImageBackground>
I tried like this but my text made transparent too...
image: {
width: '100%',
height: '100%',
opacity: 0.5
},
Just use Image instead of ImageBackground and wrap with a View
<View style={style.container}>
<Image style={[StyleSheet.absoluteFill, {resizeMode: 'cover', opacity: 0.5}]}/>
<View style={styles.includetitle}>
<Text style={styles.title}>
{itemData.item.title}
</Text>
</View>
</View>
You can use this:
<ImageBackground
borderRadius={15}
fadeDuration={1}
source={{
uri: image
? image
: "https://bitsofco.de/content/images/2018/12/Screenshot-2018-12-16-at 21.06.29.png",
}}
style={styles.imgcontainer}
>
<Text style={styles.name}>{restro.name}</Text>
</ImageBackground>
Styles for imgContainer and name
imgcontainer: {
justifyContent: "flex-end",
height: 220,
width: 330,
padding: 20,
marginRight: 20,
marginVertical: 10,
shadowColor: "#000",
shadowOffset: {
height: 5,
},
shadowOpacity: 0.5,
shadowRadius: 10,
elevation: 10,
opacity:0.5
},
name: {
color: "white",
fontSize: 22,
fontWeight: "bold",
letterSpacing: 2,
textShadowColor: "#000",
textShadowOffset: {
width: 2,
height: 1,
},
textShadowRadius: 5,
opacity:1
},
Just pass opacity through imageStyle props
<ImageBackground
imageStyle={{ borderRadius: 100 / 4}}
style={styles.image}
imageStyle={{opacity:0.5}}
source={{ uri: "example.com/" + itemData.item.image}}
>
<View style={styles.includetitle}>
<Text style={styles.title}>
{itemData.item.title}
</Text>
</View>
</ImageBackground>
Remove opacity from image obejct of stylesheet
I try to set a minHeight for a View (half height of a screen) and in this View the items need to be space-between.
Example without space between :
<ScrollView>
<View style={{minHeight:height}>
<View>
<Text style={{textAlign: 'center',fontFamily: 'Roboto',fontStyle: 'normal',fontWeight: 'normal',fontSize: 18,marginTop: 20}}>{contact.name}
</Text>
</View>
<View style={{backgroundColor:'grey', height: 20}}/>
</View>
</ScrollView>
When I try without the space-between , the height of the view is half screen but if i add space-between :
<ScrollView>
<View style={{minHeight:height,justifyContent:'space-between'}}>
<View>
<Text style={{textAlign: 'center',fontFamily: 'Roboto',fontStyle: 'normal',fontWeight: 'normal',fontSize: 18,marginTop: 20}}>{contact.name}
</Text>
</View>
<View style={{backgroundColor:'grey', height: 20}}/>
</View>
</ScrollView>
The height of the view is increase and I don't know why. I want the height is equals to half height if the view can contains the items. And if the items in the view are too big , the height of the view will increase.
How can I solve this ?
I have made an example with expo :
Example
Try to remove justify content. Y ou will understand what I mean.
EDIT
this is my code with the bug :
<View style={{flex:1}}>
<View style={{minHeight:'50%', backgroundColor:'blank',justifyContent: 'space-between'}}>
<Text style={{textAlign: 'center',fontFamily: 'Roboto',fontStyle: 'normal',fontWeight: 'normal',fontSize: 18,marginTop: 20}}>hello </Text>
<View style={{backgroundColor:'grey', height: 20}}/>
</View>
<Text>test</Text>
</View>
The result :
The grey bar should be at the middle on the screen
<ScrollView>
<View style={{minHeight:'50%', backgroundColor:'green'}}>
<Text style={{textAlign: 'center',fontFamily: 'Roboto',fontStyle: 'normal',fontWeight: 'normal',fontSize: 18,marginTop: 20}}>hello
</Text>
</View>
<View style={{minHeight:'50%', backgroundColor:'red'}}>
<Text style={{textAlign: 'center',fontFamily: 'Roboto',fontStyle: 'normal',fontWeight: 'normal',fontSize: 18,marginTop: 20}}>hello1
</Text>
</View>
</ScrollView>
You can set minHeight:'50%' and it will help to divide your component in half screen.
Your Solution:
<View style={{ flex: 1 }}>
<View style={{ minHeight: '50%', backgroundColor: 'green', justifyContent: 'space-between' }}>
<Text style={{ height: 130, textAlign: 'center', fontStyle: 'normal', fontWeight: 'normal', fontSize: 18, marginTop: 0, backgroundColor: 'red' }}>hello </Text>
<Text style={{ height: 130, textAlign: 'center', fontStyle: 'normal', fontWeight: 'normal', fontSize: 18, marginTop: 0, backgroundColor: 'blue' }}>hello </Text>
<Text style={{ height: 130, textAlign: 'center', fontStyle: 'normal', fontWeight: 'normal', fontSize: 18, marginTop: 0, backgroundColor: 'yellow' }}>hello </Text>
<Text style={{ height: 130, textAlign: 'center', fontStyle: 'normal', fontWeight: 'normal', fontSize: 18, marginTop: 0, backgroundColor: 'blue' }}>hello </Text>
<View style={{ justifyContent: 'flex-end', backgroundColor: 'grey', height: 20 }} />
</View>
<Text>test</Text>
</View>
I want to put some words in the 4 corners of the phone but tried everything and i haven't succeeded , i'm beginner in React Native .
state = {
fontLoaded: false
}
async componentDidMount () {
await this._loadAssets()
}
async _loadAssets () {
await Font.loadAsync({
'aga-arabesque': require('./assets/fonts/aga-arabesque.ttf'),
'Mistral': require('./assets/fonts/Mistral.ttf')
})
this.setState({fontLoaded: true})
}
this is all to load custom fonts .
and this is the code of all the screen
let text = null
if (this.state.fontLoaded) {
text = <View>
<View style={{flexDirection: 'row',flex: 1}}>
<Text style={{fontSize: 60, fontFamily: 'aga-arabesque', color: 'gray',}}>
a
</Text>
<Text style={{fontSize: 60, fontFamily: 'aga-arabesque', color: 'gray',paddingLeft: "60%"}}>
h
</Text>
</View>
<Text style={{fontSize: 170, fontFamily: 'Mistral', color: 'gray',flex: 1, paddingLeft: "20%"}}>
World
</Text>
<View style={{flexDirection: 'row',flex: 1,paddingBottom : "0%"}}>
<Text style={{fontSize: 60, fontFamily: 'aga-arabesque', color: 'gray',}}>
s
</Text>
<Text style={{fontSize: 60, fontFamily: 'aga-arabesque', color: 'gray',paddingLeft: "70%"}}>
g
</Text>
</View>
</View>
}
and here is the Style of the container
container: {
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'space-between'
},
and thank you very much for your help .
You can use these attributes: right: 0, top: 0, left: 0, bottom: 0 in your style.
right: 0, top: 0 will print your item on right-Top corner.
left: 0, top: 0 will print your item on left-Top corner. and so on....
Example:
<Text style={{fontSize: 60, fontFamily: 'aga-arabesque', color: 'gray', left: 0, Top: 0}}>
a
</Text>
just to help you I created working example
export default class App extends React.Component {
render() {
return (
<View style={styles.container}>
<View style={{flexDirection: 'row',flex: 1}}>
<Text style={{ position: 'absolute', fontSize: 60, fontFamily: 'aga-arabesque', color: 'gray'}}>
a
</Text>
<Text style={{ position: 'absolute', right: 0, fontSize: 60, fontFamily: 'aga-arabesque', color: 'gray',paddingLeft: "60%"}}>
h
</Text>
</View>
<Text style={{ fontSize: 70, fontFamily: 'Mistral', color: 'gray',flex: 1, paddingLeft: "20%"}}>
World
</Text>
<View style={{flexDirection: 'row',flex: 1}}>
<Text style={{ position: 'absolute', bottom: 0, left: 0, fontSize: 60, fontFamily: 'aga-arabesque', color: 'gray'}}>
s
</Text>
<Text style={{ position: 'absolute', fontSize: 60, bottom: 0, right: 0, fontFamily: 'aga-arabesque', color: 'gray'}}>
g
</Text>
</View>
</View>
);
}
}
position: absolute was missing earlier.