As the title suggests, <Image src={require('...')} /> does not appear when attempting to view while offline and disconnected from react native packager.
It turns out that either because of the <TouchableOpacity> or the lack thereof <View> wrapping the <Image/>, it causes the image to not appear.
So the first example doesn't work:
<TouchableOpacity>
<Image src={require('...')} />
</TouchableOpacity>
whereas this does:
<TouchableOpacity>
<View>
<Image src={require('...')} />
</View>
</TouchableOpacity>
Related
i am trying to create a book page layout where i have buttons for next and previous page.
For that i need to know how many words does the page fits, to know which text to show on the next page.
or, what text is visible on the page to know what to put in next page.
any idea how to do that ?
or different ideas ?
tried to search for event in the scroll view , to know when its scrollable , but couldn't
tried to check text component , but it didn't help.
page structure:
<View style={styles.fullWidth}>
<TopBar backEvent={onBackClickLocal} />
{/* <ScrollView> */}
<Text style={styles.bookText}>
{exampleText}
</Text>
{/* </ScrollView> */}
<View style={styles.pageArrowsSection}>
<TouchableOpacity style={styles.previousPageArrowContainer} >
<Ionicons name="arrow-back" size={32} color="green" />
</TouchableOpacity>
<View style={styles.bookPageNumber}>
<Text>
2/50
</Text>
</View>
<TouchableOpacity style={styles.nextPageArrowContainer}>
<Ionicons name="arrow-forward" size={32} color="green" />
</TouchableOpacity>
</View>
</View>
any idea ?
thnx alot
Hello guys i have been working on the ubereats clone and while using scrollView it doesnt work ,
i used it on other components the same way and it worked fine but here it doesnt !! ?
const MenuItem=()=>{
return(
<ScrollView showsVerticalScrollIndicator={false}>
<View style={{paddingHorizontal:10}} >
{Menu.map((food,index)=>(
<View style={{paddingLeft:20,flexDirection:"row",marginTop:30,borderTopWidth:1,borderTopColor:"lightgray",paddingTop:10}} key={index} >
<View style={{justifyContent:"center"}}><BouncyCheckbox
iconStyle={{borderColor: "gray",borderRadius:0}}
fillColor='green'
/></View>
<View style={{width:220,marginLeft:10}}>
<Text style={{fontSize:20,fontWeight:"700"}}>{food.title}</Text>
<Text > {food.description}</Text>
<View style={{marginTop:8}}>
<Text style={{fontSize:17,fontWeight:"500"}}>{food.price}</Text></View>
</View>
<View style={{marginLeft:18}}>
<Image source={{uri:food.image}} style={{width:80,height:80,borderRadius:30}}/>
</View>
</View>
))}
</View>
</ScrollView>
)
}```
i used flex 1 on the view outside the map function and it didnt fix it
Remove the View above the ScrollView.
You try to set one child for the scrollView it’s the View component and the View component have array map.
Remove the View component to keep array map child for ScrollView
I am new to React Native and currently learning on developing a chat app.
I have a Modal that contain Rating UI
Working with these approach
ChatScreen.js
<Modal isVisible={showRateModal} >
<RatingModal />
</Modal>
RatingModal.js
<View style={styles.container}>
<RatingEmojiSection />
<View style={styles.buttonContainer}>
<Button/>
</View>
</View>
Not Working
It works all fine but when I move `Modal` into `RatingModal.js`, the Modal wont be showing anymore. Here is my approach
import { Modal } from 'react-native-paper';
<Modal isVisible={showRateModal} >
<View style={styles.container}>
<RatingEmojiSection />
<View style={styles.buttonContainer}>
<Button/>
</View>
</View>
</Modal>
Anyone have idea why this could happen? PS: the showRateModal state is working fine. I just curious why can't I move the Modal wrapper into RatingModal.js?
I think there are two problems with your current code
First you are rendering two Modals: ChatScreen.js contains a <Modal>, and then you RatingModal code also contains a <Modal> rendering.
Second: from the react-native docs you can see that the required property is not isVisible but visible.
Fixing these two issues should fix your problem.
I have used MapBoxGL in my expo ejected project. i want to use my custom component at map PointAnnonation.
I have added custom icon too. But what i want is to navigate on touch of that i cont to different screen. So i wrapped whole MapboxGL.PointAnnotation 's child in TouchaleOpacity but it does not work while tapping on it.
<MapboxGL.MapView
style={styles.map}
logoEnabled={false}
localizeLabels={true}
>
<MapboxGL.Camera
zoomLevel={15}
animationMode={'flyTo'}
animationDuration={1100}
centerCoordinate={[73.20812, 22.29941]}
/>
<View>
<MapboxGL.PointAnnotation coordinate={[73.20812, 22.29941]}>
<TouchableOpacity onPress={() => Alert.alert('hello')}>
<Entypo
name='location-pin'
size={50}
color='black'
onPress={() => Alert.alert('h')}
/>
</TouchableOpacity>
</MapboxGL.PointAnnotation>
</View>
</MapboxGL.MapView>
Dependencies :
"#react-native-mapbox-gl/maps": "^8.1.0-rc.9",
"react-native": "~0.62.2",
I also faced this issue. TouchableOpacity doesn't work with MapboxGL.PointAnnotation, but it works with MapboxGL.MarkerView.
For handle click in PointAnnotation you can try to use onSelected prop. Such as I do here:
<MapboxGL.PointAnnotation
id={uuid4()}
onSelected={handleClick}
key={name}
coordinate={[longitude, latitude]}>
<TouchableOpacity>
<EntypoIcon name="location-pin" color="red" size={40} />
</TouchableOpacity>
</MapboxGL.PointAnnotation>
It will work with some delay and without opacity animation.
Simple question, I'm trying to get a link to open whenever the user presses a button, the relevant bits of code are:
_linkPressed: function(url){
LinkingIOS.openURL(url);
},
<View style={styles.contactBox}>
<TouchableHighlight
onPress = {()=> this._linkPressed('www.google.com')}
>
<View style={styles.contactRow}>
<Image
source={{uri: 'email.png'}}
resizeMode='contain'
style={styles.contactIcon} />
<Text style={styles.contactText}> Write with your questions </Text>
</View>
</TouchableHighlight>
</View>
But for some reason the link won't open in the simulator I tried changing the _linkPressed function to just log "google.com" to the console and that worked. But I can't seem to grok the LinkingIOS procedure.
Thanks!
You need to add http:// before the link url.
<TouchableHighlight onPress={()=> this._linkPressed('http://www.google.com')} >
Check out this example.