I am working for a small startup, and I was tasked with implementing a settings screen design. Based off of what they designed, they want like a box that fits the screen with text on top of it that serves as a breaker between each section of the settings. I just can't figure out how to round the corners around the text.
So far what I did was:
<View className="w-full mt-2">
<Text style={styles.TextComponentStyle}>Account</Text>
</View>
And the style sheet looks like this:
TextComponentStyle: {
borderRadius: 5,
borderColor: '#DADEE8',
borderWidth: .5,
color: 'black',
backgroundColor: '#DADEE8',
padding: 2,
fontSize: 16,
margin: 10
}
It is giving me almost everything I want minus the rounded corners. It is showing up as square corners.
The Text element in React Native doesn't take border properties. You should apply the border properties to the container around the text element.
This should work for you:
<View className="w-full mt-2" style={styles.textContainer}>
<Text style={styles.TextComponentStyle}>Account</Text>
</View>
TextContainer: {
borderRadius: 5,
borderColor: '#DADEE8',
borderWidth: .5,
backgroundColor: '#DADEE8',
padding: 2,
margin: 10,
},
TextComponentStyle: {
color: 'black',
fontSize: 16,
}
Related
I want to create a dashed border for the input of my TextInput in react-native. Like this http://uupload.ir/files/v9mn_dads.png
So far this is my code:
<TextInput maxLength={5} keyboardType={'numeric'} style={styles.numBox}></TextInput>
And stylesheetz:
numBox: {
display: 'flex',
width: 270,
height: 58,
marginLeft: 'auto',
marginRight: 'auto',
marginTop: 50,
textAlign: 'center',
fontFamily: 'IRANSansMobile_Bold',
fontSize: 16,
color: '#CD0448',
backgroundColor: 'white',
borderColor: '#CD0448',
borderWidth: 1,
borderRadius: 10,
paddingTop: 15,
},
});
I only manage to create the box and the don't know how to tackle the content dashed issue.
Take a look at this package. I guess if you use a monospace font, you can achieve this by defining a proper font styles.
I use expo template for creating an application. I would like to make the bottom menu with border-radius, but I have white space instead of background the page. How to fix it? Example see on the image
My styles for createBottomTabNavigator:
width: '100%',
height: 94,
paddingBottom: 20,
backgroundColor: 'red',
borderTopLeftRadius: 51,
borderTopRightRadius: 51,
borderWidth: 0,
borderColor: '#68a0cf',
overflow: 'hidden'
My styles for page(screen):
backgroundColor: 'blue',
flex: 1,
flexDirection: 'row',
flexWrap: 'wrap',
alignItems: 'flex-start'
You should take the parent container for both the Bottom tab navigator and the page and style it with with = screenWidth and hight = screenHeight and make the background color blue of whatever you want.
By this way you will be able to get off with these white spaces.
I'm struggling with Android version of my simplest ever React Native app.
Seems like Android ignores some of the props, namely translucent in <StatusBar /> and, most annoyingly, multiline and underlineColorAndroid in the <TextInput />.
Here's the code, it's pretty straightforward:
<View style={[styles.main, {backgroundColor: background_color}]} >
<StatusBar
barStyle="light-content"
translucent={true} />
<View style={[styles.header, {backgroundColor: background_color}]}>
<Button name='clear' disable={this.state.text} action={this.clearInput} />
<Button name='run' disable={this.state.text} action={this.openFullScreen}/>
</View>
{
this.state.fontLoaded ? (
<TextInput
style={styles.input}
ref='input'
onChangeText={(text) => this.setState({text: text})}
placeholder={this.state.placeholder}
value={this.state.text}
multiline={true}
placeholderTextColor={placeholder_color}
returnKeyType='done'
blurOnSubmit={true}
numberOfLines={5}
autocorrect={false}
underlineColorAndroid='transparent' />
) : null
}
</View>
const styles = StyleSheet.create({
main: {
flex: 1,
display: 'flex',
flexDirection: 'column',
alignItems: 'center',
justifyContent: 'flex-start'
},
header: {
height: 88,
width: '100%',
display: 'flex',
flexDirection: 'row',
alignItems: 'center',
justifyContent: 'space-between'
},
input: {
width: '94%',
flex: 1,
fontSize: 50,
lineHeight: 1,
fontFamily: 'Roboto',
fontStyle: 'normal',
fontWeight: '900',
color: '#ffffff',
overflow: 'hidden',
textAlignVertical: "top",
//lame fix for Android
//paddingTop: Platform.OS == 'android' ? 40 : 0,
},
});
This is what it looks like on iOS:
iOS-with-text
And this is the mess on Android: android-with-text
As you can see, for some reason it a) draws the text on the top of the screen instead of top of the TextInput, b) doesn't do line breaks, overlapping all of the words on just 1 line (BTW I tried changing textBreakStrategy prop but to no avail), and с) still shows a white underline. Placeholder state on Android looks fine though (meaning placeholder is located right where it should be and has line breaks).
It's my first RN app and I used create-react-native-app to set up the project.
react-native-cli: 2.0.1
react-native: 0.47.2
Any advice would be much appreciated!
UPD: lineHeight: 1 caused half of the trouble (not sure what its problem with translucent and underlineColorAndroid is though). NTS: never ever blindly copy paste your styles from your web ReactJS app.
Couple of things. Multiline is not enough to enable the wrapping. You also need to use numberOfLines as a prop.
Also, I think your problem is just the height of the TextInput or the flex surrounding the TextInput.
And lastly, it could be that your style header view has either a top attribute or a position absolute that is messing with the view.
If this does not solve it, please post your styles.
Edit: Some of those styles could be messing with the height. Try starting with something more simpler like this:
input: {
width: '94%',
flex: 1,
height: 60, //-> Add this to make sure the text has a height instead of flex
//fontSize: 50, -> This is huge, the text might not be able to show entirely.
//lineHeight: 1, -> Line height is not the amount of lines. Is the size. It should be around the font size, so either remove it or try setting this value to 50 like the font size.
fontFamily: 'Roboto',
fontStyle: 'normal',
fontWeight: '900',
color: '#ffffff',
//overflow: 'hidden', -> This might be messing with the header
textAlignVertical: "top",
//lame fix for Android
//paddingTop: Platform.OS == 'android' ? 40 : 0,
},
I am simply trying to take a square image and contain it within a circle in my react-native app on Android. A circle image basically.
<View style={mainStyle.profileImageContainer}>
<Image
style={mainStyle.profileImage}
source={{uri: CONFIG.media_url+this.props.image}}
resizeMode="cover"
/>
</View>
and styles:
profileImageContainer: {
translateY: -43,
alignSelf: 'center',
},
profileImage: {
resizeMode: 'cover',
height: 86,
width: 86,
borderWidth: 2,
borderRadius: 75,
overlayColor: CREAM,
},
But the only way to get it remotely circular on Android is to add the "overlayColor", but I need this to be transparent so the design behind is visible. The property transparent does not work.
Does anyone have any ideas how to achieve this? Am I missing some sort of simple property?
EDIT: Thanks to Dhruv Parmar's answer, I realised the issue is because I was using a GIF image. The method you would expect seems to work fine with jpgs and pngs, but not GIFS!
You don't need to have a wrapping view to achieve this, simply using borderRadius set to half of image size should do the trick. Any other styles you want can be applied directly to Image view
You can see an example here https://snack.expo.io/rJI4DzoDW
Use this style;
image: {
width: 150,
height: 150,
borderRadius: 150 / 2,
overflow: "hidden",
borderWidth: 3,
borderColor: "red"
}
I'm having an issue in Android when adding elevation to a View.
As we can see, in the first example, the shadow casted by adding elevation is the same size for both rectangles. In the second example however, the shadow for the grey rectangle is bigger than the shadow for the blue rectangle.
The styling is exactly the same, however the only difference is the size of the rectangles.
(written in React Native)
Rectangle A:
<View style={{flexDirection: 'row', alignItems: 'flex-end'}}>
<View style={{elevation: 5, width: 140, height: 90, backgroundColor: "#d9d9d9"}} />
<View style={{elevation: 5, width: 140, height: 60, backgroundColor: "#00aeef"}} />
</View>
Rectangle B:
<View style={{flexDirection: 'row', alignItems: 'flex-end'}}>
<View style={{elevation: 5, width: 220, height: 90, backgroundColor: "#d9d9d9"}} />
<View style={{elevation: 5, width: 60, height: 60, backgroundColor: "#00aeef"}} />
</View>
Adding a shadow to a parent component is not a solution since the component are not the same height. In such a case shadow will be visible above the blue component, and it just doesn't look right.
Also increasing the value of elevation of the blue rectangle is not a solution, since increasing the value of elevation spreads the shadow, making it less visible.
Any ideas how I can make the shadows look alike when both the component have different sizes?