We Keep Coding

How to render multiple markers in react-native using rnmapbox/maps?

I am trying to show multiple markers in Mapbox but there is nothing provided in the library about how to do it.
I have tried Mapbox.MarkerView and Mapbox.ShapeSource and Mapbox.PointAnnotation
When there is only one cordinate, it works fine. However, for more than one, the app crashes in both iOS and Android
I have tried this code
<MapboxGL.MapView
ref={(c) => (this._map = c)}
tintColor={'red'}
onLongPress={this.onLongPress}
onDidFinishLoadingMap={this.onDidFinishLoadingStyle}
logoEnabled={false}
compassEnabled={true}
style={{ flex: 1 }}>
<MapboxGL.Camera
ref={(c) => (this.map = c)}
zoomLevel={5}
centerCoordinate={CENTER_COORD}
/>
{/* <MapboxGL.MarkerView id={'hello'} coordinate={[73.20813, 22.29941]}> */}
{/* <MapboxGL.MarkerView
id={'hello'}
coordinate={[latitude, longitude]}> */}
{/* <View>
<Text>CYZ</Text>
</View>
</MapboxGL.MarkerView> */}
<MapboxGL.UserLocation
onUpdate={this.handleLocationUpdate}
renderMode='normal'
androidRenderMode='normal'
visible={true}
/>
{this.state.isFilterApplied === false
? this.state.recordValuesItemWithStatus.length > 0 &&
this.state.recordValuesItemWithStatus.map((data, index) => {
if (data[0] !== null && data.locationData[0] !== 'NaN') {
if (
this.isLatitude(data.locationData[0]) === true &&
this.isLongitude(data.locationData[1]) === true
) {
return (
<MapboxGL.PointAnnotation
ref={(ref) => (this.annotationRef = ref)}
coordinate={data.locationData}
key={index}
title={data.status}
onSelected={() => this.handleEditForm(data)}
style={{ zIndex: 1000 }}
id={index.toString()}>
<View
style={{
alignItems: 'center',
justifyContent: 'center',
}}>
<View
style={{
width: wp(5),
height: wp(5),
borderWidth: 1,
borderRadius: 40,
borderColor:
this.selectedColor[data.status.toUpperCase()],
backgroundColor:
this.selectedColor[data.status.toUpperCase()],
}}
/>
</View>
</MapboxGL.PointAnnotation>
);
}
}
})
: this.state.filteredRecordValues.length > 0 &&
this.state.filteredRecordValues.map((data, index) => {
if (data[0] !== null && data.locationData[0] !== 'NaN') {
if (
this.isLatitude(data.locationData[0]) === true &&
this.isLongitude(data.locationData[1]) === true
) {
return (
<MapboxGL.PointAnnotation
ref={(ref) => (this.annotationRef = ref)}
coordinate={data.locationData}
key={index}
title={data.status}
onSelected={() => this.handleEditForm(data)}
style={{ zIndex: 1000 }}
id={index.toString()}>
<View
style={{
alignItems: 'center',
justifyContent: 'center',
}}>
<View
style={{
width: wp(5),
height: wp(5),
borderWidth: 1,
borderRadius: 40,
borderColor:
this.selectedColor[data.status.toUpperCase()],
backgroundColor:
this.selectedColor[data.status.toUpperCase()],
}}
/>
</View>
</MapboxGL.PointAnnotation>
);
}
}
})}
</MapboxGL.MapView>

Convert class component to hooks

