I'm getting a white background and the parent view is not filling the whole screen.
here's my render function. I'm totally baffled. This usually just works. This is very simple. I just want a view with a background color and some text and a button. The button renders but the formatting for the parent view component isn't working. Feedback is appreciated.
render(){
return(
<View style={stylesAM.container}>
<View style={stylesAM.textContainer}>
<Text style={stylesAM.title}>You're all signed up!</Text>
<Text style={stylesAM.body}>Please check your email to verify your account.</Text>
</View>
<View style={stylesAM.buttonContainer}>
<AuthButton type='Back'/>
</View>
</View>
)
}
}
stylesAM=StyleSheet.create({
containter:{
flex: 1,
backgroundColor:'#323AB3',
alignItems:'center',
paddingTop:44
},
textContainer:{
paddingLeft:35,
paddingRight:35,
alignItems:'center',
paddingTop:100
},
title:{
fontFamily:'GlacialIndifference',
fontSize:20,
color:'black'
},
body:{
fontFamily:'GlacialIndifference',
fontSize:15,
color:'black'
},
buttonContainer:{
flex:1,
paddingBottom:40,
justifyContent:'flex-end'
}
})
You have typo in your style name :)
double check it again.
There is a typo mistake in style
containter:{
flex: 1,
backgroundColor:'#323AB3',
alignItems:'center',
paddingTop:44
},
It should be container.
Related
I'm trying to find a simple working tooltip for react-native but I can't find any. All of them has many many bugs. I'd like to describe an issue in "react-native-elements/Tooltip" (version 3.4.2) and also ask for a working tooltip component.
...
render() {
return (
<View>
<Text style={styles.pageTitle}>{this.props.messages.account}</Text>
<View style={styles.horizontalFlex}>
<Text
style={styles.userInfo}>{this.props.messages.subscriptionModel}: {this.props.route.params.userProfile}
</Text>
<Tooltip popover={<Text>Info here</Text>}>
<EntypoIcon style={styles.infoIcon} name="info-with-circle" size={20} color={Colors.DARK_BLUE}/>
</Tooltip>
</View>
</View>
);
}
...
let styles = EStyleSheet.create({
container: {
flex: 1,
flexDirection: "column",
},
pageTitle: {
...
},
userInfo: {
textAlign: "left",
justifyContent: "center",
marginLeft: "20rem",
color: Colors.DARK_BLUE,
fontSize: "15rem",
marginBottom: "10rem"
},
infoIcon: {
paddingLeft: "20rem",
},
horizontalFlex: {
flexDirection: "row"
}
});
...
The output for the above code is the following:
Somehow the icon which I'm putting a Tooltip to, slides above. It doesn't matter if it's an icon or a text, same issue occurs. How do I fix this? Do you know any other working tooltip in react-native which you tried and saw that it is working recently?
I had to set withOverlay to false and skipAndroidStatusBar to true. This wasn't what I needed but still it's acceptable. Here is the code:
<Tooltip
popover={<Text style={...text style here...}>Change here</Text>}
withOverlay={false}
skipAndroidStatusBar={true}
containerStyle={...container style here...}
backgroundColor={...color...}>
Inside my component (PrivacyPolicy.js), i have a header view, a webview, and a footer view. the webview, depending on the size, gets scrollable. my issue is that the footer view is displayed at the bottom of the screen like if its style was "position: 'absolute'" so it keeps displayed while scrolling. I need to have it after all webview is displayed.
<View style={styles.main_container}>
<View style={styles.header_container}>
...
</View>
<WebView originWhitelist={['*']} source={{ html: privacyPolicyContent }}/>
<View style={styles.footer_container}>
<CheckBox
disabled={false}
value={this.state.isChecked}
onValueChange={(newValue) => this.setState({
isChecked: newValue
})}
style={styles.checkbox}
tintColors={{ true: '#157dfa' }}
/>
<Text style={styles.checkbox_text}>I have read and accept the Privacy Polic</Text>
</View>
</View>
My styles:
const styles = StyleSheet.create({
main_container: {
flex: 1,
paddingHorizontal:'5%'
},
header_container: {
height: scale(90),
flexDirection: 'row',
marginLeft: 10
},
checkbox_container: {
flexDirection: 'row'
},
checkbox: {
marginLeft: -5,
},
checkbox_text: {
marginTop: 8,
fontSize: 10
}
})
I can see few suggestions:
Since your button is a React Native Button => You can show/hide based on the scrollY positions. For that, you need to communicate over the Bridge to dispatch an event accordingly.
As an alternative solution => You can create the button on the Webview its self to have the same functionality.
I'm using react-native. I need to show a menu that consists of a list of items. I simplified the code below and I'm showing only a text but in the real case, the item has got a checkbox an icon and a label so for this reason I created a custom component.
I need to handle the on click on the items.
The problem is that the on press on the TouchableOpacity in the widget is not triggered.
If I use the same hierarchy of components directly the on click works.
So in the example below the onClick on the TouchableOpacity that is directly put in the containing view is triggered but the onClick on the TouchableOpacity that is wrapped in the EventOnMapMenuWidget is not triggered.
How can I handle the onClick on the TouchableOpacity in the EventOnMapMenuWidget?
Please notice that in the log I don't see the
EventOnMapMenuWidget onPress
while I see the
TEST onPress
private drawEventsOnMapForm() {
return <View style={{ margin: marginStyle.medium, flexDirection: 'column' }}>
<EventOnMapMenuWidget
onToggle={() => {
console.log("EventOnMapMenuWidget onToggle")
}}
label={STRINGS.speeding}
/>
<TouchableOpacity style={{ margin: marginStyle.medium, flexDirection: 'row' }} onPress={() => {
console.log("TEST onPress")
}}>
<Text style={{ color: COLORS.black }}>{STRINGS.speeding}</Text>
</TouchableOpacity>
</View>
}
This is the definition of the custom components:
export default class EventOnMapMenuWidget extends Component<EventOnMapMenuWidgetProp> {
render() {
return <TouchableOpacity style={{ margin: marginStyle.medium, flexDirection: 'row' }} onPress={()=> {
console.log("EventOnMapMenuWidget onPress", this.props.label)
this.props.onToggle()
}}>
<Text style={{color: COLORS.black}}>{this.props.label}</Text>
</TouchableOpacity>
}
}
Basically I want to render a component like float left behavior in HTML. So the component will rendered horizontally (make a row) until there is no enough space and render it under the previous row.
const {card,insideCard} = styles;
return(
<View style={card}>
<View style={insideCard}/>
<View style={insideCard}/>
<View style={insideCard}/>
<View style={insideCard}/>
</View>
);
and the style
card:{
flex:1,
backgroundColor:'#0000ff',
margin:5,
flexDirection:'row',
},
insideCard:{
height: 80,
width: 80,
backgroundColor:'#000000',
margin:10
}
when I render it the forth View tag will be cut in half.
Is there a way to render it like HTML? So the forth view will render downside automatically?
Thanks a lot :)
apply flexWrap: 'wrap' to your card style. If you want to deal with alignment, play around with justifyContent: 'center'
Yes, you can set flexWrap property to card view:
card:{
flex:1,
flexWrap:'wrap',
backgroundColor:'#0000ff',
margin:5,
flexDirection:'row',
},
I have used ScrollView in other apps adding just a style={styles.container} with the styles. However in this app I am creating in my styles I have alignItems:'flex-start' which throws an error with just style={styles.container} and instead you need to pass in alignItems:'flex-start' through contentContainerStyle={styles.container}.
Error: Invariant Violation: ScrollView child layout (["alignItems"]) must by applied through the contentContainerStyle prop.
However when I add contentContainerStyle when scrolling down in the view, once the finger is lifted off the phone (or release of the mouse in simulator), the scroll automatically goes back to the top. If I just use style={styles.container} and take out the alignItems:'flex-start' it scrolls correctly, but my items in the UI are not laid out how I need them. What is causing it to scroll back to the top with contentContainerStyle and is there a fix?
render:
var _that = this;
var iconsToShow = icons.map(function (icon, i){
if(i < 81){
return (
<TouchableHighlight
onPress={() => _that.changeIcon(indexToChange, icon)}
underlayColor='#F7F7F7'
key={i}>
<Text style={styles.iconText}><IonIcons name={icon} size={30} color="#555" /></Text>
</TouchableHighlight>
);
}
});
return (
<Carousel width={SCREEN_WIDTH} animate={false} indicatorColor="#444" inactiveIndicatorColor="#999" indicatorAtBottom={false} indicatorOffset={16}>
<View>
<ScrollView contentContainerStyle={styles.container}>{iconsToShow}</ScrollView>
</View>
<View>
//next page for carousel
</View>
</Carousel>
);
I figured out how to get it to scroll. Instead of having the View wrapping the ScrollView and the ScrollView having any flex styling or alignItems:'flex-start' with contentContainerStyle={styles.container}, put that on the View which is a child of the ScrollView and just use style= instead of contentContainerStyle=.
render:
<ScrollView style={styles.container}>
<Text style={styles.goalName}>{goal}</Text>
<View style={styles.viewContainer}>
{iconsToShow}
</View>
</ScrollView>
Styling:
var styles = StyleSheet.create({
container: {
backgroundColor: 'transparent',
paddingLeft:20,
paddingRight:20
},
viewContainer:{
flexDirection:'row',
flexWrap: 'wrap',
alignItems: 'flex-start',
flex: 1
},
iconText:{
paddingLeft:15,
paddingRight:15,
paddingTop:15,
paddingBottom:15
},
goalName:{
textAlign:'center',
marginTop:40,
marginBottom:10,
fontSize:20
}
});
If someone still couldn't fix the problem, try put {flex: 1} into "all" parents of the ScrollView