any suggestions on how to style my touchable opacity buttons to look like in the picture of the right?
so far this is my code and my result is the image of the left..
I know I need to apply justify-content: space-between but somehow I can't figure out how..
import {StyleSheet, View} from 'react-native';
import {TouchableOpacity} from 'react-native-gesture-handler';
import {Text} from 'react-native-elements';
const _positionTable = () => {
return (
<View style={styles.tabsContainer}>
<TouchableOpacity style={styles.tab}>
<Text style={styles.text}>MERCADO DE CAPITALES</Text>
</TouchableOpacity>
<TouchableOpacity style={styles.tab}>
<Text style={styles.text}>FONDOS DE INVERSIÓN</Text>
</TouchableOpacity>
<TouchableOpacity style={styles.tab}>
<Text style={styles.text}>MERCADO DE DINERO</Text>
</TouchableOpacity>
</View>
);
};
const styles = StyleSheet.create({
tabsContainer: {
flexDirection: 'row',
marginHorizontal: 20,
marginTop: 20,
maxWidth: '100%',
alignContent: 'center',
borderWidth: 1,
},
tab: {
maxWidth: '30%',
justifyContent: 'space-between',
backgroundColor: 'orange',
},
text: {
fontSize: 14,
color: 'white',
textAlign: 'center',
},
});
export default _positionTable;
You can use flex:1 or set width by calculating, but i guess flex will do it better.
Related
I'm trying to create an Andy Warhol style image for an assignment.
The row container isn't rendering the images in a row, the goal being to stack the 2 row containers in to a square formation.
Here's my code so far:
import React, { Component } from 'react';
import { AppRegistry, Text, View, StyleSheet } from 'react-native';
import Constants from 'expo-constants';
export default class App extends Component {
render() {
return (
<View style={styles.container}>
<View style = {styles.rowContainer}>
<View style = {styles('blue').img}>
<View style = {styles('red').subImg}>
</View>
</View>
<View style = {styles('black').img}>
<View style = {styles('green').subImg}>
</View>
</View>
</View>
<View style = {styles.rowContainer}>
<View style = {styles('purple').img}>
<View style = {styles('yellow').subImg}>
</View>
</View>
<View style = {styles('orange').img}>
<View style = {styles('#11E1E4').subImg}>
</View>
</View>
</View>
</View>
);
}
}
const styles = (inputColor) => StyleSheet.create({
container: {
flex : 1,
flexDirection: "row",
},
rowContainer:{
height: 100,
width: 200,
flexDirection: "row",
},
img: {
height : 100,
width: 100,
alignItems: "center",
justifyContent: "center",
backgroundColor : inputColor,
},
subImg: {
height: 50,
width: 50,
backgroundColor : inputColor,
},
});
I've fiddled around with the nesting and the size of the row containers. The example code given to me by my teacher works as expected. I have no clue what is going wrong. Really new to coding btw so please dumb any answer down
Example Code:
import React, { Component } from 'react';
import { AppRegistry, Text, View, StyleSheet } from 'react-native';
import Constants from 'expo-constants';
export default class App extends Component {
render() {
return (
<View style={styles.container}>
<View style={styles.topBox}>
</View>
<View style={styles.middleBox}>
</View>
<View style={styles.bottomBox}>
</View>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
flexDirection: 'column',
backgroundColor: 'white',
justifyContent: 'center',
alignItems: 'center',
},
topBox: {
width: 75,
height: 75,
backgroundColor: 'lightblue',
},
middleBox: {
width: 75,
height: 75,
backgroundColor: 'mediumblue',
},
bottomBox: {
width: 75,
height: 75,
backgroundColor: 'darkblue',
},
});
If you use styles as a function then you need to call it when applying styles.
Add () after styles.
<View style={styles().container}>
<View style = {styles().rowContainer}>
Using typescript can help to avoid such errors.
You are not using flexbox. This is done by setting display: flex on the container. Therefore, set display: "flex" on the container.
const styles = StyleSheet.create({
container: {
display: 'flex',
flex: 1,
flexDirection: 'column',
backgroundColor: 'white',
justifyContent: 'center',
alignItems: 'center',
},
...
Side note: When setting display: flex, the flex-direction (flexDirection) is row by default.
import React from 'react'
import { View, StyleSheet, Image, Text } from 'react-native'
function RecentlyJoinedProfileCard({title, image}) {
return (
<View style={styles.container}>
<View>
<Image style={styles.image} source={{uri: image}} />
<Text styles={styles.name}>{title}</Text>
</View>
</View>
);
}
const styles = StyleSheet.create({
container: {
paddingBottom:55
},
image: {
width:100,
height:100,
borderRadius: 75,
marginHorizontal:10,
marginVertical:10
},
name: {
fontSize: 15,
fontWeight: "bold",
alignSelf: 'center'
}
})
export default RecentlyJoinedProfileCard
This gives me the following:
The text is not aligning in the center of each image:
I've tried alignSelf: 'center' style in the text
I've also tried applying the following to the container
justifyContent: 'center',
alignItems: 'center',
Any idea on how to centre the name so its aligned in the centre rather than to the left.
Try this ->
<View style={{alignItems:'center'}}>
<Image style={styles.image} source={{uri: image}} />
<Text styles={styles.name}>{title}</Text>
</View>
Why are you nesting View inside View?
Okay for your style to be applied on the child elements you need to give the style to the nested View and use alignItems instead of alignSelf
E.g
<View style={styles.subContainer}>
<Image style={styles.image} source={{uri: image}} />
<Text styles={styles.name}>{title}</Text>
</View>
const styles = StyleSheet.create({
...
subContainer: {
justifyContent: 'center',
alignItems: 'center'
}
})
Just add alignItems && justifyContent "center" to parent View to align your items in center
just update your styles code like this:
const styles = StyleSheet.create({
container: {
justifyContent: 'center',
alignItems: 'center'
paddingBottom:55
},
})
Change the alignSelf to textAlign: 'center'
name: {
//...
textAlign: 'center'
}
I am trying to beautify a bit a screen in React Native. I have some View which inside them there are Text elements. I need some more space between these Views, I tried to set alignItems: 'space-around' and other similar directives without any effect.
There is the code and below it there is a screenshot in which I drawn red arrows to indicate where I would to add some white space:
export default class UserProfile extends Component {
render() {
const {UserInfo} = this.props;
return (
<SafeAreaView>
<View style={styles.container}>
<View style={styles.topView}/>
<View style={styles.headerView}>
<Text style={styles.headerText}>Welcome: {UserInfo.userName}</Text>
</View>
<View style={styles.itemView}>
<Text style={styles.itemTextTitle}>User ID:</Text><Text style={styles.itemText}>{UserInfo.userID}</Text>
</View>
<View style={styles.itemView}>
<Text style={styles.itemTextTitle}>First Name:</Text><Text style={styles.itemText}>{UserInfo.userFName}</Text>
</View>
<View style={styles.itemView}>
<Text style={styles.itemTextTitle}>Last Name:</Text><Text style={styles.itemText}>{UserInfo.userLName}</Text>
</View>
<View style={styles.itemView}>
<Text style={styles.itemTextTitle}>Status:</Text><Text style={styles.itemText}>{UserInfo.userStatus}</Text>
</View>
<View style={styles.bottomView}/>
</View>
</SafeAreaView>
);
}
}
const styles = StyleSheet.create({
topView: {
flex: 3
},
bottomView: {
flex: 3
},
headerView: {flex:1 },
headerText: {flex:1, textAlign: 'center', fontFamily: globalStyles.fonts.OpenSans},
itemView: {flex:1 },
itemTextTitle: {flex:1, textAlign: 'center', fontFamily: globalStyles.fonts.OpenSans, fontSize: 20, fontWeight: '500'},
itemText: {flex:1, textAlign: 'center', fontFamily: globalStyles.fonts.OpenSans, fontSize: 18, fontWeight: '200'},
textStyle: {
flex:1,
fontSize: 20,
fontFamily: globalStyles.fonts.OpenSans,
fontWeight: '600',
color: globalStyles.colors.customerGreen,
textAlign: 'center',
},
container: {
display: 'flex',
alignContent: 'center',
},
buttonStyle: {
flex: 1,
padding: 10,
backgroundColor: '#ffffff',
borderRadius: 7,
}
});
It's the SafeAreaView that stops your style from working, the container style should be on it to work.
Check this demo i made in Snack:
Demo
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'm setting up some screens for an app using React-Native, and I want to fully understand how Flexbox works.
I'm trying to set the marginHorizontal property in style of textinput and button, but nothing happens.
If I set the specific value of width I do not have any problem.
Why marginHorizontal does not work properly?
The first image is what I get using marginHorizontal (the size of the button doesn't change and the margin from board is not 10);
The second image is what I get when I use width prop (the button size changes according the value of width).
I just wonder why with the marginHorizontal prop, nothing happens.
import React, { Component } from 'react'
import {Text, StyleSheet, View, TextInput, TouchableOpacity} from 'react-native'
import Swiper from 'react-native-swiper';
import {Button} from 'react-native-elements'
const formInputColor = 'rgba(255, 255, 255, 0.2)'
const formInputPlaceholderColor = 'rgba(255, 255, 255, 0.7)'
export default class RegisterFormComponent extends Component{
render(){
return(
<Swiper
style={styles.wrapper}
loop = {false}
>
<View style={styles.slide1}>
<View style={styles.topContainer1}>
<Text
style={styles.text}>What's you mail?
</Text>
<TextInput
placeholder = "Email"
placeholderTextColor = {formInputPlaceholderColor}
returnKeyType = "next"
style = {styles.formInput}
/>
<Text
style={styles.underText}
multiline={true}>blablablablablablablablablablablablablablablablablablablablablablablablablablablablablablabla
</Text>
<Button
style={styles.buttonStyle}
//textStyle = {styles.buttonTextStyle}
//loading={false}
>
</Button>
</View>
<View style={styles.bottomContainer1}>
</View>
</View>
<View style={styles.slide2}>
<View style={styles.topContainer1}>
<Text
style={styles.text}>Choose your password
</Text>
<TextInput
placeholder = "Password"
placeholderTextColor = {formInputPlaceholderColor}
secureTextEntry
returnKeyType = "go"
style = {styles.formInput}
/>
</View>
<View style={styles.bottomContainer1}>
</View>
</View>
<View style={styles.slide3}>
<Text style={styles.text}>And simple</Text>
</View>
</Swiper>
)
}
}
const styles = StyleSheet.create({
wrapper: {
flex: 1
},
slide1: {
flex: 1,
backgroundColor: '#3498db',
},
buttonStyle: {
backgroundColor: '#2980b9',
marginTop: 10,
height: 25,
marginHorizontal: 10
},
buttonTextStyle: {
fontSize: 10
},
topContainer1: {
flex: 1,
alignItems: 'center',
justifyContent: 'center'
},
logoStyle: {
width: 100,
height: 100,
},
bottomContainer1: {
flex: 1,
},
formInput:{
height: 40,
backgroundColor: formInputColor,
color: '#FFF',
marginHorizontal: 10,
paddingHorizontal: 10,
textAlignVertical: 'top'
},
slide2: {
flex: 1,
backgroundColor: '#97CAE5'
},
slide3: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#92BBD9'
},
text: {
color: '#000',
fontSize: 20,
padding: 10,
fontWeight: 'bold'
},
underText: {
color: 'black',
fontSize: 12,
marginTop: 8,
textAlign: 'center',
width: 300
}
})