How to implement a scrollview like an appstore?
I'm going to scroll to the next content, when the scroll is done halfway
You can implement it simple with FlatList, using horizontal and pagingEnabled boolean props and deviceWidth;
import React from 'react';
import { StyleSheet, Dimensions, ScrollView, View, Text } from 'react-native';
const deviceWidth = Dimensions.get('window').width;
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center'
},
page: {
width: deviceWidth
},
});
const Slider = () => (
<View style={styles.container}>
<ScrollView
horizontal
showsHorizontalScrollIndicator={false}
pagingEnabled>
<View style={styles.page}>
<Text> This is View 1 </Text>
</View>
<View style={styles.page}>
<Text> This is View 2 </Text>
</View>
</ScrollView>
</View>
);
The feature or functionality you are looking for is a simple horizontal slider.
Use could use this npm library to get what you are looking for: https://www.npmjs.com/package/react-native-snap-carousel
I recommend using Flatlist which is React-Native's own component.
If you want to swipe the data Horizontally the use the prop horizontal={true} in the Flatlist.
Something like this is what you want?
Source code: https://snack.expo.io/#gusgard/react-native-swiper-flatlist-2
Library: https://www.npmjs.com/package/react-native-swiper-flatlist
Related
I am trying to create an app that changes to one of many images when the image is clicked. I have used touchable opacity and can make the image show an alert when clicked. I just can't get it to change to one of the many others in the file.
Here is all my code so far:
import React from 'react';
import { Component, Stylesheet, useState, TouchableOpacity, Button, View, Text, Image, ScrollView, TextInput, Alert } from 'react-native';
// main part of the app
const App = () => {
var array = [require("./cards/card.png"), require("./cards/card2.png")]
var x = 0
//onclick function
const handlePress = () => {
//some logic
alert("help")
x+=1
}
// what shows up on the app
return (
<ScrollView>
<View>
<Text>{array[x]}</Text>
<Text>{x}</Text>
<View style={{ flexDirection: 'row', justifyContent: 'center' }}>
<TouchableOpacity
onPress={(handlePress)}
>
<Image
style={{
width: 300,
height: 300,
}}
resizeMode="contain"
source={
array[x]
}
/>
</TouchableOpacity>
</View>
</View>
</ScrollView>
);
}
export default App;
The other images that I want the card to change to are in the cards folder. What do I do to make it dynamic and change it to any of the other cards in the folder?
in order to change image or any information in a screen that have been mounted, React have to re-render the screen and put the right information that you want.
To achieve this, you should use React states https://reactnative.dev/docs/state
Your code could be like this:
import React from 'react';
import { Component, Stylesheet, useState, TouchableOpacity, Button, View, Text, Image, ScrollView, TextInput, Alert } from 'react-native';
// main part of the app
const App = () => {
const [card, setCard] = useState(0); //initial state
var array = [
"./cards/card.png",
"./cards/card2.png"
]
//onclick function
const handlePress = () => {
//some logic
//set card state to the next index
setCard( current => current + 1);
//so everytime you click function the state will change and this re-render your component with the new data.
}
// what shows up on the app
return (
<ScrollView>
<View>
<Text>{array[card]}</Text>
<View style={{ flexDirection: 'row', justifyContent: 'center' }}>
<TouchableOpacity
onPress={(handlePress)}
>
<Image
style={{
width: 300,
height: 300,
}}
resizeMode="contain"
source={ require(array[card]) }
/>
</TouchableOpacity>
</View>
</View>
</ScrollView>
);
}
export default App;
I want to render multiple element with different styles but View and child View is not working as div working in html. please guide or share some resources to learn how multiple View work in a return.
import React from 'react'
import { Button, StyleSheet, Text, View,ScrollView } from 'react-native';
export default function Home() {
return (
<View>
<View style={styles.container}>
<Text >
Books are the best Mentors
</Text>
</View>
<View>
<Text style={{backgroundColor:'red'}} >
Books are the best Mentors
</Text>
</View>
</View>
);
};
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center',
},
container2: {
flex: 1,
backgroundColor: '#fff',
position:'absolute',
bottom:0
},
});
TL;DR <div> is not the same as <View>
It looks like the possible issue here is that <div> have different default styling, and you should always remember about this. For example the default value for flexDirection in RN is column, not row like we have with <div>s.
Even though the official RN documentation about View tells us this:
View maps directly to the native view equivalent on whatever platform React Native is running on, whether that is a UIView, <div>, android.view, etc.
We should always keep in mind the specifics of the particular platform we work with.
I would also recommend you to check out this tutorial regarding Flex styling in React Native to get better experience working with it.
I'm new to react-native and was following a tutorial. For some reason, the text in the <Text> tag inside <View> does not show up on the screen when I set flex:1 for the container. But when I comment it out I can see the text.
Here is the code.
import React from 'react';
import { View, Text, StyleSheet, Dimensions} from 'react-native';
export default function SignInScreen(){
return(
<View style = {styles.container}>
<View style ={{marginLeft:20, marginTop:10}}>
<Text style = {styles.title}>Sign-In</Text>
</View>
<View style = {{alignItems:"center",marginTop:10}}>
<Text style = {styles.text1}>Please Enter email address</Text>
</View>
</View>
)
}
const styles = StyleSheet.create({
container: {
flex:1
},
title: {
color:"#ff8c52",
fontSize :20,
fontWeight:"bold"
},
text1: {
color: "#ff8c52",
fontSize:16
}
})
Can someone explain why this is so?
Flexbox fills the area that its parent gives it, so make sure that the parent component also uses flex or has a volume to it.
I am developing a mobile react native expo app. I am using BottomTabNavigator (NavigationContainer). As the name suggests it should appear at the bottom but it is incorrectly appearing on top.
I already have another image (logo.png) on the top of the screen and the navigationbar (or NavigationContainer) is also coming on top and overlapping above the image. Please help me resolve this issue. See my code below:
In the below code MyTabs is the Navigator created from createBottomTabNavigator(). This is incorrectly appearing on top of the screen.
import React from 'react';
import { Image, StyleSheet, Text, View, SafeAreaView, StatusBar, Platform } from 'react-native';
import logo from './assets/logo.png';
import { NavigationContainer } from '#react-navigation/native';
import MyTabs from './navigator/AppNavigator';
export default function App() {
return (
<SafeAreaView style={{ paddingTop: Platform.OS === 'android' ? StatusBar.currentHeight: 0 }} >
<View>
<View style={styles.container}>
<Image source={logo} style={{ width: 100, height: 100 }} />
<Text style={{color: '#888', fontSize: 18, alignItems: 'center'}}>
To share a photo from your phone with a friend or anyone, just press the button below!
</Text>
</View>
<View >
<NavigationContainer >
<MyTabs /> // This is incorrectly coming on top of screen.
</NavigationContainer>
</View>
</View>
</SafeAreaView>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
// justifyContent: 'center',
},
});
The NavigationContainer should be the outermost component in App. This then wraps the Tab.Navigator component (in your case MyTabs), where you create tabs linked to each of your components. Inside your components, you are able to utilize SafeAreaView to then display the image at the top of the screen. Any type of Navigation scheme has to be made the top most component in the hierarchy in react native, wrapping the rest of your components. I've altered your code below:
import React from 'react';
import { Image, StyleSheet, Text, View, SafeAreaView, StatusBar, Platform } from 'react-native';
import { NavigationContainer } from '#react-navigation/native';
import { createBottomTabNavigator } from '#react-navigation/bottom-tabs';
export default function App() {
const Tab = createBottomTabNavigator()
return (
<NavigationContainer >
<Tab.Navigator>
<Tab.Screen name="Home" component={myComponent} />
</Tab.Navigator>
</NavigationContainer>
);
}
const myComponent = () => {
return (
<SafeAreaView style={{ paddingTop: Platform.OS === 'android' ? StatusBar.currentHeight: 0 }} >
<View>
<View style={styles.container}>
<Image source={require('#expo/snack-static/react-native-logo.png')} style={{ width: 100, height: 100 }} />
<Text style={{color: '#888', fontSize: 18, alignItems: 'center'}}>To share a photo from your phone with a friend or anyone, just press the button below!</Text>
</View>
</View>
</SafeAreaView>
)
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
// justifyContent: 'center',
},
});
I was making my custom bottom Navbar for which I am unable to Apply styles on my View component
This is what I am importing
import React, {PureComponent} from 'react';
import {StyleSheet, View, Text} from 'react-native';
import Icon from 'react-native-vector-icons/FontAwesome';
And then in return of render, I am calling it like this (this.something are icons here)
<View styles={headerContainer1}>
<Text> {this.News}</Text>
<Text>{this.home}</Text>
<Text> {this.Exchange}</Text>
<Text> {this.about}</Text>
</View>
Here my Header container looks/and is coming from here
const styles = StyleSheet.create({
headerContainer1 : {
display: "flex",
flexDirection: "row",
alignItems: 'center',
backgroundColor: "red",
borderBottomLeftRadius: 0,
borderBottomRightRadius: 0
}
})
const {
headerContainer1
} = styles;
Here, I have done two things. flexDirection: "row",and backgroundColor: "red" but unfortunately I can't see any of the changes being Applied.
[Question:] What am I missing or doing wrong? I am attaching the image below for reference
First thing in your view you have styles where it should be style. A quick questions, why are you setting a const to the style sheet? Perhaps try bypassing the const and use:
<View style={styles.headerContainer1}>
<Text> {this.News}</Text>
<Text>{this.home}</Text>
<Text> {this.Exchange}</Text>
<Text> {this.about}</Text>
</View>
Or perhaps just fix the view to change styles to style
<View style={headerContainer1}>
<Text> {this.News}</Text>
<Text>{this.home}</Text>
<Text> {this.Exchange}</Text>
<Text> {this.about}</Text>
</View>
I'm not sure why you would do it like this, but I'm sure you have your reasons :>
Just use your Stylesheet like this:
<View style={styles.headerContainer1}>
<Text> {this.News}</Text>
<Text>{this.home}</Text>
<Text> {this.Exchange}</Text>
<Text> {this.about}</Text>
</View>
You just need to reference the Stylesheet, you wouldn't need the second one.
You need to add style={styles.name} in your desire components