reactjs - My React-Native component won't accept any user input - Stack Overflow

I've refined this issue beyond any map troubles. I can't get any user input from my device at all. So this component should scroll but it won't, its a cut and paste from demo code so I think it shows the problem quite well. I've just made the standard react-native js application in expo, hit npm start, and I can't get any scrolling happening. I can't figure it out!

import { StatusBar } from 'expo-status-bar';
import { StyleSheet, Text, View, ScrollView } from 'react-native';
import Banner from './components/Banner';
import MapScreen from './components/Map';
import TestScreen from './components/TestScreen';
import { GestureHandlerRootView } from 'react-native-gesture-handler';

export default function App() {
  return (
    <View style={{ flex: 1, justifyContent: 'center' }}>
    <Text style={{ fontSize: 24, textAlign: 'center' }}>
      Scroll me!
    </Text>
    <View style={{ height: 400, backgroundColor: '#e5e5e5' }}>
      <ScrollView>
      {/* This is our scrollable area */}
      <View style={{ width: 300, height: 300, backgroundColor: 'red' }} />
      <View style={{ width: 300, height: 300, backgroundColor: 'green' }} />
      <View style={{ width: 300, height: 300, backgroundColor: 'blue' }} />
      </ScrollView>
    </View>
  </View>
  );
}

Original Post: First time poster, using expo to play with react-native and am horribly stuck. I'm just trying to get a map working, and it's not working for me. I can't pan over the map or zoom, it just loads statically. I've stripped the code right down in an attempt to get the minimum bit working but no luck. Can someone help out?

App.js

import { StatusBar } from 'expo-status-bar';
import { StyleSheet, Text, View } from 'react-native';
import Banner from './components/Banner';
import MapScreen from './components/Map';


export default function App() {
  return (
    <MapScreen />
  );
}

Map.js

import React, { useState, useEffect } from 'react';
import { StyleSheet, View, Dimensions } from 'react-native';
import MapView, { Marker } from 'react-native-maps';
import * as Location from 'expo-location';

const MapScreen = () => {
    
  return (
    <View style={styles.container}>
      <MapView
        style={styles.map}
        showsUserLocation={true}
        scrollEnabled={true}          // Enable scroll/pan
        zoomEnabled={true}           // Enable zoom
        rotateEnabled={true}
        pitchEnabled={true}
        initialRegion={{          
            latitude: -33.8688,
            longitude: 151.2093,
            latitudeDelta: 0.0922,
            longitudeDelta: 0.0421,
          }}
      >
      </MapView>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  map: {
    flex: 1,
  },
});

export default MapScreen;

I've tried loading only the MapView component in case something else was interfering, but it didn't help.

I've refined this issue beyond any map troubles. I can't get any user input from my device at all. So this component should scroll but it won't, its a cut and paste from demo code so I think it shows the problem quite well. I've just made the standard react-native js application in expo, hit npm start, and I can't get any scrolling happening. I can't figure it out!

import { StatusBar } from 'expo-status-bar';
import { StyleSheet, Text, View, ScrollView } from 'react-native';
import Banner from './components/Banner';
import MapScreen from './components/Map';
import TestScreen from './components/TestScreen';
import { GestureHandlerRootView } from 'react-native-gesture-handler';

export default function App() {
  return (
    <View style={{ flex: 1, justifyContent: 'center' }}>
    <Text style={{ fontSize: 24, textAlign: 'center' }}>
      Scroll me!
    </Text>
    <View style={{ height: 400, backgroundColor: '#e5e5e5' }}>
      <ScrollView>
      {/* This is our scrollable area */}
      <View style={{ width: 300, height: 300, backgroundColor: 'red' }} />
      <View style={{ width: 300, height: 300, backgroundColor: 'green' }} />
      <View style={{ width: 300, height: 300, backgroundColor: 'blue' }} />
      </ScrollView>
    </View>
  </View>
  );
}

Original Post: First time poster, using expo to play with react-native and am horribly stuck. I'm just trying to get a map working, and it's not working for me. I can't pan over the map or zoom, it just loads statically. I've stripped the code right down in an attempt to get the minimum bit working but no luck. Can someone help out?

App.js

import { StatusBar } from 'expo-status-bar';
import { StyleSheet, Text, View } from 'react-native';
import Banner from './components/Banner';
import MapScreen from './components/Map';


export default function App() {
  return (
    <MapScreen />
  );
}

Map.js

import React, { useState, useEffect } from 'react';
import { StyleSheet, View, Dimensions } from 'react-native';
import MapView, { Marker } from 'react-native-maps';
import * as Location from 'expo-location';

const MapScreen = () => {
    
  return (
    <View style={styles.container}>
      <MapView
        style={styles.map}
        showsUserLocation={true}
        scrollEnabled={true}          // Enable scroll/pan
        zoomEnabled={true}           // Enable zoom
        rotateEnabled={true}
        pitchEnabled={true}
        initialRegion={{          
            latitude: -33.8688,
            longitude: 151.2093,
            latitudeDelta: 0.0922,
            longitudeDelta: 0.0421,
          }}
      >
      </MapView>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  map: {
    flex: 1,
  },
});

export default MapScreen;

I've tried loading only the MapView component in case something else was interfering, but it didn't help.

• reactjs
• react-native
• expo

Share Improve this question Follow edited Jan 2 at 19:25 Mjahaha asked Jan 2 at 4:46 MjahahaMjahaha 2111 silver badge22 bronze badges 2

• Further testing has shown my whole app does not respond to input and its not a MapView specific issue. – Mjahaha Commented Jan 2 at 11:48
• I have rolled back your most recent edit. If you've managed to solve your own question, then post an Answer detailing the solution, don't add a solution to the question. – Mark Rotteveel Commented Jan 2 at 13:21

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 0

Oh I figured it out, this is not a map specific problem. The app wasn't taking any inputs at all. I tried playing in the below code and wasn't getting any app inputs either: https://reactnative.dev/docs/scrollview

So solution, if I shake the device or use three fingers on it it becomes interactable and everything starts workings. Not sure what specifically is happening but it allows the app to work. I hope after any actual deployment this won't be necessary anymore.