ScrollView horizontal not working in Expo Web React Native

user_6647133 0
Viewed 474

ScrollView horizontal not working in Expo Web React Native. Below is not working scrollview, it is not scrolling horizontally. I also tried removing the "horizontal" so that it will be vertical but still not working.

import { Image, StyleSheet, View, ScrollView, TouchableOpacity, StatusBar } from 'react-native';

render() {
    const gcTransactions =[
        {
            img: require('image1.png')
        },
        {
            img: require('image2.png')
        },
        {
            img: require('image3.png')
        },
        {
            img: require('image4.png')
        },
        {
            img: require('image5.png')
        },
    ]
return ( 
   <View style={[t.flexRow]}>
      <ScrollView 
         horizontal
         style={[styles.scrollView]}
      >
   
     {gcStores.map((obj, index) => (    
      <TouchableOpacity key={index} style={[styles.nearbyStoresItems, t.border, t.roundedLg, t.itemsCenter]}>
        <Image
            source={
               obj.img
            }
            style={[styles.nearbyStoresImages]}
         />
        </TouchableOpacity>
     ))}

     </ScrollView>
   </View> 
);
}

const styles = StyleSheet.create({
   scrollView:{
      marginTop: 7,
      paddingHorizontal: 7
   },
   nearbyStoresItems:{
      marginHorizontal: 2,
      borderColor: '#1D5098'
   },
   nearbyStoresImages:{
      width: 80,
      height: 80,
   },
});

I am using tailwindcss: t.flexRow = flexDirection: 'row'

expo react-native scrollview
1 Answers

This works for me (scrollable horizontal squares). flexDirection: 'row' doesn't seem to have any effect.

import React from 'react';
import {ScrollView, Text, View, TouchableOpacity, StyleSheet} from 'react-native';

export default function App() {

  const gcStores = ["1", "2", "3", "4", "5", "6", "7"];

  return (
    <View style={{flexDirection: 'row'}}>
      <ScrollView
        horizontal
        contentContainerStyle={[styles.scrollView]}
      >
        {gcStores.map((obj, index) => (
          <TouchableOpacity key={index} style={styles.nearbyStoresItems}>
            <Text
              style={[styles.nearbyStoresImages]}
            >
              {obj}
            </Text>
          </TouchableOpacity>
        ))}
      </ScrollView>
    </View>
  );
}

const styles = StyleSheet.create({
  scrollView: {
    marginTop: 7,
    paddingHorizontal: 7,
    borderWidth: 3
  },
  nearbyStoresItems: {
    marginHorizontal: 2,
    borderColor: '#1D5098'
  },
  nearbyStoresImages: {
    width: 80,
    height: 80,
    backgroundColor: 'gray'
  },
});
user_146242350
Related