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
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'm trying to make a list of items in FlatList overlap over each other like a stack of cards, but using a negative margin the item gets cut off, using "left: -20" does as well.
The image component is rather simple with round border:
export default class ProfilePicture extends React.Component {
render () {
let size = this.props.size || 50
return (
<Image
source={{ uri: this.props.picture }}
style={{
backgroundColor: 'rgba(12, 94, 20, 0.5);',
width: size,
height: size,
borderRadius: size / 2
}}
/>
)
}
}
And in the list is where I try to accomplish the overlap:
export default class RidersListCompact extends Component {
state = {
users: []
}
...
renderItem = ({ item: user, index }) => {
return <View style={styles.itemContainer}>
<ProfilePicture
picture={user.picture}
size={Layout.window.hp(6)}
/>
</View>
}
render () {
return (
<FlatList
renderItem={this.renderItem}
data={this.state.users}
keyExtractor={(user) => 'user_' + user.id}
horizontal
inverted
style={{ ...styles.container, ...this.props.style }}
/>
)
}
}
const styles = StyleSheet.create({
container: {
flexDirection: 'row-reverse'
},
itemContainer: {
marginRight: -Layout.window.hp(2),
width: Layout.window.hp(6),
height: Layout.window.hp(6),
backgroundColor: 'rgba(0,0,0,0);'
}
})
I tried setting different zIndex on each item but haven't had much luck, is there a way to overlap images/components in FlatList?
Cheers!
Make use of Flex. seperate Items by putting then in flex direact row wise. use Props from flex. Flex has following props available
alignContent
alignItems
alignSelf
aspectRatio
borderBottomWidth
borderEndWidth
borderLeftWidth
borderRightWidth
borderStartWidth
borderTopWidth
borderWidth
bottom
direction
display
end
flex
flexBasis
flexDirection
flexGrow
flexShrink
flexWrap
height
justifyContent
left
margin
marginBottom
marginEnd
marginHorizontal
marginLeft
marginRight
marginStart
marginTop
marginVertical
maxHeight
maxWidth
minHeight
minWidth
overflow
padding
paddingBottom
paddingEnd
paddingHorizontal
paddingLeft
paddingRight
paddingStart
paddingTop
paddingVertical
position
right
start
top
width
zIndex
If you want to overlap images you should use position style in your styles. You need to set position to absolute and set left, right, top, bottom values.
More information
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.
I need to make my View circular on a non solid colored background.
I tried using borderRadius and overflow: 'hidden', but it isn't working. I see that this is a known issue with React Native: https://github.com/facebook/react-native/issues/3198
There seems to be workarounds for images that are on top of a solid background, but my background is dynamic and on top of an image so therefore I can't hardcode it.
Are there any alternatives to get something like this to work?
The black square should be a circle:
Here's the code (P.S. I'm using react native webrtc, that's where I'm getting RTCView, but I think this works with a plain old View):
const styles = StyleSheet.create({
remoteVideoContainer: {
borderRadius: 50,
height: 100,
marginBottom: 20,
width: 100,
overflow: 'hidden',
backgroundColor: 'green',
},
video: {
flex: 1,
resizeMode: 'cover',
backgroundColor: 'blue',
},
});
export default VideoView = ({
videoURL,
}) => {
return (
<View style={styles.remoteVideoContainer}>
<RTCView
style={styles.video}
streamURL={videoURL}
mirror={true}
objectFit="cover"
/>
</View>
);
};
I'm not even sure if you can style the RTCView. The code doesn't expose a styling prop. https://github.com/oney/react-native-webrtc/blob/master/RTCView.js