I am trying to set my button style that way, it will be spread across my View. Currently its creating white border on the left and on the bottom of my button (see attached screenshot).
My code:
let {width, height} = Dimensions.get('window');
let photoWidth = width/4;
return (
<View style={{width: width, height: 500}}>
<ScrollView style={{width: width, height: height}}>
<View style={{flexDirection: 'row', width: width, flexWrap: 'wrap'}}>
{
this.state.photos.map((p, i) => {
return (
<SelectedPhoto
key={i}
index={i}
style={{
width: photoWidth,
height: photoWidth,
}}
limit={this.state.supportLength}
photo={p}
onSelectPhoto={this.onSelectPhoto}
onDeselectPhoto={this.onDeselectPhoto}
/>
);
})
}
</View>
</ScrollView>
<View style={{ flexDirection:"row", flexWrap: 'wrap', width: width }}>
<Button
onPress={this.onNext}
containerViewStyle={{width: width}}
backgroundColor={Colors.red}
title='NEXT' />
</View>
</View>
);
I consider Button component you used from react-native. Just remove wrapper flex you added as you set width to it.
<Button
onPress={this.onNext}
containerViewStyle={{width: width}}
backgroundColor={Colors.red}
title='NEXT' />
Related
I would like my button (the blue block across the screen) to be much smaller and in the bottom right corner of the screen. How do I do this with styling in react-native?
Here is my button at the moment:
App.js
render() {
return (
<View>
<View style={{flexDirection:'row', alignItems:'center'}}>
<Text>Plan Name: </Text>
<TextInput style={{height: 40, borderColor: 'black', width: 120, borderWidth: 0.8}}
onChangeText={(text) => this.setState({text})}
value={this.state.text}/>
</View>
<MyDatePicker/>
<Button style={{ width: 50, alignSelf: "flex-end" }}
title="Add Plan"
onPress={() =>
this.props.navigation.navigate('PlanScreen')}>
</Button>
</View>
)
}
}
Do you want it to be right of the button that is hidden if so you can give it a flexDirection of row and give flex to each wrapper so that it adjust itself
something like this.
<View style={{flexDirection: 'row', flex: 1}}>
<View style={{flex: 0.8}}><Button></Button></View>
<View style={{ flex: 0.2}}><Button></Button></View>
</View>
If you want it to be on separate line below the button that is hidden you can do
<View>
<Button style={{ width: 50, alignSelf: "flex-end" }}></Button>
</View>
and you can adjust the width accordingly.
You can update your render function as
render() {
return (
<View style={{flex: 1}}>
<View style={{flexDirection:'row', alignItems:'center'}}>
<Text>Plan Name: </Text>
<TextInput style={{height: 40, borderColor: 'black', width: 120, borderWidth: 0.8}}
onChangeText={(text) => this.setState({text})}
value={this.state.text}/>
</View>
<MyDatePicker/>
<View style={{ width: 50, alignSelf: "flex-end">
<Button
title="Add Plan"
onPress={() =>
this.props.navigation.navigate('PlanScreen')}>
</Button>
</View>
</View>
)
}
}
I build react native app and I'm trying to make 2 items per row with equal width in flatList.
what I get it's 2 items per row but not equal width.
const itemProduct = props => {
return (
<Button style={style.container} onPress={props.onPress}>
<View style={style.imageContainer}>
<LoadingImage resizeMode='contain' resizeMethod='resize' source={props.Image ? { uri: 'https://www.saramashkim.co.il/'+props.Image } : require('../../assets/images/default_no_image.png')} style={style.image} />
</View>
<View style={style.textContainer}>
<Text style={style.productName}>vodka</Text>
<View style={style.specialOffer}>
{props.inPromotion ? <Text>special offer</Text> : null}
</View>
<View style={style.bottomLine}>
<Text style={style.costText}>lorem ipos</Text><View style={style.bottomLine}>{props.discount ? <Text style={style.Price}>lorem ipos{parseFloat(Math.round(props.price_per_case * 100) / 100).toFixed(2)}</Text> : null}<Text style={style.discountPrice}>dollar{parseFloat(Math.round(props.price_per_case * ((100 - props.discount) / 100) * 100) / 100).toFixed(2)}</Text></View>
</View>
</View>
</Button>
)
}
style
const style = StyleSheet.create({
container : {
backgroundColor: colors.dark_red,
paddingTop:calcSize(10),
margin:calcSize(10),
minWidth:(width-15)/2,
},
imageContainer:{
flex:1,
alignItems:'center'
},
textContainer:{
flex:2,
//backgroundColor:'red',
paddingHorizontal:calcSize(30)
},
image:{
width: calcSize(175),
height: calcSize(175)
},
brandName:{
color:'#7c7c7c',
fontFamily:'Poppins-Light',
fontSize:calcSize(25),
marginBottom:calcSize(15)
},
productName:{
color: colors.black,
fontFamily:'Poppins-Regular',
fontSize:calcSize(20),
width:calcSize(300)
},
flatList
<View style={style.list}>
<FlatList
refreshing={this.state.refreshing}
numColumns = {2}
onRefresh={this.onListRefresh}
data={products}
keyExtractor={(o, i) => i.toString()}
renderItem={this.renderProductListItem}
ListFooterComponent={() => {
if ((this.state.products.length < this.state.totalFound || this.state.loading) && !this.state.refreshing)
return <Spinner style={style.loading} />
return <View style={style.loading} />
}}
ItemSeparatorComponent={() => <View style={style.separator} />} />
</View>
</View>
list style
list:{
flex:1,
flexDirection:'row',
paddingHorizontal: calcSize(30),
}
photo
I want to make 2 item per row with equal width, also into the photo as you can see the text in left not equal to the right so it's issue.
Use flexbox with flexbasis and flex grow try this
<View style={{flex: 1, flexDirection: 'row', flexWrap: 'wrap', flexGrow: 0}}>
<View style={{flexBasis: '50%', height: 50, backgroundColor: 'powderblue'}} />
<View style={{flexBasis: '50%', height: 50, backgroundColor: 'skyblue'}} />
<View style={{flexBasis: '50%', height: 50, backgroundColor: 'steelblue'}} />
<View style={{flexBasis: '50%', height: 50, backgroundColor: 'blue'}} />
</View>
Tested in my android device.
Live demo is over here! Give this a try
If any issue comment that down below
Right now you've exclusively set the width of the child element as minWidth:(width-15)/2, the margin as margin:calcSize(10),
padding for the main container as paddingHorizontal: calcSize(30) which is causing the issue .
If you want to go the minWidth way, then you need to calculate the spacing correctly
minWidth = (screenWidth - (paddingHorizontal * 2) - (margin * 2) - (separatorWidth)) / 2 = (screenWidth - 80) / 2
Since there is no separatorWidth mentioned in the question
paddingHorizontal: Setting paddingHorizontal is like setting both of paddingLeft and paddingRight.
margin:
Setting margin has the same effect as setting each of marginTop, marginLeft, marginBottom, and marginRight.
list:{
flex:1,
paddingHorizontal: calcSize(30),
},
container : {
flex: 1, //<== Either add a height or a flex
backgroundColor: 'darkred',
paddingTop:calcSize(10),
margin:calcSize(10),
minWidth:(width-80)/2,
},
Better approach would be to use height and flex , so that width can be scaled accordingly.
Here's a snack demo
My issue is, that i want the image is overflowing the Drawer
and does not fit the view width
I use contentComponent to have a custom Drawer.
the answer in the link below shows kinda what i want to achieve.
The issue though is, that width and heigth are given in absolute
values. This won't be working for tablet, iphones and android phones.
Any ideas?
export default StyleSheet.create({
...ApplicationStyles.screen,
container: {
//marginTop: Metrics.navBarHeight,
flex: 1,
flexDirection: 'column',
alignItems: 'stretch',
},
contentContainer: {
backgroundColor: 'transparent'
},
drawerImage: {
position: 'absolute',
top: 0,
left: 0,
right: 0,
bottom: 0,
opacity: 0.05,
backgroundColor: 'green'
// resizeMode: "stretch"
},
render () {
const { navigation } = this.props
return (
<View style={styles.container}>
<Image source={Images.drawerBackground} style={styles.drawerImage}/>
<ScrollView style={styles.contentContainer}>
<SafeAreaView forceInset={{ top: 'always', horizontal: 'never' }}>
<DrawerButton
iconName='ios-map'
text='Map'
onPress={() => navigation.navigate('MapView')}
/>
<DrawerButton
iconName='md-trending-up'
text='Elevation'
onPress={() => navigation.navigate('Elevation')}
/>
<DrawerButton
iconName='md-people'
text='Friends'
onPress={() => navigation.navigate('Friends')}
/>
<DrawerButton
iconName='md-person'
text='Profile'
onPress={() => navigation.navigate('Profile')}
/>
<DrawerButton
iconName='md-settings'
text='Settings'
onPress={() => navigation.navigate('Settings')}
/>
<View style={styles.checkinBtn}>
<CheckinButton
iconName='md-pin'
text='Checkin Location'
onPress={() => navigation.navigate('Settings')}
/>
</View>
</SafeAreaView>
</ScrollView>
<View style={styles.footer}>
<Text style={styles.text}>
........
</Text>
</View>
</View>
)
}
}
How to set a background Image of Navigator in React-Native
try using ImageBackground instead of Image and wrap all your elements into it
Refer the official docs here
import { ImageBackground } from "react-native";
<ImageBackground source={require('../../assets/images/AImg.png')} style={{ width: 100, height: 100}}>
//ur view/text flows here.....
</ImageBackground>
import and add ImageBackground
https://facebook.github.io/react-native/docs/images.html#background-image-via-nesting
I have two buttons that look like this
This is the code
render = () => (
<Image
source={require('../../images/login.jpg')}
style={[AppStyles.containerCentered, AppStyles.container, styles.background]}
>
<Image
source={require('../../images/logo.png')}
style={[styles.logo]}
/>
<Spacer size={200} />
<View style={[AppStyles.row, AppStyles.paddingHorizontal]}>
<View style={[AppStyles.flex1]}>
<Button
title={'Login'}
icon={{ name: 'lock' }}
onPress={Actions.login}
/>
</View>
</View>
<Spacer size={10} />
<View style={[AppStyles.row, AppStyles.paddingHorizontal]}>
<View style={[AppStyles.flex1]}>
<Button
title={'Sign up'}
backgroundColor={'#FB6567'}
icon={{ name: 'face' }}
onPress={Actions.signUp}
/>
</View>
</View>
</Image>
)
I want the buttons to occupy one row and possibly share 40% - 40% of the space with the rest of the 20% going to the padding. How can i have them occupy one row?.
You'd need to define a container with flexDirection set to row and use justifyContent depending on where you want your padding:
render() {
return (
<View style={styles.container}>
<View style={styles.button} />
<View style={styles.button} />
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
flexDirection: 'row',
justifyContent: 'space-between'
},
button: {
backgroundColor: 'green',
width: '40%',
height: 40
}
});
Change space-between to space-around if you want the padding to be distributed to the sides too. (Demo)
I have added a dropdown and when I open it, the dropdown menu is hidden behind the views that have been added afterwards. How can I bring the dropdown view to front in react-native. I have now used an overlay and it brings the view to front but the view is not set in its normal location, instead it is displaying as the top most element.
In main render I have a listView:
<ListView ref='listView'
style = {{ backgroundColor: '#EAEAEC'}}
dataSource={this.state.dataSource}
automaticallyAdjustContentInsets={false}
renderRow={this.renderRow}/>
In render row of listView:
return (
<View style={{backgroundColor: '#FFF', marginBottom:5, shadowColor : '#BCBCBC', shadowOffset: {width: 0, height: 0}, shadowOpacity: 0.7, height:150}} >
<View style={{flex:1, flexDirection:'row',justifyContent: 'center', alignItems: 'center', backgroundColor: 'yellow', height:100}}>
<Overlay isVisible={true}><List /></Overlay>
</View>
<View style={{flex:5, flexDirection:'row',justifyContent: 'flex-end', alignItems: 'center', paddingTop:17, marginBottom:10}}>
<View style={{flex:1}}/>
<View style={{flex:1, alignItems: 'center'}}><Image style={styles.imageStyle} source={require('./audit_new_u.imageset/audit_new_u.png')} /></View>
<View style={{flex:1, alignItems: 'center'}}><Image style={styles.imageStyle} source={require('./audit_inProcess_u.imageset/audit_inProcess_u.png')} /></View>
<View style={{flex:1, alignItems: 'center'}}><Image style={styles.imageStyle} source={require('./audit_complete_s.imageset/audit_complete_s.png')} /></View>
<View style={{flex:1}}/>
</View>
</View>
);
Now the dropdown which is actually the List tag in render row which I have placed in overlay tags is now placed on top of the screen.
Add {zIndex: 999}
<View style={{zIndex: 999}}>
{...anything}
</View>
You have to make sure all the sub views inside your main view have a zIndex style property.
Like so:
const [myIndex, setMyIndex] = useState(1)
<View>
<View style={{zIndex: 3}}></View>
<View style={{zIndex: myIndex}}>
<Button onPress={() => setMyIndex(4)} title='Press to show above the other' />
</View>
<View style={{zIndex: 2}}></View>
</View>
Just add zIndex: -1 in the style of the view, you want to go behind in the hierarchy.
appActivityIndicatorOverlay: {
height: '100%',
width: '100%',
opacity: 0.8,
position: 'absolute',
elevation: (Platform.OS === 'android') ? 50 : 0,
backgroundColor: 'white',
color: theme.colors.brand.primary,
zIndex: 100
},