I am attempting to convert the following code snippet to hooks. What I have converted so far, doesn't render output as the original. Below is the default code written as class components-
class Area extends React.PureComponent {
state = {
data: [],
tooltipX: null,
tooltipY: null,
tooltipIndex: null,
};
componentDidMount() {
this.reorderData();
}
reorderData = () => {
const reorderedData = DATA.sort((a, b) => {
// Turn your strings into dates, and then subtract them
// to get a value that is either negative, positive, or zero.
return new Date(a.date) - new Date(b.date);
});
this.setState({
data: reorderedData,
});
};
render() {
const { data, tooltipX, tooltipY, tooltipIndex } = this.state;
const contentInset = { left: 10, right: 10, top: 10, bottom: 7 };
const ChartPoints = ({ x, y, color }) =>
data.map((item, index) => (
<Circle
key={index}
cx={x(moment(item.date))}
cy={y(item.score)}
r={6}
stroke={color}
fill="white"
onPress={() =>
this.setState({
tooltipX: moment(item.date),
tooltipY: item.score,
tooltipIndex: index,
})
}
/>
));
return (
<SafeAreaView style={{ flex: 1 }}>
<View style={styles.container}>
{data.length !== 0 ? (
<AreaChart
style={{ height: '70%' }}
data={data}
yAccessor={({ item }) => item.score}
xAccessor={({ item }) => moment(item.date)}
contentInset={contentInset}
svg={{ fill: '#003F5A' }}
numberOfTicks={10}
yMin={0}
yMax={10}
>
<Grid svg={{ stroke: 'rgba(151, 151, 151, 0.09)' }} belowChart={false} />
<ChartPoints color="#003F5A" />
<Tooltip
tooltipX={tooltipX}
tooltipY={tooltipY}
color="#003F5A"
index={tooltipIndex}
dataLength={data.length}
/>
</AreaChart>
) : (
<View
style={{
height: '50%',
justifyContent: 'center',
alignItems: 'center',
}}
>
<Text
style={{
fontSize: 18,
color: '#ccc',
}}
>
There are no responses for this month.
</Text>
</View>
)}
<Text style={styles.heading}>Tooltip Area Chart</Text>
</View>
</SafeAreaView>
);
}
}
Below's the code I converted. I feel the below code is not rendering the tooltip because of how the state is written out in hooks. The tooltip isn't showing up upon click.
const Area = () => {
const [ data, setData ] = useState([]);
const [ tooltipX, setTooltipX ] = useState(null);
const [ tooltipY, setTooltipY ] = useState(null);
const [ tooltipIndex, setTooltipIndex ] = useState(null);
useEffect(() => reorderData(),[]);
const reorderData = () => {
const reorderedData = DATA.sort((a, b) => {
// Turn your strings into dates, and then subtract them
// to get a value that is either negative, positive, or zero.
return new Date(a.date) - new Date(b.date);
});
setData(reorderedData);
};
const contentInset = { left: 10, right: 10, top: 10, bottom: 7 };
const ChartPoints = ({ x, y, color }) =>
data.map((item, index) => (
<Circle
key={index}
cx={x(moment(item.date))}
cy={y(item.score)}
r={6}
stroke={color}
fill="white"
onPress={() =>
this.setState({
tooltipX: moment(item.date),
tooltipY: item.score,
tooltipIndex: index,
})
}
/>
));
return (
<SafeAreaView style={{ flex: 1 }}>
<View style={styles.container}>
{data.length !== 0 ? (
<AreaChart
style={{ height: '70%' }}
data={data}
yAccessor={({ item }) => item.score}
xAccessor={({ item }) => moment(item.date)}
contentInset={contentInset}
svg={{ fill: '#003F5A' }}
numberOfTicks={10}
yMin={0}
yMax={10}
>
<Grid svg={{ stroke: 'rgba(151, 151, 151, 0.09)' }} belowChart={false} />
<ChartPoints color="#003F5A" />
<Tooltip
tooltipX={tooltipX}
tooltipY={tooltipY}
color="#003F5A"
index={tooltipIndex}
dataLength={data.length}
/>
</AreaChart>
) : (
<View
style={{
height: '50%',
justifyContent: 'center',
alignItems: 'center',
}}
>
<Text
style={{
fontSize: 18,
color: '#ccc',
}}
>
There are no responses for this month.
</Text>
</View>
)}
<Text style={styles.heading}>Tooltip Area Chart</Text>
</View>
</SafeAreaView>
);
}

