Develop Reference

How to add padding left in react-pdf/renderer

I am using react-pdf/renderer for displaying pdf . I am currently using dynamic text to show content of pdf. I want to add padding left to view which is inside the another view. I have applied various CSS properties to add padding but it is not working.
Below is my code.
<View style={styles.section}>
<Text >
{'\n'}{today} {'\n'}{'\n'}
<View ><Text > <Text style={{ margingLeft : '50px' }}>⦁</Text> someValue {'\n'}</Text>
</View>
</Text>
</View>
I have also tried inline CSS.
If anyone knows solution. Please help.
Thanks.

Rendering equal width buttons in React Native

I want to render 7 buttons in a row with equal width to fill up all the available space horizontally.
render() {
return (
<FlatList
data={this.state.days}
renderItem={({ item }) => <View style={styles.button}><Button title={item.getDate().toString()} /></View>}
keyExtractor={item => item.getDate().toString()}
horizontal={true}
style={styles.list}
/>
);
}
const styles = StyleSheet.create({
list: {
display: 'flex'
},
button: {
flex: 1
}
});
They are inside a flatlist, wrapped in a view because I cannot style buttons directly.
In regular flexbox in an HTML page this approach works.
This what I get in React Native:
Maybe there are some flatlist behaviour I'm not familiar with?

First of all when you are styling in react native everything is already in flex so you don't have to do display : flex
If you want to render 7 buttons with the same width in a row make sure that all of them have the same parent. Then use flex:1 in each one of them.
What is happening when you do flex:1 when you put a number in front of flex in your styles in this particular situation it divides your parent into those many parts and give it to the child.
So all your button will have 1/7th of the width. If you put flex:2 in one of the styles then that button will have 2/7th of the width and the rest will have 1/7th.
Please feel free to ask for more clarity on the above said.

I got the same issue, I have added View component cover for each Button like the code below:
<View style={{flexDirection:"row"}}>
<View style={{flex:1}}>
<Button title="Add" />
</View>
<View style={{flex:1}}>
<Button title="Clear" />
</View>
//....
</View>

Have you tried adding flex: 1 to the list so that it takes up the entire horizontal space?

in my point of view, try adding justifyContent as space-between in the style object list

in each item ,set this style:
width:width/7

React Native - How to display content over background Image and Vertically center that content

This same question is previously asked by many people. The issue is that
Image component cannot contain children .If you want to render content on top of an image, consider using the <ImageBackground> component or absolute positioning.
I have referred the article Text Over Image and previous question on stack overflow . Content over image is working using <ImageBackground> component. But how to make it work using <Image> component instead?

Part 1 (Text / Body of your question)
To answer the text/body of your question, the official docs say:
A common feature request from developers familiar with the web is
background-image. To handle this use case, you can use the
<ImageBackground> component, which has the same props as , and
add whatever children to it you would like to layer on top of it.
Thus, <ImageBackground> component is specifically designed for ability to display content over a background image. So, you must use <ImageBackground> component for placing content over an image. This behavior cannot be achieved through <Image> component.
Part 2 (Title of your question)
Now, to answer the TITLE of your question, try this:
<ImageBackground
style={{ flex: 1, flexDirection: 'column', justifyContent: 'center', alignItems: 'center' }}
source={require('path/to/img')}>
<View style={{ flex: 1, justifyContent: 'center', alignItems: 'center', width: '100%' }}>
<Text>Centered Text (both vertically and horizontally)</Text>
</View>
</ImageBackground>
justifyContent works along primary axis (in this case column/vertical). alignItems works along secondary axis (in this case row/horizontal).
You may not need width: '100%' in child View, but I think that I've experienced some issues a couple of times. So you can experiment with that.

Passing Styles Based on Parent Component in React Native

I have a <Text> component that is being passed a style so..
TextFile.js:
<Text style={styles.text}>
This is a line of text and this might be a second line
</Text>
screenFile.js:
<View style={styles.viewContainer}>
<TextFile style={styles.textWithinContainer}>
</View>
textFiles/styles.js:
text: {
fontSize: 20,
color: 'black',
fontWeight: '400',
}
screenFiles/styles.js:
textWithinContainer: {
textAlign: 'center',
}
textAlign within textWithInContainer is not being applied. If I add textAlign: 'center' to styles.text gives me the style I want but it's being used in different screens and I only want it centered in the screenFile. I want the styles from styles.textWithinContainer to override the styles in styles.text. How would I go about this?

You aren't delegating the styles you pass to TextFile to the actual Text element in TextFile. What you can do is add the styles together by passing an array of style objects to apply it:
<Text style={[styles.text, props.style]}>
This is a line of text and this might be a second line
</Text>
From the React Native documentation:
You can also pass an array of styles - the last style in the array has precedence, so you can use this to inherit styles.
Thus, if you pass textAlign in textWithContainer, it'll be applied in the Text component, and it can be reused as you wish without textAlign.

In my initial TextFile, I passed style as an argument, and in the styles array, just used style as the second item in the array.
const TextFile = ({ text, style }) => (
<Text style=([styles.text, style])> {text} </Text>
);
Whenever TextFile gets used, it will apply any styles being given within that component, and/or default to the initial styles it's being given in styles.text.
Thank you #Li357!

React-Native: How to increase space between text and underline

I have followed styles:
const styles = StyleSheet.create({
title: {
textDecorationLine: 'underline',
textDecorationStyle: 'solid',
textDecorationColor: '#000'
}
});
and it creates the underline for my content into some Text component. But it seems that this underline is too close to the text decorated with it.
Can I increase this distance in some how?
Thank you for helping!

Wrap your Text in a View that has a style containing borderBottomWidth: 1 or whatever you want the thickness to be.
Give your Text a lineHeight to adjust the spacing between the border and the content. If you have multiple lines of text, then using paddingBottom would also work.
Simple as that really. Bear in mind the View border will stretch to include any padding on the View itself.

As of now that is not possible in React Native, cause it is also not supported in web apps i.e Css.
Link here
But there is a work around to this.
Create react View wrapper over the Text you want to adjust the underline. And then add borderBottomWidth to View and adjust the distance of underline from Text paddingBottom.
const styles = StyleSheet.create({
viewStyle : {
borderBottomWidth: 10, // whatever width you want of underline
}
title: {
paddingBottom: 4, // Adjust the distance from your text view.
}
});
Add the viewStyle to your parentView.
Hope that helps!

According to me, the best possible way to do this is to add a <View /> (without content) after the <Text> and give top-border as you want your underline to be.
For example:
<Text style={{ color: 'blue' }}>Categories</Text>
<View style={{
height: 0, // height is '0' so that the view will not occupy space
width: 100, // as much as you want to 'Stretch' the underline
borderTopColor: 'blue',
borderTopWidth: 2, // 'Thickness' of the underline
marginTop: 15 . // 'Gap' between the content & the underline
}} />
REMEMBER: This will work if the parent of your Text has flexDirection: 'column' (which is default value). But if it has flexDirection: 'row', wrap both the Text & View (i.e. underline) in another view like <View>...</View> so the items will be arranged in a column.

How to give space between text and decoration line in react-native. Refer the attached image
1 with bottom border width and 2 is decoration line