<View style={styles.container}>
<TextInput style={{height: 40, borderColor: 'gray', borderWidth: 1}}
onChangeText={(text) => this.setState({text})}
value={this.state.text}/>
<TouchableHighlight underlayColor='white' onPress={onPressButton}>
<Image style={{width: 50, height: 50}}
source={{uri: 'https://facebook.github.io/react/img/logo_og.png'}}
/>
</TouchableHighlight>
</View>
I want to get the View, like in html use the 'getElementById()', but in React native, How do I?
Define a ref:
<View ref={(ref) => {this._myView = ref}} />
Then in your code you can access the View like this:
this._myView // Do whatever you need here
Docs here https://facebook.github.io/react/docs/refs-and-the-dom.html#the-ref-callback-attribute
Related
I'm trying to build a LIVE map and I noticed that the zIndex of the react-native mapbox gl doesn't work when the render is in a different state. When you render something after, it stays underneath. Is there anyway for certain things to always be on top? For example, callback should always be on top no matter what.
<MapboxGL.MapView
style={{flex: 1}}
styleURL={'mapbox://styles/gigajungkyu/ckt962t3a19zh17pfq1sr7z3f'}
pitchEnabled={false}
rotateEnabled={false}>
<MapboxGL.PointAnnotation
id={'1'}
key={'1'}
style={{zIndex: 1}}
coordinate={[-122.849, 49.1]}>
<TouchableOpacity
style={{zIndex: 1}}
onPress={() => setDisplay((prevState) => !prevState)}>
<View
style={{width: 100, height: 100, backgroundColor: 'red'}}></View>
</TouchableOpacity>
<MapboxGL.Callout title={'You'} />
</MapboxGL.PointAnnotation>
{display && (
<MapboxGL.PointAnnotation
id={'2'}
key={'2'}
style={{zIndex: 99999999}}
coordinate={[-103.349, 49.1]}>
<TouchableOpacity style={{zIndex: 5}}>
<View
style={{
width: 100,
height: 100,
backgroundColor: 'blue',
}}></View>
</TouchableOpacity>
<MapboxGL.Callout title={'You'} />
</MapboxGL.PointAnnotation>
)}
</MapboxGL.MapView>
as the title states, I am attempting to implement a modal in such way that it only takes up some part of the screen so as to allow the user to be able to interact with some of the background components. For reference I am using the react-native-modal library. The current screen looks like this:
I would like to be able to interact with the icons in the header (both are already wrapped in Touchable components so already clickable). However when the Modal is visible I am unable to interact with those.
My implementation is as such:
<Modal
isVisible={showModal}
style={styles.modalContainer}
customBackdrop={<CustomBackdrop />}
onBackdropPress={() => setShowModal(false)}
animationIn="fadeInDown"
animationOut="fadeOutUp"
>
<View style={styles.container}>
<TouchableOpacity style={styles.itemContainer}>
<Text style={styles.label}>A</Text>
</TouchableOpacity>
<TouchableOpacity style={styles.itemContainer}>
<Text style={styles.label}>B</Text>
</TouchableOpacity>
<TouchableOpacity style={styles.itemContainer}>
<Text style={styles.label}>C</Text>
</TouchableOpacity>
<TouchableOpacity style={styles.itemContainer}>
<Text style={styles.label}>D</Text>
</TouchableOpacity>
<TouchableOpacity
style={[
styles.itemContainer,
{ borderBottomLeftRadius: 16, borderBottomRightRadius: 16 },
]}
>
<Text style={styles.label}>E</Text>
</TouchableOpacity>
</View>
</Modal>
And my custom background looks like this:
<View
style={{
marginTop: hp("50%"),
flex: 1,
}}
>
<TouchableWithoutFeedback onPress={() => setShowModal(false)}>
<View
style={{ backgroundColor: "#000", height: hp("50%"), width: wp("100%") }}
/>
</TouchableWithoutFeedback>
</View>
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
Any ideas to render favourites button the one with a heart shape on Flatlists in React Native? This I have here works fine, I get the data from a REST api correctly without worries, but the primary challenge is , having to have the favourites button to it.
Flat List code looks like this
render() {
return (
<View style={styles.MainContainer}>
<FlatList
data={ this.state.dataSource }
ItemSeparatorComponent = {this.FlatListItemSeparator}
renderItem={({item}) =>
<View style={{flex:1, flexDirection: 'row'}}>
<Image source = {{ uri: item.url_image}} style={styles.imageView} />
<Text onPress={this.GetItem.bind(this, item.movie_description)} style={styles.textView} >{item.movie_description}</Text>
</View>
}
keyExtractor={(item, index) => index.toString()}
/>
</View>
);
}
}
Help would be very much appreciated!
At the main View in renderItem
<View style={{flex:1, flexDirection: 'row'}}>
<Image source = {{ uri: item.url_image}} style={styles.imageView} />
<Text onPress={this.GetItem.bind(this, item.movie_description)} style={styles.textView} >{item.movie_description}</Text>
</View>
you can simply add png image or any favourite icon, but you have to give it position: 'absolute' if you want favourite icon to be float on the card, you can add image into main View in the renderItem like this
<Image
source={your png or jpg file's path}
style={{
height: 25,
width: 25,
position: 'absolute',
top: 15,
right: 15
}}/>
I would like my button (the blue block across the screen) to be much smaller and in the bottom right corner of the screen. How do I do this with styling in react-native?
Here is my button at the moment:
App.js
render() {
return (
<View>
<View style={{flexDirection:'row', alignItems:'center'}}>
<Text>Plan Name: </Text>
<TextInput style={{height: 40, borderColor: 'black', width: 120, borderWidth: 0.8}}
onChangeText={(text) => this.setState({text})}
value={this.state.text}/>
</View>
<MyDatePicker/>
<Button style={{ width: 50, alignSelf: "flex-end" }}
title="Add Plan"
onPress={() =>
this.props.navigation.navigate('PlanScreen')}>
</Button>
</View>
)
}
}
Do you want it to be right of the button that is hidden if so you can give it a flexDirection of row and give flex to each wrapper so that it adjust itself
something like this.
<View style={{flexDirection: 'row', flex: 1}}>
<View style={{flex: 0.8}}><Button></Button></View>
<View style={{ flex: 0.2}}><Button></Button></View>
</View>
If you want it to be on separate line below the button that is hidden you can do
<View>
<Button style={{ width: 50, alignSelf: "flex-end" }}></Button>
</View>
and you can adjust the width accordingly.
You can update your render function as
render() {
return (
<View style={{flex: 1}}>
<View style={{flexDirection:'row', alignItems:'center'}}>
<Text>Plan Name: </Text>
<TextInput style={{height: 40, borderColor: 'black', width: 120, borderWidth: 0.8}}
onChangeText={(text) => this.setState({text})}
value={this.state.text}/>
</View>
<MyDatePicker/>
<View style={{ width: 50, alignSelf: "flex-end">
<Button
title="Add Plan"
onPress={() =>
this.props.navigation.navigate('PlanScreen')}>
</Button>
</View>
</View>
)
}
}