I am trying to add an image and card component (from react-native-elements library) in my screen (image at the top & card element in the bottom).
But in my final output, Only the card element is shown but the image is not shown in my screen. Anyone can help? Much appreciate!
My Code :
<View style={styles.FirstContainer}>
<Image style={styles.img} source={pic} />
<Card>
<View style={styles.container}>
<Icon type='font-awesome-5' name="angle-left" size={80} />
<Text style={{paddingBottom:20}}>
{'\n'}
Hello world
{'\n'}
{'\n'}
hello world
</Text>
</View>
<View style={styles.container}>
<Icon type='font-awesome-5' name="angle-left" size={80} />
<Text style={{paddingBottom:20}}>
{'\n'}
Hello world
{'\n'}
{'\n'}
hello world
</Text>
</View>
<View style={styles.container}>
<Icon type='font-awesome-5' name="angle-left" size={80} />
<Text style={{paddingBottom:20}}>
{'\n'}
Hello world
{'\n'}
{'\n'}
hello world
</Text>
</View>
</Card>
</View>
My styleSheet:
const styles = StyleSheet.create({
FirstContainer: {
flex: 0.5,
flexDirection: "column"
},
img: {
flex: 0.5,
maxWidth: '100%',
},
title: {
textAlign: 'center',
fontSize: 15,
alignItems: 'center',
paddingRight: 50
},
container: {
paddingVertical: 15,
paddingHorizontal: 10,
flexDirection: "row",
justifyContent: "space-evenly",
alignItems: "center",
},
})
My output:
Related
I was making an app and added text on HomeScreen. I am getting the text in Web but am not able to get it in Android and IOS. This is the Code:
render(){
let pulse = <Image source={require('../pulse.png')} style={styles.pulse} />
return (
<SafeAreaView style={styles.container}>
<View>
<StatusBar barStyle="dark-content" />
<View style={{ flex: 0.4, resizeMode: 'contain' }}>
<Text style={styles.appName}>L{pulse}blood</Text>
</View>
</View>
</SafeAreaView>
}
These are the styles
container: {
flex: 1,
backgroundColor: 'white',
},
appName: {
alignSelf: 'center',
fontFamily: 'oswald',
fontSize: 50,
color: 'black',
height: '100%'
}
You need to remove the flex prop of the child view. Change
<View style={{ flex: 0.4, resizeMode: 'contain' }}>
<Text style={styles.appName}>L{pulse}blood</Text>
</View>
to
<View style={{ resizeMode: 'contain' }}>
<Text style={styles.appName}>L{pulse}blood</Text>
</View>
I am building a react native application and I use scrollview for some contents but it is not scrolling I cannot figure out why.
I try a lot of things, adding flex: 1 everywhere but none of these is working.
Thank you in advance for your help.
<KeyboardAwareScrollView contentContainerStyle={authStyles.container}>
<Layout isBackArrow={true}>
<BottomLayout>
<Header fontSize={20}>
<Text>Nous sommes</Text> {'\n'}
<Text style={authStyles.headerBold}>
Ravis de te revoir!
</Text>
{'\n'}
<Caption>Je me connecte via:</Caption>
</Header>
<View style={authStyles.socialIconView}>
<SocialIcon type="facebook" onPress={onFacebookLogin} />
<SocialIcon type="google" />
<SocialIcon
type="apple"
onPress={onAppleButtonPress}
style={{ backgroundColor: COLORS.BLACK }}
/>
</View>
<View style={authStyles.orView}>
<Header fontSize={15}>
<Text style={authStyles.headerBold}>Ou</Text>
{'\n'}
<Caption>
Je saisis mon email et mot de passe
</Caption>
</Header>
</View>
<View style={authStyles.inputView}>
<CustomInput
label="Email"
icon
iconName="envelope"
iconFamily="font-awesome"
onChange={text => setEmail(text)}
/>
<CustomInput
label="Mot de passe"
icon
iconName="lock"
iconFamily="entypo"
onChange={text => setPassword(text)}
password
/>
<CustomButton
title="Mot de passe oublié ?"
clear
onPress={open}
/>
</View>
</BottomLayout>
</Layout>
</KeyboardAwareScrollView>
Layout component:
<View style={layoutStyles.background}>
{isBackArrow && <BackArrow onPress={onBackArrowPress} />}
<ScrollView
style={{ flex: 1 }}
contentContainerStyle={{
flex: 1,
}}
>
{children}
</ScrollView>
</View>
layout style:
background: {
backgroundColor: COLORS.BRAND_ORANGE_OPACITY_2,
width: '100%',
height: '100%',
flex: 1,
},
BottomLayout Component:
<View style={layoutStyles.bottomLayout}>{children}</View>;
bottom layout style:
bottomLayout: {
backgroundColor: COLORS.BRAND_ORANGE,
position: 'absolute',
bottom: 0,
height: '75%',
width: '100%',
borderTopLeftRadius: 70,
borderTopRightRadius: 70,
paddingTop: 60,
flex: 1,
},
keyboardAwareScrollView contentContainerStyle:
container: {
justifyContent: 'center',
alignItems: 'center',
flex: 1,
},
Thanks in advance.
KeyboardAwareScrollView gives you a ScrollView already, you don't need to add another one inside of it.
Remove the ScrollView from Layout or remove the KeyboardAwareScrollView.
React Native Nested ScrollView Can`t Scroll on Android Device
Also don't use flex: 1 in contentContainerStyle, instead use minHeight: '100%' (why?) if you want it to be full screen even when there is not enough content in it.
Does Anyone knows why the panel is not showing on android when I click on the button?
I'm using https://www.npmjs.com/package/rn-sliding-up-panel btw. Please feel free to tell me, if you have any other recommended sliding panel library.
const CCTVTab = () => {
return (
<React.Fragment>
<View
style={{
flex: 1,
marginTop: 30,
flexDirection: 'column',
justifyContent: 'center',
alignContent: 'center',
}}>
<Button title="Show panel" onPress={() => _panel.show(300)} />
</View>
<SlidingUpPanel
style={{borderTopLeftRadius: 10}}
ref={c => (_panel = c)}>
<View
style={{
flex: 1,
backgroundColor: 'black',
alignItems: 'center',
borderTopRightRadius: 18,
borderTopLeftRadius: 18,
}}>
<Text>Header</Text>
<Text>Content</Text>
<Button title="Hide" onPress={() => _panel.hide()} />
</View>
</SlidingUpPanel>
</React.Fragment>
);
};
Hi I am trying to design a screen in react native. If you see below screenshot here three views are there. a) image b) center view where text is appeared c) circle view
I want to expand center view width such it covers complete available space. I tried to do using flex property but couldn't make it. Does anyone know how to do it ?
<View style={{ flexDirection: "column" }}>
<View style={{ flexDirection: "row" }}>
<Icon name="user" size={30} />
<Text
style={{
textAlignVertical: "center",
marginLeft: 20
}}
>
Ajay Saini
</Text>
</View>
<Text style={{ marginLeft: 50 }}>Hello</Text>
</View>
<View style={{ flexDirection: "row", width: "100%" }}>
<Icon name="user" size={30} />
<View
style={{
flex: 1,
flexDirection: "column",
marginLeft: 20
}}
>
<Text>Williams</Text>
<Text>
{item.text}jhfjks ahfdkjsdh fjkshfjksaddhfjksdahfjkds
ahajkdhfjksahdf
</Text>
</View>
<View
style={{
flex: 1,
flexDirection: "row",
justifyContent: "flex-end"
}}
>
<TouchableOpacity
style={{
borderWidth: 1,
borderColor: "rgba(0,0,0,0.2)",
alignItems: "center",
justifyContent: "center",
width: 30,
height: 30,
backgroundColor: "#fff",
borderRadius: 100
}}
/>
</View>
</View>
Since your circular view has flex: 1, it tries to occupy all the free space. Also, center view tries to do the same. Which results in splitting the free space evenly, therefore removing flex: 1 style from circular view will be enough.
Additionally, you can try adding a justifyContent: 'space-between' to most outer view. This is a great option to simplify more complicated designs.
<View style={{ flexDirection: 'row' }}>
<Icon name="user" size={30} />
<View
style={{
flex: 1,
flexDirection: "column",
marginLeft: 20
}}
>
<Text>Williams</Text>
<Text>
{item.text}jhfjks ahfdkjsdh fjkshfjksaddhfjksdahfjkds
ahajkdhfjksahdf
</Text>
</View>
<View
style={{
flexDirection: "row",
justifyContent: "flex-end"
}}
>
<TouchableOpacity
style={{
borderWidth: 1,
borderColor: "rgba(0,0,0,0.2)",
alignItems: "center",
justifyContent: "center",
width: 30,
height: 30,
backgroundColor: "#fff",
borderRadius: 100
}}
/>
</View>
</View>
Try to change this part to flex: 2.
<View
style={{
// flex: 1,
flex: 2
flexDirection: "column",
marginLeft: 20
}}
>
<Text>Williams</Text>
<Text>
{item.text}jhfjks ahfdkjsdh fjkshfjksaddhfjksdahfjkds
ahajkdhfjksahdf
</Text>
</View>
I have recently started using React-Native, and one of the main issues I have been struggling with is the layout design.
I have a "Card" like component that holds some information about movies. Components like Image and Text that are big goes out of the bounds of the card and does not respect the padding and margins provided.
Here is the JSX code:
<View style={[styles.container, styles.card]}>
<View style={{alignSelf: 'stretch', flexDirection: 'row', padding: 10}}>
<Image style={{height: 50, width: 50, borderRadius: 25}}
source={require('../../img/sarah-avatar.png.jpeg')}/>
<View style={{flexDirection: 'column', marginTop: 5, marginLeft: 15}}>
<Text style={styles.title}>{ this.state.movie.name }</Text>
<Text style={{color: 'gray'}}>{ moment(this.state.movie.releaseDate).format('DD/MM/YYYY') }</Text>
</View>
</View>
<View style={{alignItems: 'center'}}>
<!-- THIS IMAGE DOES NOT RESPECT THE CARD BOUNDS -->
<Image style={{height: 220, resizeMode: 'center'}}
source={require('../../img/advance-card-bttf.png')}/>
<View style={{flexWrap: 'wrap', marginTop: 10, marginBottom: 20}}>
<Text style={{color: 'gray', fontSize: 14}}>
{ this.state.movie.summary }
</Text>
</View>
</View>
<View style={{flexDirection: 'row', flex: 1}}>
<Button onPress={this.onLikeClick.bind(this)}>
<View style={{flexDirection: 'row'}}>
<Icon name="thumbs-up" size={18} color="#007aff" />
<Text style={{color: '#007aff', marginLeft: 5}}>{ this.state.movie.likes } Likes</Text>
</View>
</Button>
<View style={{width: 20}} />
<Button onPress={this.onCommentClick.bind(this)}>
<View style={{flexDirection: 'row'}}>
<Icon name="comment" size={18} color="#007aff" />
<Text style={{color: '#007aff', marginLeft: 5}}>{ this.state.movie.comments.length } Comments</Text>
</View>
</Button>
</View>
<Comments comments={this.state.movie.comments }
showComments={ this.state.showComments }
handler={this.handler} />
</View>
const styles = StyleSheet.create({
card: {
backgroundColor: "#fff",
borderRadius: 2,
shadowColor: "#000000",
shadowOpacity: 0.3,
shadowRadius: 1,
shadowOffset: {
height: 1,
width: 0.3,
},
padding: 10,
flexWrap: 'wrap'
},
container: {
flex: 1,
backgroundColor: '#F5FCFF',
margin: 5
},
title: {
fontSize: 20,
backgroundColor: 'transparent'
},
button: {
marginRight: 10
}
});
And the comments component JSX code:
<View style={{flexDirection: 'column'}}>
{
this.props.comments.map((comment, index) => {
return (
<View key={index} style={{flexDirection: 'row', marginTop: 20}}>
<Image style={{height: 50, width: 50, borderRadius: 25}}
source={require('../../img/avatar-ts-woody.png')}/>
<View style={{flexDirection: 'column', marginLeft: 15, marginTop: 3}}>
<Text style={{fontSize: 18}}>{ comment.name }</Text>
<!-- THE COMMENT CONTENT GOES OUTSIDE OF THE CARD -->
<Text style={{color: 'gray'}}>{ comment.content }</Text>
</View>
</View>
)
})
}
<TextInput placeholder="Leave a comment"
value={this.state.commentContent}
onChangeText={(text) => this.setState({commentContent : text})}
onSubmitEditing={this.onCommentEntered.bind(this)}
style={{height: 40, marginTop: 18}} />
</View>
Here you can see that the cover image seems like it's out of the card:
In here each comment might start correctly inside the card, but will go outside of the bounds when text is too long: