This is my component and I want the animation to start 0.5s after the page has been landed on. How can I achieve this?
No props for delay here:
https://github.com/lottie-react-native/lottie-react-native/
<Lottie
style={[
{
position: 'relative',
height: 160,
width: 160,
},
spacing.gbMt1,
]}
autoPlay={true}
loop={false}
source={require('../assets/lottie/Coach001.json')}
/>
There is no prop for adding time delay but you can use these API methods to play, pause, resume and reset animation. You will need to set autoplay to false and call "play" method in timeout of 5 seconds to achieve the required delay.
useEffect(() => {
setTimeout(() => {
ref?.current?.play();
}, 500)
}, [])
<Lottie
ref={ref}
style={[
{
position: 'relative',
height: 160,
width: 160,
},
spacing.gbMt1,
]}
autoPlay={false}
loop={false}
source={require('../assets/lottie/Coach001.json')}
/>
Related
I am using FlatList for list of video tiles but somehow it is not scrollable can someone please give an input what is wrong in here ?
const TileList = styled(FlatList)({ overflow: 'hidden' }, variant({
prop: 'orientation',
variants: {
vertical: {
height: '100%',
width: '100%',
flexGrow: 0,
maxHeight: '40%',
},
horizontal: {
width: 250,
//height: '100%',
maxWidth: 250,
flex: 0,
}
}
}));
<TileList
testID="teams-other-list"
data={remainingTiles}
renderItem={renderItem}
contentContainerStyle={containerStyle}
horizontal={isHorizontal}
inverted
orientation={orientation}
initialScrollIndex={0}
/>
It's not scrollable because of overflow 'hidden' style option. It hides everything outside the component's frame. Remove it and the scroll will appear
If you want to use initialScrollIndex prop, getItemLayout prop is required. Or the flatlist is not scrolled.
Check this out:
https://reactnative.dev/docs/flatlist#getitemlayout
https://reactnative.dev/docs/flatlist#initialscrollindex
I've been trying to add a linear gradient as a background to my react native app.
Here is my initial code:
<NavigationContainer theme={MyTheme}>
<Stack.Navigator
initialRouteName="Camera"
screenOptions={{
headerStyle: { elevation: 0 },
}}
>
And here my attempt at adding the gradient:
const MyTheme = {
colors: {
primary: "rgb(255, 45, 85)",
background: () => <LinearGradient colors={["red", "blue"]} />,
},
};
Now, when I console.log(MyTheme.colors) I get background: [Function background
Any idea how I can make this work?
You can try this, may help below code.
<LinearGradient
colors={["red", "blue"]}
start={{x: "Your postition", y: "Your postition"}}
end={{x: "Your postition", y: "Your postition"}}
/>
<View style={{flex:1}}>
<LinearGradient style={{ position: "absolute",
left:0,right: 0, top: 0,bottom: 0,
}}
colors={["#120318", "#221a36"]}
/>
</View>
If you set the LinearGradient's position to absolute, and set left,right,top,bottom as 0, LinearGradient will take up entire space's of its parent element.
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 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.
the problem is quite simple I think, but I can't seem to figure it out. I am using the react-native-router-flux library and the NativeBase library for the buttons.
This is my code:
<Button transparent onPress={Actions.MainOne } style={{ width: 50, height: 50 }} >
<Text>Option1</Text>
</Button>
<Button transparent onPress={Actions.MainTwo} style={{ width: 50, height: 50 }} >
<Text>Option2</Text>
</Button>
I want to change the background color of the button whenever i press it and it's active. And if I click another button, then the button I just pressed gets the background and the first button goes back to normal transparent background. I am not really sure how i can add two actions to the button. If anyone can assist I would appreciate it. I don't need to necessarily use the button library, so any ideas about this are welcome !
Thank you !
I use the flux-router to navigate through scenes. This is how I would change the background color of a button when pressed:
constructor() {
super();
state = {
color1: 'transparent',
color2: 'transparent',
}
}
setActive(button) {
if (button === 1) {
if (this.state.color1 === 'transparent') {
this.setState({
color1: 'red',
color2: 'transparent'
})
}
} else {
if (this.state.color2 === 'transparent') {
this.setState({
color2: 'red',
color1: 'transparent'
})
}
}
}
{ . . . }
<Button
onPress={this.setActive.bind(this, 1)}
style={{ width: 50, height: 50, backgroundColor: this.state.color1 }}
>
<Text>Option1</Text>
</Button>
<Button
this.setActive.bind(this, 2)
style={{ width: 50, height: 50, backgroundColor: this.state.color2 }}
>
<Text>Option2</Text>
</Button>