I'm trying to make a touch system like Instagram in react-native. How can I determine if the user has touched on the right or left side of the screen? Is it possible to use swipe without extraneous libraries?
You can get the touch coordinates like this:
<View onTouchStart={(e) => {console.log('touchMove',e.nativeEvent)}} />
So you can define on a function it's limits.
Or, you can do it the "Bad way", That would be using 2 transparent touchable views (touchable-opacity, pressable, touchablehighlight) side by side, each one taking half of the screen.
like this (I didn't tested it):
<View style={{flexDirection: 'row', position: 'absolute', flex: 1}}>
<touchableOpacity style={{flex: 1}} onPress={() => console.log('left side clicked')}>
</touchableOpacity>
<touchableOpacity style={{flex: 1}} onPress={() => console.log('right side clicked')}>
</touchableOpacity>
</View>
Related
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.
I want to avoid the onPress={() => onRequestClose()} function working inside the inner View in my react-native project.
While user click on the screen the (whatever the area) onPress={() => onRequestClose()} works, to avoid that I use View inside the 1st TouchableWithoutFeedback and inside the View component I added another TouchableWithoutFeedback. But this is not working.
I'm struggling to find the solution, Is there any method to resolve this matter.
My code as follows
<View style={styles.videoOverlayWrapper}>
<TouchableWithoutFeedback onPress={() => onRequestClose()} style={{width: '100%', height: '100%'}}>
<View><TouchableWithoutFeedback onPress={()=>{}}>{props.children}</TouchableWithoutFeedback></View>
</TouchableWithoutFeedback>
</View>
you can pass null in any onPress, as onPress={() => null} or onPress={null}
<View style={styles.videoOverlayWrapper}>
<TouchableWithoutFeedback onPress={() => null} style={{width: '100%', height: '100%'}}>
</View>
I am trying to build the profile screen of a user on my social networking app. The way I want it is the top 1/3 of the screen is the user profile information, and the bottom 2/3 is a flatlist of all the user's posts. Currently, I have that all working logic wise. Here is a screenshot from the app:
As you can see, the user profile information is displaying up top, and the user's post history is correctly being displayed in a flat list below. However, the flat list is pushing the user profile information "up" on the screen.
Here is the code for the profile:
class Profile extends React.Component {
constructor(props) {
super(props)
this.state = {
user: this.props.user
}
}
goToSettings = () => {
this.props.navigation.navigate('Settings')
}
render() {
return (
<View style={styles.container}>
<View style={{ flexDirection: "row", padding: 20 }}>
<Text style = {styles.subheader}> {this.state.user.username} </Text> <------The username is being pushed up, where only the bottom half of it is visible
<TouchableOpacity
onPress={this.goToSettings}>
<Ionicons name="ios-settings" size={24} color="black" />
</TouchableOpacity>
</View>
<View style = {styles.lineStyle} />
<View style={{ flexDirection: "row" }}>
<ProfilePic/>
<ProfileStats/>
</View>
<View style = {styles.lineStyle} />
<ProfileBio />
<View style = {styles.lineStyle} />
<View style={{ flexDirection: "row", alignItems: 'center', justifyContent: 'center' }}>
<CurrentUserPostFeed navigation = {this.props.navigation} /> <------ This is the flat list. It is pushing up the views & other components that are above it.
</View>
</View>
)
}
}
I want the position of the user profile information to stay in the same postition, taking up the top 1/3 of the screen, while the user can scroll through the flatlist which only takes up the bottom 2/3 of the screen
However, I am not sure how to "lock" the profile information in place, where it is always visible in the top 1/3 of the profile screen, no matter how big/small the flatlist of posts becomes. Any advice?
EDIT: It seems that the margin/padding in the cells of the flatlist are causing my issue. Is there a way that I can prevent the flatlist container from pushing the elements above it "up" when I add marginTop or paddingTop?
You should use the flex property to set which
specifies how much of the remaining space in the flex container should be assigned to the item
More info about the flex property here.
** flex is a shorthand for flex-grow.
So, you can do something like this:
<View> // main container
<View style={{flex: 1}}> // header container
// Header Content
</View>
<View style={{flex: 2}}> // flatlist container
// Flatlist content
</View>
</View>
Basically what we are doing here is setting the header to use 1/3 of the available space of main-container and flatlist to use 2/3 of the available sapce of the main-container.
I'm using React Native Web to build a simple Reddit Clone.
I came across this issue while using a StackNavigator from React Navigation.
The stack 'screen' seems to get calculated by the dimensions of the monitor, instead of the content. So when a screen before the currently navigated screen has a larger height than the current screen, the content is still visible 'behind/below' the stack screen.
My homescreen:
<View style={{ flex: 1, backgroundColor: colors.background }}>
<Button style={{ margin: 5 }} action={() => props.navigation.navigate('CreatePost')}><DText>Create post</DText></Button>
<FlatList
data={getPosts}
renderItem={renderPost}
keyExtractor={item => item.id}
/>
</View>
My createpost screen:
<View style={{ flex: 1, backgroundColor: 'red' }}>
<View style={styles.element}>
<TextInput
placeholder={'Title'}
onChangeText={setTitle}
value={getTitle}
/>
<View style={styles.editor}>
<SlateEditor setBody={setBody} />
</View>
<Button action={() => onCreate(getTitle, getBody)}><DText>Post</DText></Button>
</View>
</View>
Here is an example:
I don't want to the user to be able to scroll on the CreatePost screen.
This is fixed by updating #react-navigation/stack to 5.12.6.
See https://github.com/react-navigation/react-navigation/commit/da35085f1e3440f26eea800c892c88aec64d072f
My all screen has a scrollView, and there's a in the middle of it. I want when someone scroll up, the text be fixed at the top and does not disappear. How can I do that? I didn't find it anywhere, thanks.
<View style={styles.container}>
<Text style={{ position : 'absolute', textAlign: 'center'}}>
Special Text
</Text>
<ScrollView>
</ScrollView>
</View>
you can do something like this
Use css property position: sticky. that will fixed your text at the top it's called sticky position. So, Please read it https://www.w3schools.com/css/tryit.asp?filename=trycss_position_sticky
Be patient.
Cheer you!
i was trying to implement something similar and i got it done but unfortunately it is kinda complex (relatively) at least compared to what you would do on the web. it requires using the onLayout prop.
state = {zIndex: 0};
<View>
<View style={[your_style, {position: "relative", zIndex: this.state.zIndex}]} onLayout={({nativeEvent}) => {this.outTextHeight = nativeEvent.layout.height}}>
<Text>Special Text</Text>
</View>
<View style={{[your_style, {zIndex: 1}]}>
<ScrollView onScroll={({nativeEvent}) => {if(nativeEvent.contentOffset.y >= (this.insideTextHeight + this.insideTextOffsety){this.setState({zIndex: 2})})}}>
// your content
<View onLayout={({nativeEvent}) => {this.insideTextHeight = nativeEvent.layout.height; this.insideTextOffsety = nativeEvent.layout.y}}>// this maybe the same height so may be unnecessary
<Text>Special Text</Text>
</View>
</ScrollView>
</View>
</View>