I am working on a mobile application and I want to create a list of images like in this example\
I searched about it but didn't know what it was called or how I can do it in react-native (with expo).
is there any library to make this or how can I create it from scratch?
CodePudding user response:
- Container:
flexDirection
controls which directions children of a container go.row
goes left to right - Images:
left
is the number of logical pixels to offset the left edge of this component. Negative value moves the component to left in the row - Images:
zIndex
controls which components display on top of others.
CodePudding user response:
That can you do by your self. Here is an example
import * as React from 'react';
import { View } from 'react-native';
const StackedFloatingChip: React.FC<{ children: JSX.Element[] }> = ({
children,
}) => {
return (
<View style={{ alignItems: 'center' }}>
<View style={{ flex: 0 }}>
{children.map((floatingChip, index) => {
return (
<View
style={{
flexDirection: 'row',
position: 'absolute',
flex: 0,
left:( (-20 CHIP_METRICS) * index),
zIndex: children.length - index
}}>
{floatingChip}
</View>
);
})}
</View>
</View>
);
};
const FloatingChip: React.FC<{ color: string }> = ({ color = '#ff00ff' }) => {
return (
<View
style={{
width: CHIP_METRICS,
height: CHIP_METRICS,
borderRadius: CHIP_METRICS / 2,
backgroundColor: color,
borderWidth: 5,
borderColor: 'black',
}}></View>
);
};
function App() {
const chips = CHIP_COLORS.map((chipcolor) => (
<FloatingChip color={chipcolor} />
));
return (
<View style={{ flex: 1, justifyContent: 'center' }}>
<StackedFloatingChip>{chips}</StackedFloatingChip>
</View>
);
}
const CHIP_COLORS = ['#ff00ff', '#ff0000', 'orange', 'green'];
const CHIP_METRICS = 50;
export default App;
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>