I am applying some style for button. Motive is button should align at parent bottom and have some margin or padding from bottom .
So I applied below style
bottomView: {
width: '85%',
height: 50,
marginLeft: 10,
marginRight: 10,
borderRadius: 5,
flexDirection: 'row',
backgroundColor: ColorConstants.COLOR_BUTTON,
justifyContent: 'center',
alignItems: 'center',
alignSelf: 'center',
position: 'absolute',
bottom: 25
}
I have checked on Android devices, iPhone simulators it was working fine. But this is not working on iPhone X simulator.
Any suggestions ?
You Have to mention that, it is in SafeAreaView:
<SafeAreaView style={{flex: 1, backgroundColor: '#fff'}}>
// Your Code//
</SafeAreaView>
Related
I have a screen that is an HRV reading, the styles work well on all new devices, even on SE and Mini versions, my problem is with iPhone 8, the screen gets all messed up. this is the iPhone 13 screen and this is the iPhone 8 screen, I don't know how to change my code to identify it here is how my code is:
Obs. each index has a different style for the image.
const hrvScreensData = [
{
//0
imagePath: require('../../assets/images/hrvanimation1.png'),
styleText: {
fontSize: 28,
fontFamily:'inter-regular',
lineHeight:34,
padding: 20,
color: '#FFF',
textAlign: 'center',
},
title: 'Measure with back camera',
bkgColor: 'rgba(83,58,237,0.7)',
styleLarge: {height: screenWidth/2, width: screenWidth, flex: 1, resizeMode: 'contain'},
styleSmall: {height: 40, width: 40, resizeMode: 'contain'}
},
.
.
.
<View
style={{
marginTop: -150,
flexDirection: 'row',
justifyContent: 'flex-end',
paddingLeft: index == 0 ? 20 : 0,
backgroundColor: 'transparent',
}}
>
{
item.imagePath !== null ?
<Image
source={item.imagePath}
style={item.styleLarge}
/>
:
null
}
</View>
<View
style={{
alignItems: 'center',
justifyContent: 'flex-start',
width: screenWidth,
flex: 0.8,
}}>
<Text
style={item.styleText}
>
{item.title}
</Text>
</View>
any way I can make the app check which device or screen size is and change the style on the Index?
You can access the screen dimensions of the current device using Dimensions from react-native. Then conditionally set the styles of your component.
Here is an example.
import { Dimensions } from "react-native"
const height = Dimensions.get("screen").height
const width = Dimensions.get("screen").width
const SomeComponent = () => {
return (
<View
style={{
paddingLeft: width < 321 ? 10 : 20
}}
></View>
)
}
I'm new to coding and react native, so sorry if this is a stupid question.
I'm having issues rendering a hamburger icon from the following code. It works as expected on Android but not iOS.
import React from 'react';
import { StyleSheet, Text, View, TouchableOpacity, Image } from 'react-native';
import { totalPoints, totalBucks } from '../datasets/UserData.js';
export class Navbar extends React.Component {
constructor(props){
super(props);
}
burgerPress = value => {
this.props.onPress();
}
render(){
var points = totalPoints;
var bucks = totalBucks;
return(
<View style={styles.row}>
<Text style={styles.column} />
<Text style={styles.column}>
<Image source={require('../../assets/coins.png')} style={{ width: 30, height: 30, resizeMode: 'contain'}}/>
{" "}{ points }
</Text>
<Text style={styles.column}>
<Image source={require('../../assets/bills.png')} style={{ width: 40, height: 40, resizeMode: 'contain'}}/>
{" "}{ bucks }
</Text>
<View style={styles.column}>
<TouchableOpacity onPress={() => this.burgerPress()} style={{width: 40, height: 40, justifyContent: 'center', alignItems: 'center'}}>
<Image source={require('../../assets/hamburger.png')} resizeMode={'contain'} style={{ width: 40, height: 40, backgroundColor: 'lightblue', tintColor: '#ffffff', justifyContent: 'center', alignItems: 'center'}}/>
</TouchableOpacity>
</View>
</View>
);
};
};
const styles={
row: {
flex: 1,
alignItems: 'flex-end',
flexDirection: 'row',
borderBottomWidth: 1,
borderColor: "#000000",
padding: 5,
justifyContent: 'center'
},
column: {
flex: 1,
alignItems: 'center',
flexDirection: 'column',
justifyContent: 'center'
}
}
The coins and bills icons load properly on both platforms. The hamburger loads on android, but on iOS, all I get is the background color. If I delete the backgroundColor and tintColor, it renders nothing, so I think the issue is that it is not importing the image at all but only on iOS. Is there any way to get this to work?
iOS display(unexpected)
Android display(expected)
I don't see what your styles.column are specified as but as a test I would give your TouchableOpacity a width and height as well. Then try to set justifyContent: center and alignItems: center to make sure the image is not being hidden for some reason.
You might also need to specify the resizeMode={'contain'} prop in Image rather than just declaring it in your image style.
I have a simple TextInput in my react native app. Here is the relevant code:
<View style={styles.AmountWrapper}>
<TextInput
multiline={true}
placeholder="$0"
placeholderTextColor={colors.black38}
style={styles.NumberInput}
keyboardType={"numeric"}
/>
</View>
let styles = StyleSheet.create({
AmountWrapper: {
flexDirection: "column",
flex: 1,
alignItems: "center",
justifyContent: "center",
backgroundColor: colors.white
},
NumberInput: {
flexDirection: "row",
alignItems: "center",
flex: 0,
fontFamily: styleHelper.fontFamily("medium"),
fontSize: 48,
paddingHorizontal: 16,
paddingTop: 0,
paddingBottom: 0,
color: colors.blue,
textAlign: "center",
borderWidth: 0,
textAlignVertical: "center"
},
});
I am emulating on both Android Studio Pixel 3 with Android 9.0, and with Xcode's simulator, simulating iOS 12.4 iPhone X.
On Android, this is rendering exactly how I want it:
The issue is with iOS. It's rendering the text far too high up, cutting off the top of the dollar sign, and a few pixels of the number. It does this both with the placeholder, and when the user enters text:
I have tried changing margin, padding, textAlign, lineHeight, flexDirection, alignItems, and justifyContent. I have also tried multiline={false} within the TextInput.
How do I get iOS rendering the text further down and displaying properly within the TextInput?
I think you have something overriding normal behavior for height and lineHeight on IOS. Either setting lineHeight or setting height for a textInput in react native works for me on IOS. I suggest setting one of those to a size at least as big as your fontSize and then commenting out lines in your styling to figure out which one is causing it by process of elimination. Here's an example of styling that works in one of my projects:
<TextInput style={styles.inputsTwo}
accessible={this.state.access}
placeholder="Email"
clearButtonMode="always"
onChangeText={text => this.setState({email: text})}
value={this.state.email}
/>
<TextInput style={styles.inputs}
accessible={this.state.access}
placeholder="Password"
secureTextEntry={true}
clearButtonMode="always"
onChangeText={text => this.setState({password: text})}
value={this.state.password}
/>
and then in styles I have:
inputs: {
textDecorationLine: 'underline',
marginBottom: 5,
textAlign: 'left',
marginLeft: 30,
marginRight: 30,
borderBottomColor: '#808080',
borderBottomWidth: 2,
height: 48,
fontSize: 48
},
inputsTwo: {
textDecorationLine: 'underline',
marginBottom: 10,
textAlign: 'left',
marginLeft: 30,
marginRight: 30,
borderBottomColor: '#808080',
borderBottomWidth: 2,
height: 48,
fontSize: 48
},
I want to align this options icon inside the TouchableHighlight in IOS application in react-native but when I implement it is not using textAlignVerticle property as it is android only property. How I can get the alternative which works both in android and IOS?
<TouchableHighlight
style={[{position: 'absolute', bottom: 20, zIndex:999999, right: 155, borderRadius: 25}, (this.state.searchList)? { backgroundColor: 'red' }: {backgroundColor: 'black'}]}
onPress={()=>this.props.navigation.navigate('SearchSetting')}
>
<Icon name="options" style={{height: 50, width: 50, color: 'white', textAlign: 'center', textAlignVertical: 'center'}} />
</TouchableHighlight>
A component of react native is using the flexbox algorithm (very same with CSS Flexbox). So you can put any child component to the vertically or horizontally align using justifyContent and alignItems in parent component. Both justifyContent and alignItems are depends on flexDirection. The default flexDirection is column in react native.
In flexDirection: 'row';
You can align child component to the vertically for justifyContent and horizontally for alignItems in parent component.
Try with below code:
<TouchableHighlight
style={[
{
position: 'absolute',
bottom: 20,
zIndex:999999,
right: 155,
borderRadius: 25,
backgroundColor: '#0000ff'
}
]}>
<View
style={{
flex: 1,
width: 100,
height: 100,
justifyContent: 'center',
alignItems: 'center'
}}>
<Ionicons name="ios-home" size={20} color={'#FFF'} />
</View>
</TouchableHighlight>
I don't know what icon component are you using. I'm using react-native-vector-icons. So I don't need to set width and height in style props of icon component for icon size.
I'm trying to create a circle with a white background in react native and i'm having an issue where the background color of the circle is seen on the outline of the border.
Check out this playground app:
https://rnplay.org/apps/TsQ-CA
If you look closely you can see that around the circle there's a thin black line. It's like the border isn't covering the entire background.
Here's the circle style:
circle: {
borderRadius: 40,
width: 80,
height: 80,
borderWidth: 5,
borderColor: 'white',
backgroundColor: 'black'
}
P.S. this only happens on iOS
Any ideas??
Thanks!
You can add different border color to a circle. try this
container: {
width: 60,
height: 60,
borderRadius: 60 / 2,
backgroundColor: 'red',
borderColor: 'black',
borderWidth: 3
}
This looks like a bug in React Native. You can work around it by using 2 circles:
class App extends React.Component {
render() {
return (
<View style={styles.container}>
<View style={styles.outerCircle}>
<View style={styles.innerCircle} />
</View>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: 'white',
},
outerCircle: {
borderRadius: 40,
width: 80,
height: 80,
backgroundColor: 'white',
},
innerCircle: {
borderRadius: 35,
width: 70,
height: 70,
margin: 5,
backgroundColor: 'black'
},
});
Try setting style props as
{
overflow: 'hidden'
}
with your styling on View style.