react-native-image-layouts

Simple component to render images in any layouts with RN Flatlist.

Installation

npm install react-native-image-layouts

or 

yarn add react-native-image-layouts

Usage

import ImageLayouts from "react-native-image-layouts";

const layoutPattern = [1, 3, 2, 2, 1];

const images = [/* list of uris */];

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  image: {
    width: '100%',
    height: 150,
  },
});

// ...
export default function App() {
  function renderItem(uri: string, _index: number) {
    return <Image source={{ uri: uri }} style={styles.image} />;
  }

  return (
    <SafeAreaView style={styles.container}>
      <ImageLayouts
        data={images}
        numberOfColumns={2}
        patterns={layoutPattern}
        renderItem={renderItem}
        dividerPadding={2}
      />
    </SafeAreaView>
  );
}

Screenshot:

Contributing

See the contributing guide to learn how to contribute to the repository and the development workflow.

License

MIT