As you can see below in the screenshot, the DOT starting the paragraph instead of ending it when aligning the text to right and do have the RTL ability in the code.
I'm using react-native-render-html Lib and tried too much options to make it fully Right to Left inside the <HTML code ... but with no success.
The Text aligned correctly Right to Left but not the Paragraph.
Also in the first line, it should began with the English words then the Hebrew ones.
Code example:
import HTML from 'react-native-render-html';
<HTML
html={ item.post_description }
tagsStyles={tagsStyles}
containerStyle={{ alignSelf: isRTL ? 'flex-end' : 'flex-start', alignItems: isRTL ? 'flex-end' : 'flex-start'}}
classesStyles={classesStyles}
imagesMaxWidth={Dimensions.get('window').width * .9 }
staticContentMaxWidth={Dimensions.get('window').width * .9 }
onLinkPress={(event, url) => Linking.openURL(url)} />
const tagsStyles = {
p: {
textAlign: 'center',
marginBottom: 10,
textAlign: 'right',
fontSize: 18,
dir: 'rtl',
},
img: {
marginLeft: 'auto',
marginRight: 'auto',
marginTop: 20
}
}
const classesStyles = {
}
Platform: iOS (ReactNative) in both simulator and real Device.
"react-native-render-html": "^6.1.0"
Data for testing:
<p>High Intensity Interval Training - או בעברית: אימון הפוגות בעצימות גבוהה. משתייך לקבוצת האימונים הפונקציונליים, בדגש על שיפור מרכיב הסבולת. שיטת אימונים זו תופסת תאוצה בישראל ובעולם ויש לכך סיבה בהחלט טובה: שיטה זו מאפשרת להשיג תוצאות יוצאות דופן גם בהיבט הוויזואלי, עיצוב הגוף, וגם בהיבט הכושר הגופני על מרבית מרכיביו, בעיקרם סבולת שרירית וסבולת לב ריאה, מהירות, קואורדינציה ושיווי משקל. תוצאות שניכרות במהירות למתמידים בשיטה זו. מאוד זמין ונגיש לביצוע לאור העובדה שניתן ליישם גם ללא ציוד מיוחד.</p>
Related
Hello I have a lot of HTML data with lot of paragraphs with <p> tag stored in variable let element. I am creating a PDF document via jsPDF library in React. The document is being created successfully with 5 pages, however a line break is created inside of last paragraph of the first page and so on with other pages. So how can I manage page height and add more pages in my pdf document. My code is as following:
let element = (
<div style={{ textAlign: "left", width:"600px"}}>
<p style={{fontSize: "10px", color:"#000"}}>
text text....................
</p>
<p style={{fontSize: "10px", color:"#000"}}>
text text.........................
</p>
</div>
);
const doc = new jsPDF("p", "pt", "a4");
doc.html(ReactDOMServer.renderToString(element), {
callback: function (doc) {
doc.save('AgreementLetter.pdf');
}
});
My Issue result is like this
Please help with this, thanks.
To set top and bottom margin and auto paging resolved the issue.
const doc = new jsPDF("p", "pt", "legal");
doc.html(ReactDOMServer.renderToString(element), {
callback: function (doc) {
doc.save('Letter.pdf');
},
margin: [10, 20, 30, 10],
autoPaging: 'text',
x: 0,
y: 0,
width: 655,
windowWidth: 675
});
I have inherited some react-native code where some styling that apparently used to work is no longer working. This is the line of code in question:
<View style={componentStyles.rightButtonContainer}>
The styling assigned looks like this:
rightButtonContainer: {
backgroundColor: config.defaultStyles.greenGradient,
justifyContent: 'center',
alignItems: 'center',
borderBottomRightRadius: 25,
borderTopRightRadius: 25,
width: "45%",
height: 50,
marginLeft: 2,
}
What's not working is the backgroundColor. Notice it is using config.defaultStyles.greenGradient. Now, the config referred to here looks like this:
import colors from '../../styles/Colors';
export default {
defaultStyles: {
greenGradient: colors.greenGradient,
}
};
The above in turn imports colors, which looks like this:
export default {
primary: 'rgb(61, 77, 138)',
secondary: 'rgb(20,169,53)',
greenGradient: ['rgba(20,169,53,1)', 'rgba(20,169,53,1)', 'rgba(20,169,53,1)', 'rgba(20,159,53,1)', 'rgba(20,159,53,1)'],
yellowGradient: ['rgba(229,169,42,1)', 'rgba(229,169,42,1)', 'rgba(229,169,42,1)', 'rgba(219,159,42,1)', 'rgba(219,159,42,1)'],
background: '#fff',
indicator: 'rgb(220, 160, 42)',
text: '#333',
textInverse: '#fff',
textPlaceholder: '#9ab',
textPlaceholderLight: '#ccc',
border:'',
borderLight: '#ccc',
};
So, it should be ultimately assigning the greenGradient color from colors, but as I say it's not working. In other words, the green colored button does not render to the screen.
NOTE: this likely stopped working after updating some libraries and the underlying Expo package. Did something change in terms of how styling is handled?
What is the issue here?
React-native doesn't support gradient. You need to use a third-party module like react-native-linear-gradient.
https://www.npmjs.com/package/react-native-linear-gradient
I'm trying to align the title to the left instead of the center (shown in the image).
I know this is possible on chartJS v3.0.0-alpha.2, but reactchartjs only goes up to 2.9.30 as far as I know.
Does anyone know how to achieve this in reactchartjs?
I thought it would be something like:
options={{
title: {
position: 'top',
align: 'left',
},
}}
Any help would be appreciated.
You should use the align parameter. This sets the alignment of the title. Your options are:
start
center
end
Your align: 'left' isn't one of the above and will not have any effect. Setting align: 'start' however will give you exactly what you want:
The full code looks like this:
<Chart
type='line'
data={dat}
options={{
plugins: {
title: {
display: true,
align: 'start',
text: 'Bitcoin Mining Difficulty'
}
}
}} />
Let me also mention that you should not confuse that with position: 'left'. position moves the whole title into one of top, left, bottom, right area of the chart. An example with a combination of position: 'left' and align: start:
The Chart.js Plugin Core API offers a range of hooks that may be used for performing custom code. You can use the afterDraw hook to draw the title yourself directly on the canvas using CanvasRenderingContext2D.fillText().
In React, you can register the plugin as follows:
componentWillMount() {
Chart.pluginService.register({
afterDraw: chart => {
let ctx = chart.chart.ctx;
ctx.save();
let xAxis = chart.scales['x-axis-0'];
ctx.textAlign = "left";
ctx.font = "14px Arial";
ctx.fillStyle = "black";
ctx.fillText("Title", xAxis.left, 10);
ctx.restore();
}
});
}
You'll also have to define some extra padding at the top of the chart to make sure, the title appears on the canvas.
options: {
layout: {
padding: {
top: 20
}
},
...
Please take a look at this StackBlitz and see how it works.
The documentation provided an example for StyleSheet.absoluteFillObject() whose behavior is also same while using with StyleSheet.absoluteFill():
const styles = StyleSheet.create({
wrapper: {
...StyleSheet.absoluteFillObject,
top: 10,
backgroundColor: 'transparent',
},
});
What is the difference between StyleSheet.absoluteFill() and StyleSheet.absoluteFillObject()? A little example will be more appreciated. Thanks !!!
absoluteFill is an easy way to set a view to be full screen and absolute positioned. It’s a short cut for:
{
position: 'absolute',
top: 0,
left: 0,
bottom: 0,
right: 0
}
Use it to extend your other styles like this:
const styles = StyleSheet.create({
container: {
backgroundColor: 'red'
}
});
<View style={[StyleSheet.absoluteFill, styles.container]} />
absoluteFillObject
Say you want to absolute position your view, but bump it down 20px to offset for the status bar (for example).
You can spread StyleSheet.absoluteFillObject into your style and then override one of it’s values.
const styles = StyleSheet.create({
container: {
...StyleSheet.absoluteFillObject,
top: 20,
backgroundColor: 'red'
}
});
<View style={styles.container} />
There is no difference between those two. You can see this in StyleSheet.js:
/**
* A very common pattern is to create overlays with position absolute and zero positioning,
* so `absoluteFill` can be used for convenience and to reduce duplication of these repeated
* styles.
*/
absoluteFill: (absoluteFill: any), // TODO: This should be updated after we fix downstream Flow sites.
/**
* Sometimes you may want `absoluteFill` but with a couple tweaks - `absoluteFillObject` can be
* used to create a customized entry in a `StyleSheet`, e.g.:
*
* const styles = StyleSheet.create({
* wrapper: {
* ...StyleSheet.absoluteFillObject,
* top: 10,
* backgroundColor: 'transparent',
* },
* });
*/
absoluteFillObject: absoluteFill,
I may be late for the party. But there is some difference between absoluteFill and absoluteFillObject in typescript.
Mainly in typescript, the type of:
absoluteFill is RegisteredStyle<StyleSheet.AbsoluteFillStyle>
absoluteFillObject is StyleSheet.AbsoluteFillStyle
const styles = StyleSheet.create({
container: {
// must use "absoluteFillObject" in typescript
...StyleSheet.absoluteFillObject,
}
})
For JavaScript, there is no difference.
As of version 0.62, no difference at all according to the official document
In case you are using EXPO Snack like I do, the absoluteFill preview on web seems buggy at this time. On a real device, it should be fine.
Currently, there is no difference between using absoluteFill vs. absoluteFillObject.
I've tried to print the value of absoluteFill and absoluteFillObject.
They're no difference. They're the same value.
[LOG] absoluteFill: {"bottom": 0, "left": 0, "position": "absolute", "right": 0, "top": 0}
[LOG] absoluteFillObject: {"bottom": 0, "left": 0, "position": "absolute", "right": 0, "top": 0}
Currently (React Native 0.66), the documentation states:
there is no difference between using absoluteFill vs. absoluteFillObject.
Trying to write a parallax scroll view in react native. First off, this is what I have so far:
The only problem, as you can see in the GIF above, is that, children in scroll view disappear at the red line, which is the ScrollView's original top border position. I've tried to change the top border position but it doesn't work, continue to read. The height of the parallax header is 170px, after 100px scrolled, the image stops going up, therefore, the sticky header height is 70px
Here is the code for the GIF above:
const parallaxHeaderHeight = 170;
const headerHeight = 70;
const headerDiff = parallaxHeaderHeight - headerHeight; // 100px
class ParallaxScrollView extends Component {
constructor(props) {
super(props);
this.scrollY = new Animated.Value(0); // How many pixels scrolled
}
<View style={{ flex: 1 }}>
<Animated.Image
source={{ uri: '...' }}
style={{
width: ..., height: ...,
transform: [
{
translateY: this.scrollY.interpolate({
inputRange: [-1, 0, headerDiff, headerDiff + 1],
outputRange: [0, 0, -headerDiff, -headerDiff]
})
},
{
scale: this.scrollY.interpolate({
inputRange: [-1, 0, 1],
outputRange: [1.005, 1, 1]
})
}
]
}}
/>
<Animated.ScrollView
scrollEventThrottle={1}
onScroll={Animated.event(
[{ nativeEvent: { contentOffset: { y: this.scrollY } } }],
{ useNativeDriver: true }
)}
>
// Then, render children here
</Animated.ScrollView>
</View>
}
Then, I've tried to transform the top border of scroll view, but this happens:
Look at the first child of the scroll view, 0, it disappears when I've scrolled 100px, but what I want is for it to stay viewable when scrolling the first 100px. I know why this is happening, but I can't find a solution. How should I modify my code?
Answering my own question: This problem can be solved with a 'hacky' solution, but is not recommended, for reasons listed below.
First of all, the solution is - Add an initial padding to the scroll view's children (Looking at the code snippet in the question and adding this part to it):
...
<Animated.Image
...
style={{
...
position: 'absolute', zIndex: 1,
top: 0, left: 0, right: 0,
height: parallaxHeaderHeight // which is 170px in my case
...
}}
...
/>
<Animated.ScrollView
...
contentContainerStyle={{ paddingTop: parallaxHeaderHeight }}
...
>
...
</Animated.ScrollView>
...
This gives me:
The flaw is that, part of the scroll bar is hidden behind the image header due to the fact that the header has position = absolute and zIndex = 1. But if the scroll bar is not important, then never mind, this 'hacky' solution is just fine and doesn't cause any performance issue