export default Area = () => {
const [data, setData] = useState([]);
const [tooltipX, setTooltipX] = useState(null);
const [tooltipY, setTooltipY] = useState(null);
const [tooltipIndex, setTooltipIndex] = useState(null);
useEffect(() => reorderData(), []);
const reorderData = () => {
const reorderedData = DATA.sort((a, b) => {
// Turn your strings into dates, and then subtract them
// to get a value that is either negative, positive, or zero.
return new Date(a.date) - new Date(b.date);
});
setData(reorderedData);
};
const contentInset = { left: 10, right: 10, top: 10, bottom: 7 };
const ChartPoints = ({ x, y, color }) =>
data.map((item, index) => (
<Circle
key={index}
cx={x(moment(item.date))}
cy={y(item.score)}
r={6}
stroke={color}
fill="white"
onPress={() => {
// try this 👇
setTooltipX(moment(item.date));
setTooltipY(item.score);
setTooltipIndex(index);
// try this ☝
}}
/>
));
return (
<SafeAreaView style={{ flex: 1 }}>
<View style={styles.container}>
{data.length !== 0 ? (
<AreaChart
style={{ height: "70%" }}
data={data}
yAccessor={({ item }) => item.score}
xAccessor={({ item }) => moment(item.date)}
contentInset={contentInset}
svg={{ fill: "#003F5A" }}
numberOfTicks={10}
yMin={0}
yMax={10}
>
<Grid
svg={{ stroke: "rgba(151, 151, 151, 0.09)" }}
belowChart={false}
/>
<ChartPoints color="#003F5A" />
<Tooltip
tooltipX={tooltipX}
tooltipY={tooltipY}
color="#003F5A"
index={tooltipIndex}
dataLength={data.length}
/>
</AreaChart>
) : (
<View
style={{
height: "50%",
justifyContent: "center",
alignItems: "center",
}}
>
<Text
style={{
fontSize: 18,
color: "#ccc",
}}
>
There are no responses for this month.
</Text>
</View>
)}
<Text style={styles.heading}>Tooltip Area Chart</Text>
</View>
</SafeAreaView>
);
};

Navigation issue undefined is not an object (evaluating '_this2.props.navigation.navigate')

