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

How to display images horizontally in flatlist react native?

I am trying to display feed images horizontally instead of vertically in using FlatList How can I do that? I tried wrapping feed images into a view and then giving it a flex-direction row I also tried to give horizontal={true} to my FlatList but all these methods are not working Can anyone help please to do that?

I created a small app using my code you can access the code from here https://codesandbox.io/s/runtime-leaf-jywqqr?file=/src/App.js

Tags:

2

Answers


  1. 0

    horizontal works just fine, here is the simple example:

    const Photo = ({download_url}) => (
  <Image style={{width: 320, height: 180}} source={{uri: download_url}} />
);

const App = () => {
  const [photos, setPhotos] = useState([])
  useEffect(() => {
    const getPhotos = async () => {
        const response = await fetch("https://picsum.photos/v2/list")
        if (response.ok) {
          setPhotos(await response.json())
        }
    }
    getPhotos()
  }, [])
  return (
    <FlatList
      data={photos}
      horizontal
      renderItem={({item}) => <Photo download_url={item.download_url} />}
      keyExtractor={item => item.id}
    />
  );
};
    Login or Signup to reply.
  2. 0

    I think you need set width, height for item

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search