i want to achieve the following:
i am using a module called react-native-easy-grid
the whole thing is wrapped inside a Grid
with:
blue line being Col
red line being Row
orange line being View
here's my code so far:
<Grid>
<Col>
<Thumbnail circular source={selectedChildAvatar} />
</Col>
<Col size={4}>
<Row style={{ flexWrap: 'wrap', alignItems: 'center', justifyContent: 'space-evenly' }}>
{/* name, in review */}
<View>
{!_.isEmpty(selectedChild) && <Text>{selectedChild.firstName}</Text>}
<View
style={{
flexDirection: 'row',
alignItems: 'center'
}}>
<Text note>In review: {inReviewCount <= 0 && 0}</Text>
{inReviewCount > 0 && (
<View
style={{
backgroundColor: 'red',
paddingLeft: 4,
paddingRight: 4,
borderRadius: 50
}}>
<Text note>10</Text>
</View>
)}
</View>
</View>
{/* earnings, penalties */}
<View>
{/* earnings */}
<View
style={{
flexDirection: 'row',
alignItems: 'center'
}}>
<ProgressiveImage
resizeMode='cover'
imageStyle={styles.badge}
style={styles.badge}
source={images.icon.earnings}
/>
<Text style={[styles.digits, styles.earningDigits]}>12</Text>
</View>
{/* penalties */}
<View
style={{
flexDirection: 'row',
alignItems: 'center'
}}>
<ProgressiveImage
resizeMode='cover'
imageStyle={styles.badge}
style={styles.badge}
source={images.icon.penalties}
/>
<Text style={[styles.digits, styles.penaltyDigits]}>12</Text>
</View>
</View>
{/* review button */}
<View style={{ marginVertical: 10 }}>
<Button
small
iconRight
primary
block
disabled={inReviewCount === 0}>
<Text>Review</Text>
<Icon name='arrow-forward' />
</Button>
</View>
</Row>
</Col>
</Grid>
but this is what im getting:
what approach would it be to stretch the wrapped button to 100% of the width?
thank you!
use flex or set width to 100%
<View style={{ marginVertical: 10, flex: 1 }}>
<Button
small
iconRight
primary
block
disabled={inReviewCount === 0}>
<Text>Review</Text>
<Icon name='arrow-forward' />
</Button>
</View>
Related
I am trying to write a signup form and its loading screen modal.
For some reason the modal is not vertically and horizontally align
<View style={{flex: 1,flexDirection: 'column',alignItems: 'center'}}>
<View>
<Text>Something</Text>
<Text>Something</Text>
<Text>Something</Text>
<Text>Something</Text>
<Text>Something</Text>
<TouchableOpacity style={styles.button} onPress={() => alert('hello')}>
<Text style={styles.button_text}>CREATE YOUR NEW ACCOUNT</Text>
</TouchableOpacity>
</View>
<View style={{flex: 1, justifyContent: 'center', alignItems: 'center'}}>
<Modal
animationType="slide"
transparent={true}
visible={modalVisible}
onRequestClose={() => {
Alert.alert('Modal has been closed.');
setModalVisible(!modalVisible);
}}>
<View
style={{width: 300, height: 300, backgroundColor: 'red'}}></View>
</Modal>
</View>
</View>
Can someone help please, here is how current situation is,
I want the modal to horizontally and vertically align in the screen
Try this
<Modal
animationType="slide"
transparent={true}
visible={modalVisible}
onRequestClose={() => {
Alert.alert('Modal has been closed.');
setModalVisible(!modalVisible);
}}>
<View style={{flex: 1, justifyContent: 'center', alignItems: 'center'}}>
<View style={{width: 300, height: 300, backgroundColor: 'red'}}>
...other components you need
</View>
</View>
</Modal>
I have problem on css of react native, I don't know how can I implement 2 icon connect with dash, Really don't know what this called on react native, is this stepper?. I already have sample component, the main problem is how to achieve this dashes with icons.
Here is the the example:
My Actual Output:
Sample Code:
<View style={{ justifyContent: 'flex-end', flex: 1, padding: 20 }}>
<Card style={{ justifyContent: 'center', borderRadius: 20, elevation:4}}>
<CardItem>
<Left>
<Body>
<View style={{flexDirection:'row', padding:20}}>
<View style={{flexDirection:'row'}}>
</View>
<View style={{flexDirection:'column',flex:1}}>
<Text style={{alignSelf:'center', color:'#000', fontWeight:'bold', fontSize:17}} adjustsFontSizeToFit numberOfLines={2}>Pick Up Request {'\n'}</Text>
<Item inlineLabel last>
<Text style={{fontSize:14}}>US Rt 11, Evans Mills NY 13637. 901 Route 110 </Text>
</Item>
<Text>{'\n'}</Text>
<Item inlineLabel last>
<Text style={{fontSize:14}}>Farmingdale NY 11735. 2400 Route 9{'\n'}</Text>
</Item>
</View>
</View>
<View style={{flexDirection:'row'}}>
<View style={{flexDirection:'row',flex:1, justifyContent:'space-around'}}>
<Button small primary title="Message" >
<Text>Message</Text>
</Button>
<Button small warning title="Fetch" >
<Text>Fetch</Text>
</Button>
<Button small light title="Cancel" >
<Text>Cancel</Text>
</Button>
</View>
</View>
</Body>
</Left>
</CardItem>
</Card>
</View>
Working Example: Expo Snack
import * as React from 'react';
import { Text, View, StyleSheet } from 'react-native';
import Constants from 'expo-constants';
import { Card, CardItem, Item, Left, Body, Button } from 'native-base';
export default function App() {
return (
<View style={styles.container}>
<View style={{ justifyContent: 'flex-end', flex: 1, padding: 20 }}>
<Card
style={{ justifyContent: 'center', borderRadius: 20, elevation: 4 }}>
<CardItem>
<Left>
<Body>
<View style={{ flexDirection: 'row', padding: 20 }}>
<View
style={{
flexDirection: 'column',
flex: 1,
justifyContent: 'space-between',
}}>
<View
style={{
position: 'absolute',
left: -25,
top: 50,
zIndex: 200,
}}>
<DotTrail />
</View>
<Text
style={{
alignSelf: 'center',
color: '#000',
fontWeight: 'bold',
fontSize: 17,
}}
adjustsFontSizeToFit
numberOfLines={2}>
Pick Up Request {'\n'}
</Text>
<Item inlineLabel last>
<Text style={{ fontSize: 14 }}>
US Rt 11, Evans Mills NY 13637. 901 Route 110{' '}
</Text>
</Item>
<Text>{'\n'}</Text>
<Item inlineLabel last>
<Text style={{ fontSize: 14 }}>
Farmingdale NY 11735. 2400 Route 9{'\n'}
</Text>
</Item>
</View>
</View>
<View style={{ flexDirection: 'row' }}>
<View
style={{
flexDirection: 'row',
flex: 1,
justifyContent: 'space-around',
}}>
<Button small primary title="Message">
<Text>Message</Text>
</Button>
<Button small warning title="Fetch">
<Text>Fetch</Text>
</Button>
<Button small light title="Cancel">
<Text>Cancel</Text>
</Button>
</View>
</View>
</Body>
</Left>
</CardItem>
</Card>
</View>
</View>
);
}
function DotTrail() {
return (
<>
<Dot radius={10} color={'green'} />
<View>
<Dot radius={3} color={'grey'} backgroundColor={'grey'} margin={5} />
<Dot radius={3} color={'grey'} backgroundColor={'grey'} margin={5} />
<Dot radius={3} color={'grey'} backgroundColor={'grey'} margin={5} />
</View>
<Dot radius={10} color={'red'} />
</>
);
}
function Dot({ color, radius, backgroundColor = null, margin }) {
return (
<View
style={{
width: radius * 2,
height: radius * 2,
borderWidth: 2,
borderColor: color,
borderRadius: radius,
marginRight: 10,
alignSelf: 'center',
backgroundColor: backgroundColor,
margin: margin,
}}></View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
paddingTop: Constants.statusBarHeight,
backgroundColor: '#ecf0f1',
padding: 8,
marginBottom: 3,
},
});
I'll show you how u can make it from scratch:
Just replace your icon with these simple characters i did use here!
const MyCustomInputs = ({message, duration}) => {
const [showNotification, setShowNotification] = React.useState(false)
return (
<div style={{position:"relative",width:200, height:50, display:"flex", flexDirection:"column", justifyContent:"space-between"}}>
<div style={{width:200,display:"flex", justifyContent:"space-between"}}>
<MyInputIcon color="orange"/>
<input type="text"/>
</div>
<MyDashes content={"..."}/>
<div style={{width:200,display:"flex", justifyContent:"space-between"}}>
<MyInputIcon color="green"/>
<input type="text"/>
</div>
</div>
)
}
const MyInputIcon = ({color}) => <div style={{color}}>O</div>
const MyDashes = ({content}) => <div style={{position:"absolute",top:17,left:1,writingMode: "vertical-rl"}}>{content}</div>
ReactDOM.render(
<MyCustomInputs />
,document.getElementById("react")
);
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.4/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.4/umd/react-dom.production.min.js"></script>
<div id="react"></div>
I'm trying to define a list of elements with the same height, but the result is that the component takes all the available space.
This is the code:
return (
<View style={{flex: 1, flexDirection: 'row', justifyContent: "center"}} key={location.id}>
<Text style={{width: "80%", height: 20}}>{location.name}</Text>
<Button
style={{width: "20%", height: 20}}
title="x"
onPress={() => this.removeLocationFromDevice(location)}
/>
</View>
)
This is the result:
How can I make sure that the button and the text elements have just enough height to display the element and nothing more?
You can set the initial View to flex 1 and wrap the button + text in an other view
return (
<View style={{flex: 1}} key='key'>
<View style={{ flexDirection: 'row', justifyContent: "center"}}>
<Text style={{width: "80%", height: 20}}>text</Text>
<Button
style={{width: "20%", height: 20}}
title="x"
/>
</View>
</View>
);
My text component doesn't align when the text is more than 2 lines (see screenshot). I have tried playing around with alignment and ellipsizeMode but none of the settings change anything. Why is the 2nd line indented?
My code:
<View style={{ flex: 4, flexDirection: 'row', marginTop: 10}}>
<View style={{ flex: 1, alignItems: 'flex-end' }}>
<CircleIndicator style={{marginRight: 29}} />
<View
style={{
width: 4,
height: '100%',
backgroundColor: styles.colors.lipstick,
marginRight: 35,
}}
/>
</View>
<View style={{ flex: 2 }}>
<View style={{ flex: 1 }}>
<Text weight='bold' color='darkIndigo'> {activityType} </Text>
</View>
<View style={{ flex: 1 }}>
<Text color='blueyGrey' style={{opacity: 0.5}}> {activityDate}
</Text>
</View>
<View style={{ flex: 1, marginBottom: 30 }}>
<Text color='blueyGrey'> {activityDescription} </Text>
</View>
</View>
<View style={{ flex: 1 }} >
<Text weight='bold' color='lipstick'> {activityPoints} PTS </Text>
</View>
</View>
So I left this issue alone for a couple of days and revisited it. The reason for the misalignment was this:
<Text color='blueyGrey'> {activityDescription} </Text>
Changed it to:
<Text color='blueyGrey'>{activityDescription}</Text>
Such a rookie mistake :D
I just want the Icon to be on the left and the text to be on center.
I have this structure:
<View style={styles.mainContainer}>
<Error screen={screen}/>
<View style={styles.headerContainer}>
{back &&
<Icon
raised
name='arrow-back'
onPress={ onBackPress }
containerStyle={styles.back}/>
}
<Text style={styles.header}>{ title }</Text>
</View>
<View style={styles.contentContainer}>
{ children }
</View>
</View>
Kinda like this:
-> MainContainer
--> HeaderContainer
----> Back button
----> Title
mainContainer: {
flex: 1,
flexDirection: 'column',
alignItems: 'stretch',
justifyContent: 'flex-start'
},
headerContainer: {
flex: 1,
padding: 10,
flexDirection: 'row',
// ommited for clarity
},
back: {
alignSelf: 'flex-start'
},
header: {
fontSize: 24,
alignSelf: 'center'
},
But it doesnt work as it produces:
I also tried adding in HeaderContainer:
justifyContent: 'space-between',
and a blank <View />, but the result is not good:
As you can see, it's not centered really.
Edit Produces:
It's not really centered, because we put an imaginary thrid element. Can we do it with only two elemets? One in start and other on center?
Why is it not posible?
Try the following:
<View style={{ flex: 1, flexDirection: 'row', alignItems: 'center' }}>
<View style={{ flex: 1 }}>
{leftContent}
</View>
<View style={{ flex: 1, alignItems: 'center' }}>
{centerContent}
</View>
<View style={{ flex: 1, alignItems: 'flex-end' }}>
{rightContent}
</View>
</View>
Don't forget to set textAlign: 'center' if center component is <Text> or textAlign: 'right' if the right component is Text.
Put your Icon and text in separate Views and asign a flex to it something like this
<View style={styles.mainContainer}>
<Error screen={screen}/>
<View style={styles.headerContainer}>
<View style={{flex:.3,alignSelf:'flex-start}}>
{back &&
<Icon
raised
name='arrow-back'
onPress={ onBackPress }
containerStyle={styles.back}/>
}
</View>
<View style={{flex:.7,alignSelf:'flex-end',alignItems:'center'}}>
<Text style={styles.header}>{ title }</Text>
</View>
</View>
<View style={styles.contentContainer}>
{ children }
</View>
</View>
I think it shoud fix the problem