I want to create a component as seen in the image attached. The circle is a progress bar and the blue colour is the progress, I could use a circular progress bar component for that but I'm not sure how can I show dates as seen in the image, the text in blue will be the current date. If anyone knows how to do this please help.
Edit: I want to add the date to the progress bar, I have found the circular progress bar component.
This is called Circular Progress
Usage
import { AnimatedCircularProgress } from 'react-native-circular-progress';
<AnimatedCircularProgress
size={120}
width={15}
fill={100}
tintColor="#00e0ff"
onAnimationComplete={() => console.log('onAnimationComplete')}
backgroundColor="#3d5875" />
You can also define a function that'll receive current progress and for example display it inside the circle:
<AnimatedCircularProgress
size={200}
width={3}
fill={this.state.fill}
tintColor="#00e0ff"
backgroundColor="#3d5875">
{
(fill) => (
<Text>
{ this.state.fill }
</Text>
)
}
</AnimatedCircularProgress>
You can also define a function that'll receive the location at the top of the progress circle and render a custom SVG element:
<AnimatedCircularProgress
size={120}
width={15}
fill={100}
tintColor="#00e0ff"
backgroundColor="#3d5875"
padding={10}
renderCap={({ center }) => <Circle cx={center.x} cy={center.y} r="10" fill="blue" />}
/>
Finally, you can manually trigger a duration-based timing animation by putting a ref on the component and calling the animate(toValue, duration, easing) function like so:
<AnimatedCircularProgress
ref={(ref) => this.circularProgress = ref}
...
/>
this.circularProgress.animate(100, 8000, Easing.quad); // Will fill the progress bar linearly in 8 seconds
The animate-function returns the timing animation so you can chain, run in parallel etc.
This is what you are looking for...
https://github.com/JesperLekland/react-native-svg-charts
It is ProgressCircle. hope help You...
Good day guys , is there anyway I can control how far the flatlist can scroll ? I'm trying to make an image viewer. When there is multiple image , the user can scroll to the 2nd image without reaching the 3rd image. Thank you. Expected outcome :
Either you can use a library like react native snap carousel
or use the function of scrollToIndex inside any function ,so that you can control which index the user goes ==
scrollToNext(){
this.flatListRef.scrollToIndex({animated: true, index: newIndex});
}
<Flatlist
ref={ref => {
this.flatListRef = ref;
}}
/>
hope it helps. feel free for updates
I was wondering if it would be possible to manually set the entire app window dimension manually.
I'm aware of the useDimensions hook but I'm not interested in listening to window's dimensions changes, I'm interested in setting them.
For example I would like to set an entire app to be 50% in height of the available screen size.
I could't find any doc on this specific request.
Is this possible? How?
why dont you try this in the root level file, like app.js or somewhere ,
const App = () => {
return(
<View>
<View style={{height:0.5*Dimensions.get('window').height}}>
<StackNavigatrScreen />
</View>
<View style={{height:0.5*Dimensions.get('window').height,width:'100%'}}/>
</View>
)
}
and inside the stack navigator you have your enitre screens, so that it just occupies 50 percent of screen ,rather than whole
hope it helps, feel free for doubts
I am trying to add a custom image source to the attribute iconButtonCenter in the React Native library named react-native-circle-button.
https://github.com/dwicao/react-native-circle-button
According to the documentation, iconButtonCenter is of type enum, so I imported the icon and then passed it in directly where I create my CircleButton object. It does not yell as if it is a number or string, yet I still am not 100% sure it is technically of type enum. I know for a fact it is finding the image in the right path. I also know that it is doing something, because the default image is no longer observable on the app, it just no longer has an icon. I am not getting any compilation errors or warning, yet I still do not see the icon appear over the button as it should. How do I fix this?
Here is the render within my component that allows circle button's to be draggable. I also went ahead and put my import at the top so you can see how this was stored.
import letterA from '../assets/letters/alpha-a.svg';
render() {
let { pan } = this.state;
let [translateX, translateY] = [pan.x, pan.y];
let moveableStyle = {transform: [{translateX}, {translateY}]};
const panStyle = {
transform: this.state.pan.getTranslateTransform()
}
return (
<Animated.View
{...this._panResponder.panHandlers}
style={[moveableStyle, panStyle]}>
<CircleButton iconButtonCenter={letterA} /> <--- Here is the image source reference.
</Animated.View>
);
}
The CircleButton component should successfully have the image fed to it and remain centered over the button even when dragged along the string.
Problem was the picture format was an .svg, converting the icons to .png worked like a charm!
What does this mean?
This happens when I update a list of iterated views something like
<View style={{ flexDirection: 'row', padding: 20, backgroundColor: '#fff' }}>
<Ionicons name={jobIcon} color={theme.iconColor} size={30} />
<Text>{jobService}</Text>
<Text>{jobDate}</Text>
</View>
mapped inside a scrollview.
this error pops up when I modify the array from child scene.
scene1 - is where the ScrollView with job list array of views
sence2 - is where I delete a job and should update scene1 when I do remove a job
If you want the LayoutAnimation to work with ScrollView, replace
LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut)
with
LayoutAnimation.configureNext({
duration: 300,
create:
{
type: LayoutAnimation.Types.easeInEaseOut,
property: LayoutAnimation.Properties.opacity,
},
update:
{
type: LayoutAnimation.Types.easeInEaseOut,
}
});
This works on both Android and iOS without any crashes.
In my case I was using LayoutAnimation for my ScrollView. Inside it a map of Items. When an Item is removed from the list this happens. Not using LayoutAnimation seems to be working fine.
It's happening when you call layout animation when it already in process. iOS will show an warning while Android will explode with this error.
You can use this easy pattern to fix it when you're using LayoutAnimation from same component.
layoutAnimation() {
if (!this.layoutAnimationActive) {
this.layoutAnimationActive = true;
LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInOut, () => { this.layoutAnimationActive = false; });
}
}
This happens when a component only has x amount of children, but you are trying to remove a child with index greater than x. Like an index out of bounds exception that is common with arrays. Can cause lots of frustration because often times the child you are trying to remove DOES INFACT EXIST. But might be happening because you are using a third party component that only expects a certain amount of children.
For me, it happened when I put an extra child into air-bnb MapView. I fixed the issue by making this element the child of it's grandparent (it was absolutely positioned so it didn't affect styling).
I encountered this issue when creating a react-native application using Expo.
This error was often getting raised when I was rendering new Markers onto a Map (which was rendered via a MapView component).
What fixed the issue for me was to add a key prop to the Marker component e.g.
<Marker coordinate={coordinate} key={`${coordinate.latitude}_${coordinate.longitude}`} />
Hope this helps anyone who also encounters this issue when dealing with MapView and Marker components!
In my case, I was deleting an item in a virtualized list. I was using redux to manage the data of the list and updated the list with the new data. However, the component for the item that was deleted caused this error.
I solved this by adding a boolean state property on this item component, example "hideItem". My item was a class component but a setState hook could also be used for a functional component. I set this to true after deletion. The post hid with layout animation correctly, and when the page refreshed it no longer rendered the deleted item. Hence, the error went away on android without needing to not use LayoutAnimation.
Evidently, it seems this bug can show its ugly face in various conditions. After a couple of hours of debugging, I found my root cause to be a key prop being passed to a component that didn't require it. I'm still unsure of why this was causing a crash, however, I suspect it has to do with the fact that the component accepts the key as a unique way to identify the view, but was also using the componentWillReceiveProps(props: *) lifecycle method that updated the component's state.
This is likely to happen if you're using some native components, where some ViewManager returns a LayoutShadowNode in createShadowNodeInstance of ViewGroupManager or something extending ReactShadowNode in createShadowNodeInstance of ViewManager on Android, and a RCTShadowView in the shadowView method of RCTViewManager on iOS. But, returns null/nil for some other View in some other ViewManager.
Then, if you combine children of both types in the same parent, and any of the elements without shadowViews/Nodes come before the changing number of elements which do have shadowViews/Nodes, then the indices won't match up, and the RCTUIManager on iOS and NativeViewHierarchyManager on Android will choke and produce these exceptions.
I solved a similar issue in react-native-svg recently, by making all the ViewManagers return values rather than null/nil. https://github.com/facebook/react-native/issues/23350
So, try upgrading react-native-svg to v9.2.4 and the issue might be fixed. Or, try moving the IonIcons to the end of your children.
I had the same issue, because I had an Array.map inside a condition which I was updating using LayoutAnimation.
I fixed it by moving the state variable inside the map function.
I am using vitalized flatlist with swipe left right delete option, and when list is more than 200 items and I use LayoutAnimation then the above problem comes out on arbitrary based, I figured out that deleted item still exist because of LayoutAnimation so you can play around with timings of update using the following code
LayoutAnimation.configureNext({
duration: 300,
create:
{
duration:500
type: LayoutAnimation.Types.easeInEaseOut,
property: LayoutAnimation.Properties.opacity,
},
update:
{
duration: 500,
type: LayoutAnimation.Types.easeInEaseOut,
}
});
this.refs['task'].setNativeProps({
style: {transform: [{translateX: Dimensions.get('window').width}]},
});
one more thing, I am also hiding the item suddenly after it's deletion occurs
here is code snippet
this.props.handleDeleteTask(this.props.item.id);
this.setState({hideItem:true}) // here I am hiding through state function, so the item should disappear right after it's deletion.