I am new in react native and I have to design a screen and when list going longer I realised my scroll view is not working here is below my code please share suggestion...Thanks!
<View style={{flex:1}}>
<ActionBar
containerStyle={{height:60,alignItems: 'center'}}
backgroundColor={'#fff'}
title={'Select Categories'}
titleStyle={styles.pageTitle}
onLeftPress={() => goBack()}
leftIconContainerStyle={{marginTop:22}}
leftIconName={'back'}
leftIconImageStyle={{backgroundColor:'#333',height:18,width:18}}
/>
<Image source={require('../images/bg-login.jpg')}
style={{position:'absolute',left:0,right:0,top:0,bottom:0}} />
<ScrollView style={{backgroundColor:'#00000000',position:'absolute',left:0,right:0,top:0,bottom:0}} >
{views}
</ScrollView>
<View style={styles.footerSec}>
<TouchableOpacity style={styles.nextBtn}
onPress={()=> {this.props.navigation.navigate('Tutorials',{tutId:this.state.selectedCats})}}>
<Text style={[styles.btnText, styles.priceText]}>Next</Text>
</TouchableOpacity>
</View>
</View>
Here is my list code:
<TouchableOpacity key={itemData[j]._id}
onPress = {() => {
activeItem ? this.removeCat(itemData[j]._id) : this.insertCat(itemData[j]._id)
}}>
<View style={{position:'relative'}}>
<LinearGradient colors={activeItem ? ['#cb5fb1', '#f874d8', '#f98bde'] :['#ffb6cf','#ffb6cf','#ffb6cf'] } style={{
position: 'absolute',
alignItems: 'center',
justifyContent:'center',
backgroundColor: '#f673d7',
width: armSize,
height: armSize,
borderRadius: (armSize) / 2,
top: topp,
left: leftp,
}}>
<Text style={{
color: '#fff',
alignSelf:'center',
fontSize: RandomNumber,
fontWeight: '600',
}}>
{itemData[j].name}
</Text>
</LinearGradient>
</View>
</TouchableOpacity>
I designed below screen but the scroll view bounce and come up on same position...I think this is because of child position style but it's required for the circle in row. I can't scroll for below circles that's the issue.
You could use normal Image to put a background image using position='absolute' and setting background color opacity of ScrollView to #00000000 which means that will be transparent
Example
<Image
source={require('../images/bg-login.jpg')}
style={{position:'absolute',
left:0,
right:0,
top:0,
bottom:0}} />
<ScrollView
style={{backgroundColor:'#00000000',
position:'absolute',
left:0,
right:0,
top:0,
bottom:0}} >
<View>
<Text>Some content</Text>
</View>
</ScrollView>
For the scroll view issues I used below code and it's working fine everywhere
<ScrollView contentContainerStyle={{ paddingBottom: 120 }}>
---code---
</ScrollView>
Related
I'm new to react native and i'm trying to display some text in a custom touchable opacity. but the text keep exceeding the border even when i'm using flex wrap. my code is the following:
<View style={styles.main_container} >
<View style={styles.ctr1}>
<TouchableOpacity style={{ flexDirection: 'row' }} >
<Image style={styles.img} source={{ uri:`data:image/gif;base64,${encodedData}`}}/>
<View>
<Text style={styles.txt}> k </Text>
<Text style={{ flexWrap:1 }} > ddddddddddddddddddddddddddddddddddddddddd </Text>
<Text> kk </Text>
</View>
</TouchableOpacity>
</View>
</View>
and here is look of the styles i used:
main_container: {
flex: 1,
height: 300,
flexDirection: 'column',
backgroundColor: "grey",
width: '95%',
margin: 10,
},
ctr1: {
flex: 1,
flexDirection: 'row',
backgroundColor: 'white',
//margin: 2,
},
How can i wrap it
Issue was not in the <Text> element that you have given the style flexWrap:1. Problem was in the parent elements.
Adding flex: 1 to <TouchableOpacity> and <View> which contains your <text> will solve the problem.
This will do the calculation for width depends on the device width.
<View style={styEdit.main_container}>
<View style={styEdit.ctr1}>
<TouchableOpacity style={{ flexDirection: 'row', flex: 1 }} >
<Image style={styles.img} source={{ uri:`data:image/gif;base64,${encodedData}`}}/>
<View style={{ flexDirection: 'column', flex: 1 }}>
<Text style={styEdit.txt}>k</Text>
<Text>ddddddddddddddddddddddddddddddddddddddddd---</Text>
<Text>kk</Text>
</View>
</TouchableOpacity>
</View>
</View>
Tested the code in my machine.
Cheers!
I am new to react naive and am trying to place two views one under the other but when I try doing this there is a big gap between the views as shown below.
This anyway to be able to fix this or do I need to use flatlist?
Here is my code.
render() {
return (
<>
<View style={{ flex: 1, flexDirection: "row", height: 130 }}>
<View style={styles.IconImage}>
<TouchableOpacity
onPress={() =>
Linking.openURL("http://facebook.com/")
}
>
<FontAwesome
name="location-arrow"
size={40}
color={"#E8AA65"}
/>
</TouchableOpacity>
</View>
<View style={{ paddingTop: 50, paddingLeft: 40 }}>
<Text style={{ fontSize: 20 }}>Find Us</Text>
</View>
</View>
<View style={{ flexDirection: "row", height: 130 }}>
<View style={styles.IconImage}>
<TouchableOpacity
onPress={() =>
Linking.openURL("http://facebook.com/")
}
>
<Icon
name={Platform.OS === "ios" ? "ios-settings" : "md-settings"}
size={40}
color={"#E8AA65"}
/>
</TouchableOpacity>
</View>
<View style={{ paddingTop: 50, paddingLeft: 40 }}>
<Text style={{ fontSize: 20 }}>Settings</Text>
</View>
</View>
</>
);
}
const styles = StyleSheet.create({
IconImage: {
paddingTop: 40,
paddingLeft: 40,
},
});
The issue is caused by providing flex:1 in your main view.
Output without flex:1:
The remaining offset is caused by your height together with your padding values.
Demo:
I've created a snack where you can play around with it:
https://snack.expo.io/rkUKpLUUU
Achieving Stack/Overlap Icons using React native.
I am trying to achieve something like this in react native:
https://fontawesome.com/how-to-use/on-the-web/styling/stacking-icons
how to achieve this?
You can achieve this by doing it like this. Using width and height helps you keep the view in place and aligning everything to the center so it looks nice like stacked icons.
<View style={{
position:"relative",
justifyContent:'center',
alignItems:"center",
width:40,
height:40
}}>
<Icon name="circle" size={34} color={"black"} />
<Icon name="flag" size={20} color={"white"} style={{position: 'absolute', zIndex: 99}} />
</View>
https://snack.expo.io/HkxWerHBr
Output:
In this Example I stacked the FontAwesome Icon "square" and "home". To stack them, you need a parent view with position: 'relative'. Then you can apply position: 'absolute'and a zIndex to the icon which should be on top of the other one. Afterwards you can position the icon for example with the top/left style property.
Code:
<View style={{position: 'relative'}}>
<Icon name="square" size={24} color={"black"} />
<Icon
name="home"
size={24}
color={"white"}
style={{position: 'absolute', zIndex: 99, left: 0, top: 0}} />
</View>
Demo:
https://snack.expo.io/rkHnZJrrH
Was able to achieve like this with react native elements [ not sure if they use zIndex internally]
render() {
return (
<View style={styles.container}>
<View
style={{
position: 'relative',
height: 64,
width: 64,
justifyContent: 'center',
alignItems: 'center',
}}>
<Icon type="font-awesome" name="square" size={64} />
<Icon
type="font-awesome"
name="twitter"
color="white"
size={32}
containerStyle={{ position: 'absolute' }}
/>
</View>
</View>
);
}
And the container style would be
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
paddingTop: Constants.statusBarHeight,
backgroundColor: '#ecf0f1',
padding: 8,
}
snack repo:
https://snack.expo.io/#roach_iam/vigorous-blueberries
Simply I am trying to make 3 Texts with icons align in a column
I want to give the expo icons a little margin-top so they are next to each text element
Then how can I make the next line in text aligned with the text itself
For Example The (S) in School to be vertically aligned with the (5) in 5th
I searched a lot on how to do that in react-native but with no luck
and I tried some normal CSS stuff but didn't work is it achievable?
Code :
<View style={styles.cardView}>
<Text style={styles.CardTextLayout} > <MaterialIcons name="store" size={21} color="lightgrey" /> {item.key} </Text>
<Text style={styles.locationText} > <Entypo name="location-pin" size={21} color="lightgrey" />5th Settelment, Near Akhnaton School, Cairo</Text>
<Text style={styles.locationText} > <MaterialIcons name="description" size={21} color="lightgrey" />Breif Description about the place and what is offers</Text>
</View>
Styles
CardTextLayout: {
// marginLeft: 8,
fontSize: cardResponsiveFontSize,
fontWeight: 'bold',
textAlign: 'left',
color: '#231F20',
elevation: 8,
},
locationText: {
fontSize: cardResponsiveFontSize,
textAlign: 'left',
color: '#231F20',
elevation: 8,
},
I don't know how you would do that with your current code, but you can try to set it up like this.
<View style={styles.cardView}>
<View style={styles.cardRow}>
<View style={styles.cardIcon}>{put your icon here}</View>
<View style={styles.cardText}>{put your text here}</View>
</View>
...add the other 2 rows here
</View>
And styles
cardRow: {
flexDirection: "row",
flex: 1
},
cardIcon: {
flex: 1
},
cardText: {
flex: 9
}
And add your styles for icons and text.
You can change up the cardIcon and cardText flex ratio so that you get different width for your icon.
You can make a wrapper view with alignItems: 'center' to make both text and icon vertical center
<View style={styles.cardView}>
<View style={{ flexDirection: 'row', alignItems: 'center' }}>
<MaterialIcons name="store" size={21} color="lightgrey" />
<Text style={styles.CardTextLayout}>{item.key}</Text>
</View>
.....
</View>
I am trying to put a background color for an app I am making but it doesn't fit to all the screen and the bottom of it doesn't take the style.
This is my code:
<ScrollView>
<View style={styles.main}>
<View style={{ marginTop: 10 }}>
<Image style={{ flex: 1, height: 80, width: 80, alignSelf: 'center', marginTop: 23 }}
source={require('./../src/img/profile.png')} />
</View>
<View style={styles.fourblock}>
<TouchableOpacity
style={styles.redbox}
onPress={() => Actions.personal()}>
<Text style={styles.redboxText}>
Personal Detail
</Text>
</TouchableOpacity>
<TouchableOpacity
style={styles.redbox}
onPress={() => Actions.savedschools()}>
<Text style={styles.redboxText}>
Saved Schools
</Text>
</TouchableOpacity>
<TouchableOpacity
style={styles.redbox}
onPress={() => Actions.languages()}>
<Text style={styles.redboxText}>
Your Reviews
</Text>
</TouchableOpacity>
</View>
</View>
</ScrollView>
And this is the style I want to put:
main: {
//marginTop: 52,
backgroundColor: '#F8F8FF',
flex: 1,
},
<ScrollView> must be inside <View style={styles.main}>
so
<View style={styles.main}>
<ScrollView>
<View>
// .........
</View>
</ScrollView>
</View>
<Image style={{ flex: 1, height: 80, width: 80, alignSelf: 'center', marginTop: 23 }}
resizeMode: 'stretch', // or 'cover' . <<------------------
source={require('./../src/img/profile.png')} />
One more way you can fit view on all screen is using positioning absolute and make all left, top, right and bottom 0.
Here is an example.
<View style={{ position : 'absolute', top : 0, left : 0, right : 0,bottom : 0,}}</View>