I want to move text and images around in react native to custom positions on the webpage. I don't want to use bottom, left, and top etc. because it doesn't land in the same place for different devices.
My code is:
const HomeScreen = ({ navigation }) => {
return (
<View style={styles.container}>
<ImageBackground
style={{width: '100%', height: '100%',}}
source={require('./assets/pexels.jpg')}
>
</ImageBackground>
<Text style={{fontWeight:'600', fontSize: 30}}>
Connect With All Websites On The Internet
</Text>
<Text style={{fontSize: 18}}>Reach 800M Daily Active Users To Whatever Business You Own!</Text>
<TouchableOpacity>
<Text>Log In</Text>
</TouchableOpacity>
<TouchableOpacity>
<Text>Create An Ad</Text>
</TouchableOpacity>
<Button
onPress={() => navigation.navigate('login')}
title="Next Screen"
/>
<StatusBar style="auto" />
</View>
);
};
I haven't moved any of these components around yet they are just sitting in the automatic positions on the webpage. I want to add other images and move it under the image background I already set.
Related
I have the following code:
<View style={{ backgroundColor: 'black'}}>
<ArticleSwipable
ref={swipeableRef}
renderRightActions={this.renderRightActions}
onSwipeableClose={() => console.log('close')}
onSwipeableOpen={loadArticleSwipe}
onSwipeableWillOpen={() =>{ setzIndex(100); }}>
<ArticleScreen
article={article}
navigation={navigation}
scrollRef={scrollRef}
header={<Header
onFavouritePress={toggleFavouriteButton}
favouriteButtonIcon={favouriteButtonIcon} />}
isLoading={isLoading}/>
</ArticleSwipable>
<LoadingComponent opacity={loadingFadeAnim} zIndex={zIndex} isLoading={isLoading} />
</View>
where ArticleSwipable is a react-native-gesture-handler/Swipable component but with overridden close method.
ArticleScreen has the following structure:
<View>
<ScrollView>...</ScrollView>
</View>
My goal is to make the Swipeable Component take the entire screen but now if the content is less than the height of the screen will display the white rectangle at the bottom.
Example
If the content is bigger than the height of the screen then everyting is ok.
How can I get rid of the white rectangle at the bottom?
Try this once :
<View style={{ backgroundColor: 'black' ,flex:1}}>
<ArticleSwipable
ref={swipeableRef}
renderRightActions={this.renderRightActions}
onSwipeableClose={() => console.log('close')}
onSwipeableOpen={loadArticleSwipe}
onSwipeableWillOpen={() =>{ setzIndex(100); }}>
<ArticleScreen
article={article}
navigation={navigation}
scrollRef={scrollRef}
header={<Header
onFavouritePress={toggleFavouriteButton}
favouriteButtonIcon={favouriteButtonIcon} />}
isLoading={isLoading}/>
</ArticleSwipable>
<LoadingComponent opacity={loadingFadeAnim} zIndex={zIndex} isLoading={isLoading} />
</View>
And also this :
<View style={{flex:1}} >
<ScrollView>...</ScrollView>
</View>
I am currently developing an application that enables the user to view sports videos and I would like to implement the following feature :
The user is presented with a list of videos but can only see the next ones if he first views the first ones. At the moment I have simply added a lock on the thumbnail of the videos that should be blocked but the user can still click a bit aside and play the video. I have look through all the props of the package react-native-video but didn't see any that would fit my need. At
Would you have ideas ?
Here is also a sample of the code :
<View style={styles.videoRow}>
<View>
<Video
style={styles.image}
source={{uri: 'https://firebasestorage.googleapis.com/v0/b/roundpower-88ef9.appspot.com/o/BootyAbsPower%2FTuto%2013.mp4?alt=media&token=da011245-fce2-4796-a78b-3abc518c73ef'}}
useNativeControls
resizeMode="contain"
isLooping
onPlaybackStatusUpdate={(playbackStatus) => onPlaybackStatusUpdate3(playbackStatus)}
/>
{!debloque3 ? <View>
<FontAwesome5 name="lock" size={40} color="white" style={styles.icon}/>
</View> : <Text>''</Text>}
</View>
<View>
<Video
style={styles.image}
source={{uri: 'https://firebasestorage.googleapis.com/v0/b/roundpower-88ef9.appspot.com/o/BootyAbsPower%2FTuto%2014.mp4?alt=media&token=cd3d12be-05fd-4fc4-91d9-cd518faf14ce'}}
useNativeControls
resizeMode="contain"
isLooping
onPlaybackStatusUpdate={(playbackStatus) => onPlaybackStatusUpdate4(playbackStatus)}
/>
{!debloque4 ? <View>
<FontAwesome5 name="lock" size={40} color="white" style={styles.icon}/>
</View> : <Text>''</Text>}
</View>
</View>
Yeah, a really easy way you can do this is just prevent the thing you don't want to the user to tap on from receiving any pointerEvents (i.e. touch events).
A really simple quick-and-dirty way of doing this like so:
import * as React from 'react';
import {TouchableOpacity, StyleSheet, View} from 'react-native';
const onPress = () => console.error("I don't want this to happen.");
export default () => (
<View style={[StyleSheet.absoluteFill, styles.center]}>
{/* red box in the middle */}
<View style={{width: 50, height: 50, backgroundColor: 'red'}}>
<TouchableOpacity
onPress={onPress}
style={StyleSheet.absoluteFill}
/>
{/* Obscure the TouchableOpacity with a View which completely covers it */}
{shouldPreventTouches && <View style={StyleSheet.absoluteFill} />}
</View>
</View>
);
Alternatively, you could also just wrap the <Video /> component within a <View /> and useState to toggle between pointerEvents="none" and pointerEvents="auto". Both have the same effect of preventing touch information from being passed to children:
import * as React from 'react';
import {TouchableOpacity, StyleSheet, View} from 'react-native';
const onPress = () => console.error("I don't want this to happen.");
export default () => (
<View style={[StyleSheet.absoluteFill, styles.center]}>
{/* red box in the middle */}
<View
pointerEvents={shouldPreventTouches ? 'none' : 'auto'}
style={{width: 50, height: 50, backgroundColor: 'red'}}>
<TouchableOpacity
onPress={onPress}
style={StyleSheet.absoluteFill}
/>
</View>
</View>
);
Depends what you prefer.
You could reuse the logic you have for showing the lock or not on the video element, and render the video only if it is unlocked.
<View>
{
debloque ? <Video/> : <FontAwesome5 name="lock" size={40} color="white" style={styles.icon} />
}
</View>
Alternatively you could set the source of the video to null until it is unlocked, to initialize the player but prevent anything to be played, according to the docs.
touchable opacity inside the caaout not working.Actually, i need to hide the custom callout view once the close button inside the same callout is clicked.Unfortunately, my function is not fire whicle clicking on the close button
`
const closeinforwindow=(e)=>{
console.log("close button is clicked");
}
<SafeAreaView style={{flex: 1}}>
<View style={Interfacestyle.container}>
<MapView mapType="satellite" style={Interfacestyle.map} region={getInitialState()}>
{markers.map((marker, key) => {
return(
<Marker
key={key}
coordinate={marker.latlng}
title={marker.title}
description={marker.description}
calloutOffset={{ x: -8, y: 10 }}
calloutAnchor={{ x: 0.5, y: 0.2 }}
>
<Image source={{uri: marker.image}} style={{width: 42, height: 42,transform: [{ rotate : `${marker.heading} deg`}]}}/>
<Callout tooltip >
<View style={[Interfacestyle.info_windowwrapper]}>
<View style={[Interfacestyle.info_windowcontainer]}>
<View style={[Interfacestyle.inforwwindowheader]} >
<View style={{width:"92%",alignItems:'center'}}><Text style={[Interfacestyle.inforwwindowheadertext]}>{marker.name}</Text></View>
<View style={[Interfacestyle.menuicon]}>
<TouchableHighlight onPress={(e)=>{closeinforwindow(e)}}>
<Icon name="close" color="#fff" size={16} />
</TouchableHighlight>
</View>
</View>
</View>
</Callout>
</Marker>
)
})}
</MapView>
<View>
</SafeAreaView
`
Kindly help me.
This is an old thread, but it still seems relevant: https://github.com/react-native-maps/react-native-maps/issues/226#issuecomment-220356079
Android map callouts don't support buttons inside of them, only an onPress event for the entire callout. This is a limitation of the Google Maps library on Android and react-native-maps can't do anything about it.
Sounds like you'll either need to ditch the functionality or refactor your approach to use the onPress event for Callout.
I've got two Touchables that overlap. Clicking the overlapping area makes them both fire. I want only the child onPress event to trigger (i.e. only the onUpVote/onDownVote function).
<TouchableHighlight onPress={onPress} underlayColor={colors.focus}>
<View style={styles.container}>
<AppText>{question.content}</AppText>
<View style={styles.voteContainer}>
<UpVoteButton
voted={voted}
voteCount={question.upVotes}
onPress={onUpVote}
/>
<DownVoteButton
voted={false}
voteCount={question.downVotes}
onPress={onDownVote}
/>
</View>
</View>
</TouchableHighlight>
and that's the VoteButton element
<TouchableWithoutFeedback onPress={onPress}>
<View style={styles.voteContainer}>
<AppText style={styles.voteCount}>{voteCount}</AppText>
<AntDesign
name={voted ? "like1" : "like2"}
style={{
fontSize: 18,
color: defaultStyles.colors.focus,
paddingBottom: 3,
}}
/>
</View>
</TouchableWithoutFeedback>
The idea is that if the user presses the thumbs up/down icon area then the onDownVote gets handled. Pressing anywhere else within the list item is supposed to take you to a different screen.
App layout
I'd suggest to import TouchableOpacity from here:
https://github.com/software-mansion/react-native-gesture-handler
Both overlapping touchables should fire onPress prop
I am new to react native .what I want is that in my app there is many images in each menu .when I click on the image I want to view the image in the screen size .the thing is when I click on every image I want it to Direct to a single page and call the image from there ..how is it possible to pass image variable from different pages to a single page..the so far did image view single page render is like below:,when the image component is did so it only views the first image not the other .what is the solution?
render() {
this.state.incident = this.props.navigation.getParam('incidents','hi!!');
this.state.tenantattachedagreement = this.props.navigation.getParam('tenantattach','hi!!!')
// this.state.residents = this.props.navigation.getParam('residents','');
// this.state.tenantattachedagreement = this.props.navigation.getParam('attachedagreement','');
// console.log("attached agreement",this.state.tenantattachedagreement);
// incidents = this.props.navigation.getParam('incidents,'');
// console.log("hello",attached);
// console.log("l&f pic",this.state.lostfound);
console.log("incidentpic",this.state.incident);
console.log("tenantattach",this.state.tenantattachedagreement);
// console.log("residents",this.state.residents);
return (
<View style={{flex:1}}>
<StatusBar
barStyle = "light-content"
hidden = {false}
backgroundColor = "#32ACFD"
translucent = {false}
networkActivityIndicatorVisible = {true}
/>
<View style={{flexDirection:'row',height:50,width:'100%',justifyContent:'center',alignItems:'center',backgroundColor:'#32ACFD',elevation:5,borderBottomWidth:1,borderColor:'#5b9bd5'}}>
<TouchableOpacity onPress={()=>{this.props.navigation.goBack()}} style={{height:'100%',width:'12%',justifyContent:'center',alignItems:'center'}}>
<Icon name="angle-left" style={{fontSize:25,color:'white'}}/>
</TouchableOpacity>
<TouchableOpacity onPress={()=>{this.props.navigation.navigate('DashBoard')}} style={{width:'33%',height:'100%',justifyContent:'center'}}>
<Text style={{color:'white',fontSize:18,textShadowColor: 'grey',paddingLeft:'5%',fontWeight:'500',fontStyle:'normal',textShadowRadius:5,textShadowOffset: {width: -1, height: 1}}}>Smart Vitae</Text>
</TouchableOpacity>
<View style={{width:'35%',height:'100%',justifyContent:'center',alignItems:'center'}}>
<Text style={{color:'white'}}>Unit: {this.state.unitname}</Text>
</View>
<TouchableOpacity onPress={()=>{this.props.navigation.navigate('Notification')}} style={{width:'10%',height:'100%',justifyContent:'center',alignItems:'center'}}>
<Icon name="bell-o" style={{color:'white',fontSize:22}}/>
</TouchableOpacity>
<TouchableOpacity onPress={()=>{this.props.navigation.navigate('Settings')}} style={{width:'10%',height:'100%',justifyContent:'center',alignItems:'center'}}>
<Icon name="cog" style={{color:'white',fontSize:24}}/>
</TouchableOpacity>
</View>
<View>
<View style={{height:'100%',width:'100%',justifyContent:'center',alignItems:'center',borderColor:'#2E4053'}}>
<Image source={{uri:this.state.residents}} style={{height:'100%',width:'100%'}}></Image>
<Image source={{uri:this.state.lostfound}} style={{height:'100%',width:'100%'}}></Image>
<Image source={{uri:this.state.tenantattachedagreement}} style={{height:'100%',width:'100%'}}></Image>
<Image source={{uri:this.state.incident}} style={{height:'100%',width:'100%'}}></Image>
</View>
</View>
</View>
);
}
}
I believe this is a styling issue, you have multiple images all trying to fill 100%
<Image source={{uri:this.state.residents}} style={{height:'100%',width:'100%'}}></Image>
Try using flex or updating your height, like this:
<Image source={{uri:this.state.residents}} style={{height:'25%',width:'100%'}}></Image>