I an using "import MapboxGL,{MarkerView} from "#react-native-mapbox-gl/maps" for maps.
return (
<MarkerView coordinate={coordinate} key={key} onPress= {()=>console.log("pressed")}>
<View style={{
height: 20,
width: 70,
backgroundColor: '#fff',
borderColor: '#fff',
borderWidth: 3
}}
>
<TouchableHighlight onPress= {()=>console.log("pressed")}>
<Text style={{color:"#000000"}} >{label}</Text>
</TouchableHighlight>
</View>
</MarkerView>
);
};
On press event is not working with marker view here.
Actucally onPress property is not exist on MarkerView check here
https://github.com/react-native-mapbox-gl/maps/blob/master/docs/MarkerView.md
Instead of MarkerView use MapboxGL.PointAnnotation and in this you can use it's onSelected function like that:
<MapboxGL.MapView
ref={(c) => (this._map = c)}>
<MapboxGL.PointAnnotation
onSelected={() => console.log("pressed")}
>
<Image source={require('./assets/marker.png')} />
</MapboxGL.PointAnnotation>
</MapboxGL.MapView>
for more properties requirement check:
https://github.com/react-native-mapbox-gl/maps/blob/master/docs/PointAnnotation.md
Related
I need to show hide my password on eye click.
Right now I am trying to do like this
const [showPassword, setShowPassword] = useState(false)
<View style={styles.SectionStyle}>
<Text style={styles.textStyle} >Password</Text>
<View style={{ flexDirection: 'row', alignItems: 'center' }}>
<TextInput
style={styles.inputStyle}
onChangeText={password => setPassword(password)}
underlineColorAndroid="#FFFFFF"
placeholderTextColor="grey"
secureTextEntry={showPassword}
placeholder="Must be at least 6 characters"
// ref={ref => {
// this._addressinput = ref;
// }}
// onSubmitEditing={Keyboard.dismiss}
blurOnSubmit={true}
/>
<TouchableOpacity onPress={() => setShowPassword(showPassword = !showPassword)}>
<Image
source={require('./../../../public/icons/Hide.png')}
style={{
position: 'absolute',
right: 0,
top: -2,
marginRight: 16,
// marginTop: 30,
width: 16,
height: 16
}}
/>
</TouchableOpacity>
</View>
</View>
But it's not working I am doing something wrong? I think need to do something in state?
the setShowPassword accepts an arrow function as arguments with the state as params
So it should be like this:
<TouchableOpacity onPress={() => setShowPassword(showPassword => !showPassword)}>
ListHeaderComponent inside flatlist doesn't work. It won't render nothing in header (above flatlist). If I however put some custom component it does work but it doesn't with my renderHeader function. I tried making a custom component with the same view as in renderHeader but when I used that nothing rendered so I don't know
My flatlist along with whole render:
render() {
const { height } = Dimensions.get("window");
return (
<View style={{flex: 1,
backgroundColor: "#EBECF4"}}>
{/* <Text>
Connection Status :{" "}
{this.state.connection_status ? "Connected" : "Disconnected"}
</Text> */}
{/* <Loader loading={this.state.loading} /> */}
<StatusBar backgroundColor="#63003d" barStyle="light-content" />
<SafeAreaView>
<ModernHeader
backgroundColor="#63003d"
height={50}
text="Eleph"
textStyle={{
color: "white",
fontFamily: "Lobster-Regular",
//fontWeight: "bold",
fontSize: 25,
}}
leftIconComponent={
<TouchableOpacity
style={{ marginRight: 0, margin: 0 }}
onPress={() =>
this.props.navigation.dispatch(DrawerActions.openDrawer())
}
>
<FontAwesome5 name="bars" size={22} color="white" />
</TouchableOpacity>
}
rightIconComponent={
<TouchableOpacity
style={{ marginLeft: 0, margin: 0 }}
onPress={() => this.props.navigation.navigate("Profile")}
>
{/* <MaterialCommunityIcons
name="chart-areaspline"
size={24}
color="#639dff"
/> */}
<Foundation name="graph-bar" size={24} color="white" />
{/* <FontAwesome name="bar-chart" size={24} color="white" /> */}
</TouchableOpacity>
}
/>
</SafeAreaView>
<FlatList
//contentInset={{ top: HEADER_HEIGHT }}
//contentOffset={{ y: -HEADER_HEIGHT }}
data={this.state.post}
extraData={this.state.post}
keyExtractor={(item) => item.id.toString()}
style={{
marginHorizontal: 0,
marginVertical: 6,
}}
renderItem={({ item }) => this.renderPost(item)}
ListFooterComponent={this.renderFooter}
ListHeaderComponent={this.renderHeader}
refreshControl={
<RefreshControl
style={{ color: "#639dff" }}
tintColor="#639dff"
titleColor="#fff"
refreshing={this.state.isLoading}
onRefresh={this.onRefresh}
/>
}
initialNumToRender={7}
onEndReachedThreshold={0.1}
showsVerticalScrollIndicator={false}
onEndReached={() => {
if (
!this.onEndReachedCalledDuringMomentum &&
!this.state.isMoreLoading
) {
this.getMore();
}
}}
onMomentumScrollBegin={() => {
this.onEndReachedCalledDuringMomentum = false;
}}
onScroll={(e) => {
scrollY.setValue(e.nativeEvent.contentOffset.y);
}}
></FlatList>
{/* <View style={styles.footer}>
<TouchableOpacity
activeOpacity={0.9}
onPress={this.getMore}
style={styles.loadMoreBtn}
>
<Text style={styles.btnText}>See more moods</Text>
{this.state.loading ? (
<ActivityIndicator color="white" style={{ marginLeft:8 }} />
) : null}
</TouchableOpacity>
</View> */}
</SafeAreaView>
</View>
My renderHeader function:
renderHeader = () => {
return (
<View
style={{
flex: 1,
flexDirection: "row",
backgroundColor: "#ffffff",
//width: "100%",
padding: 11,
alignItems: "center",
position: "absolute",
justifyContent: "center",
//top: 50,
//bottom: 0,
//left: 0,
//elevation: 4,
//right: 0,
//height: 50,
}}
//flexDirection: "row",
//backgroundColor: "#ffffff",
//width: "100%",
//padding: 11,
//alignItems: "center",
>
<TouchableOpacity
onPress={() => this.props.navigation.navigate("Post")}
>
<Text
style={{ alignItems: "center", color: "#C4C6CE" }}
//placeholder={How are you feeling right now ${this.state.user.name}?}
multiline
>{Tell us how are you feeling right now ${this.state.user.name}?}</Text>
</TouchableOpacity>
{/* <View style={styles.divider}></View> */}
</View>
);
}
Why for example renderFooter works??
renderFooter = () => {
if (!this.state.isMoreLoading) return true;
return (
<ActivityIndicator
size="large"
color={"#D83E64"}
style={{ marginBottom: 10 }}
/>
);
};
Use ListHeaderComponentStyle to style the ListHeaderComponent.
I created a simple snack for you, check if this helps. Your code looks okay but not sure about the whole screen design. Here is my snack link.
https://snack.expo.io/#saad-bashar/excited-fudge
It might be related to the other components inside your screen. So first check only with flatlist, remove all other components. Hope you can sort it out :)
The solution is to remove the "absolute" style in the header for flatlist. The question is mine im just answering with different account but this is the solution that worked.
I need to define the next view that gets focus once the button is pressed, however, there is no much information in React Native documentation (https://reactnative.dev/docs/view#nextfocusdown).
So far I have something like this:
const ListHeader = React.memo(({
navigation
}) => {
return (
<>
<View
style={{
width: '100%',
backgroundColor: '#338cf7',
height: 70,
flex: 1,
flexDirection: 'row',
justifyContent: 'space-between',
alignItems: 'center'
}}
focusable={false}
>
<View
style={{ flex: 1, flexDirection: 'row', alignItems: 'center' }}
focusable={false}>
<TouchableNativeFeedback
background={VeoHoverBackground}
onPress={() => navigation.navigate('Sidebar')}
>
<View nextFocusDown={next_to_focus_id}>
<CustomIcon
style={{ padding: 10, color: 'white' }} size={22}
name='customize' />
</View>
</TouchableNativeFeedback>
<TouchableNativeFeedback
background={VeoHoverBackground}>
<View focusable={false}>
<Text style={{ color: 'white', marginLeft: 10, fontSize: 18 }}
focusable={false}>VEO Messanger</Text>
</View>
</TouchableNativeFeedback>
</View>
<TouchableNativeFeedback
onPress={() => navigation.navigate('NewMessageView')}
background={VeoHoverBackground}>
<View>
<CustomIcon
style={{ padding: 10, color: 'white' }} size={22}
name='edit-rounded' />
</View>
</TouchableNativeFeedback>
</View>
</>
);
});
How to get the id of the element that has to be focused next? In my case it has to be second TouchableNativeFeedback element.
So I work with React Native so I am not entirely sure if React works the same way, but you have to pass a ref to the nextFocusDown prop. I see you have the id <View nextFocusDown={next_to_focus_id}>but I don't see the where the next_to_focus_id ref is.
So in React Native, for example, I would make a ref with useRef and use the ref prop on TextInput or TouchableOpacity. Here I will use a really simple TextInput example:
```
const emailRef = useRef();
const passwordRef=useRef();
<TextInput
ref={emailRef}
nextFocusDown={passwordRef}>
</TextInput>
<TextInput
ref={passwordRef}>
</TextInput>
```
Hopefully that helps!
I am trying to use Searchable Dropdown inside a modal in react native.If i use it 'alone' (i mean outside the modal) it works fine.But if i put it inside a modal , its attribute onItemSelect does not seem to work( it does not let me click on anything)
<Modal isVisible={this.state.isBuildingModalVisible}>
<SearchableDropdown
onItemSelect={item => {
this.setState({ building_id: item.id });
}}
containerStyle={{ ...}}
textInputStyle={{
...
}}
itemStyle={{
...
}}
itemTextStyle={{
color: "white",
fontSize: (15 / 411.42) * screen
}}
itemsContainerStyle={{ maxHeight: 140 }}
items={this.state.dataSource}
placeholder="Choose School"
placeholderTextColor="white"
underlineColorAndroid="transparent"
/>
<View
style={{
alignItems: "center",
justifyContent: "center",
flexDirection: "row"
}}
>
<TouchableOpacity
style={styles.button}
onPress={this.toggleBuildingModal}
>
<Text style={{ color: "white" }}>Cancel</Text>
</TouchableOpacity>
<TouchableOpacity
style={styles.button}
onPress={() => this.submitpassword()}
>
<Text style={{ color: "white" }}>Execute</Text>
</TouchableOpacity>
</View>
</Modal>
Ok the problem was that react native does not allow you to put SearchableDropdown inside scrollview (if anyone has this problem :P)
I am using a FlatList and within it I am doing:
let pressed = () => {
this.props.navigation.navigate('DetailScreen', {item: item});
}
then in render() on the DetailScreen I am doing: this.props.navigation.getParam('item', null)
so the first item I click on in the list, shows the correct item in the DetailScreen, but then if I go back and click on any other item then this.props.navigation.getParam('item', null) always returns the same item. Its like it does not get changed after the first select.
List.js
_renderRow({item}){
let pressed = () => {
this.props.navigation.navigate('Details', {item: item});
}
let actualRowComponent =
<View style={css.list.row}>
<View style={css.list.rowContainer}>
<Text style={css.list.rowSymbol}>{item.sym}</Text>
<Text style={css.list.rowTitle}>{item.title}</Text>
</View>
<Button title={"$"+item.amount}
onPress={pressed}
backgroundColor='#EE7600'
buttonStyle={{borderRadius: 5}}
/>
</View>;
let touchableWrapperIos =
<TouchableHighlight
activeOpacity={0.5}
underlayColor="#fff"
onPress={pressed}
>
{actualRowComponent}
</TouchableHighlight>;
let touchableWrapperAndroid =
<TouchableNativeFeedback
useForeground={true}
background={TouchableNativeFeedback.SelectableBackgroundBorderless()}
onPress={pressed}
>
{actualRowComponent}
</TouchableNativeFeedback>;
if (require('react-native').Platform.OS === 'ios') {
return touchableWrapperIos;
}
else return touchableWrapperAndroid;
}
render(){
return (
<View style={css.baseStyles.baseContainer}>
<View style={{justifyContent: 'center',alignItems: 'center', marginBottom: 40, marginTop: 50}}>
</View>
<SectionWidget title="Items" >
<FlatList
style={css.baseStyles.flatListContainer}
data={this.items}
renderItem={this._renderRow}
keyExtractor={(item,index) => item.id.toString()}
/>
</SectionWidget>
</View>
);
}
Detail.js
render(){
const item = this.props.navigation.getParam('item', null);
console.log(item.title)
return (
<View style={css.baseStyles.container}>
<ScrollView>
<View style={{marginTop: 40, marginBottom: 60, flex: 1, justifyContent: 'center',alignItems: 'center'}}>
<Text style={css.baseStyles.priceText}>${item.amount}</Text>
<Text style={css.baseStyles.subText}> +$0.50 </Text>
</View>
<Divider style={{ backgroundColor: '#ccc', marginLeft: 10, marginRight: 10 }} />
<View style={{marginTop: 60, marginBottom: 30, flex: 1, justifyContent: 'center',alignItems: 'center'}}>
<Text style={css.baseStyles.titleText}>{item.title}</Text>
<Text style={css.baseStyles.descriptionText}>{item.summary}</Text>
</View>
<Divider style={{ backgroundColor: '#ccc', marginLeft: 10, marginRight: 10 }} />
</ScrollView>
<View style={css.baseStyles.footerContainer}>
<Button title='Buy'
backgroundColor='#EE7600'
buttonStyle={{marginTop: 20, marginBottom: 20, borderRadius: 5, width: 150}}
/>
</View>
</View>
);
}
Since I've never used React Navigation before, I was misunderstanding its usage. In fact your problem seems a logic/usage one, which has a simple solution. Your intention is to have multiple Detail screen (I mean just a component, but multiple screen in the stack), not just one with different params. This makes a BIG difference! React Navigation provides an alternative method to navigation.navigate(), which is navigation.push(), that adds a stack to the 'history' of navigation and seems to be exactly what you're looking for.
So, what you have to do is to replace
this.props.navigation.navigate('Details', {item: item});
with
this.props.navigation.push('Details', {item: item});
You can read more (and better explained) about this on the official doc.
Let me know if this fits with your problem.
The issue I found was due to #autobind. If you use #autobind along with react-navigation, you will run into problems. So I removed #autobind and everything is working as expected.