Search code examples
reactjsreact-nativescrollviewhorizontalscrollview

Horizontal ScrollView does not work in react native

I am using Expo SDK 44, and trying to print a list with horizontal scroll functionality, but the Scroll seems not to be working. Here is my code

<SafeAreaView>
    <ScrollView horizontal={true} style={{ paddingHorizontal: 16, paddingBottom: 8, paddingTop: 4 }}>
        <View style={{ width: 250 }}>
            <Text style={{ color: color.surface, fontSize: 16, lineHeight: 20 }}>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
            </Text>
            <Text style={{ color: color.surface, fontSize: 16, lineHeight: 20 }}>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
            </Text>
        </View>
        <View style={{ width: 250 }}>
            <Text style={{ color: color.surface, fontSize: 16, lineHeight: 20 }}>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
            </Text>
            <Text style={{ color: color.surface, fontSize: 16, lineHeight: 20 }}>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
            </Text>
        </View>
    </ScrollView>
</SafeAreaView>
Solution

  • Your code is perfectly fine at both platforms. Make sure code changes were applied. You can reset metro bundler by running and rebuilding app.

    react-native start -- --reset-cache

    android