Hey guys I'm having an issue with navigation:
I select an item from the menuoption
I then call the 'testFunction'
Function will call an alert function so it is working
When I add the navigation part I get the error below:
undefined is not an object (evaluating '_this2.props.navigation.navigate')
Here is the import code:
import { NavigationScreenProp } from "react-navigation";
Here is where it is added to props:
interface NotificationDropdownProps {
navigation: NavigationScreenProp<any,any>
}
Here is where code is rendered:
class NotificationDropdown extends React.Component<Props, NotificationDropdownState> {
testFunction = () => {
this.props.navigation.navigate('Leagues')
};
<MenuOption
onSelect={() =>
{
if(notification.type == INotificationType.SYSTEM){
this.testFunction()
}
}
}
customStyles={{ optionWrapper: { padding: 0, margin: 0, zIndex: 100000000 } }}>
<View style={[styles.notificationContainer]} >
<View style={styles.iconArea}>
<View style={[styles.iconCircle]}>
<Icon name={this.getIconType(notification.type)}
color={this.notificationColor(notification.type)} size={26} />
</View>
</View>
<View style={styles.notificationData} >
<Text style={styles.notificationTxt}>{notification.text}</Text>
<Text style={styles.notificationDate}>{this.getDate(new Date(notification.dateCreated))}</Text>
</View>
</View>
</MenuOption>
Render:
render() {
return (
<Menu
renderer={Popover} rendererProps={{ placement: 'bottom', preferredPlacement: 'bottom' }}
opened={this.state.opened}
onBackdropPress={() => this.togglePopup()}
onClose={() => {
this.setState({ showEmpty: true });
// Store.dispatch(SetNotificationSeen());
}}
onOpen={() => {
Store.dispatch(SetNumberSeen(this.props.notifications.length));
}}
>
<MenuTrigger onPress={() => this.togglePopup()}>
<View style={{ padding: 10 }}>
<Icon name='ios-notifications-outline' color={'rgba(0,0,0,0.6)'} size={25} /></View>
</MenuTrigger>
<MenuOptions customStyles={{
optionsContainer: {
width: Dimensions.get('window').width * 0.75,
zIndex: 100000000,
elevation: 8,
borderRadius: 20
}
}}>
<View style={{ padding: 10 }}>
<Text style={{
fontSize: 20,
marginLeft: 10,
color: 'rgba(0,0,0,0.6)',
fontWeight: 'bold',
paddingBottom: 5
}}>Notifications</Text>
{this.props.notifications.length > 0 ? <FlatList
contentContainerStyle={{ borderRadius: 10 }}
// only allow 5 notifications
data={this.props.notifications.slice(0,5)}
renderItem={({ item }) => this.renderNotification(item)}
style={{ maxHeight: 200, zIndex: 5 }}
keyExtractor={this.keyExtractor}
/> : <Text style={styles.noNotifications}>No Notifications!</Text>}
</View>
</MenuOptions>
</Menu>
);
}
What am I missing? any help is welcome
Here is where the is called from the header.tsx
<View style={styles.icon}>
<NotificationDropdown />
{this.props.numberSeen < this.props.notificationCount ? <Badge value={this.props.notificationCount - this.props.numberSeen > 99 ? '99+' : this.props.notificationCount - this.props.numberSeen}
status="error" containerStyle={styles.badge} /> : null}
</View>

Ok so it seems that NavigationDropDown doesn't have the navigation props.
What you need is to pass the navigation props explicitly as it is not a screen component.
in the headercomponent.tsx
<View style={styles.icon}>
<NotificationDropdown navigation={this.props.navigation} />
{this.props.numberSeen < this.props.notificationCount ? <Badge value={this.props.notificationCount - this.props.numberSeen > 99 ? '99+' : this.props.notificationCount - this.props.numberSeen}
status="error" containerStyle={styles.badge} /> : null}
</View>
I assume that you have the navigation props in the headercomponent.tsx

how do i get and show the total sum objects that arrive from my JSON in a footer at the bottom of the screen?

At my example, the function “getData” loading my data, but after the loading, I try to print and show the total sum of the objects that came from JSON in a footer at the bottom of the screen.
and I don't really know how to do it.
I don't understand how to solve this issue coz I have tried many ways.
This is my example:
export default class MainScreen extends Component {
constructor(props) {
super(props);
this.state = { data: [] };
}
getData = () => {
this.setState({ isLoading: true })
axios.get("https://rallycoding.herokuapp.com/api/music_albums")
.then(res => {
this.setState({
isLoading: false,
data: res.data
});
console.log(res.data);
});
}
componentDidMount() {
this.props.navigation.setParams({getData: this.getData}); //Here I set the function to parameter
this.getData()
}
renderItem(item) {
const { title, artist} = item.item;
return (
<TouchableOpacity
onPress={() => this.props.navigation.navigate("Settings")}
>
<Card
containerStyle={{
borderColor: "black",
padding: 20,
height: 100,
backgroundColor: "#e6e6ff",
borderBottomEndRadius: 10,
borderTopRightRadius: 10,
borderBottomStartRadius: 10,
}}
>
<View
style={{
paddingVertical: 15,
paddingHorizontal: 10,
flexDirection: "row",
justifyContent: "space-between",
alignItems: "center"
}}
>
<Icon name="chevron-right" size={30} color={"grey"} justifyContent={"space-between"} />
<Text style={styles.name}>
{title+ " " + artist}
</Text>
{/* <Text style={styles.vertical} numberOfLines={2}></Text> */}
</View>
</Card>
</TouchableOpacity>
);
}
render() {
if (this.state.isLoading) {
return (
<View style={{ flex: 1, paddingTop: 230 }}>
<Text
style={{ alignSelf: "center", fontWeight: "bold", fontSize: 20 }}
>
loading data...
</Text>
<ActivityIndicator size={'large'} color={'#08cbfc'} />
</View>
);
}
return (
<View style={styles.container}>
<FlatList
data={this.state.data}
renderItem={this.renderItem.bind(this)}
keyExtractor={item => item.id}
/>
</View>
);
}
}
/////////////////////////////////////////////////////////
MainScreen.navigationOptions = navData => {
return {
headerTitle: 'melon',
headerRight: (
<HeaderButtons HeaderButtonComponent={HeaderButton}>
<Item
title=**"sync button"**
iconName={Platform.OS === "android" ? "md-sync" : "ios-sync"}
onPress={() => {
navData.navigation.navigate("getData");
}}
/>
</HeaderButtons>
)
};
};

If type of data is array you can get total number of elements by this.state.data.length
If type of data is object you can get total number of elements by Object.keys(data).length

Passing data to custom picker

Currently I'm developing an app with a picker on it and I'm using picker component from react native but it doesn't work perfectly on iOS device so I found a custom picker using picker and modal it renders a modal on iOS only.
Here is the code
class PickerWrapper extends React.Component {
constructor(props) {
super(props);
this.state = {
type_absen: '',
modal: false,
}
}
render() {
let picker;
let iosPickerModal = (
<Modal isVisible={this.state.modal} hideModalContentWhileAnimating={true} backdropColor={color.white} backdropOpacity={0.9} animationIn="zoomInDown" animationOut="zoomOutUp" animationInTiming={200} animationOutTiming={200} onBackButtonPress={() => this.setState({ modal: false })} onBackdropPress={() => this.setState({ modal: false })} >
<View style={{ backgroundColor: color.white, width: 0.9 * windowWidth(), height: 0.3 * windowHeight(), justifyContent: 'center' }}>
<Picker
selectedValue={this.state.type_absen}
onValueChange={(itemValue, itemIndex) => {
this.setState({ type_absen: itemValue });
this.setState({ modal: false });
setTimeout(() => this.props.onSelect(itemValue), 1200);
}}
>
{this.props.items.map((item, key) => <Picker.Item label={item} value={item} key={key} />)}
</Picker>
</View>
</Modal>);
if (Platform.OS === 'ios')
return (
<View style={this.props.style}>
{iosPickerModal}
<TouchableOpacity onPress={() => this.setState({ modal: true })}>
<View style={{ flexDirection: 'row', height: this.props.height ? this.props.height : normalize(40), width: this.props.width ? this.props.width : 0.68 * windowWidth(), borderWidth: 1, borderColor: color.blue, alignItems: 'center', borderRadius: 5 }}>
<Text style={{ fontSize: fontSize.regular, marginRight: 30 }}> {this.state.type_absen}</Text>
<IconWrapper name='md-arrow-dropdown' type='ionicon' color={color.light_grey} size={20} onPress={() => this.setState({ modal: true })} style={{ position: 'absolute', right: 10 }} />
</View>
</TouchableOpacity>
</View >);
else
return (
<View style={this.props.style} >
<Picker
selectedValue={this.state.type_absen}
style={{ height: this.props.height ? this.props.height : normalize(20), width: this.props.width ? this.props.width : normalize(150) }}
onValueChange={(itemValue, itemIndex) => {
this.setState({ type_absen: itemValue });
this.props.onSelect(itemValue);
}}
>
{this.props.items.map((item, key) => <Picker.Item label={item} value={item} key={key} />)}
</Picker>
</View>);
}
}
PickerWrapper.propTypes = {
onSelect: PropTypes.func.isRequired
}
export default PickerWrapper;
I successfully load the data from api, but I still confused on how to get the value from it, and here is my old code using picker component
<Picker
selectedValue={this.state.type_absen}
style={{backgroundColor:'white'}}
onValueChange={(val) => this.setState({ type_absen: val })}>
{
this.props.schedules ? this.props.schedules.map((item, key) => {
return <Picker.Item value={item.id} label {item.description} key={item.id} />})
:
[]
}
</Picker>
and this is my new code using the PickerWrapper
export const mapStateToProps = state => ({
token: state.authReducer.token,
message: state.authReducer.message,
schedules: state.authReducer.schedules
});
export const mapDispatchToProps = (dispatch) => ({
actionsAuth: bindActionCreators(authAction, dispatch)
});
class Change extends Component {
constructor(){
super();
this.state={
type_absen: [],
}
}
onPickerValueChange=(value, index)=>{
this.setState({type_absen: value},
() => {
Alert.alert("type_absen", this.state.type_absen);
}
);
}
render() {
return (
<View style={styles.container}>
<View style={styles.container}>
<View style={styles.innerContainer}>
<PickerWrapper items={this.props.schedules.map((item) => item.description )} onSelect={this.onPickerValueChange} />
</View>
</View>
</View>
);
}
}
}
what I'm trying to do is get the item.id. How do I do that in my PickerWrapper component?

