Is there a way to export charts to pdf in react native? Or i need to create them in html and use html-to-pdf library to create pdf?
Chart:
data={{
labels: ['Constipate', 'Normal', 'Diarrhea'],
datasets: [
{
data: [stoolBarChartData.constip, stoolBarChartData.normal, stoolBarChartData.diarrhea]
}
]
}}
fromZero
width={Dimensions.get("window").width - 40}
height={350}
showValuesOnTopOfBars={true}
withInnerLines={false}
withHorizontalLabels={false}
chartConfig={{
barPercentage: 1,
backgroundColor: "#0000",
backgroundGradientFrom: "white",
backgroundGradientTo: "white",
decimalPlaces: 0,
color: (opacity = 1) => `rgba(47, 80, 31, ${opacity})`,
labelColor: (opacity = 1) => `rgba(47, 80, 31, ${opacity})`,
style: {
borderRadius: 16
},
}}
style={{
marginVertical: 8,
borderRadius: 16,
margin: 20,
}}
/> ```
The only way I found is to render off-screen my charts and then take a snapshot of them with react-native-view-shot and then add them with react-native-html-to-pdf to pdf.
Related
This is for the web development btw, not for Ios or Android
So this is my view
<View style={styles.fullView}>
<Video shouldPlay isLooping resizeMode="cover" source={require("./res/bg.mp4")} style={{flex: 1}}/>
</View>
And This is my Stylesheet
fullView: {
flex: 1,
},
container: {
flex: 1,
alignItems: 'center',
justifyContent: 'center',
},
heading: {
color: 'white',
marginBottom: 100,
fontSize: 35,
},
input: {
padding: 6,
fontSize: 16,
width: 200,
textAlign: 'center',
color: 'white',
},
bgcolor: {
backgroundColor: '#33373861',
borderRadius: 15,
margin: 10,
},
button: {
alignItems: 'center',
backgroundColor: '#FBC1F0',
margin: 30,
borderRadius: 15,
padding: 10,
height: 45,
width: 200,
},
image: {
flex: 1,
}
What I am getting is this
What I need is the whole video on screen
I have tried to use resizeMode with cover,contain,stretch,repeat none of them work
Its Like the resizeMode is not recognized itself.
But when I change the height and width in stylesheet the video frame resizes But the video doesn't
Video Resolution is 3840 x 2160.
I want it to resize the video to screen size or adjust accordingly
thanks in advance.
I discovered this happens for web only because the Video html element is absolutely position for some reason.
If you add the following line to your onReadyForDisplay function it will fix it:
import { Video } from 'expo-av';
<Video
style={styles.video}
source={{
uri: 'http://path/to/file',
}}
useNativeControls={true}
resizeMode="contain"
onReadyForDisplay={videoData => {
videoData.path[0].style.position = "initial"
}}
/>
I have the below code where there are only 2 values on the y-axis which means a single segment should suffice. But it turns out the y-label for the top line doesnt come up. Is there a fix for this? Current Chart state
Below is the code I have written for this.
< LineChart
data = {
dataFrame
}
width = {
width - 20
}
height = {
height
}
withShadow = {
true
}
withDots = {
true
}
withScrollableDot = {
true
}
withOuterLines = {
true
}
transparent = {
true
}
withInnerLines = {
true
}
chartConfig = {
{
backgroundColor: '#fff000',
backgroundGradientFrom: '#ffffff',
backgroundGradientTo: '#fffffa',
decimalPlaces: 0,
linejoinType: 'round',
scrollableDotFill: '#fff',
scrollableDotRadius: 6,
scrollableDotStrokeColor: 'tomato',
scrollableDotStrokeWidth: 3,
scrollableInfoViewStyle: {
justifyContent: 'center',
alignContent: 'center',
backgroundColor: '#121212',
borderRadius: 2,
marginTop: 25,
marginLeft: 25,
},
scrollableInfoTextStyle: {
fontSize: 10,
color: '#C4C4C4',
marginHorizontal: 2,
flex: 1,
textAlign: 'center',
},
scrollableInfoSize: {
width: 30,
height: 30
},
scrollableInfoOffset: 15,
labelColor: (opacity = 1) => `rgba(0, 0, 0, ${opacity})`,
color: (opacity = 1) => `rgb(78, 135, 210, ${opacity})`,
propsForBackgroundLines: {
strokeDasharray: '', // solid background lines with no dashes
strokeDashoffset: 15,
},
}
}
segments = {1}
/>
Any help appreciated.
It looks to be a bug in the way the renderHorizontalLabels function is defined inside AbstractChart.tsx. If segments equals 1, only one horizontal label is actually returned instead of 2.
There is a workaround to achieve the effect you want. You could create a generator function and use the formatYLabel prop on the LineChart like this:
const d = [0, 110, 90, 130, 80, 103]; // example data
function* yLabel() {
const min = Math.min(...d); // minimum value of data array d
const max = Math.max(...d); // maximum value of data array d
yield* [min, '', max];
}
function App() {
// Instantiate the iterator
const yLabelIterator = yLabel();
return (
<LineChart
data={{
labels: ['January', 'February', 'March', 'April', 'May', 'June'],
datasets: [
{
data: d,
},
],
}}
width={400}
height={200}
withShadow={true}
withDots={true}
withScrollableDot={true}
withOuterLines={true}
transparent={true}
withInnerLines={true}
chartConfig={{
backgroundColor: '#fff000',
backgroundGradientFrom: '#ffffff',
backgroundGradientTo: '#fffffa',
decimalPlaces: 0,
linejoinType: 'round',
scrollableDotFill: '#fff',
scrollableDotRadius: 6,
scrollableDotStrokeColor: 'tomato',
scrollableDotStrokeWidth: 3,
scrollableInfoViewStyle: {
justifyContent: 'center',
alignContent: 'center',
backgroundColor: '#121212',
borderRadius: 2,
marginTop: 25,
marginLeft: 25,
},
scrollableInfoTextStyle: {
fontSize: 10,
color: '#C4C4C4',
marginHorizontal: 2,
flex: 1,
textAlign: 'center',
},
scrollableInfoSize: {
width: 30,
height: 30,
},
scrollableInfoOffset: 15,
labelColor: (opacity = 1) => `rgba(0, 0, 0, ${opacity})`,
color: (opacity = 1) => `rgb(78, 135, 210, ${opacity})`,
propsForBackgroundLines: {
strokeDasharray: '',
strokeDashoffset: 15,
},
}}
segments={2}
formatYLabel={() => yLabelIterator.next().value}
/>
);
}
So the idea here is to use a segments value of 2, but to show an empty string for the middle label which gives the effect you would expect to get when setting segments to 1.
I have an input container using react-native-elements, and the container includes an icon. I would like to reduce the height of the container but getting a bad result, the height around the icon doesn't fit:
My styling:
input: {
layout: {
...inputs.darkCredentials,
containerStyle: {
...inputs.darkCredentials.containerStyle,
width: '100%',
padding: 0,
marginTop: Platform.OS === 'ios' ? 25 : 17,
marginBottom: Platform.OS === 'ios' ? 15 : 13,
borderRadius: 12,
height: 32,
// marginBottom: 45,
elevation: 5,
shadowColor: '#000000',
shadowOffset: { height: 0.5 },
shadowOpacity: 0.15,
shadowRadius: 5,
},
leftIconContainerStyle: {
...inputs.darkCredentials.leftIconContainerStyle,
// height: Platform.OS === 'ios' ? 40 : 45,
backgroundColor: greenPrestoDark,
padding: 0,
height: 32,
margin: 0,
paddingLeft: 15,
borderRadius: 12,
},
labelStyle: {
marginLeft: 10,
height: 32,
color: 'white',
position: 'absolute',
top: -25,
},
},
and for the icon:
icon: {
layout: {
type: 'material-community',
name: 'lock',
...icons.darkCredentials,
size: 32,
height: 32,
style: { color: 'white' },
},
I'm trying to set height: 32 everywhere
What should I do to reduce the height of the input container altogether?
Can you charge this way
inputStyle={styles.inputStyle}
inputStyle: {
height:200
},
This is My way
<Input
inputStyle={{
fontSize: 12,
}}
// labelStyle={{height: 8}}
inputContainerStyle={{
borderWidth: 1,
height: 30,
marginLeft: pxToDp(-8),
borderColor: '#2F4972',
backgroundColor: '#E2E2E2',
}}
placeholder="设备名称/位置信息"
placeholderTextColor="#000"
/>
the inputContainerStyle is key
I was wondering if anyone knew anyway to make the shadow styles on a react native view component work. I scavenged all of the web and could not find any solutions. My code is shown below:
//Stylesheet code:
...
profileImage: {
width: 170,
height: 170,
overflow: "hidden",
marginLeft: (Dimensions.get('window').width/2) - 85,
marginTop: 30,
borderRadius: 170,
shadowColor: '#000',
shadowOffset: { width: 0, height: 1 },
shadowOpacity: 0.8,
shadowRadius: 2,
elevation: 5
},
...
//View component:
<View style={styles.profileImage}>
<Image source={require("../assets/images/temporaryProfilePicture.jpg")} style={styles.image} resizeMode="cover"></Image>
</View>
...
Any and all help would be largely appreciated. Thank you in advance!
This is what ive achieved with your code and link to it :expo-snack :
import * as React from 'react';
import { Text, View, StyleSheet,Dimensions ,Image} from 'react-native';
export default class App extends React.Component {
render() {
return (
<View style={styles.container}>
<Image source={{uri:'https://source.unsplash.com/random'}} />
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
width: 170,
height: 170,
overflow: "hidden",
marginLeft: (Dimensions.get('window').width/2) - 85,
marginTop: 30,
borderRadius: 170,
shadowColor: '#000',
shadowOffset: { width: 0, height: 1 },
shadowOpacity: 0.8,
shadowRadius: 2,
elevation: 5
},
paragraph: {
margin: 24,
fontSize: 18,
fontWeight: 'bold',
textAlign: 'center',
},
});
I am designing custom button in react native through TouchableOpacity. So far I have tried different styling approaches but didn't get like required design. below mentioned is my attempt to solve.
<TouchableOpacity style={styles.numericButton}>
<View>
<Text style={styles.numericButtonText}>1</Text>
</View>
</TouchableOpacity>
const styles = StyleSheet.create({
numericButton: {
margin:10,
padding:10,
backgroundColor:'#D3D3D3',
borderColor:'#000',
borderWidth:2,
borderRadius:5,
elevation:10,
shadowOffset: { width: 5, height: 5 },
shadowColor: "black",
shadowOpacity: 1,
shadowRadius: 5,
},
numericButtonText:{
fontSize:24,
fontWeight:'bold',
fontFamily:'Cochin'
}
});
result:
I want to style my react native button like this
We can achieve same type of button with react-native-linear-gradient
👆🏽was achieved with:
<TouchableOpacity>
<LinearGradient
// start={{x: 0.5, y: .5}} end={{x: 1, y: 1.0}}
style={styles.button}
locations={[0.3, 0, 0]}
colors={['#A8AFB5', 'white', 'white']}
>
<Text style={styles.buttonText}>{props.data}</Text>
</LinearGradient>
</TouchableOpacity>
const styles = StyleSheet.create({
button: { flex: 1, flexDirection: 'row', justifyContent: 'center', alignItems: 'center', borderRadius: 5, width: null, height: 81,marginTop:5, borderWidth: 1 },
buttonText: {
//textAlign:'center',
fontSize: 24,
fontWeight: 'bold',
fontFamily: 'Cochin',
color: 'black'
}
});
Use following style and use more gradient to set the colors matching the design and check the reflected changes
numericButton: {
alignItems: 'center',
margin: 10,
padding: 10,
backgroundColor: '#D3D3D3',
borderColor: '#000',
borderWidth: 2,
//borderRadius:5,
elevation: 5,
shadowOffset: { width: 5, height: 5 },
shadowColor: 'grey',
shadowOpacity: 1,
shadowRadius: 5,
},
numericButtonText: {
fontSize: 24,
fontWeight: 'bold',
fontFamily: 'Cochin',
},
You're good to go!