I have two-component image and view I am trying to fit both to screen but its getting overflow and I don't want to implement scrollView.
The problem is Google sign in button is getting out of screen
Here's my approach
<KeyboardAwareScrollView
showsVerticalScrollIndicator={false}
style={{ backgroundColor: 'white' }}
resetScrollToCoords={{ x: 0, y: 0 }}
scrollEnabled={this.state.keyboardOpened}
>
<View style={{ backgroundColor: "white",flex:1}}>
<Image
style={{ width: "100%",height:200, backgroundColor: "white" }}
source={require('./assets/login.gif')}
resizeMode={"contain"}
/>
</View>
<View>
{this.renderLoginDetails()}
</View>
</KeyboardAwareScrollView>
Here's its result
Find the height of your device screen.
import { Dimensions } from 'react-native';
const windowHeight = Dimensions.get('window').height;
<KeyboardAwareScrollView
showsVerticalScrollIndicator={false}
style={{ backgroundColor: 'white' }}
resetScrollToCoords={{ x: 0, y: 0 }}
scrollEnabled={this.state.keyboardOpened}
>
<View style={{ backgroundColor: "white",flex:1, height: windowHeight*0.04}}>
<Image
style={{ width: "100%",height:200, backgroundColor: "white" }}
source={require('./assets/login.gif')}
resizeMode={"contain"}/>
</View>
<View style={{height: windowHeight*0.06}}>
{this.renderLoginDetails()}
</View>
</KeyboardAwareScrollView>
Related
I have the following layout:
<SafeAreaView style={styles.container}>
<Swipe
onSwipeRight={this.handleLikedJob}
onSwipeLeft={this.handlePassedJob}
keyProp="id"
data={jobs}
renderCard={this.renderCards}
renderNoMoreCards={this.renderNoMoreCards}
onCardClick={this.showCardInfo}
/>
<View styles={styles.buttonArea}>
<ActionButton
buttonColor="rgba(231,76,60,1)"
/>
<ActionButton
buttonColor="rgba(231,76,60,1)"
/>
<ActionButton
buttonColor="rgba(231,76,60,1)"
/>
</View>
</SafeAreaView>
Unfortunately I'm not seeing any action buttons.
my styles:
container: {
flex: 1,
backgroundColor: '#fff',
},
imageView: {
flex: 1,
alignSelf: 'stretch',
width: win.width * 0.97,
height: win.height * 0.55,
margin: 5,
elevation: 5,
shadowColor: '#202020',
shadowOffset: { width: 0, height: 0 },
shadowRadius: 5,
},
buttonArea: {
flex: 1,
},
Swipe component view is from the prop sent to it (renderCards):
<View style={styles.imageView}>
<ImageBackground
source={{ uri: image }}
style={{ width: '100%', height: '100%' }}
imageStyle={{ borderRadius: 15 }}
>
<Text style={styles.itemTitle}>
{job.title}
</Text>
<View style={styles.locationContainer}>
<Icon type="material" name="location-on" color="white" />
<Text style={styles.locationText}>
{job.location}
away
</Text>
</View>
</ImageBackground>
</View>
As far as I read, the buttonArea should appear below the Swipe component, not under it (which is not visible).
Any idea what I'm missing here?
My goal is just to show the buttonArea right below the Swipe component.
Swipe component has position absolute.
I am trying to generate a box shadow equivalent for React Native.
Here is my code:
<View style={{
shadowColor: "#000",
shadowOffset: {
width: 0,
height: 5,
},
shadowOpacity: 1,
shadowRadius: 5,
elevation: 5,
}}
>
<View styleName={"card promocard cardsize"} style={{
marginBottom: this.state.promoBottom, marginRight: this.state.promoRight,
}}>
<View styleName="promo-name" style={{ backgroundColor: this.rand }}>
<View styleName="promo-name-child">
<Image style={{ borderRadius: 50, resizeMode: "contain", backgroundColor: "#FFF" }} styleName="promocard-logo-img" source={{ url: this.props.promo.merchant.logo }} />
<Text style={{ color: "#fff" }} styleName="promo-name-text">{this.props.promo.merchant.name}</Text>
</View>
</View>
<View styleName="promo-inner-card">
<Image styleName="promo-main-img" source={{ url: this.props.promo.photo }} />
<View>
<View styleName="promo-title">
<Text styleName="promo-title-text">{this.props.promo.title}</Text>
</View>
<View styleName="promo-desc">
<Text styleName="promo-desc-text">{this.props.promo.text}</Text>
</View>
</View>
</View>
</View>
</View>
Rather than generate styles correctly around the rectangle (which is 330 by 175), it seems to apply the shadow to every element INSIDE the box.
I want something that looks like this:
https://ethercreative.github.io/react-native-shadow-generator/
I have been tearing my hair out, because every example I am seeing looks similar to the code I've got in my top level view, and yet I am getting shadows on all the text, and the images inside my view.
This was solved by adding a background color.
backgroundColor: "#FFF"
I am trying to acheive what the image below represents with Flexbox in React Native with Views, if you have a basic example of this that would be amazing:
Something like this:
<View style={{ flex: 1, flexDirection: 'column'}}>
<View style={{ height: 70, backgroundColor: 'blue' }}>
</View>
<View style={{ height: 70, backgroundColor: 'green' }}>
</View>
<View style={{ flex: 1, backgroundColor: 'yellow' }}>
</View>
</View>
Not sure if the blue lines are lines / padding / etc, but you should be able to add those into this shell.
I am currently trying to implement a kind of 'statistics' overlay page.
I have the following code so far:
<View style={styles.container}>
<MapView
style={styles.map}
...
>
<MapView.Polygon
...
>
</MapView.Polygon>
<MapView.Marker coordinate={{latitude: 47.366965, longitude: 8.545102}}>
<View style={styles.radius}>
<View style={styles.marker}></View>
</View>
</MapView.Marker>
**THIS PART**
<View style={{flex: 1, flexDirection: 'row', justifyContent: 'space-between', bottom: 0}}>
<View style={{width: 100, height: 50, backgroundColor: 'powderblue'}} />
<View style={{width: 100, height: 50, backgroundColor: 'skyblue'}} />
<View style={{width: 100, height: 50, backgroundColor: 'steelblue'}} />
</View>
**THIS PART**
</MapView>
<Fab
direction="up"
containerStyle={{ marginLeft: 10 }}
style={{ backgroundColor: '#5067FF' }}
position="bottomRight">
</Fab>
</View>
Now the three containers I get are at the top; how can I focus them to the bottom?
I'm trying to create a layout that utilizes flexbox' automatic sizing but also contains fixed-size items:
<View style={{ height: 70, alignItems: "center" }}>
<Text style={{ flex: 1, textAlign: "right", paddingRight: 10 }}>left text</Text>
<Image style={{ width: 70, height: 70 }} src={require('./img.png')} />
<Text style={{ flex: 1, textAlign: "left", paddingLeft: 10 }}>right text</Text>
</View>
I want the image to be centered in the UI and have the text views equally take the remaining width. The actual result is that one of the text views is larger than the other as if the rendering doesn't take the width of the image view into account.
Finally found the correct way of doing this. To have fixed size items in a flex layout one shouldn't use width/height but flex: 0 and flexBasis. This approach initially didn't work for me because a component wrapping my component wasn't sized correctly and messed with the flex rendering. flexBasis seems to be density-independent pixels when it is set to an absolute number.
Proof of concept on expo.io
import React, { Component } from 'react';
import { Text, View, StyleSheet } from 'react-native';
import { Constants } from 'expo';
export default class App extends Component {
render() {
return (
<View>
<Text>Test</Text>
<View style={styles.container}>
<Text style={styles.text1}>{"Left\nText"}</Text>
<View style={styles.view} />
<Text style={styles.text2}>Test</Text>
</View>
<View style={styles.container}>
<Text style={styles.text1}>{"Left\nText"}</Text>
<View style={styles.view} />
<Text style={styles.text2}>Test</Text>
</View>
<View style={styles.container}>
<Text style={styles.text1}>{"Left\nText"}</Text>
<View style={styles.view} />
<Text style={styles.text2}>Test</Text>
</View>
<Text>Test</Text>
<View style={styles.container}>
<Text style={styles.text1}>{"Left\nText"}</Text>
<View style={styles.view} />
<Text style={styles.text2}>Test</Text>
</View>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flexDirection: "row",
alignItems: 'center',
justifyContent: 'center',
paddingTop: Constants.statusBarHeight,
backgroundColor: '#ecf0f1',
},
view: {
flex: 0,
flexBasis: 50,
height: 50,
backgroundColor: "red",
},
text1: {
flex: 1,
textAlign: "right",
paddingRight: 10,
},
text2: {
flex: 1,
textAlign: "left",
paddingLeft: 10,
}
});