I am using react-native-responsive-linechart in one of my projects. But the tooltip is not showing properly as the test little bit long and also I can't add a new line. In the official documentation Link there is a process to add a custom tooltip but I couldn't manage to show a proper tootip on top of the point. It will be helpful if someone provides a sample custom tooltip example implemented for react-native-responsive-linechart.
What exactly are you planning to implement with your own tooltip?
Here is an example on how to integrate your own tooltip as an Component.
export function OwnToolTip(props) {
return Tooltip({
theme: {
formatter: (v) => v.y.toFixed(2),
shape: { color: "dodgerblue" }},
...props,
});
And as stated in the docs substituted.
<Line tooltipComponent={<OwnToolTip />}
/>
I am still new to react native and sure this might be not the best way, so i gladly take constructive criticism.
Related
I'd like to add a SectionList to my app such that it renders to a specific section (that isn't the first section in the list). Calling scrollToLocation on componentDidMount does not work; however, adding a button that calls scrollToLocation does. Is there a reason for this?
Could this be due to the SectionList reference (I've tried a few approaches for assigning reference, e.g. variable assignment, function assignment, using createRef, etc.)?
Here is a link to a stripped-down Expo snack to illustrate what I mean: https://snack.expo.io/#bobbymoogs/scrolltolocation-on-componentdidmount.
I found the best solution on this thread is to use onLayout to trigger the scroll:
scrollToInitialPosition = () => {
this.scrollViewRef.scrollTo({ y: 100 });
}
...
<ScrollView
ref={(ref) => { this.scrollViewRef = ref; }}
onLayout={this.scrollToInitialPosition}
/>
Note there are lots of other suggestions using setTimeout, componentDidUpdate, InteractionManager, etc. However using onLayout was the only one that worked for me (and also seems to me to be the cleanest).
I am trying to create a directive where I animate a fab-button when the view is shown.
The animation works if it is inside ngOnInit, but due to ionic route strategy the animation doesn't work when I leave the page and go back. Putting it in ionViewDidEnter didn't work because I presume that ionViewDidEnter doesn't work inside the directive. So is there any approach I can take to solve this?
<ion-fab vertical="bottom" horizontal="end" slot="fixed">
<ion-fab-button mode="md" appAnimateFab>
<ion-icon name="create" mode="md"></ion-icon>
</ion-fab-button>
</ion-fab>`
#Directive({
selector: 'ion-fab-button[appAnimateFab]'
})
export class AnimateFabDirective implements OnInit {
constructor(
private animationBuilder: AnimationBuilder,
private element: ElementRef
) { }
ngOnInit() {
}
ionViewDidEnter() {
console.log(this.element);
const factory = this.animationBuilder.build([
style({transform: 'rotate(-45deg)'}),
animate('5s ease-in', style({transform: 'rotate(0deg)'}))
]);
const anim = factory.create(this.element.nativeElement);
anim.play();
}
}
This is an interesting question. I got halfway through writing out a detailed reply yesterday when I realised that you were actually asking about directives and not custom components... so all my research was wrong haha.
Today I have had another look. The tutorials all seem to conveniently miss having a requirement to deal with pages changing backwards and forwards and just lean on ngOnInit.
After scratching my head for a bit I started to wonder how else it could be triggered and I'm thinking: what about the Intersection Observer API?
I really like the way Alligator.io explain things:
Using the Intersection Observer API to Trigger Animations and Transitions
Their example shows the animation being triggered every time you scroll down to view.
If you are flipping pages then it feels like it should trigger as coming into view, but I haven't tested this out with code.
For a more Ionic-focused example with Intersection Observer API, Josh has a tutorial:
Animating List Items in Ionic with the Intersection Observer API | joshmorony - Learn Ionic & Build Mobile Apps with Web Tech
Maybe you can adapt this to use your animation code?
I´m thinking about using React jsx highcharts for a project im working on, the only thing putting me off is I haven´t used highcharts before so I´d need some sort of documentation listing all of the different parameters available to play with, can´t seem to find this information anywhere, would appreciate if someone could point me in the right direction, or give me some advice, maybe its worth just using react-highcharts instead?
You can just use the docs for Highcharts's API, and with any methods/properties that are normally in the configuration object for Highcarts, you would pass as props.
Highcharts API
Example:
chart: {
type: 'column'
},
xAxis: {
categories: [
"foo",
"bar",
],
type: 'category',
},
Would look something like this:
import { Chart, XAxis } from 'react-jsx-highcharts';
<Chart type={'category'}/>
<XAxis categories={['foo', 'bar']} type={'category'}/>
There are only a few situations where the syntax would be different, but the highcharts-react-jsx documentation covers those edge cases in their documentation.
I am trying to create circular progress component in react-native(as shown in image).
I have tried going through the art library of react-native.But it seems a bit complicated to me.Just the outline of how this can be done will help me a lot.
P.S.: Library such as this does not help since it's not flexible enough to display numbers in the centre.
react-native-circular-progress lets you pass a children(fill) function as a child. It allows you to render any children components within the circular progress one.
Here is an example:
<AnimatedCircularProgress
size={200}
width={3}
fill={this.state.fill}
tintColor="#00e0ff"
backgroundColor="#3d5875">
{
(fill) => (
<Text style={styles.points}>
{ this.state.fill }
</Text>
)
}
</AnimatedCircularProgress>
What is the difference between using registering Event Listeners inside the dojo .addOnload Method or declaraitevly registering them ??
For example i have a Button as shown
<button dojoType="dijit.form.Button" id="buttonTwo">
Show Me!
</button>
1st Approach :
dojo.addOnLoad(function() {
var widget = dijit.byId("buttonTwo");
dojo.connect(widget, "onClick", function(){
alert('ddddd');
});
2nd Approach :
<button dojoType="dijit.form.Button" id="buttonTwo" onClick="callMe()">
Show Me!
</button>
There is no practical difference, it is a matter of how you prefer to organize your code.
Having said this, I believe you should avoid mixing declarative and programmatic approaches in Dojo, in order to have a more coherent code base. Which means if you chose the programmatic route, you should do something like this, instead of your 1st approach:
dojo.addOnLoad(function() {
new dijit.form.Button(
{
label: "Show Me!",
onClick: function() {
alert('ddddd');
}
},
'buttonTwo'
);
});
...
<button id="buttonTwo"></button>
This example is a full programmatic example. Depending on your preference you can use it (instead of your 1st approach), or use your second approach. You can read more about the differences in programmatic and declarative Dojo approaches here.