I want to put a space between two dash borders, but I don't know how to put it in a styled component.
Is there anyone who can solve my problem?
const LogoBox = styled(Box)(({ theme }) => ({
width: '145px',
height: '145px',
display: 'flex',
borderRadius: '10px',
marginBottom: '24px',
border: '1px dashed',
alignItems: 'center',
flexDirection: 'column',
justifyContent: 'center',
backgroundColor: theme.palette.info.main,
borderColor: theme.palette.primary.main,
}));
<LogoBox>
<Button>
<Plus size={24} />
</Button>
<BoxTitleText>Max 100x100 px</BoxTitleText>
</LogoBox>
Related
I have these balls that I want to join together. They should like stick together.
Code for the orange squares.
style={{
backgroundColor: 'orange',
display: 'flex',
borderRadius: width
}}
Code for the pink area.
bubbleViewWrapper: {
flexWrap: 'wrap',
backgroundColor: 'pink',
},
refer to image below as stack overflow doesn't allow me upload image
what does it look right now
https://ibb.co/T8L56ZF
What I want
https://ibb.co/5R4hLCV
Html structure
<ScrollView
horizontal={true}
contentContainerStyle={Style.contentContainerStyle}
showsHorizontalScrollIndicator={false}
>
<View style={Style.bubbleViewWrapper}>
{/ {BubbleStore.map((item, index) => { /}
{store.map((item, index) => {
More detailed version of Css
contentContainerStyle: {
height: CONTAINER_SIZE,
padding: wp(2),
paddingHorizontal: wp(4),
// backgroundColor: 'yellow'
},
bubbleViewWrapper: {
width: 'auto',
flexWrap: 'wrap',
alignSelf: 'flex-start',
backgroundColor: 'yellow',
},
circle: {
justifyContent: 'center',
alignItems: 'center',
borde
I have tried flex: wrap and some other properties but nothing seems to work.
I'm trying to learn how to write React Native apps and they're using Flexbox a lot to style their App screens. How can I achieve the following layout using Flexbox?
Here's the code I have so far:
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#cde9ff',
alignItems: 'center',
justifyContent: 'center',
borderWidth: 5,
},
header: {
borderWidth: 1,
fontSize: 38,
marginBottom: '50%',
},
form: {
borderWidth: 1,
},
input: {
width: 200,
height: 44,
padding: 10,
borderWidth: 1,
borderColor: 'black',
marginBottom: 10,
backgroundColor: 'white',
color: 'black',
borderRadius: 10,
},
footer: {
borderWidth: 1,
},
});
I was trying to do it with the margins but that's not really working so well for me right now, and I figured it be best to properly learn to utilise Flexbox whenever I can.
Does someone know how to change my Stylesheet CSS to how I can easily create the quick paint image layout I made?
I would do something like this, and use flex-growth to push to footer at the end of the page
For the structure :
function App() {
return (
<View style={styles.container}>
<View style={styles.header}>
<Text>Title</Text>
</View>
<View style={styles.form}>
<View style={styles.input}></View>
<View style={styles.input}></View>
<View style={styles.input}></View>
<View style={styles.input}></View>
<View style={styles.input}></View>
<View style={styles.input}></View>
</View>
<View style={styles.footer}>
<Text>Footer</Text>
</View>
</View>
);
}
For the CSS :
const styles = StyleSheet.create({
container: {
flex: 1,
flexDirection: "column",
alignItems: "center",
},
header: {
alignItems: "center",
width: "75%"
},
form: {
alignSelf: "center",
justifyContent: "center",
alignItems: "center",
width: "75%",
flexGrow: 1
},
input: {
width: 200,
height: 44,
padding: 10,
borderWidth: 1,
borderColor: "black",
marginBottom: 10,
backgroundColor: "white",
color: "black",
borderRadius: 10
},
footer: {
alignItems: "center",
width: "50%"
},
});
codesanbox : https://codesandbox.io/embed/green-cloud-ne9yt?fontsize=14&hidenavigation=1&theme=dark
I think that you are looking for something like this:
HTML:
<div class="main-container">
<div class="title">
<h1> Title </h1>
</div>
<div class="form">
form
</div>
<div class="cta">
login
</div>
</div>
CSS:
.main-container{
height: 600px;
display:flex;
flex-direction:column;
justify-content:space-between;
align-items:center
}
.main-container div{
border: 1px solid black;
width: 300px;
padding: 50px
}
You have to add display flex to the parent container of the divs you want to be flexible
You can check Shahriar link: https://flexbox.malven.co/ it explains flex display pretty good
codepen: https://codepen.io/MichaeIMyers/pen/WNEJpLW
I have a simple problem putting just the card to the center of the page. I've already put alignItems: center and justifyContent: center but it still not displaying on the center page.
Check this codesandbox link CLICK HERE
CODE
const useStyles = makeStyles(() => ({
root: {
minWidth: 275,
justifyContent: "center",
alignItems: "center"
},
cardHeader: {
backgroundColor: "blue",
color: "white",
display: "flex",
justifyContent: "center",
alignItems: "center"
}
}));
You can use flex on parent, note that you need to set height so it will center accordingly.
const useStyles = makeStyles(() => ({
root: {
display: "flex",
justifyContent: "center",
alignItems: "center",
height: "100vh"
},
cardHeader: {/*...*/}
}));
In my React Native app, I'm having trouble with making the children the same width as the parent. Please see image below:
I want the black and the green View to take the whole screen width, therefore get rid of the white background caused by the parent.
How can I achieve this? For example, I tried to apply width: 100% to the children, doesn't work. Several solutions like this, this and this don't work here.
Here is the code:
<View style={styles.containerWholePage}>
<View>
<View style={styles.upper}></View>
<View style={styles.lower}></View>
</View>
</View>
const styles = StyleSheet.create({
containerWholePage: {
alignItems: 'center',
},
lower: {
alignItems: 'center',
alignSelf: 'stretch',
backgroundColor: 'green',
flex: 6,
width: '100%', // doesn't work
},
upper: {
alignItems: 'center',
alignSelf: 'stretch',
backgroundColor: 'black',
flex: 3,
width: '100%', // doesn't work
},
});
Do you have an idea what I'm doing wrong?
This work for me as you want.
<View style={styles.containerWholePage}>
{/* <View> */}
<View style={styles.upper}></View>
<View style={styles.lower}></View>
{/* </View> */}
</View>
const styles = StyleSheet.create({
containerWholePage: {
alignItems: 'center',
flex:1,
},
lower: {
alignItems: 'center',
alignSelf: 'stretch',
backgroundColor: 'green',
// height:100,
flex: 6,
width: '100%', // doesn't work
},
upper: {
alignItems: 'center',
alignSelf: 'stretch',
backgroundColor: 'black',
flex: 3,
//height:200,
width: '100%', // doesn't work
},
});
i have tries so many times but when usting different component in scroll body it just not adjust on to the content therefor some content are not included in scrollView. it has cut as shown as in the image..any sugession for fix..?
sample code i used
const height = Dimensions.get('window').height;
const width = Dimensions.get('window').width;
some code in the class
<ScrollView>
<View style={styles.middleview}>
<TextInput
style={styles.textinputs}
placeholder="Location"
placeholderTextColor='grey'
/>
<TouchableOpacity>
<Text style={{fontSize:20}}>
Post Ad
</Text>
</TouchableOpacity>
</view>
</scrollView>
styles used
textinputs: {
backgroundColor: 'white',
paddingTop: '2%',
paddingBottom: '2%',
paddingLeft: '4%',
paddingRight: '4%',
width: '90%',
borderRadius: 50,
margin: '3%',
color: 'grey',
height: '8%',
borderColor: 'white',
borderWidth: .8,
elevation: 10,
middleview:{
backgroundColor: 'lightblue',
flex: 1,
height: Dimensions.get('window').height,
width: Dimensions.get('window').width,
alignItems: 'center',
justifyContent: 'center'
}
here is the image below its cut the component scroll view is ended in the middle of components..
Add style to the scrollview using "contentContainerStyle"
Working eg: https://snack.expo.io/#msbot01/rebellious-cookie