Styling help needed and am so bad at "Flex".
That icon shows up if a message is long. click it and message expands. need it to be displayed next to time stamp as shown below.
code:
<View style={row}>
<View style={textContainer}>
<Text style={title}>Hospital Authority </Text>
{ arrowClicked === true ?
<Textstyle={subtitle}>{alert}</Text>
:
<Textstyle={subtitle}>{alert}</Text>
}
<Text style={time}>{timestampToStr(createDate)}</Text>
</View>
{ alert.charAt(100) !== "" ?
arrowClicked === true ?
<Icon type='materialicons' name='arrow-drop-up' size={35} onPress={()=>{this.setFullLength()}} />
:
<Icon type='materialicons' name='arrow-drop-down' size={35} onPress={()=>{this.setFullLength()}} />
: null
}
</View>
</View>
css:
const styles = StyleSheet.create({
row: {
flexDirection: 'row',
alignItems: 'flex-start',
marginLeft: 15,
marginRight: 15,
paddingTop: 5,
paddingBottom: 10
},
textContainer: {
flex: 3,
paddingLeft: 15
},
title: {
flex: 1,
color: '#000000',
fontWeight: 'bold'
},
subTitle: {
flex: 1,
color: '#000000'
},
time: {
flex: 1,
color: '#808080'
}
})
Please need help with this styling!!!!!
Struggling with this from hours !
Update:
Used common view for both and it worked. But I have some extra space that I need to remove. How can I do that???
First off, I noticed you have 3 closed <View/> tags and only 2 open <View> tags. Maybe it was an issue with the copy/paste you did.
I would start first by thinking about the structure of what we want to display.
Since you want to align a text and an icon together, it would make sense for them to share the same container.
<View style={row}>
<View style={textContainer}>
<Text style={title}>Hospital Authority </Text>
{ arrowClicked === true ?
<Textstyle={subtitle}>{alert}</Text>
:
<Textstyle={subtitle}>{alert}</Text>
}
<View style={timestampAndArrowContainer}>
<Text style={time}>{timestampToStr(createDate)}</Text>
{
alert.charAt(100) !== "" ?
arrowClicked === true ?
<Icon type='materialicons' name='arrow-drop-up' size={35} onPress={()=>{this.setFullLength()}} />
:
<Icon type='materialicons' name='arrow-drop-down' size={35} onPress={()=>{this.setFullLength()}} />
: null
}
</View>
</View>
</View>
And for your styles, you could try something like this
const styles = StyleSheet.create({
[...] // rest of your styles
timestampAndArrowContainer: {
flex: 1,
flexDirection: 'row',
alignItems: 'center',
justifyContent: 'space-between',
}
})
Related
I have written following code but my flex under 'titleContainer' is not working.
export const Focus = () => {
return (
<View style={styles.container}>
<View style={styles.titleContainer}>
<Text style={styles.title}>What would you like to focus on?</Text>
<TextInput />
</View>
</View>
);
};
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#43840',
},
titleContainer: {
flex: 0.5,
padding: 16,
justifyContent: 'center',
backgroundColor: '#559974',
},
title: {
color: 'white',
fontWeight: 'bold',
fontSize: 15,
},
});
Please see the screen shot. The green background should cover half of the screen.
Its resolved now!
Actually this component was getting displayed conditionally. There was an issue with that condition. I have fixed that and everything worked.
Flex in RN only take interger value
In case you want titleContainer take 50% size of container by using flex, This is how you can achieve that.
You need another view the take the same flex value with titleContainer, so titleContainer and that dump view will take 50% size of parent view each
export const Focus = () => {
return (
<View style={styles.container}>
<View style={styles.titleContainer}>
<Text style={styles.title}>What would you like to focus on?</Text>
<TextInput />
</View>
<View style={{flex: 1}} />
</View>
);
};
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#43840',
},
titleContainer: {
flex: 1,
padding: 16,
justifyContent: 'center',
backgroundColor: '#559974',
},
title: {
color: 'white',
fontWeight: 'bold',
fontSize: 15,
},
});
To use flex property on child tag your parent tag needs to have a display: "flex" property on it.
container: {
display: 'flex',
flexDirection: 'column',
flex: 1,
backgroundColor: '#43840',
},
I am trying to get the background image to take up the entire space on the screen
As you can see from the image this does not seem to be working. I think it may be something to do with the scroll view but unfortunately I cannot figure it out.
Ideally want to use flex box for the solution.
const App: () => React$Node = () => {
return (
<>
<StatusBar barStyle="dark-content" />
<SafeAreaView>
<ScrollView
contentInsetAdjustmentBehavior="automatic"
style={styles.scrollView}>
<View style={styles.container}>
<ImageBackground
source={require('./src/assets/foodflixIMG.jpg')}
style={styles.image}>
<Text style={styles.text}>Inside</Text>
</ImageBackground>
</View>
</ScrollView>
</SafeAreaView>
</>
);
};
const styles = StyleSheet.create({
scrollView: {
backgroundColor: 'red',
height: '100%',
},
container: {
flex: 1,
flexDirection: 'column',
},
image: {
flex: 1,
resizeMode: 'cover',
justifyContent: 'center',
},
text: {
color: 'grey',
fontSize: 30,
fontWeight: 'bold',
}
});
export default App;
Check your code something like this:
<ImageBackground
source={require('./assets/main.jpg')}
style={{height:"100%",
width:"100%", flex:1}}
>
<SafeAreaView>
<ScrollView>
<View style={styles.container}>
<Text>Hello</Text>
</View>
</ScrollView>
</SafeAreaView>
</ImageBackground>
Hope this helps!
I want my app to add text underneath the goal section but flex is not letting me do that even if I create new components in native P.S Still a beginner
import React, { useState } from "react";
import { StyleSheet, View, TextInput, Button, Text } from "react-native";
export default function App() {
return (
<View style={styles.Container}>
<View style={styles.GoalInp}>
<TextInput
placeholder="Course Goal"
style={{ overflow: "scroll" }}
onChangeText={goalInputHandler}
value={enteredGoal}
/>
</View>
<View>
<Button title="ADD" onPress={addGoalHandler} />
</View>
<View>
{couseGoals.map(goal => (
<Text>{goal}</Text>
))}
</View>
</View>
);
}
const styles = StyleSheet.create({
Container: {
padding: 50,
flexDirection: "row",
justifyContent: "space-between",
alignItems: "center"
},
GoalInp: {
borderWidth: 1,
width: "80%",
padding: 10,
borderColor: "black"
}
});
You need to bring the listing outside the Container View, as the flex-direction of Container is row, all items will be in a row including form.
My modified code is given below
<View style={styles.wrapper}>
<View style={styles.Container}>
<View style={styles.GoalInp}>
<TextInput
placeholder="Course Goal"
style={{ overflow: "scroll" }}
/>
</View>
<View>
<Button title="ADD" onPress={this.addGoalHandler} />
</View>
</View>
<View>
{this.state.couseGoals.map(goal => (
<Text>{goal}</Text>
))}
</View>
</View>
const styles = StyleSheet.create({
wrapper:{
flex:1,
},
Container: {
padding: 50,
flexDirection: "row",
justifyContent: "space-between",
alignItems: "center"
},
GoalInp: {
borderWidth: 1,
width: "80%",
padding: 10,
borderColor: "black"
},
});
I think that you use to much Vieuw elements.
You should for example use a Text for where your text need to print out.
But I think I have it.
You wrapped everything into a View with a style of;
flexDirection: "row",
Not that good if you don't want to have the whole View on one line....
Issue solved?
I am coding a navbar in React Native. Think of it as double layered -- the upper layer is a burger menu, a title, and a search icon, the second layer consists of three touchable titles to navigate to the relevant screens.
a mock-up of the navbar I'm trying to create
When I apply inline styles, they work. When I do Stylesheet.create and apply styles down there, they don't. I am new to programming and very confused.
My plan is to code a single navbar that is split into two rows (views): navbarTop and navbarBottom. I would very much appreciate some insight into whether doing so makes sense, and also how to fix my styling issue. Thank you all very much!
import React, { Component } from 'react';
import { View, Text, StyleSheet, Image, TouchableHighlight } from 'react-native';
import { withNavigation } from 'react-navigation';
class Navbar extends Component {
render() {
return (
<View style={styles.navbarTop}>
<View>
<TouchableHighlight
onPress={() => {
this.props.navigation.openDrawer();
}}
>
<Image
style={{marginBottom: 5}}
source={require('./../../../android/app/src/main/res/drawable/menu.png')}
/>
</TouchableHighlight>
</View>
<View>
<Text
style={{
fontWeight: 'bold',
color: 'white',
fontSize: 20,
marginRight: 70
}}
>
Dashboard
</Text>
</View>
<View>
<Image
style={{marginBottom: 5}}
source={require('./../../../android/app/src/main/res/drawable/search.png')}
/>
</View>
<View style={styles.navbarBottom}>
<View>
<Text
style={{
color: 'white',
fontSize: 15,
marginRight: 70
}}
> RECORDINGS </Text>
</View>
<View>
<Text
style={{
color: 'white',
fontSize: 15,
marginRight: 70
}}
> PATIENTS </Text>
</View>
<View>
<Text
style={{
color: 'white',
fontSize: 15,
marginRight: 70
}}
> DEVICES </Text>
</View>
</View>
</View>
);
}
}
export default withNavigation(Navbar);
const styles = StyleSheet.create({
navbarTop: {
backgroundColor: '#14172B',
padding: 10,
flexDirection: 'row',
justifyContent: 'space-between',
alignItems: 'flex-end',
},
// navbarBottom: {
// }
});
In line styles over write the style which are present in the stylesheet.
Let's say there is a style component :
<View style = {[styles.demoView,{marginTop:50}]}/>
export default StyleSheet.create({
demoView: {
marginTop:20,
flexDirection: "row",
padding: "10rem",
justifyContent: "space-between",
alignItems: "center",
},
In the above style the inline style will replace the value of marginTop because it has high priority and the it would least concern even if you remove the marginTop property from the stylesheet as it is been supressed by inline style. Hope it gives you clear vision.
Happy Coding :)
Edit :
import React, { Component } from 'react';
import { View, Text, StyleSheet, Image, TouchableHighlight } from 'react-native';
import { withNavigation } from 'react-navigation';
class Navbar extends Component {
render() {
return (
<View style={styles.navbarTop}>
<TouchableHighlight
onPress={() => { this.props.navigation.openDrawer()}}>
<Image style={{marginBottom: 5}}
source={require('./../../../android/app/src/main/res/drawable/menu.png')}
/>
</TouchableHighlight>
<Text style={{fontWeight: 'bold',color: 'white',fontSize: 20,marginRight: 70}}>
Dashboard
</Text>
<Image
style={{marginBottom: 5}}
source={require('./../../../android/app/src/main/res/drawable/search.png')}
/>
<View style={styles.navbarBottom}>
<Text style={styles.navBarText}> RECORDINGS </Text>
<Text style={styles.navBarText}> PATIENTS </Text>
<Text style={styles.navBarText}> DEVICES </Text>
</View>
</View>
);
}
}
export default withNavigation(Navbar);
const styles = StyleSheet.create({
navbarTop: {
backgroundColor: '#14172B',
padding: 10,
flexDirection: 'row',
justifyContent: 'space-between',
alignItems: 'flex-end',
},
// navbarBottom: {
// }
navBarText:{
color: 'white',
fontSize: 15,
marginRight: 70
}
});
I have the following code:
renderActionButtons(actionButtons){
let actionButtonsContent = actionButtons.map((button, i) => {
return <TouchableHighlight key={i} onPress={() => {this.updateConversation(button);}} style={globalStyle.actionButton} underlayColor='#f1f1f1'>
<View key={i}>
<Text style= {globalStyle.actionButtonText}>{ button }</Text>
</View>
</TouchableHighlight>
})
return actionButtonsContent
}
renderConversations(){
let conversationContent = this.state.conversationArray.map((convObj, i) => {
return <View key={i} style={[globalStyle.conversationContainer,globalStyle.shadow,convObj.directionClass]}>
<Text style= {[globalStyle.conversationText,convObj.directionTextClass]}>{ convObj.text }</Text>
<View style= {globalStyle.actionButtonsContainer}>
{ this.renderActionButtons(convObj.actionButtons) }
</View>
</View>
})
return conversationContent
}
This is to render the following view:
I'm trying to wrap those pills inside the white container.
Following are the styles I have used:
conversationContainer:{
maxWidth:310,
backgroundColor: 'white',
borderBottomRightRadius: 10,
borderTopRightRadius: 10,
borderBottomLeftRadius: 0,
borderTopLeftRadius: 10,
padding: 10,
marginTop: 10
},
actionButtonsContainer:{
flex:1,
flexDirection: 'row',
paddingTop: 10
},
actionButton:{
backgroundColor:primaryRed,
borderRadius:30,
padding: 7,
marginRight: 10
},
actionButtonText:{
color:'white',
fontSize:12,
alignSelf: 'center'
},
How can I wrap the child Elements inside the parent element so that it doesn't overflow like show in picture ?
With flexbox, you have the flexWrap property, it defines whether the flex items are forced in a single line or can be wrapped. By default it's set to nowrap. Set it to wrap:
actionButtonsContainer:{
flex:1,
flexDirection: 'row',
flexWrap: 'wrap',
paddingTop: 10
},