I have this header written in CSS and HTML, I'm trying to make it in react native, but seems like position: 'absolute' removes my icon from the scene.
So, In my react-native app I have the following markup:
<View
style={header}>
<TouchableWithoutFeedback
onPress={this.props.callback}>
<View>
<Image
style={headerIcon}
source={require('./img/back.png')} />
</View>
</TouchableWithoutFeedback>
<Text style={headerTitle}>{this.props.title.toUpperCase()}</Text>
</View>
And the following stylesheet
const styles = StyleSheet.create({
header: {
height: 55,
alignItems: 'center',
justifyContent: 'center',
backgroundColor: colors.white,
flexDirection: 'row'
},
headerTitle: {
color: colors.black,
fontFamily: 'Dosis',
fontSize: 15
},
headerIcon: {
width: 22,
height: 16
}
})
Can someone explain me how to make the style for the react-native header to look like http://jsbin.com/bireqabujo/2/edit?html,css,output ?
Try This
<View style={styles.header}>
<TouchableWithoutFeedback
onPress={this.props.callback}>
<View>
<Image
style={styles.headerIcon}
source={require('./img/back.png')} />
</View>
</TouchableWithoutFeedback>
<View style={styles.headerTitleWrapper}><Text style={styles.headerTitle}>MY TITLE</Text></View>
</View>
And change your style to this
const styles = StyleSheet.create({
header: {
height: 55,
alignItems: 'center',
backgroundColor: "#fff",
flexDirection: 'row'
},
headerTitleWrapper: {flex: 1,
justifyContent: 'center',
alignItems: 'center'
},
headerTitle: {
color: 'black',
fontFamily: 'Dosis',
fontSize: 15
},
headerIcon: {
width: 22,
height: 16
}
})
Check This on
https://rnplay.org/apps/iSpc1Q
Related
Currently, my username text appears in the center of the view. I want to change it such that it appears on the exact right of the thumbnail. If I remove the alignItems: 'center', from the item, it disturbs the whole style. How else can I fix this?
import { StyleSheet, Alert } from 'react-native';
import { View, Text, Button, Thumbnail } from 'native-base';
import Icon from 'react-native-vector-icons/FontAwesome';
import { moderateScale } from 'react-native-size-matters';
import { TouchableOpacity } from 'react-native-gesture-handler';
return (
<View style={styles.item}>
<TouchableOpacity>
<Thumbnail
style={styles.thumbnail}
source={{
uri:
'https://cdn4.iconfinder.com/data/icons/avatars-xmas-giveaway/128/afro_woman_female_person-512.png',
}}
/>
</TouchableOpacity>
<View style={styles.nameContainer}>
<Text style={styles.userName}>USER NAME</Text>
</View>
<Button
rounded
style={styles.deleteButton}>
<Icon name="trash-o" size={moderateScale(20)} color="black" />
</Button>
</View>
);
};
const styles = StyleSheet.create({
item: {
backgroundColor: 'pink',
borderRadius: moderateScale(20),
padding: moderateScale(20),
marginVertical: moderateScale(8),
marginHorizontal: 16,
height: moderateScale(70),
justifyContent: 'space-between',
flexDirection: 'row',
alignItems: 'center',
},
thumbnail: {
height: 70,
width: 70,
position: 'relative',
},
nameContainer: {
//flex: 1,
// alignItems: 'center',
// textAlign: 'center',
},
userName: {
paddingRight: moderateScale(55),
paddingLeft: moderateScale(20),
//textAlign: 'center',
color: 'white',
fontWeight: '900'
},
deleteButton: {
backgroundColor: '#31C283',
width: moderateScale(45),
justifyContent: 'center',
},
horizontalLine: {
marginTop: moderateScale(30),
width: '87%',
height: moderateScale(1),
backgroundColor: 'grey',
alignSelf: 'center',
},
});
I tried creating a snack expo but I am unable to use native base in it.
You have added unwanted padding, Change the styles like below and it will place the text next to the Thumbnail.
nameContainer: {
flex: 1,
},
userName: {
color: 'white',
fontWeight: '900'
},
I have put an icon with the text box but its not showing in a same line,there is problem in alignment.I have tried many solutions . I am using flex Box.Any help would be appreciated.I set parent view to column and set child view in which icon and text box is going to show to row to align it in the same row but its not aligning it proper.i don't knows where the problem is occurring.
import {
View,
ImageBackground,
Text,
StyleSheet,
Image,
KeyboardAvoidingView,
TextInput,
TouchableOpacity
} from "react-native";
import React from "react";
import { AntDesign } from "#expo/vector-icons";
import { Feather } from "#expo/vector-icons";
export default function Login() {
return (
<View>
<ImageBackground
style={styles.backgroundImage}
source={require("../assets/bg_image.png")}
>
<View style={styles.container}>
<Image source={require("../assets/ic_logo.png")} />
<Text style={styles.welcomeText}>Welcome to SMACC</Text>
<KeyboardAvoidingView behavior="position">
<View style={styles.loginInfo}>
<View style={styles.inputField}>
<Text>User Name</Text>
<View style={styles.inputText}>
<AntDesign style={styles.icon} name="user" />
<TextInput placeholder="Enter User Name Here" />
</View>
</View>
<View
style={{
borderBottomColor: "#999999",
borderBottomWidth: 1
// marginTop: 12.5
}}
/>
<View style={styles.inputField}>
<Text>Password</Text>
<View style={styles.inputText}>
<Feather style={styles.icon} name="lock" />
<TextInput placeholder="Enter Password Here" />
</View>
</View>
<View style={styles.loginButton}>
<TouchableOpacity>
<Text style={styles.loginButtonText}>Login</Text>
</TouchableOpacity>
</View>
</View>
</KeyboardAvoidingView>
<View>
<Text style={styles.forgetPasswordLink}>Foget Password ?</Text>
</View>
</View>
</ImageBackground>
</View>
);
}
let styles = StyleSheet.create({
container: {
flex: 1,
flexDirection: "column",
justifyContent: "center",
alignItems: "center"
},
backgroundImage: {
width: "100%",
height: "100%"
},
welcomeText: {
paddingVertical: 20,
fontSize: 15,
fontFamily: "Roboto-Medium"
},
loginInfo: {
backgroundColor: "#FFFFFF",
shadowColor: "#000",
shadowOffset: { width: 0, height: 1 },
shadowOpacity: 0.8,
shadowRadius: 2,
elevation: 5,
borderRadius: 5,
height: 165,
width: 253
},
inputField: {
flex: 1,
paddingTop: 10,
marginLeft: 20,
//fontSize: 10,
color: "#999999",
fontFamily: "Roboto-Medium"
},
inputText: {
flexDirection: "row",
//flex:0.5,
//marginLeft: 20,
fontSize: 12,
color: "#000000",
fontFamily: "Roboto-Medium"
},
loginButton: {
flex: 0.6,
alignItems: "center",
justifyContent: "center",
backgroundColor: "#1968B3",
borderBottomLeftRadius: 5,
borderBottomRightRadius: 5
},
loginButtonText: {
color: "#FFFFFF",
fontFamily: "Roboto-Medium",
fontSize: 12
},
forgetPasswordLink: {
paddingTop: 10,
fontFamily: "Roboto-Medium",
fontSize: 12,
color: "#333333"
},
icon: {
paddingRight: 5
//paddingTop:7
}
});
Try this as inputText style
inputText: {
flexDirection: 'row',
justifyContent:'space-between',
alignItems:'center',
fontSize: 12,
color: '#000000',
fontFamily: 'Roboto-Medium',
},
feel free for doubts..
Can you try adding display: 'flex' to the css and see if that works?
inputText: {
display: 'flex',
flexDirection: "row",
//flex:0.5,
//marginLeft: 20,
fontSize: 12,
color: "#000000",
fontFamily: "Roboto-Medium"
}
Suppose I want to position a button 30% of the way the down its parent element (i.e. the whole page) in React Native. How do I do this using Flexbox or some other method?
For example, adding justifyContent: 'center' to the parent element would work if I wanted the button to be 50% of the way down the page.
Here is my React layout / stylesheet:
<View style={styles.container}>
<LinearGradient colors={['#e80ca3', '#e500ff', '#950ce8']} style={styles.linearGradient}>
<View style={styles.scanContainer}>
<View style={styles.scanButton} />
</View>
</LinearGradient>
</View>
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
},
linearGradient: {
flex: 1,
alignSelf: 'stretch',
justifyContent: 'center', // What to put here to make `scanContainer` 30% instead of 50% of the way down?
},
scanContainer: {
alignSelf: 'center',
},
scanButton: {
width: 175,
height: 175,
borderRadius: 87.5,
backgroundColor: 'green',
},
});
Here's the solution using flex properties
linearGradient: {
flex: 1,
alignSelf: 'stretch', //... Remove justifyContent: 'center',
},
scanContainer: {
flex: 0.7,
justifyContent: 'flex-end', // 30 % from the bottom
alignSelf: 'center',
},
You can add an empty View with flex 0.7 above the button:
<View style={{ flex: 1 }}>
<View style={{ flex: 0.7 }} />
<Button title="button" />
</View>
You can use absolute positioning for the button container.
scanContainer: {
alignSelf: 'center',
position: 'absolute',
bottom: '30%',
left: 0
}
Using flex:
<View style={[styles.scanContainer,{flex:1}]}>
<View style={{flex:1}} />
<View style={styles.scanButton} />
<View style={{flex:2}} />
</View>
Using Dimension:
import {Dimensions} from 'react-native';
<View style={[styles.scanButton,{marginTop:Dimensions.get('window').height * 0.3}]} />
I'm building a react native app, and I had to make a custom button component.
When I was prototyping my interface, all of my buttons were just <View>. When I was finished making my new component, I just replaced those <View> tags with the name of my component <SOCButton>. After doing so, the layout of the content inside the button is completely messed up.
This is how it looked using the <View> component:
Here's how it looks with my custom component:
Here's the code for my component:
<TouchableWithoutFeedback onPressIn={this.depressed.bind(this)} onPressOut={this.unpressed.bind(this)}>
<Animated.View style={[pressedStyle,{flex:1}]}>
{this.props.children}
</Animated.View>
</TouchableWithoutFeedback>
Here's where it's used:
<View style={styles.RecentPOV}>
<View style={styles.RecentPOVProfilePicContainer}>
<Image style={styles.RecentPOVProfilePic} source={{uri:'https://pbs.twimg.com/profile_images/824476541384097793/qGw1Whej.jpg'}}/>
<Text style={styles.RecentPOVUserRating}>4.0</Text>
</View>
<View style={styles.RecentPOVInfoContainer}>
<Text style={styles.RecentPOVUser}>Jack Kalina</Text>
<View style={styles.RecentPOVStars}>
<View style={styles.FullStarsContainer}>
<Image style={styles.FullStars} source={StarShape.Full}/>
<View style={StarMaskStyle.RecentPOVStarMask}></View>
</View>
<Image style={styles.EmptyStars} source={StarShape.Empty}/>
</View>
<Text style={styles.RecentPOVTimestamp}>February 2nd, 12:14 PM</Text>
</View>
</View>
And the relevant styling:
RecentPOV: {
backgroundColor: '#e8e8e8',
width: '100%',
height: null,
marginVertical: 15,
borderRadius: 20,
padding: 15,
flexDirection:'row'
},
RecentPOVProfilePic: {
height: 100,
width: 100,
borderRadius: 10
},
RecentPOVProfilePicContainer: {
alignItems: 'flex-end'
},
RecentPOVInfoContainer: {
marginLeft: 20
},
RecentPOVUserRating: {
position:'absolute',
fontSize:30,
fontWeight: '900',
color: 'white',
top:62,
right:4,
textAlign:'right',
flex: 1
},
RecentPOVStars: {
flex: 1,
top: -33,
width: '110%'
},
RecentPOVUser: {
flex: 1,
color: '#2b2b2b',
fontSize: 20,
fontWeight: 'bold'
},
RecentPOVTimestamp: {
flex: 1,
top: 15,
color: '#636363',
fontSize:15
}
I'm trying to have a popup dialog (created as a component with position: 'absolute') and to close it when user clicks outside of the popup.
I'm new to React Native so other things I did might be wrong, forgive me for that :)
This is a screenshot of the popup when it is open
This is some of the code:
From the Popup component:
render() {
if (!this.props.open) {
return <View />
}
return (
<View style={styles.container}>
<View style={styles.popupStyle}>
<View style={{flex:1, justifyContent: 'center', marginRight: 10}}>
<View style={styles.amountEnterStyle}>
<TextInput
keyboardType={'numeric'}
underlineColorAndroid='transparent'
autoCorrect={false}
style={styles.textInputStyle}
value={this.state.amount}
onChangeText={this._onAmountEnter.bind(this)} />
<Text style={styles.currencyTextStyle}>NIS</Text>
</View>
<View style={styles.separatorStyle} />
<View style={styles.categorySectionStyle}>
{this._renderCategoryDropdown()}
</View>
</View>
<View style={{justifyContent: 'center'}}>
<TouchableWithoutFeedback
onPress={this._onAddPaymentClicked.bind(this)} >
<View style={{width: 110, height:100, backgroundColor: "#ff0000"}} />
</TouchableWithoutFeedback>
</View>
</View>
</View>
);
const styles = StyleSheet.create({
container: {
position: 'absolute',
top: 0,
bottom: 0,
left: 0,
right: 0,
width: undefined,
height: undefined,
justifyContent: 'center',
alignItems: 'center',
},
amountEnterStyle: {
justifyContent: 'center',
alignItems: 'center',
flexDirection: 'row'
},
textInputStyle: {
width: 100,
fontSize: 50,
fontWeight: 'bold',
height: 65,
flex: 1,
marginTop: -20,
paddingBottom: 0,
marginBottom: 0,
marginLeft:10,
textAlignVertical: 'center'
},
currencyTextStyle: {
fontSize: 50,
color: '#c0c0c0',
marginTop: -20,
textAlignVertical: 'center'
},
separatorStyle: {
height: 2,
marginTop: 0,
backgroundColor: '#c0c0c0',
},
categorySectionStyle: {
justifyContent: 'flex-start',
flexDirection: 'row',
alignItems: 'flex-start',
marginTop: 8
},
categoryColorDotStyle: {
width: 20,
height: 20,
borderRadius: 100/2,
marginLeft: 10,
marginTop: 5,
},
categoryTextStyle: {
fontSize: 24,
marginHorizontal: 4,
color: '#c0c0c0',
marginLeft: 10,
paddingRight: 10,
marginTop: -3
},
popupStyle: {
width: Dimensions.get('window').width - 60,
flexDirection: 'row',
justifyContent: 'space-between',
height: 150,
paddingRight:10,
paddingLeft:10,
borderRadius: 2,
margin: 20,
padding: 10,
opacity: 1,
borderRadius: 10,
backgroundColor: '#ffffff'
},
dropdownSeparator: {
height: 1,
backgroundColor: 'cornflowerblue'
},
And this is the hosting component:
render() {
var totalIncome = this.props.balance.totalIncome;
var totalExpanses = this.props.balance.totalExpanses;
return (
<View style={{flex:1, justifyContent: 'space-between'}}>
<Image pointerEvents='none' source={require('../../res/background.png')} style={styles.container} />
<MainScreenHeader onSettingPress={this._onBalanceSettingsPress.bind(this)}/>
<MainBalanceCounter totalCount={totalIncome} currentCount={totalIncome-totalExpanses} />
<View style={{justifyContent: 'center', alignItems: 'center', marginBottom: 150}}>
<AddPaymentButton onPress={this._onAddPaymentPress.bind(this)} />
<PaymentPopup
open={this.state.paymentPopupOpen}
onAddPaymentClicked={this._onPaymentPopupAddClicked.bind(this)} />
</View>
</View>
);
}
const styles = StyleSheet.create({
container: {
position: 'absolute',
top: 0,
left: 0,
right: 0,
bottom: 0,
width: undefined,
height: undefined,
backgroundColor:'transparent',
justifyContent: 'center',
alignItems: 'center',
},
innerContainer: {
justifyContent: 'space-around',
alignItems: 'center',
flex: 1,
backgroundColor: 'transparent'
},
});
I was trying man things to have a view that will catch clicks that happens outside of the popup, but no success.
Any help will be much appreciated,
Thanks,
Giora.
have you tried out react-native-modalbox? I use it in my applications and it works pretty great. If you have touch events behind the modal, it will close. Also, you can define how large you'd like the modal to be. It doesn't have to take up the whole screen.
Otherwise, you were on the right track. You'd need a TouchableWithoutFeedback component that covers the full width and height of the screen. Your popup would be alongside of this component with a higher zIndex. Let me know if you'd like to go this route and I can provide more advice. Cheers!