In the class component change the picker wrapper like this
export const mapStateToProps = state => ({
token: state.authReducer.token,
message: state.authReducer.message,
schedules: state.authReducer.schedules
});
export const mapDispatchToProps = (dispatch) => ({
actionsAuth: bindActionCreators(authAction, dispatch)
});
class Change extends Component {
constructor(){
super();
this.state={
type_absen: [],
}
}
onPickerValueChange=(value, index)=>{
this.setState({type_absen: value},
() => {
Alert.alert("type_absen", this.state.type_absen);
}
);
}
render() {
return (
<View style={styles.container}>
<View style={styles.container}>
<View style={styles.innerContainer}>
<PickerWrapper items={this.props.schedules} onSelect={this.onPickerValueChange.bind(this)} />
</View>
</View>
</View>
);
}
}
and then in your PickerWrapper component change it to be like this
class PickerWrapper extends React.Component {
constructor(props) {
super(props);
this.state = {
type_absen: '',
modal: false,
}
}
render() {
let picker;
let iosPickerModal = (
<Modal isVisible={this.state.modal} hideModalContentWhileAnimating={true} backdropColor={color.white} backdropOpacity={0.9} animationIn="zoomInDown" animationOut="zoomOutUp" animationInTiming={200} animationOutTiming={200} onBackButtonPress={() => this.setState({ modal: false })} onBackdropPress={() => this.setState({ modal: false })} >
<View style={{ backgroundColor: color.white, width: 0.9 * windowWidth(), height: 0.3 * windowHeight(), justifyContent: 'center' }}>
<Picker
selectedValue={this.state.type_absen}
onValueChange={(itemValue, itemIndex) => {
this.setState({ type_absen: itemValue });
this.setState({ modal: false });
setTimeout(() => this.props.onSelect(itemValue), 1200);
}}
>
{this.props.items.map((item, key) => <Picker.Item label={item.description} value={item.id} key={key} />)}
</Picker>
</View>
</Modal>);
if (Platform.OS === 'ios')
return (
<View style={this.props.style}>
{iosPickerModal}
<TouchableOpacity onPress={() => this.setState({ modal: true })}>
<View style={{ flexDirection: 'row', height: this.props.height ? this.props.height : normalize(40), width: this.props.width ? this.props.width : 0.68 * windowWidth(), borderWidth: 1, borderColor: color.blue, alignItems: 'center', borderRadius: 5 }}>
<Text style={{ fontSize: fontSize.regular, marginRight: 30 }}> {this.state.type_absen}</Text>
<IconWrapper name='md-arrow-dropdown' type='ionicon' color={color.light_grey} size={20} onPress={() => this.setState({ modal: true })} style={{ position: 'absolute', right: 10 }} />
</View>
</TouchableOpacity>
</View >);
else
return (
<View style={this.props.style} >
<Picker
selectedValue={this.state.type_absen}
style={{ height: this.props.height ? this.props.height : normalize(20), width: this.props.width ? this.props.width : normalize(150) }}
onValueChange={(itemValue, itemIndex) => {
this.setState({ type_absen: itemValue });
this.props.onSelect(itemValue, index);
}}
>
{this.props.items.map((item, key) => <Picker.Item label={item.description} value={item.id} key={key} />)}
</Picker>
</View>);
}
}
PickerWrapper.propTypes = {
onSelect: PropTypes.func.isRequired
}
export default PickerWrapper;