Description
I am using react-native-maps to draw about 750 markers on the map.
Each marker is using same Image
Reproduction Steps and Sample Code
const markerImage = <Image source={images.marker} />;
export default class Main extends Component {
render() {
return (
<MapView style={StyleSheet.absoluteFill}>
{ coordinates.map(coordinate => {
return (
<Marker
key={coordinate.id}
coordinate={coordinate}
children={markerImage}
/>
);
})}
</MapView>
)
}
}
Possible Solution
Re-using UIImage
Optimising custom marker image performance with Google Maps SDK for iOS
However, I do not know how to do this in React Native as React abstracts away the view layer.
Additional Information
React Native version: ["0.41.2"]
react-native-maps: ["^0.13.0"]
Platform: [both]
Development Operating System: [MacOS]
Dev tools: [Xcode: 8.3, iPhone 7(10.3), GalaxyS6(6.0.1)]
Related
I want to use react-native-paper dark theme on my apps, however, all my <View> are still had a white background and causing all the Text component unreadable because the text turns white in dark mode. I didn't use custom theming since the docs mention that:
If you don't use a custom theme, Paper will automatically turn animations on/off, depending on device settings.
This is my code in App.js:
import React from 'react';
import {Provider as PaperProvider} from 'react-native-paper';
import Home from './src/Home';
const App = () => {
return (
<PaperProvider>
<Home />
</PaperProvider>
);
};
export default App;
This is in my Home.js:
import React from 'react';
import {View} from 'react-native';
import {Appbar, Card, Title} from 'react-native-paper';
const Home = () => {
return (
<View style={{flex: 1}}>
<Appbar.Header>
<Appbar.BackAction onPress={() => console.log('back')} />
<Appbar.Content title="Title" subtitle={'Subtitle'} />
</Appbar.Header>
<View>
<Title>Hello World</Title>
<Card
style={{margin: 15, padding: 15}}
onPress={() => console.log('press card')}>
<Title>This is Card</Title>
</Card>
</View>
</View>
);
};
export default Home;
and this is the result:
The view still white and the Title also white due to dark mode
It working fine on android
The text turns white because it is the behavior of dark mode, but why my <View> is still white? This is only happening on iOS, it works fine on android.
This is a new react native project, and based on documentation in react-native-paper it will turn the dark theme automatically. So, I need help if I missed something in setting up this project on iOS. Any help would be appreciated.
react: 16.13.1
react-native: 0.63.4
react-native-paper: ^4.7.1
react-native-vector-icons: ^8.0.0
If you do not specify a custom theme, Paper will use the DefaultTheme which is essentially a light theme. To employ a dark theme in your app, Paper provides a Material based DarkTheme. You can specify which theme to use within the Paper provider.
Complete example from the docs for DefaultTheme including customization:
import * as React from 'react';
import { DefaultTheme, Provider as PaperProvider } from 'react-native-paper';
import App from './src/App';
const theme = {
...DefaultTheme,
roundness: 2,
colors: {
...DefaultTheme.colors,
primary: '#3498db',
accent: '#f1c40f',
},
};
export default function Main() {
return (
<PaperProvider theme={theme}>
<App />
</PaperProvider>
);
}
PaperProvider uses React Context. Theme can be accessed within components with the withTheme HOC or useTheme hook.
I'm working on an Expo React Native project that is using react-native-maps to render a MapView component with a list of Markers. The Markers are custom components that render an Image. When testing using Android and Google Maps everything works perfectly. When testing using an iOS emulator the markers appear but the map runs slowly. When testing using a physical iPhone 7 (and others) the app crashes with no error message. The app always loads correctly until rendering the map, which appears for a second or two before the app crashes. Sometimes the markers will also appear for a split second before the app crashes.
If I set limits on how many items to render the markers will appear as long as the limit is less than five. Similarly I can render each marker if I specify which one to load by id, so I don't think the data is wrong or causing unhandled exceptions. I need all the items in the list to render dynamically, without a limit on how many can be rendered. If I comment out the Image component and the default red pin markers appear on the map without any problems. It seems like the issue has to do with how the markers' Images are rendered dynamically on the Apple map.
I've tried importing the image source, preloading it, requiring it, and using {{uri:url}} format for the Image source parameter. Everything results in the app crashing without an error message. Am I missing something? Is there some way for me to get any kind of error message that can help debug this? Is there a workaround if this is a known issue?
MapView:
<MapView
style={styles.map}
ref={(map) => { currentMap = map; }}
region={region}
onRegionChangeComplete={onRegionChange}
rotateEnabled={false}
loadingEnabled
>
{
eventList.map((marker, index) => {
const { location } = marker.location.geometry;
if (
location.lat <= (region.latitude + region.latitudeDelta / 2)
&& location.lat >= (region.latitude - region.latitudeDelta / 2)
&& location.lng <= (region.longitude + region.longitudeDelta / 2)
&& location.lng >= (region.longitude - region.longitudeDelta / 2)
) {
return (
<MapMarker
key={index}
mapMarker={marker}
handlePress={() => moveMapToCoordinate(marker.location)}
onSelectEvent={onSelectEvent}
/>
);
}
return null;
})
}
</MapView>
MapMarker:
<Marker
coordinate={latLng}
title={title}
onPress={() => handlePress()}
>
<CustomMapMarker
eventType={eventType}
isSanctioned={isSanctioned}
startDate={startAt}
/>
<Callout
style={styles.customCallout}
onPress={() => onSelectEvent(_id)}
>
<ViewEventScreenDetailsHeader
fullEvent={mapMarker}
containerStyle={styles.calloutDetails} />
</Callout>
</Marker>
CustomMapMarker:
const img = require('../../assets/icons/SpikeScreen/map-marker-pickup.png');
return (
<View style={[styles.pickupMarkerContainer, markerContainerStyle]}>
<Image
style={[styles.pickupMarker, markerStyle]}
source={img}
/>
<Text style={styles.dayMonthMarkerText}>{formattedStartDate}</Text>
</View>
)
Got em! Make sure your marker icon image isn't too large, Apple maps renders them differently than google maps.
This isn't exactly a critical bug, but I always feel weird shaking phones at my desk at work, even more so when it doesn't work first time. If we start talking about shaking iPad Pros, it just feels wrong.
On Android, I can run the following command: adb shell input keyevent KEYCODE_MENU
Is there an iOS equivalent?
Thanks
Sadly no.
You can vote for it on Canny here. Until then, your best bet for iOS is to use a workaround such as one of the ones suggested from the original Github issue. For example, creating your own multi-touch shortcut for opening the dev menu as seen here. It's not ideal but it should work. (code copy pasted below)
import React from 'react';
import {
View,
PanResponder,
NativeModules,
} from 'react-native';
const DevMenuTrigger = ({children}) => {
const {DevMenu} = NativeModules;
const panResponder = PanResponder.create({
onStartShouldSetPanResponder: (evt, gestureState) => {
if (gestureState.numberActiveTouches === 3) {
DevMenu.show();
}
},
});
return <View style={{flex: 1}} {...panResponder.panHandlers}>{children}</View>;
};
...
AppRegistry.registerComponent('myApp', (): any => <DevMenuTrigger><MyApp></DevMenuTrigger>
I am a newbie developer. I'm currently developing apps using React-Native on two platforms, Android and iOS.
I have several constraints when designing this app on the two platforms I use. This app is similar to chat. For the wrapping compiler I use Listview. But there are constraints when running on the iOS platform.
My code is as follows:
<View style={Styles.container}>
<View style={Styles.conversation}>
{this.messages.length > 0
? <ListView
enableEmptySections
style={Styles.messageList}
ref={ref => (this.listView = ref)}
onContentSizeChange={(contentWidth, contentHeight) => {
this.listView.scrollTo({
y: contentHeight,
});
}
}}
dataSource={ds.cloneWithRows(this.messages)}
renderRow={item => <Message data={item} key={item.key} />}
/>
: <Text style={Styles.welcome_message}>Welcome to Kelle</Text>}
</View>
The code above on Android goes well. But when it runs on iOS, the chat text position in the Listview becomes random. Like the picture below:
Has anyone ever experienced anything like this? How should I solve this problem?
I'm running a React.js/Cordova/OnsenUI application that is intended to be used both in the browser and on mobile devices. I'd like the user to be able to scan a QR code, then jump to a screen in my application.
This is what the application looks like right now:
import React from 'react';
import {
Navigator
} from 'react-onsenui';
import MainPage from './MainPage';
import Vendor from './Vendor';
const renderPage = (route, navigator) => (
<route.component key={route.key} navigator={navigator} />
);
const App = () => (
<Navigator
renderPage={renderPage}
initialRoute={{component: MainPage, key: 'MAIN_PAGE'}}
/>
);
export default App;
When I start up, depending on the URL, I might want to start with a Vendor component or a MainPage component.
I figured that the easiest thing to do would be to dynamically create the initialRoute object based on the QR code that was scanned. Given that I might be on an iOS device, how do I know what the URL was that was scanned? Is there a different way that I should be jumping to a specific screen when I start the app?