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 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 keep getting the error:
"Unexpected token, expected "," (101: 93)
I have been looking through every line of my code for a couple hours now and cannot wrap my head around the issue.
It was working completely fine and when I exited the application (because the app was frozen) and ran the project again (react-native run-ios) it threw this error.
Here is my code. Please excuse the styling/organization since I am a complete beginner. Also - there is a lot of styling that I haven't used.
import React, {Component} from 'react'
import {StyleSheet, Text, View, Image, TouchableWithoutFeedback, StatusBar, TextInput, SafeAreaView, Keyboard, TouchableOpacity, KeyboardAvoidingView} from 'react-native'
import {createStackNavigator} from 'react-navigation'
import LinearGradient from 'react-native-linear-gradient'
export default class MainScreen extends Component {
constructor(props) {
super(props);
this.state={
username: '',
email: '',
name: '',
password: '',
User: this.props.navigation.state.params.username,
Email: this.props.navigation.state.params.email,
Name: this.props.navigation.state.params.name,
Password: this.props.navigation.state.params.password
}
}
render() {
const { navigation } = this.props;
const {state} = this.props.navigation;
return(
<SafeAreaView style={styles.container} >
<StatusBar barStyle="light-content"/>
<View style = {styles.container}>
<View style = {styles.topContainer}>
<TouchableOpacity onPress={() => navigation.navigate('Help')}>
<Image style = {styles.questionMark}
source ={require('../images/questionWhite.png')}>
</Image>
</TouchableOpacity>
<View style={styles.logoContainer}>
<Image style = {styles.logo}
source ={require('../images/white.png')}>
</Image>
<Image style = {styles.logoTwo}
source ={require('../images/whitetext.png')}>
</Image>
</View>
</View>
<View style={styles.middleContainer}>
<View style={styles.textContainer}>
<Text style={styles.textStyle}>
Earn points
</Text>
<Text style={styles.lowerTextStyle}>
for recommending
</Text>
</View>
<View style={styles.exclusiveButtonContainer}>
<TouchableOpacity onPress={() => navigation.navigate('PurchaseScreenOne')}>
<View style = {{backgroundColor: 'white', alignItems: 'center', justifyContent: 'center', borderRadius: 30, height: 50, width: 330, marginLeft: 0, marginTop:35}}>
<Text style = {styles.exclusiveButton}>Get Deals </Text>
</View>
</TouchableOpacity>
<Image style = {styles.templateLayout}
source ={require('../images/template.png')}>
</Image>
<Image style = {{marginTop: -210, marginLeft: 0, height: 81, width: 81}}
source = {{uri: 'https://imagesource.com/8346278432'}}/>
<TouchableOpacity onPress={() => navigation.navigate('Edit', {username: this.state.User, email: this.state.Email, name: this.state.Name, password: this.state.Password})}>
<Image style = {{marginTop: -90, marginLeft: 300, height: 41, width: 41}}
source ={require('../images/editProfile.png')}>
</Image>
</TouchableOpacity>
<TextInput style={{fontWeight: '700', fontSize: 22, marginTop: 5, color: '#d0011b'}} value={this.state.User}/>
<Text style={{fontWeight: '700', fontSize: 22, marginTop: 40, color: '#d0011b', marginLeft: 180}}>
0
</Text>
<Text style={{fontWeight: '700', fontSize: 22, marginTop: 5, color: '#d0011b', marginTop: -30, marginRight: 180}}>
$0
</Text>
<View style={{flexDirection: 'row', marginTop: 30, marginBottom: 90}}>
<TouchableOpacity onPress={() => navigation.navigate('History')}>
<View style = {{backgroundColor: 'white', alignItems: 'center', justifyContent: 'center', borderRadius: 30, height: 50, width: 171, marginLeft: 0, marginBottom: 15}}>
<Text style = {styles.loginButton}>View Purchases</Text>
</View>
</TouchableOpacity>
<TouchableOpacity onPress={() => navigation.navigate('GetFreeMoney', {username: this.state.User})}>
<View style = {{backgroundColor: 'white', alignItems: 'center', justifyContent: 'center', borderRadius: 30, height: 50, width: 171, marginLeft: 10}}>
<Text style = {styles.loginButton}>Invite Friends</Text>
</View>
</TouchableOpacity>
</View>
</View>
</View>
</View>
</SafeAreaView>
)
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#D0011B',
flexDirection: 'column'
},
topContainer: {
alignItems: 'center',
justifyContent: 'center',
marginTop: 90,
flex: 1
},
logo: {
width: 168,
height: 61,
resizeMode: 'contain'
},
logoTwo: {
width: 238,
height: 39,
resizeMode: 'contain'
},
logoContainer: {
alignItems: 'center',
justifyContent: 'center',
marginTop: 90
},
questionMark: {
width: 37,
height: 37,
resizeMode: 'contain',
marginLeft: 320,
marginBottom: 50,
marginTop: -20
},
textStyle: {
color: 'white',
fontSize: 20,
width: 186,
height: 27,
alignItems: 'center',
justifyContent: 'center'
},
lowerTextStyle: {
color: 'white',
fontSize: 20,
width: 244,
height: 27,
alignItems: 'center',
justifyContent: 'center',
},
textContainer: {
alignItems: 'center',
justifyContent: 'center',
marginBottom: 20
},
exclusiveButtonContainer: {
alignItems: 'center',
justifyContent: 'center',
marginBottom: 200
},
exclusiveButton: {
width: 311,
height: 50,
alignItems: 'center',
justifyContent: 'center',
resizeMode: 'contain',
},
middleContainer: {
alignItems: 'center',
justifyContent: 'center',
marginTop: 200
},
textTemplateFormat: {
color: '#D0011B',
fontSize: 22,
fontWeight: 'bold'
},
profileTemplateContainer: {
marginLeft: 13,
width: 351,
height: 209,
alignItems: 'center',
justifyContent: 'center',
resizeMode: 'contain',
marginTop: -280
},
displayPictureStyle: {
marginLeft: 13,
alignItems: 'center',
justifyContent: 'center',
resizeMode: 'contain',
marginTop: -200
},
lowerContainer: {
alignItems: 'center',
justifyContent: 'center',
marginBottom: 1000,
marginLeft: -10
},
groundContainer: {
alignItems: 'center',
justifyContent: 'center',
},
textTemplateFormat: {
alignItems: 'center',
justifyContent: 'center',
flex: 1,
marginTop: -110,
fontSize: 20,
fontWeight: 'bold',
marginLeft: 15,
color: '#D0011B'
},
savingsStyle: {
width: 120,
height: 20,
alignItems: 'center',
justifyContent: 'center',
marginRight: 160,
marginBottom: 200
},
buttonContainer: {
alignItems: 'center',
justifyContent: 'center'
},
templateLayout: {
width: 370,
height: 230,
resizeMode: 'contain',
marginTop: 20
},
loginButton: {
fontSize: 16,
fontWeight: "700",
textAlign: "center",
color: '#d0011b'
},
exclusiveButton: {
fontSize: 22,
fontWeight: "700",
textAlign: "center",
color: '#d0011b'
}
})
Note that I've deleted major areas of code and the error still shows up in the same line location which is making me think this is a glitch of some sort?
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.
I'm new to react native.
I need to arrange 8 image button in 4 rows and 2 columns.I tried with flexDirection, but it's not work(confuse).
Actually i need to arrange my 8 image like below image in react native.(I need only 4 -rows,2 columns)
Please help me..
my code
`
container:{
backgroundColor: '#ccffcc',
flex:1,
flexDirection: ('row'),
//paddingTop: 40,
//alignItems :'center',
padding:10
},
button1:{
flex:1,
// width : 100,
// height: 100,
flexDirection:'row',
backgroundColor : '#ff9933',
//alignSelf:'flex-start',
marginTop: 70,
margin: 20,
//justifyContent:'center'
},
button2:{
//flex:1,
//flexDirection:'column',
alignSelf:'center',
//height :50,
//backgroundColor : '#ff9933',
//alignSelf:'flex-start',
margin: 20,
marginTop:-30,
//justifyContent:'center'
},
button3:{
//flex:1,
flexDirection: 'column',
// width : 100,
// height: 100,
backgroundColor : '#ff9933',
alignSelf:'flex-start',
// marginTop:100,
margin: 20,
justifyContent:'center'
},
button4:{
//flex:1,
// flexDirection: 'row',
//height :50,
//backgroundColor : '#ff9933',
alignSelf:'flex-start',
margin: 20,
// marginTop:30,
justifyContent:'center'
},
button5:{
flex:1,
flexDirection:'column',
// width : 100,
// height: 100,
backgroundColor : '#ff9933',
alignSelf:'flex-end',
//marginTop:50,
margin: 20,
justifyContent:'center'
},
button6:{
flexDirection:'column',
flex:1,
//height :50,
//backgroundColor : '#ff9933',
alignSelf:'flex-end',
margin: 20,
// marginTop:30,
justifyContent:'center'
},
button7:{
flexDirection:'column',
flex:1,
// width : 100,
// height: 100,
backgroundColor : '#ff9933',
alignSelf:'flex-end',
// marginTop:100,
margin: 20,
justifyContent:'center'
},
button8:{
flexDirection:'column',
flex:1, //height :50,
//backgroundColor : '#ff9933',
alignSelf:'flex-end',
margin: 20,
// marginTop:30,
justifyContent:'center'
},`
You can do this by calculating the width of the container, then simply dividing the width by the number of items you need per row:
Check out this example I set up, also pasted the code below.
"use strict";
var React = require("react-native");
var { AppRegistry, StyleSheet, Text, View, Dimensions, ScrollView } = React;
var width = Dimensions.get("window").width - 20;
var images = [1, 2, 3, 4, 5, 6, 7, 8];
var SampleApp = React.createClass({
render: function() {
var icons = images.map((image, i) => {
return (
<View key={i} style={styles.listItemContainer}>
<View style={styles.listItem}>
<Text style={{ backgroundColor: "transparent" }}>
Image {image}
</Text>
</View>
</View>
);
});
return (
<ScrollView style={{ flex: 1, paddingLeft: 10, paddingRight: 10 }}>
<View style={styles.container}>
<View style={styles.list}>{icons}</View>
</View>
</ScrollView>
);
}
});
var styles = StyleSheet.create({
container: {
flex: 1
},
list: {
flexDirection: "row",
flexWrap: "wrap",
flex: 1,
marginTop: 50
},
listItemContainer: {
width: width / 4,
height: width / 4
},
listItem: {
backgroundColor: "#ededed",
borderRadius: 15,
margin: 10,
flex: 1
}
});
AppRegistry.registerComponent("SampleApp", () => SampleApp);
you can use react native grid view here :
https://github.com/lucholaf/react-native-grid-view