I'm trying to have a TouchableHighlight + View above this list of generated comments. I can't seem to bring the start of the comments closer up to where the TouchableHighlight ends (it ends right after the text, no padding/margin below).
Here's the relevant JSX:
renderListView: function() {
return (
<View style={styles.container}>
<TouchableHighlight onPress={this.onSelect}>
<View style={styles.header}>
<Text style={styles.text}>
Visit Site
</Text>
</View>
</TouchableHighlight>
<ListView
dataSource={this.state.dataSource}
renderRow={this.renderCommentCell}
style={styles.commentListView} />
</View>
)
},
And here's my styles.js:
container: {
flex: 1,
marginTop: 65,
backgroundColor: '#FFFFFD',
flexDirection: 'column',
},
commentListView:{
margin: 0,
marginTop: 10,
marginRight: 15,
padding: 0,
backgroundColor: '#FFFFFD',
},
centering: {
alignItems: 'center',
justifyContent: 'center',
height: 80
},
header: {
alignItems: 'center',
flexDirection: 'row',
flex: 1
},
loadingText: {
fontSize: 75,
textAlign: 'center',
marginTop: 75,
marginBottom: 10,
marginRight: 10,
color: '#D6573D'
},
text: {
textAlign: 'center',
flexDirection: 'row',
justifyContent: 'center',
alignSelf: 'stretch',
fontSize: 40,
flex: 1
}
Additionally, here's a screenshot of what I'm seeing:
Add automaticallyAdjustContentInsets={false} to your ListView
Related
I'm creating a component to show the flag and country name. I'll like that view (image + text) centered in the available space.
So if the width of parent is all the screen, there will be space in the left and same in the right. If the parent is only 50% of the screen will be then left space on the sides...
What I've done:
<View style={styles.mainContainer} >
<View >
<TouchableOpacity
disabled={this.props.disablePicker}
onPress={() => this.setState({ modalVisible: true, dataSource: this.props.dataSource })}
activeOpacity={0.7}
>
<View>
<View style={[pickerStyle,{ flexDirection:'row'}]} >
<Image style={{}} source={selectedLabel.image} />
<Text style={}>{selectedLabel.name}</Text>
{dropDownImage ? <Image
style={dropDownImageStyle}
resizeMode="contain"
source={dropDownImage}
/> : null}
</View>
</View>
</TouchableOpacity>
</View>
</View>
const CountryPickerStyles = StyleSheet.create({
container: {
flex: 1,
alignItems: "center",
justifyContent: "center"
},
itemSeparatorStyle:{
height: 1,
width: "90%",
alignSelf: "center",
backgroundColor: "#D3D3D3"
},
searchBarContainerStyle: {
marginBottom: 10,
flexDirection: "row",
height: 40,
shadowOpacity: 1.0,
shadowRadius: 5,
shadowOffset: {
width: 1,
height: 1
},
backgroundColor: "rgba(255,255,255,1)",
shadowColor: "#d3d3d3",
borderRadius: 10,
elevation: 3,
marginLeft: 10,
marginRight: 10
},
selectLabelTextStyle: {
color: "#000",
fontSize:16,
flexDirection: "row",
marginLeft: 100,
marginRight: 100
},
placeHolderTextStyle: {
color: "#757575",
padding: 10,
textAlign: "left",
width: "99%",
fontStyle: 'italic',
fontSize:12,
flexDirection: "row"
},
dropDownImageStyle: {
marginLeft: 10,
color: "#757575",
width: 10,
height: 10,
alignSelf: "center"
},
listTextViewStyle: {
color: "#000",
alignItems: "center",
justifyContent: "center",
marginLeft: 20,
marginHorizontal: 10,
textAlign: "left"
},
pickerStyle: {
elevation:0,
paddingRight: 10,
paddingLeft: 10,
marginRight: 10,
marginLeft: 10,
width:"90%",
borderWidth:0 ,
flexDirection: "row"
}
});
here's what I got:
https://pasteboard.co/JG5Rx9P.png
and also https://pasteboard.co/JG5Tthie.png
I want to create a profile page where rounded image will be on top of two div in 30:70 ratio where top div will be empty and bottom div will contain few items. I have tried few code snippets from web.
<View style={{ flex: 1, flexDirection: 'column', backgroundColor: 'green', justifyContent: 'flex-start', alignItems: 'flex-start' }}>
<View style={{ flexDirection: 'column', justifyContent: "flex-start", alignItems: "flex-start", alignSelf: "flex-start" }}>
{/* <View style={{ flex: 1, flexDirection: 'row', alignItems: 'flex-end', alignSelf: 'flex-start', margin: 1 }}> */}
<View style={{ backgroundColor: 'white', borderRadius: 10, flexDirection: 'column', height: "30%", width: "100%" }}></View>
{/* </View> */}
<View style={{ flex: 1, flexDirection: 'row', alignItems: 'flex-start', alignSelf: 'flex-start', margin: 1 }}>
<View style={{ backgroundColor: 'white', borderRadius: 10, flexDirection: 'column', height: "70%", width: "100%" }}></View>
</View>
</View>
<View style={{ justifyContent: 'center', alignItems: 'center', alignSelf: 'center', position: 'absolute' }}>
<View style={{
backgroundColor: 'blue',
borderRadius: 10, height: 100, width: 100, borderRadius: 100 / 2
}}></View>
</View>
</View>
reference image
Taking as reference the image you share with us... You can have two views and set the profile avatar style to:
{
position: 'absolute',
alignSelf: 'center',
etc..
}
Check a quick demo: https://snack.expo.io/#abranhe/avatar-example
App.js
import React, { Component } from 'react';
import { Text, View, StyleSheet, ImageBackground, Image } from 'react-native';
import { Ionicons, FontAwesome } from '#expo/vector-icons';
import Constants from 'expo-constants';
import { avatar, background } from './data';
export default class App extends Component {
renderRow({ action, icon, fontAwesome = false }) {
return (
<View style={styles.actionRow}>
{fontAwesome
? <FontAwesome name={icon} size={25} />
: <Ionicons name={icon} size={32} />}
<Text style={styles.text}>{action}</Text>
</View>
);
}
render() {
return (
<View style={styles.container}>
<ImageBackground source={background} style={styles.background}>
<Image source={avatar} style={styles.avatar} />
</ImageBackground>
<View style={styles.content}>
{this.renderRow({ action: 'Scanner', icon: 'ios-camera' })}
{this.renderRow({
action: 'Profile',
icon: 'user-circle-o',
fontAwesome: true,
})}
</View>
</View>
);
}
}
You styles:
const styles = StyleSheet.create({
container: {
flex: 1,
},
background: {
width: '100%',
height: 130,
},
content: {
flex: 1,
marginTop: 80,
marginHorizontal: 10,
},
avatar: {
width: 100,
height: 100,
borderRadius: '50%',
borderWidth: 0.7,
borderColor: 'black',
position: 'absolute',
alignSelf: 'center',
marginTop: 80,
},
actionRow: {
width: '100%',
height: '50',
flexDirection: 'row',
alignItems: 'center',
margin: 10,
},
text: {
marginLeft: 15,
fontWeight: '500',
},
});
I have a component in a website that looks like this:
Regular card
It's basically a div with an image inside it, but the image has a margin-top of -50 so that it overflows off the card.
I would like to accomplish the same thing with react-native and native-base. Here is the relevant code:
render() {
return (
<View style={styles.container}>
<Card>
<CardItem style={{ marginTop: -50, justifyContent: 'center' }}>
<Image style={styles.image} source={{ uri: this.state.band.imageComponent.link }} />
</CardItem>
</Card>
</View>
)
}
const styles = StyleSheet.create({
container: {
flex: 1,
marginTop: 150
},
image: {
width: 150,
height: 150,
)
And the result looks like this:
React-native card
As you can see, the picture is cutoff at the top. How can I keep the image overflow and have it overlay the card like in my first image?
Overflow is not supported in Android. There are lots of open issues for that. Check some of them here and here.
Here's an npm package that apparently solves that issue that you could try.
Otherwise you can use a workaround for that I found on this medium post.
According to your image you have to wrap your image and the container inside another View as siblings and then position them absolutely.
Here's the code that I tweaked a little bit from that post. You can replace the View according to your Card and CardItem styles.
<View style={styles.container}>
<View style={styles.cardSection1}>
<Image style={styles.image} source={{ uri: 'https://imgplaceholder.com/420x320/ff7f7f/333333/fa-image' }} />
</View>
<View style={styles.cardSection2}>
</View>
</View>
const styles = {
container: {
flex: 1,
backgroundColor: 'grey',
alignItems: 'center'
},
image: {
width: 150,
height: 150,
},
cardSection1: {
alignItems: 'center',
justifyContent: 'center',
position: 'absolute',
width: 100,
height: 100,
borderRadius: 50 / 2,
zIndex: 2,
shadowColor: '#000',
shadowOffset: { width: 0, height: 0 },
shadowOpacity: 0.2,
shadowRadius: 10,
elevation: 7,
},
cardSection2: {
alignItems: 'center',
justifyContent: 'center',
position: 'absolute',
top: 25,
width: 300,
height: 150,
borderRadius: 8,
backgroundColor: 'white',
zIndex: 1,
shadowColor: '#000',
shadowOffset: { width: 0, height: 0 },
shadowOpacity: 0.2,
shadowRadius: 10,
elevation: 5,
}
}
This is the output that I got.
//import liraries
import React, { Component } from 'react';
import { View, Text, StyleSheet,TextInput,Dimensions,Image } from 'react-native';
import ButtonRoundBorder from '../components/ButtonRoundBorder';
const window = Dimensions.get('window')
// create a component
class Login extends Component {
render() {
return (
<View style={styles.container}>
<Image style={{width:window.width,height:window.height,position:'absolute'}} source={require('../images/bg2.jpeg')}/>
<View style={styles.overlayImageStyle} >
<Image style={{flex:1,borderRadius:80}} resizeMode={'contain'} source={require('../images/profile.jpg')} />
</View>
<View style={styles.cardStyle}>
<View style={styles.insideCard}>
<Text style={{fontWeight:'bold',fontSize:20,alignSelf:'center'}}>Login</Text>
<TextInput style={[styles.textInputStyle,{marginTop:30}]} underlineColorAndroid='#000000' placeholder='Enter Email' />
<TextInput style={[styles.textInputStyle,{marginTop:20}]} underlineColorAndroid='#000000' placeholder='Enter Password' />
<ButtonRoundBorder style={{marginTop:40}} title='Login'/>
</View>
</View>
</View>
);
}
}
const styles = StyleSheet.create({
container:{
flex: 1,
alignItems: 'center',
backgroundColor: 'transparent',
},
overlayImageStyle:{
alignItems: 'center',
justifyContent: 'center',
position: 'absolute',
width: 100,
height: 100,
borderRadius: 100/2,
backgroundColor: 'white',
top:50,
shadowColor: '#000',
// position: 'absolute',row
// shadowOpacity: 0.2,
// shadowRadius: 10,
elevation: 7,
},
cardStyle:{
// alignItems: 'center',
// justifyContent: 'center',
// position: 'absolute',
top: 80,
width: window.width - 40,
height: window.height - 200,
borderRadius: 8,
backgroundColor: 'white',
// backgroundColor: '#7E57C2',
shadowColor: '#000',
elevation: 5,
},
insideCard:{
top: 80,
alignContent: 'center',
justifyContent: 'center',
flexDirection:'column',
},
textInputStyle:{
width:300,
height:40,
alignSelf:'center',
}
});
//make this component available to the app
export default Login;
here is the link for screenshot
I have a TextInput in my app.js , but it stays in the middle of the page, But I want it to be on the top of the page, I mean just under the notification bar, Please how can I do this
<View style={BackStyles.container}>
<TextInput
underlineColorAndroid={'transparent'} style={BackStyles.textBox}
/></View>
const BackStyles = StyleSheet.create({
container: {
flexDirection: 'row',
alignItems: 'center',
alignSelf: 'stretch',
flex: 1,
backgroundColor: '#E2E2E2',
marginTop: 20,
},
textBox: {
height: 36,
padding: 4,
marginRight: 5,
flexGrow: 1,
fontSize: 18,
color: '#48BBEC',
backgroundColor: '#fff'
}
});
Try replacing alignItems: 'center' with alignItems: 'flex-start'.
In attempts to dynamically add youtube videos to my React Native app, I chose to use a combination of WebView and iFrame since the current react-native-youtube component doesn't work for RN 16^. Ultimately, the solution does work, but the iframe border still shows and will not go away (even with css or frameborder = 0), nor can I change it's color with css. Any ideas? Here's my code:
video-preview component (where users can see video, title, etc before tapping):
module.exports = React.createClass({
render: function() {
return (
<TouchableHighlight
style={styles.touchCard}
underlayColor={'transparent'}
onPress={this.props.onPress} >
<View style={styles.card}>
<WebView
style={styles.videoPreview}
automaticallyAdjustContentInsets={true}
scrollEnabled={false}
style={styles.videoPreview}
html={this.props.source}
renderLoading={this.renderLoading}
renderError={this.renderError}
automaticallyAdjustContentInsets={false} />
<View style={[styles.container, this.border('organge')]}>
<View style={[styles.header, this.border('blue')]}>
<Text style={[styles.previewText]}>{this.props.text}</Text>
</View>
<View style={[styles.footer, this.border('white')]}>
<View style={styles.sourceRow}>
<View style={[this.border('white')]}>
<ImageButton
style={[styles.logoBtn, , this.border('red'), styles.row]}
resizeMode={'contain'}
onPress={this.onHeartPress}
source={this.props.src} />
</View>
<View style={[this.border('white')]}>
<Text style={[styles.rowText, {fontWeight: 'bold'}]}>{this.props.entryBrand}</Text>
<Text style={[styles.rowText]}>{this.props.views}</Text>
</View>
</View>
<View style={[styles.heartRow, this.border('black')]}>
<KeywordBox
style={[styles.category, this.border('blue')]}
key={this.props.key}
text={this.props.category}
onPress={this.props.categoryPress}
selected={this.props.selected} />
</View>
</View>
</View>
</View>
</TouchableHighlight>
);
Which looks like this:
And the input iframe html into the webview looks like this:
<iframe style='border: 0;border-width: 0px;' scrolling='no' frameborder='0' width='320' height='300' src='https://www.youtube.com/embed/2B_QP9JGD7Q'></iframe>
Here's my styling:
var styles = StyleSheet.create({
centerText: {
marginBottom:5,
textAlign: 'center',
},
noResultsText: {
marginTop: 70,
marginBottom:0,
color: '#000000',
},
sourceRow: {
justifyContent: 'space-around',
flexDirection: 'row',
},
rowText: {
textAlign: 'left',
color: 'white',
fontSize: 12,
marginLeft: 5,
fontFamily: 'SFCompactText-Medium'
},
detailText: {
fontFamily: 'SFCompactText-Light',
fontSize: 18,
color: 'white',
textAlign: 'left',
marginTop: 2,
marginLeft: 5,
},
touchCard: {
margin: 3,
width: window.width*0.95,
shadowOffset: {width: 2, height: 2},
shadowOpacity: 0.5,
shadowRadius: 3,
alignSelf:'center',
},
card: {
flex: 1,
width: window.width*0.98,
alignSelf:'center',
},
heartText: {
color: 'white',
fontSize: 12,
fontWeight: 'bold',
alignSelf: 'center',
fontFamily: 'SFCompactText-Medium'
},
heartRow: {
flexDirection: 'row',
justifyContent: 'space-around',
alignSelf: 'center',
justifyContent: 'center',
},
logoBtn: {
height: window.width/10,
width: window.width/10,
alignSelf:'center',
},
heartBtn: {
height: (92/97)*(window.width/13),
width: window.width/13,
alignSelf:'center',
},
category: {
fontFamily: 'Bebas Neue',
fontSize: 10,
fontWeight: 'bold'
},
header: {
flex: 1,
justifyContent: 'space-around',
marginTop: window.height/60,
},
footer: {
flex: 1,
flexDirection: 'row',
justifyContent: 'space-between',
alignItems: 'center',
margin: window.height/80,
},
container: {
flex: 1,
backgroundColor: '#1a1a1a',
},
videoPreview: {
flex: 2,
height: window.width*0.85,
width:window.width*0.98,
flexDirection: 'column'
},
previewText: {
fontFamily: 'Bebas Neue',
fontSize: 23,
color: 'white',
textAlign: 'left',
marginTop: 2,
marginLeft: 5,
},
});