I'm new to react native, and I'm trying to put a horizontal scrollview on my screen.
I've tried to put <ScrollView horizontal={true}> but it's not working at all, I want the blue box scrollable.
here' the image of my screen :
and this for my component code :
import React from 'react';
import {View, StyleSheet, Text, Image, ScrollView} from 'react-native';
export default function Body() {
return (
<View>
<View style={styles.jadwal}>
<ScrollView horizontal={true}>
<View style={styles.box}>
<Text style={styles.title}>Math</Text>
<View style={styles.wrap}>
<View style={styles.alert}>
<Text style={styles.pr}>3 Homework</Text>
<Image
style={styles.img}
source={require('../assets/math.png')}
/>
</View>
</View>
</View>
<View style={styles.box}>
<Text style={styles.title}>Biology</Text>
<View style={styles.wrap}>
<View style={styles.alert}>
<Text style={styles.pr}>10 Homework</Text>
<Image
style={styles.img}
source={require('../assets/math.png')}
/>
</View>
</View>
</View>
</ScrollView>
</View>
</View>
);
}
const styles = StyleSheet.create({
jadwal: {
marginLeft: 10,
flexDirection: 'row',
justifyContent: 'flex-start',
position: 'absolute',
},
box: {
height: 100,
width: 230,
borderRadius: 10,
backgroundColor: '#327fe3',
marginLeft: 10,
},
alert: {
height: 20,
marginLeft: 15,
width: 80,
borderRadius: 10,
backgroundColor: '#7CD5FF',
},
title: {
marginTop: 20,
marginLeft: 20,
fontFamily: 'MontserratSemiBold',
fontSize: 15,
color: '#fff',
},
pr: {
marginLeft: 14,
fontSize: 8,
color: '#fff',
marginTop: 4,
justifyContent: 'flex-start',
fontFamily: 'MontserratLight',
},
wrap: {
marginTop: 5,
},
img: {
height: 50,
width: 50,
marginLeft: 140,
marginTop: -35,
},
});
is there anything wrong ?, did I put the <ScrollView> on wrong position ?
Thanks for reading this, and sorry for my bad english.
There's one error of font-family cause, this font is not installed in my laptop.
Overall your scroll view is working fine.
Note: scroll view is scrolling area is in between the opening and closing tag of scroll.
Related
I'm quite new to react native and javascript and I have to make this type of progress bar with the four categories.
Can anyone help or suggest to me how can I achieve this UI in react native for android and iOS on both platforms?
The expected output screenshot is attached below:
However, I don't need the user interaction or progress animation, I just have to show the fix progress in percentage.
Here's an approximation of your component built in React Native, you'll need to add react-native-linear-gradient to your dependencies beforehand
I have also created a demo on Expo (you should test it on the target device) that uses expo's version of the linear gradient library. https://snack.expo.dev/#sabihi/milestone-progressbar
import * as React from 'react';
import { Text, View, StyleSheet } from 'react-native';
import LinearGradient from 'react-native-linear-gradient';
export default function App() {
return (
<View style={styles.container}>
<View style={styles.progressLabels}>
<Text style={styles.progressLabel}>Beginner</Text>
<View style={styles.progressLabel}></View>
<Text style={styles.progressLabel}>Amateur</Text>
<View style={styles.progressLabel}></View>
<Text style={styles.progressLabel}>Elite</Text>
<View style={styles.progressLabel}></View>
<Text style={styles.progressLabel}>Master</Text>
</View>
<View style={styles.progressContainer}>
<LinearGradient colors={["rgb(7, 14, 60)", "rgb(86, 90, 106)"]} style={styles.progress}/>
<View style={styles.milestonesContainer}>
<View style={styles.milestone}/><View style={styles.milestone}/><View style={styles.milestone}/>
</View>
</View>
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
// paddingTop: Constants.statusBarHeight,
backgroundColor: '#ecf0f1',
padding: 8,
},
progressLabels: {
display: "flex",
flexDirection: "row",
justifyContent: "space-between",
width: "100%",
marginBottom: 10,
},
progressLabel: {
fontSize: 12,
fontWeight: 'bold',
fontFamily: "sans-serif",
width: "14.3%",
textAlign: "center"
},
progressContainer: {
position: "relative",
height: 100
},
progress: {
marginLeft: "5%",
marginTop: 5,
width: "90%",
height: 30,
// backgroundColor: "rgb(7, 14, 60)",
borderRadius: 15
},
milestonesContainer: {
marginLeft: "5%",
position: "absolute",
width: "100%",
display: "flex",
flexDirection: "row"
},
milestone: {
height: 40,
width: "30%",
// backgroundColor: "white",
borderColor: "rgb(7, 14, 60)",
borderLeftWidth: 1,
borderRightWidth: 1,
}
});
One of my React Native screens needs to have a TouchableOpacity at the bottom of the screen. I've tried setting position: "absolute" and bottom: 0, however, this just causes the element to be a few hundred pixels below the screen. How can I make my TouchableOpacity be at the bottom of the screen all the time?
<View style={styles.mainView}>
<View style={{ position: "relative" }}>
<TouchableOpacity style={styles.cartView}>
<Text style={styles.cartText}>View cart</Text>
</ViewTouchableOpacity
</View>
}
/>
</View>
//styles
const styles = StyleSheet.create({
mainView: {
// devDims are the device dimensions
minHeight: devDims.height,
minWidth: devDims.width,
backgroundColor: "white",
paddingLeft: 10,
paddingRight: 10,
paddingTop: 10,
},
cartView: {
justifyContent: "center",
alignItems: "center",
maxHeight: 50,
minWidth: "100%",
alignSelf: "center",
marginTop: 50,
padding: 10,
borderRadius: 20,
},
cartText: {
fontFamily: "semi",
fontSize: 22,
},
});
We could handle this without absolute positioning using flex alone.
Add flex:1 to the parent view and to the view that wraps the sticky bottom. Then, add flex: 2 to the view that wraps the other content.
Here is a minimal generic component that lets you add a sticky bottom component.
const MainScreen = ({bottom, children}) => {
return <View style={{flex: 1, backgroundColor: 'red'}}>
<View style={{flex: 2, backgroundColor: 'green'}}>
{children}
</View>
<View style={{flex: 1, backgroundColor: 'yellow'}}>
{bottom}
</View>
</View>
}
export default function App() {
return <MainScreen bottom={
<TouchableOpacity style={styles.cartView}>
<Text style={styles.cartText}>View cart</Text>
</TouchableOpacity>}>
</MainScreen>
}
The result looks as follows:
However, we can use absolute positioning as well. You are just missing the flex: 1 for the parent view.
export default function App() {
return <View style={styles.mainView}>
<View style={{ position: "absolute", bottom: 0 }}>
<TouchableOpacity style={styles.cartView}>
<Text style={styles.cartText}>View cart</Text>
</TouchableOpacity>
</View>
</View>
}
const styles = StyleSheet.create({
mainView: {
flex: 1,
// devDims are the device dimensions
minHeight: devDims.height,
minWidth: devDims.width,
backgroundColor: "red",
paddingLeft: 10,
paddingRight: 10,
paddingTop: 10,
},
cartView: {
justifyContent: "center",
alignItems: "center",
maxHeight: 50,
minWidth: "100%",
backgroundColor: "yellow",
alignSelf: "center",
marginTop: 50,
padding: 10,
borderRadius: 20,
},
cartText: {
fontFamily: "semi",
fontSize: 22,
},
});
The result is as follows:
if you are using position as absolute then your view must be last view before last closed view tag
When you have declared any view at bottom of the screen then you should be do like this
import {View, SafeAreaView} from 'react-native';
<SafeAreaView style={{flex:1}}>
<View style={{flex:1}}>
<!---Anything extra views---!>
<View style={{bottom:0,position:'absolute',start:0,end:0}}> !-- you're bottom view
<TouchableOpacity style={styles.cartView}>
<Text style={styles.cartText}>View cart</Text>
</ViewTouchableOpacity
</View>
</View>
</SafeAreaView >
I'm having a problem to stretch the text input fully till the whole "item.membername" comes into a row like created UI. Currently the "item.membername" goes to second line because of a long string membername. Please do help me out. Below I have attached the UI pictures along with code.
Created UI:
Current UI:
ApprovedScreen.js
import React, {useState} from 'react';
import {GrayCustomView} from './../components/styles';
import {View, Text, TouchableOpacity, Image, FlatList} from 'react-native';
import GlobalStyle from '../components/GlobalStyle';
import {ApprovedReceiptData} from '../constants/dummy'
import { useNavigation } from '#react-navigation/native';
const ApprovedReceiptScreen = () => {
const navigation = useNavigation();
const renderItem = ({item}) => (
<GrayCustomView>
{item.membername === 'No Receipt History' ? (
<TouchableOpacity style={[GlobalStyle.ApprovedButtonContainer]}>
<View style={[GlobalStyle.ReceiptUpperContainer]}>
<Text style={[GlobalStyle.ReceiptDetails5]}>{item.membername}</Text>
</View>
</TouchableOpacity>
) : (
<TouchableOpacity style={[GlobalStyle.ApprovedButtonContainer]} activeOpacity={0.8} onPress={() => {navigation.navigate('ReceiptDetailsScreen',{migrateData: item});}}>
<View style={[GlobalStyle.LeftContainer]}>
<View style={[GlobalStyle.UpperContainer]}>
<View style={[GlobalStyle.ReceiptHeader]}>
<Text style={[GlobalStyle.ReceiptListTitle]}>{item.receiptnum}</Text>
</View>
</View>
<View style={[GlobalStyle.LowerLeftContainer]}>
<View style={[GlobalStyle.ReceiptImageView]}>
<Image style={[GlobalStyle.ReceiptImageList]} source={{uri: item.memberImage}}/>
</View>
<View style={[GlobalStyle.LowerRightContainer]}>
<Text style={[GlobalStyle.ReceiptDetails1]}>{item.membername}</Text>
<Text style={[GlobalStyle.ReceiptDetails1]}>{item.date}</Text>
</View>
</View>
</View>
<View style={[GlobalStyle.RightContainer]}>
<View style={[GlobalStyle.RightUpperContainer]}>
<Text style={[GlobalStyle.ReceiptListTitle1]}>{item.points}</Text>
</View>
<View style={[GlobalStyle.RightLowerContainer]}>
<Text style={[GlobalStyle.ReceiptDetails4]}>{item.receiptamount}</Text>
</View>
</View>
</TouchableOpacity>
)}
</GrayCustomView>
)
Globalstyle.js
ApprovedButtonContainer:{
width: DEVICE_WIDTH * 0.86,
height: DEVICE_HEIGHT * 0.20,
backgroundColor: white,
elevation: 11,
marginLeft: 30,
borderRadius: 6,
marginBottom: 10,
marginTop: 20,
flexDirection: 'row'
},
LeftContainer:{
flex: 2
},
UpperContainer:{
flex: 1,
justifyContent: 'center',
paddingHorizontal: 5,
},
ReceiptImageList:{
width: DEVICE_WIDTH * 0.15,
height: DEVICE_HEIGHT * 0.09,
backgroundColor: empty,
borderRadius: 6,
marginTop: 10,
marginLeft: 5
},
LowerLeftContainer:{
flex: 2,
flexDirection: 'row',
},
ReceiptImageView:{
flex: 1,
padding: 5
},
LowerRightContainer:{
flex: 2,
justifyContent: 'center',
paddingHorizontal: 5,
},
ReceiptDetails1:{
color: black,
fontSize: 14,
fontWeight: 'normal',
backgroundColor: empty,
},
RightContainer:{
flex: 1,
},
RightUpperContainer:{
flex: 1,
alignItems: 'center',
justifyContent: 'center',
},
ReceiptListTitle1:{
color: black,
fontWeight: 'bold',
fontSize: 17
},
RightLowerContainer:{
flex: 2,
alignItems: 'center',
justifyContent: 'center',
},
ReceiptDetails4:{
color: black,
fontSize: 22,
fontWeight: 'bold',
},
ReceiptListTitle:{
color: black,
fontSize: 17,
fontWeight: 'bold',
},
})
I have a react native project I am building. On the home screen I want to render a list of components called PropertyTile with some text in between just for testing. With my current code, it is rendering the first instance of the PropertyTile, but not rendering anything after that. It is extremely wierd and I can not find a solution to this issue for some reason. Why would it only show the first PropertyTile without rendering anything else.
Code:
import React from 'react'
import { View, Text, StyleSheet } from 'react-native'
import PropertyTile from '../components/PropertyTile.js'
const HomeScreen = () => {
return (
<View style={styles.screenContainer}>
<PropertyTile/>
<Text>Home Screen: Shows currentl asdfasdf!</Text>
<Text>Home Screen: Shows currentl fe!</Text>
<PropertyTile />
</View>
)
}
const styles = StyleSheet.create({
header: {
fontSize: 22
},
screenContainer: {
display: 'flex',
flexDirection: 'column'
}
})
export default HomeScreen
current screen rendering
PropertyTile Code:
import React from 'react'
import { Dimensions } from 'react-native'
import { View, Text, StyleSheet, Image } from 'react-native'
export default function PropertyTile() {
let deviceWidth = Dimensions.get('window').width - 16
var aspectHeight = (deviceWidth / 1.78) + 1
return (
<View style={styles.container}>
<View style={[styles.imageContainer,{height: aspectHeight}]}>
<Image style={styles.mainImage} source={require('../../assets/luxury-home-1.jpeg')}/>
</View>
<View style={styles.contentContainer}>
<View style={styles.priceContainer}>
<Text style={styles.price}>$ 1,259,999</Text>
<Text style={styles.status}>For Sale</Text>
</View>
<View style={styles.addressContainer}>
<Text style={styles.address}>23 Lowlette Lane.</Text>
<Text style={styles.address}>Mission Viejo, CA 92692</Text>
</View>
<View style={styles.separator}></View>
<View style={styles.details}>
<Text style={styles.summary}>6 Beds | 6 Baths | 10,000 Sqft. | 1.3 acre Lot</Text>
<Text style={styles.homeType}>Single Family Residence</Text>
</View>
<View style={styles.separator}></View>
<View style={styles.details}>
<View style={styles.metricContainer}>
<Text style={styles.metricName}>Net Operating Income (Monthly): </Text>
<Text style={styles.metricValue}>$5,789</Text>
</View>
<View style={styles.metricContainer}>
<Text style={styles.metricName}>Cash on Cash Return: </Text>
<Text style={styles.metricValue}>2.45%</Text>
</View>
<View style={styles.metricContainer}>
<Text style={styles.metricName}>Return on Initial Investment: </Text>
<Text style={styles.metricValue}>9.97%</Text>
</View>
</View>
<View style={styles.disclaimerContainer}>
<Text style={styles.disclaimer}>*** 30 year fixed, 20% down, 3.14% interest rate | $3,443 rent ***</Text>
</View>
</View>
</View>
)
}
const styles = StyleSheet.create({
container: {
height: '100%',
paddingTop: 8,
paddingHorizontal: 8,
borderRadius: 6,
overflow: 'hidden'
},
imageContainer: {
width: '100%',
borderTopLeftRadius: 6,
borderTopRightRadius: 6,
overflow: 'hidden'
},
mainImage: {
width: '100%',
height: '100%'
},
contentContainer: {
width: '100%',
backgroundColor: '#D3D3D3',
borderBottomLeftRadius: 6,
borderBottomRightRadius: 6,
overflow: 'hidden',
paddingHorizontal: 8
},
priceContainer: {
display: 'flex',
flexDirection: 'row',
alignItems: 'center',
justifyContent: 'space-between',
paddingTop: 8,
},
price: {
fontWeight: 'bold',
fontSize: 24
},
addressContainer: {
display: 'flex',
marginTop: 8
},
address: {
fontSize: 14
},
separator: {
marginHorizontal: '3%',
marginVertical: 8,
height: 2,
width: '94%',
backgroundColor: 'grey'
},
homeType: {
marginTop: 4,
},
metricContainer: {
display: 'flex',
flexDirection: 'row',
justifyContent: 'space-between',
marginTop: 4
},
metricValue: {
fontWeight: 'bold'
},
disclaimerContainer: {
display: 'flex',
flexDirection: 'row',
marginVertical: 8,
width: '100%',
justifyContent: 'center',
},
disclaimer: {
fontSize: 12,
}
})
I believe that your aspectHeight variable in your PropertyTile component is preventing the second instance from appearing. aspectHeight is applying a height that spans the height of the screen, pushing the other instances out of view.
You can try wrapping your HomeScreen in a ScrollView so you can see all of the elements that render below the screen's window, like this:
import React from 'react'
import { View, Text, StyleSheet, ScrollView } from 'react-native'
import PropertyTile from '../components/PropertyTile.js'
const HomeScreen = () => {
return (
<ScrollView>
<View style={styles.screenContainer}>
<PropertyTile/>
<Text>Home Screen: Shows currentl asdfasdf!</Text>
<Text>Home Screen: Shows currentl fe!</Text>
<PropertyTile />
</View>
</ScrollView>
)
}
When adding horizontal={true} to my scrollview, I thought that would be enough to be able to scroll sideways. For some reason, even though there is enough content to scroll to, the images will not scroll continuously. If you copy and paste this code into snack.expo.io you will see what I mean.
I am not sure what is causing this issue, as I know the normal scrollview vertically works fine and scrolls like normal. I have also tried using nestedScrollenabled to true
Any insight at all is appreciated more than you know!
import React, { useState } from 'react';
import {Pressable, StyleSheet, Text, View, useWindowDimensions, Dimensions, Image, Animated, PanResponder,
TouchableOpacity, ScrollView, ImageBackground, Platform} from 'react-native';
import { SearchBar } from 'react-native-elements';
import {
scale,
verticalScale,
moderateScale,
ScaledSheet,
} from 'react-native-size-matters';
import { MaterialCommunityIcons } from '#expo/vector-icons';
const Images = [
{ id: '1', uri: require('./assets/snack-icon.png'), text: 'Test' },
{ id: '2', uri: require('./assets/snack-icon.png') /*text: "Test"*/ },
{ id: '3', uri: require('./assets/snack-icon.png') /*text: "Test"*/ },
{ id: '4', uri: require('./assets/snack-icon.png') /*text: "Test"*/ },
]
const pressableTest = () => {
let textlog = '';
const [state, setState] = useState(0);
};
export default class Home extends React.Component {
renderImagesHorizontal = () => {
return Images.map((item, i) => {
return (
<View
style={{
width : '150%',
paddingLeft: scale(10),
paddingRight: scale(10),
paddingBottom: scale(15),
}}>
<TouchableOpacity
onPress={() => this.props.navigation.navigate('VenueDetails')}>
<ImageBackground
source={item.uri}
style={{
width: '100%',
height: scale(225),
shadowColor: '#000',
shadowOffset: { width: 1, height: 4 },
shadowOpacity: 1,
}}
imageStyle={{ borderRadius: 10 }}>
<View
style={{
position: 'absolute',
bottom: 10,
left: 10,
justifyContent: 'flex-start',
alignItems: 'flex-start',
}}>
<Text style={styles.name}>Name</Text>
<View style={{ flexDirection: 'row', alignItems: 'center' }}>
<Text style={styles.category}>Category</Text>
<Text style={styles.dot}>⬤</Text>
<Text style={styles.money}>$$</Text>
<Text style={styles.dot}>⬤</Text>
<Text style={styles.starRating}>★★★</Text>
</View>
</View>
</ImageBackground>
</TouchableOpacity>
</View>
);
});
};
renderImagesVertical = () => {
return Images.map((item, i) => {
return (
<View style={{ paddingLeft: scale(10), paddingRight: scale(10), paddingBottom: scale(20) }}>
<TouchableOpacity
onPress={() => this.props.navigation.navigate('VenueDetails')}>
<ImageBackground
source={item.uri}
style={{ width:'100%', height: scale(125),
shadowColor: '#000',
shadowOffset: {width: 1, height: 7},
shadowOpacity: 1,}} imageStyle = {{ borderRadius: 20}}>
<View
style={{
position: 'absolute',
bottom: 10,
left: 10,
justifyContent: 'flex-start',
alignItems: 'flex-start',
}}>
<Text style={styles.name}>Name</Text>
<View style={{ flexDirection: 'row', alignItems: 'center' }}>
<Text style={styles.category}>Category</Text>
<Text style={styles.dot}>⬤</Text>
<Text style={styles.money}>$$</Text>
<Text style={styles.dot}>⬤</Text>
<Text style={styles.starRating}>★★★</Text>
</View>
</View>
</ImageBackground>
</TouchableOpacity>
</View>
);
});
};
state = {
search: '',
};
updateSearch = (search) => {
this.setState({ search });
};
render() {
const { search } = this.state;
return (
<ScrollView style={{ flex: 1, backgroundColor: '#272933', horizontal: 'true' }}>
<View style={{flexDirection:'row', marginTop: scale(20)}}>
{/*this will proabbly say somethign different and probably have a different look to it but you get the idea
I was also trying to add a shadow to this but couldnt figure it out. */}
<Text style={{marginTop: scale(30) ,fontSize: scale(40), fontWeight: 'bold', color: '#FFFFFF', paddingLeft: scale(20)}}>
Home
</Text>
<View style={{paddingTop: scale(40), paddingLeft: scale(155)}}>
</View>
</View>
<SearchBar
placeholder="Search..."
onChangeText={this.updateSearch}
value={search}
round='true'
containerStyle={{backgroundColor: '#272933', borderBottomColor: 'transparent', borderTopColor: 'transparent',
paddingLeft: scale(20) , paddingRight: scale(20)}}
inputContainerStyle={{height: scale(30), width: scale(310), backgroundColor: '#3A3B3C'}}
searchIcon={() => <MaterialCommunityIcons name="glass-mug-variant" size={25} color='#87909A'/>}
clearIcon= 'null'
/>
<ScrollView
horizontal={true}
>
<View style={{ flex: 1, flexDirection : 'row', marginTop: 15 }}>{this.renderImagesHorizontal()}</View>
</ScrollView>
<View style={{ flex: 1, marginTop: 15 }}>{this.renderImagesVertical()}</View>
</ScrollView>
);
}
}
const styles = ScaledSheet.create({
starRating: {
color: 'white',
fontSize: '20#s',
textShadowOffset: { width: 2, height: 2 },
textShadowRadius: 2,
textShadowColor: '#000',
},
category: {
color: 'white',
fontSize: '20#s',
textShadowOffset: { width: 2, height: 2 },
textShadowRadius: 2,
textShadowColor: '#000',
},
name: {
fontWeight: 'bold',
color: 'white',
fontSize: '25#s',
textShadowOffset: { width: 2, height: 2 },
textShadowRadius: 2,
textShadowColor: '#000',
},
dot: {
color: 'white',
fontSize: '5#s',
paddingLeft: '5#s',
paddingRight: '5#s',
textShadowOffset: { width: 2, height: 2 },
textShadowRadius: 2,
textShadowColor: '#000',
},
money: {
color: 'white',
fontSize: '20#s',
},
});
in android you must add nestedScrollEnabled={true} to Enables nested scrolling for Android API level 21+. see here
<ScrollView>
<ScrollView nestedScrollEnabled={true}>
</ScrollView>
</ScrollView>
try snack here (test in android & ios not web)