I want to crop image in react native and using the below code,
var cropData = {
offset: {x: 0, y: 20},
size: {width: 20, height: 20},
displaySize: {width: 20, height: 20},
resizeMode: 'contain',
};
ImageEditor.cropImage(
uripath,
cropData,
(croppedImageURI) => {
console.log('succes', croppedImageURI);
},
(cropError) => {
console.log('fail', cropError);
}
);
In iOS, its working fine.
In andorid, i'm getting the below error
java.lang.Double cannot be cast to java.lang.String getString
Please help!
Related
I am trying to use a Gesture handler with a functional component. The problem is when I drag for the second time it's dragging from initial position again
This is my code below
let translateXRef = useRef(new Animated.Value(0)).current;
const onGestureEvent = useCallback(
Animated.event(
[
{
nativeEvent: {
translationX: translateXRef,
},
},
],
{ useNativeDriver: true }
),
[]
);
<View
style={{
backgroundColor: '#FFFFFF80',
position: 'absolute',
top: 0,
bottom: 0,
left: 0,
right: 0,
height: 100,
}}
>
<PanGestureHandler
onGestureEvent={onGestureEvent}
onHandlerStateChange={onHandlerStateChange}
>
<Animated.View
// eslint-disable-next-line react-native/no-inline-styles
style={{
height: '100%',
width: 10,
backgroundColor: AppColors.buttonColor,
transform: [{ translateX: translateXRef }],
}}
/>
</PanGestureHandler>
</View>
You need to use the context in addition to the event in your callback.
I'm not sure why you're using the Animated.event. You should generate your callbacks using the useAnimatedGestureHandler.
Each of those callbacks onStart, onActive, onEnd, etc... take an event and context argument.
The context argument is an object that would let you set your previous position so that then next click would not reset the position.
Here's more info:
https://docs.swmansion.com/react-native-reanimated/docs/fundamentals/events/#using-context
Also, a pretty good video that explains it:
https://youtu.be/4HUreYYoE6U
I am using react-native-chart-kit and I am trying to have a cbar chart with any color filling up the bars, as of now it is gray but I am trying to change it but i have tried adding color: {} within the datasets part, as well as svg. But to no success. Any suggestions will be greatly appreciated.
render() {
return (
<View>
<BarChart
data={{
labels: [
'1',
'2',
'3',
'4',
'5',
'6',
'7'
],
datasets: [
{
data: this.props.data,
},
],
}}
svg={{ fill: 'green' }}
width={Dimensions.get('window').width - 16}
height={220}
chartConfig={{
backgroundColor: '#fff',
backgroundGradientFrom: '#fff',
backgroundGradientTo: '#fff',
decimalPlaces: 2,
color: (opacity = 1) => `rgba(0, 0, 0, ${opacity})`,
style: {
borderRadius: 16,
},
propsForDots: {
r: "0",
strokeWidth: "2",
stroke: "#fff"
},
propsForBackgroundLines: {
strokeWidth: 0
},
}}
style={{
marginVertical: 8,
borderRadius: 16,
}}
/>
</View>
);
}
You can set fillShadowGradient and fillShadowGradientOpacity in your chartConfig.
More info here: https://github.com/indiespirit/react-native-chart-kit#chart-style-object
You can add below lines in the
chartConfig:{{
fillShadowGradient:'skyblue',
fillShadowGradientOpacity:1,
}}
Its works fine
<BarChart
data={{
labels: this.state.bLabel,
datasets: [
{
data: this.state.bData,
}
]
}}
width={(Dimensions.get("window").width/100)*98}
height={300}
yAxisLabel=""
chartConfig={this.state.chartConfig}
verticalLabelRotation={0}
showValuesOnTopOfBars={true}
fromZero={true}
withCustomBarColorFromData={true}//FOR CUSTOM BAR COLORS
withHorizontalLabels ={false}
style={{alignSelf:"flex-start"}}
/>
//Go to
//node_modules->react-native-chart-kit->dist->BarChart.js
//Change this-> from line no-38 to 50
_this.renderBars = function (_a) {
var colorC=["#8000FF80","#0000ff80","#00FFFF80","#00ff0080","#ffff0080","#FFA50080","#ff000080","#2e000080","#00000080","#000000dd"];/////////AYUSH KHADE
var data = _a.data, width = _a.width, height = _a.height, paddingTop = _a.paddingTop, paddingRight = _a.paddingRight, barRadius = _a.barRadius, withCustomBarColorFromData = _a.withCustomBarColorFromData;
var baseHeight = _this.calcBaseHeight(data, height);
return data.map(function (x, i) {
var barHeight = _this.calcHeight(x, data, height);
var barWidth = 32 * _this.getBarPercentage();
return (<Rect key={Math.random()} x={0 +
(i * (width - 0)) / data.length +
barWidth / 2} y={((barHeight > 0 ? baseHeight - barHeight : baseHeight) / 4) * 3 +
paddingTop} rx={barRadius} width={barWidth} height={(Math.abs(barHeight) / 4) * 3} fill={colorC[i]}/>);//AYUSH KHADE
});
};
I have a list of items rendered in flatlist and I'm animating each of them.
In constructor I assign values for animations
constructor(props){
super(props);
this.state = { ... };
this.height = new Animated.Value(SCREEN_WIDTH/1.8);
this.width = new Animated.Value(SCREEN_WIDTH/2.5);
}
So I render items by index to get different values of them like this:
renderStyle
if(index == 0){
return {
marginRight: SCREEN_WIDTH / 35,
marginLeft: SCREEN_WIDTH / 35,
margin: SCREEN_WIDTH / 50,
width: this.width,
height: this.height,
opacity: this.state.opacity,
borderRadius: SCREEN_WIDTH / 36,
}
}
if(index == 1){
this.height.setValue(SCREEN_WIDTH/1.5);
return {
marginRight: SCREEN_WIDTH / 35,
marginLeft: SCREEN_WIDTH / 35,
margin: SCREEN_WIDTH / 50,
width: this.width,
height: this.height,
opacity: this.state.opacity,
borderRadius: SCREEN_WIDTH / 36,
}
}
then I animate the items when user press on it. Index = 0 animates correctly but index = 1 which I set the new value is not animating at all, I dont understand whats wrong with it? Can you explain me please?
Animation function:
Animated.parallel([
Animated.timing(this.width,{
toValue: SCREEN_WIDTH/1.2,
duration: 750
}),
Animated.timing(this.height,{
toValue: SCREEN_HEIGHT/1.2,
duration: 750
}),
Animated.timing(this.state.opacity,{
toValue: 0,
duration: 750
}),
]).start(() => this.props.go(item));
setTimeout(() => Actions.video({item: item}), 800);
Render
return
(
<Animated.View pointerEvents={this.state.pointer} onLayout={({nativeEvent}) => {
this.setState({
measurements: nativeEvent.layout
})
}}>
<TouchableOpacity onPress={this.captureAnimation.bind(this, item, index)}>
<AnimatedImage source={{uri: 'http://' + item.info.picture_path}} style={this.renderStyle(index)}/>
</View>
</TouchableOpacity>
</Animated.View>
);
This is a different JS file, so flatlist is working in home page and renderItem method gets the values in this JS file to be able to animate each of it.
Edit: I found a alternative solution but anyways its not still explaining why after set value animation is not working.
In the Card Component for react native elements
I'm trying to get rid of the border by setting the border to 0 and borderColor to transparent but there's still a gray outline
<Card
containerStyle={{borderWidth: 0, borderColor: 'transparent', elevation: 0}}
title='HELLO WORLD'
image={require('../images/pic2.jpg')}>
<Text style={{marginBottom: 10}}>
The idea with React Native Elements is more about component structure than actual design.
</Text>
</Card>
Thought it might have been box shadow, but that's not it either
I've got the same issue, and I've found that border appears because the Card element has an elevation default setted to 1
You can override this (for android) :
<Card containerStyle={{elevation:0, backgroundColor:#123}}/>
and in IOS:
const styles = {
container: {
shadowColor: 'rgba(0,0,0, .2)',
shadowOffset: { height: 0, width: 0 },
shadowOpacity: 0, //default is 1
shadowRadius: 0//default is 1
}
}
<Card containerStyle={styles.container} />
Its late but it seems that a lot of people still searching for the Answer.
React Native Elements by default have set both borderWidth and shadow Props, so in order to remove border completely you need to remove both Border and Shadow.
<Card containerStyle={styles.cardCnt}>
<Text>Content</Text>
</Card>
const styles = {
cardCnt: {
borderWidth: 0, // Remove Border
shadowColor: 'rgba(0,0,0, 0.0)', // Remove Shadow for iOS
shadowOffset: { height: 0, width: 0 },
shadowOpacity: 0,
shadowRadius: 0,
elevation: 0 // Remove Shadow for Android
}
};
It looks like react native elements' Card component has a grey border in all of the examples I've seen. I'd suggest building your own card component. Start with something like this and then style it however you want. This one has a bit of shadow which you can turn off by passing it a noShadow prop.
import React from 'react';
import { View, StyleSheet } from 'react-native';
const Card = (props) => {
let shadowStyle = {
shadowColor: COLORS.grey3,
shadowOffset: { width: 0, height: 0 },
shadowOpacity: .5,
shadowRadius: 12,
elevation: 1,
}
if (props.noShadow) {
shadowStyle = {}
}
return (
<View style={[styles.containerStyle, props.style, shadowStyle]}>
{props.children}
</View>
);
};
const styles = StyleSheet.create({
containerStyle: {
padding: 10,
marginHorizontal: 10,
backgroundColor: COLORS.white,
borderRadius: 3,
}
})
export { Card };
Then when you want to use it just
import { Card } from './yourCustomCardFile'
Then in your render method
<Card>
<Text>Any content you want to include on the card</Text>
<Text>More content that you want on the card</Text>
</Card>
set elevation to 0 and borderColor to white like this
<Card containerStyle={{ elevation: 0, borderColor: "white" }}>
set to screen background color
Dirty but problem solved.
I am having trouble working with some SVG in React Native.
I have a chart that is clickable and works well, I then needed to place another SVG on top of the chart in order to draw a line that would represent a limit score value. The problem that I am now facing is that I cannot click on the chart anymore since the view of the SVG is placed on top of it.
I made the background color of the SVG to be transparent so that I can at least see the chart behind it but, I do not know how to make it clickable again.
Is there any work around where I can maybe make the chart clickable trough a transparent view that is place on top?
It might be a stupid question but I am pretty new to both react and JS in general, so I could really use any type of help. :)
Here is the picture of the chart:
Polar Chart and Svg circle
And here the same Svg with a non-transparent background that, as you can see, covers almost the hole chart.
Svg covering the chart
Here's the Svg code:
export class NutritionChartSvg extends Component {
render() {
return (
<View style={styles.container} >
<Svg height={height * 0.5} width={width * 0.5} viewBox="0 0 100 100">
<Svg.Circle
id="circle"
cx="50"
cy="13"
r="40"
stroke="gray"
strokeWidth="0.6"
fill="none"
/>
<Text fill="black" fontSize="8" dy="-2">
<TextPath href="#circle" startOffset='181'>
100
</TextPath>
</Text>
</Svg>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
alignContent: 'center',
justifyContent: 'center' ,
position: 'absolute',
left: '25%',
height: 'auto',
width: 'auto',
},
});'
This is the chart form chartjs:
export const NutritionChart = (props) => {
return (
<Chart
chartConfiguration={
{
type: 'polarArea',
data: {
labels: ['Fiber', 'Protein', 'Healthy Oil', 'Good Energy', 'Immune
Defense'],
datasets: [
{
label: '# of Votes',
data: [
50,
140,
90,
120,
100,
],
backgroundColor: backgroundColor,
borderColor: borderColor,
borderWidth: datasets.border,
hoverBackgroundColor: hoverBackgroundColor,
},
],
},
options: {
layout: {
padding: {
top: options.layout.padding.top,
bottom: options.layout.padding.bottom,
}
},
legend: {
display: false,
fullWidth: false,
labels: {
fontSize: options.legend.labels.fontSize,
boxWidth: options.legend.labels.boxWidth,
padding: options.legend.labels.padding,
}
},
scale: {
display: false,
ticks: {
min:0,
max:200,
}
},
responsive: true,
maintainAspectRatio: false,
},
}
}
defaultFontSize={10}
/>
);
};
and they are together in a view :
<View style={styles.nutritionChart} key={3}>
<NutritionChart/>
<NutritionChartSvg/>
</View>
Either:
Move the limit line into the chart SVG, instead of laying it separately on top, or
Set pointer-events: none on the top SVG. This will make clicks pass right through it.