Question 33985 in React native Question posted in
The official React Native documentation can be found here.

react-native: display list of rounded images in horizontal line (expo) – React native

I am working on a mobile application and I want to create a list of images like in this example

enter image description here

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?

Tags:

2

Answers


  1. 0
    1. Container: flexDirection controls which directions children of a container go. row goes left to right
    2. 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
    3. Images: zIndex controls which components display on top of others.
    Login or Signup to reply.
  2. 0

    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>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search