I want to change style in part of Text in React Native.
I tried this :
<Text style={styles.parent}>
Dernier message : <Text style={[styles.children, {
color: 'red',
paddingLeft: 10,
borderWidth: 5,
borderColor: 'black',
}]}>Coucou</Text>
</Text>
const styles = StyleSheet.create({
parent: {
backgroundColor: 'yellow',
},
children: {
backgroundColor: 'blue',
},
})
Parent background color is changed - good
Children color and background color is changed - good
Children padding left and border is not changed
Can you help me ? Thanks
The <Text> element is special as far as layout is concerned. From the docs: "everything inside is no longer using the flexbox layout but using text layout. This means that elements inside of a <Text> are no longer rectangles, but wrap when they see the end of the line."
To achieve what you seem to be looking for, it's probably advisable to use a wrapping<View> with two inner <Text>s.
PFB the expo snack link. Hope it helps
Expo link
Related
I'm trying to manually recreate the focus-visible behaviour on a Pressable component in React Native Web. This artificial behaviour will be such that when you click the Pressable component, it will have one set of styles, but if you focus it with tab on the keyboard, it will have a different set of styles.
Thankfully Pressable on react-native-web has pressed, hovered, and focused variants built in. But the issue is, whenever Pressable is pressed, focused remains true thereafter.
Is there someway to make focused not true after being pressed?
Alternatively, is there some other trick to artificually recreate the focus-visible behaviour?
<Pressable
style={({pressed, hovered, focused}) => [
{
backgroundColor: pressed ? "orange" : hovered ? "green" : focused ? "red" : "lightgray",
padding: 20
}
]}>
{
({pressed, hovered, focused}) => (
<Text>
{pressed ? "Pressed" : hovered ? "Hovered" : focused ? "Focused" : "Default"}
</Text>
)
}
</Pressable>
Here is the Expo Snack. Not sure why hover doesn't work on this snack, but upon clicking, it stays red (focused). Any way to make it back to gray after clicking?
Figured it out.
Based on what you want, you need to use a combination of outline styles and box shadow.
return (
<Pressable style={(state) => [styles.default, state.focused && styles.focusOutline]}>
<Text style={{fontWeight: "bold"}}>
Outline styles only
</Text>
<Text>Tab: Colored offset outline</Text>
<Text>Press: n/a</Text>
</Pressable>
)
// styles
const styles = StyleSheet.create({
default: {
paddingHorizontal: 15,
paddingVertical: 10,
backgroundColor: "powderblue",
alignItems: "center",
borderRadius: 20,
},
focusOutline: {
outlineStyle: "solid",
outlineWidth: 4,
outlineColor: "skyblue",
outlineOffset: 2,
}
});
Expo Snack
Hi I am new to react native. I was trying to add a calendar date picker to the app which worked fine with
react-native-calendar-picker
However I tried adding another view below it, but, elements are not adding outside, instead, the calendar element is getting longer in height and hiding whatever i add after it.
<ScrollView style={styles.scrollMain} >
<Text style={{fontSize:15}}>Mark the dates and time you are available</Text>
<View style={styles.nurseCalendar} >
<CalendarPicker
dayShape='circle'
todayBackgroundColor={'#88B3F9'}
selectedDayTextColor={"#FFFFFF"}
selectedDayStyle={styles.calendarStyle}
nextTitle='>>>'
width={340}
height={342}
restrictMonthNavigation={true}
minDate={Date.now()}
onDateChange={this.handleDateChange}
previousTitle='<<<'
></CalendarPicker>
</View>
<View>/** no matter what i add here won't show however the view above will increase in height **/</View>
</ScrollView>
Here are the style properties i am using:
scrollMain:{
alignContent:'center',
flexDirection:'column',
paddingTop:25,
paddingLeft:25,
paddingRight:25,
backgroundColor:'#F7F9FC'
},
nurseCalendar:{
width:'90%',
alignSelf:'center',
marginTop:25,
height:'100%',
backgroundColor:'#fff',
flexWrap:'wrap'
},
calendarStyle:{
borderColor: '#6574CF',
backgroundColor: 'dodgerblue',
color: 'white',
borderWidth: 2,
borderRadius: 50,
}
I'm attempting to create navigation in React Native. I've made a custom component that consists of an image and some text. Before applying TouchableOpacity the styling works fine. But after I apply it to one of the components, this happens.
All of the code can be found here, ready to run.
I'd like that the component titles MojQR doesn't deform, but stays like the rest of them. Currently, as seen in the code, the TouchableOpacity is only applied to MojQR
You have a problem with the styling you are using. When you set the dimensions (width, height) to take a percentage, it will take the percentage from the component that is wrapping it. That's why when you added TouchableOpacity it mess all the styling. You have 2 options, change the styling pattern you are using or make a simple change that can change the width dynamically from MenuItem like so:
//App.js
<TouchableOpacity style={styles.touchableContainer} onPress={() => navigation.navigate('Details')}>
<MenuItem itemImage={require('./app/img/QR_code_for_mobile_English_Wikipedia.svg.png')} children='Moj QR' isWrapped={true} />
</TouchableOpacity>
...
//And the styling inside your style object
touchableContainer: {
width: '50%'
}
In the code above, you add that prop that will be used to change the styles in
//MenuItem.js
//change the wrapper for this one:
<View style={this.props.isWrapped ? {...styles.menuItem, width: '100%'} : styles.menuItem}>
...
//And add the flexGrow property to your styles.menuItem
menuItem: {
width: '50%',
height: '33.3333%',
padding: 10,
flexGrow: 1,
},
I am developing an App with react native and I have graphical problem. I need to have a dynamic yellow bar(which is in a view) for my text as below:
So, it means that if I have a longer text, the bar should be longer and if the text is shorter, the bar also should be shorter and fit for it. By now I use the static method. I give 90 as the width to the bar which is not good. Here is the code:
<View style={[styles.rowSep, {width:90}]}/>
<Text style={[commonStyle.normalItem , {marginBottom:10}]}>
{I18n.t("Il_Museum_Modena")}
</Text>
Here is the style:
rowSep: {
height: 7,
marginVertical: 4,
//width: Dimensions.get('window').width,
backgroundColor: '#FABB00',
marginBottom:12,
},
Can you help me to have dynamic yellow bar based on the length of the text. Thanks in advance.
You can wrap Text with View and set view StyleSheet to get effect what you want.
Example:
<View style={styles.textwrapper}>
<Text>Just test</Text>
</View>
Style:
textwrapper: {
borderBottomWidth: 5px,
borderBottomColor: #234532,
borderStyle: 'solid'
}
I haven't test this code, but I hope this give you some hints.
How react native Text and Image responsive?
I only know the Flexbox can make layout responsive but seems can not apply in text and image.
e.g.Make my text and image smaller in iphone 4s, bigger in iphone 6
Thanks.
You can use Flexbox in order to make your application responsive.
For example, say you wanted to display a line of text and an image on the same line:
class ResponsiveExample extends Component {
render() {
return (
<View style={styles.container}>
<Text style={styles.text}>
Example of centered text
</Text>
<Image
resizeMode={"contain"}
style={styles.image}
source={{uri: "your image"}}/>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
flexDirection: "row",
alignItems: "center",
justifyContent: "space-between"
},
text: {
marginLeft: 20,
flex: 1
},
image: {
marginRight: 20,
height: 400,
flex: 3,
}
});
Now the text and image will be displayed relative to the screen size. The usual hangup here is that flexDirection defaults to column, which will make things line up vertically. You can see what happens when we flip from portrait to landscape orientation:
As you can see, the text and image respond to the change in orientation.
For a better overview of Flexbox, I like to refer to the following guide:
https://css-tricks.com/snippets/css/a-guide-to-flexbox/.
Just keep in mind that React Native defaults to a flex-direction of column, so if you want things laid out horizontally, you'll have to explicitly set it to row.
I think react-native-fit-image is useful for you.
React Native Fit Image enables you to draw responsive image component.
You can use this component as below.
<FitImage
source={{ uri: 'http://facebook.github.io/react/img/logo_og.png' }}
style={styles.fitImage}
/>
You are right to think about Flexbox, simply wrap your Text and Image inside View and make those View flexbox responsive.