i developed a custom modal picker for my android app, which is working fine except one important thing: it is simply not working at all when i am in debug mode. i just don't get it how that can be if everything is working fine in production mode!
i am sure that i don't have to tell you how important it is to have a working debugging enviroment, and i got no clue what is wrong here! :( my chosen debugger is VS code, but it is exactly the same when i start the app via normal terminal and chrome debugger
import { useTheme } from '@react-navigation/native';
import React, { useState } from 'react';
import { useNavigation } from '@react-navigation/native';
import {LogBox, SafeAreaView, Animated, StyleSheet, ScrollView, Switch, Button, View, Text, Image, Alert, TouchableOpacity, TouchableHighlight} from 'react-native';
import { Card } from 'react-native-elements';
import Picker from './MyPicker.js'
function Home() {
const { colors } = useTheme();
const navigation = useNavigation()
const [selectedItem, setSelectedItem] = useState(null);
const [selectedCount, setSelectedCount] = useState({key: 'Choose', value: null});
let countItems = [{key: 'Choose', value: '0'}, {key: '1 Foo', value: '1'}, {key: '2 Foos', value: '2'}, {key: '3 Foos', value: '3'}, {key: '4 Foos', value: '4'}, {key: '5 Foos', value: '5'}, {key: '6 Foos', value: '6'}, {key: '7 Foos', value: '7'}, {key: '8 Foos', value: '8'}, {key: '9 Foos', value: '9'}, {key: '10 Foos', value: '10'}, {key: '11 Foos', value: '11'}, {key: '12 Foos', value: '12'}, {key: '13 Foos', value: '13'}, {key: '14 Foos', value: '14'}, {key: '15 Foos', value: '15'}, {key: '16 Foos', value: '16'}, {key: '17 Foos', value: '17'}, {key: '18 Foos', value: '18'}, {key: '19 Foos', value: '19'}, {key: '20 Foos', value: '20'}];
const onPress = () => {
console.log("navigate triggered");
navigation.navigate("screen2")
}
const setItem = (value) => {
// set parent state
setSelectedCount(value);
setSelectedItem(value)
console.log("you touched option: " + value);
}
return (
<View>
<SafeAreaView>
<ScrollView>
<TouchableOpacity style={{backgroundColor:'green', width:'100%', height:30}} onPress={() => onPress() }>
<Text>Go to screen2</Text>
</TouchableOpacity>
<Card containerStyle={{backgroundColor: colors.cardBackgroundColor, borderColor: colors.borderColor, borderWidth: 2, borderRadius: 5}}>
<View style={{width: "100%", height:10}}></View>
<View style={{flex: 1, flexDirection: 'row', justifyContent: 'space-between'}}>
<View style={{width: '55%', flexDirection: 'column', justifyContent: 'space-between'}}>
<View style = {{ paddingLeft: 5, borderWidth: 1, borderRadius: 5}}>
<Picker icon='1' title='Test:' data={countItems} action={setItem} selectedItem={selectedCount} isActive={true}/>
</View>
<View style={{width: "100%", height:10}}></View>
<TouchableOpacity style = {styles.button} onPress={() => onPress() }>
<Text style = {{textAlign: 'center', color: 'white', fontSize: 11, fontWeight: 'bold'}}>
Add Foo(s)
</Text>
</TouchableOpacity>
</View>
</View>
</Card>
</ScrollView>
</SafeAreaView>
</View>
);
};
import React, {useState, useEffect, useRef} from 'react';
import {StyleSheet, View, Text, TouchableOpacity, Pressable, FlatList} from 'react-native';
import Modal from 'react-native-modal';
import Icon from 'react-native-vector-icons/FontAwesome';
import { useTheme} from '@react-navigation/native';
// ------------------PickerRow-----------------------------------------------------------------------
function Picker(props) {
const { colors } = useTheme(); // works
const theme = useTheme();
const [selectedItem, setSelectedItem] = useState('choose');
const [coordinates, setCoordinates] = useState({w: 100, x: 0, y: 100});
const [isVisible, setIsVisible] = useState(false);
const [isActive, setIsActive] = useState();
useEffect(() => {
setIsActive(props.isActive);
})
const showPicker = () => {
measureView.current.measure((x, y, width, height, pageX, pageY) => {
let coords = {w: width, x: pageX, y: pageY};
setCoordinates(coords);
})
if (isActive) {
setIsVisible(true);
}
}
const setItem = (value) => {
// set parent state
props.action(value)
setIsVisible(false);
}
const renderItem = ({item}) => {
return <View>
<Pressable onPress={() => setItem(item)}>
<Text style={{color: colors.text, fontSize: 17, alignSelf: 'center', paddingTop: 3}}>
{item.key}
</Text>
</Pressable>
</View>
}
const measureView = useRef();
return (
<Pressable
onPress={() => showPicker()}
ref={view => measureView.current = view}>
<View
style = {{
flexDirection: 'row',
justifyContent: 'space-between',
alignItems: 'center',
height: 25,
}}
>
{ props.icon ?
<View style = {styles.icon} >
<Text style = {styles.text}>{props.icon}</Text>
</View>
:
<View/>
}
<View style = {styles.description} >
<Text style = {{fontSize: 11, fontWeight: 'bold', color: colors.text, textAlign: 'left', marginLeft: 5,}}>{props.title}</Text>
</View>
{/* - - - - - Dropdown - - - - - */}
<View style={{flex:5, backgroundColor: 'transparent'}}>
{ isActive ?
<TouchableOpacity onPress={showPicker}>
<Text style={{color: colors.textSubtitleColor, fontSize: 11, alignSelf: 'flex-end', paddingRight: 10}}>
{props.selectedItem.key}
</Text>
</TouchableOpacity>
:
<Icon.Button
style={{alignSelf: 'flex-end', paddingRight: 10}}
name="lock"
backgroundColor="transparent"
size={12}
onPress={() => console.log('locked')}
color="gray"
/>
}
<Modal
isVisible={isVisible}
style={{backgroundColor: colors.frameBackground,
borderColor: colors.borderColor,
borderWidth: 1,
borderRadius: 5,
position: 'absolute',
width: 180,
height: 'auto',
maxHeight: 200,
left: coordinates.x-25,
top: coordinates.y+4}}
backdropOpacity={0}
onBackdropPress={() => setIsVisible(false)}
>
<View>
<FlatList
data={props.data}
renderItem={renderItem}
/>
</View>
</Modal>
</View>
</View>
</Pressable>
);
}
export default Picker;
Any help'd be so so appreciated
the problem was within the modal itself, for whatever reason the modal from react-native-modal has a problem with visibility (or kind of a delay issue) while in developer mode.. i switched to the standard modal from react-native, and the problem was solved ;)