I have no idea why setting the size like I am on line 38 is causing the android app to crash. If you take the size away, it works perfectly fine.
I have all of the scales commented out because I thought it could be something with them.
I would greatly appreciate any insight at all! Thank you!!!
import React from 'react';
import {
StyleSheet,
Text,
View,
Image,
TextInput,
TouchableOpacity,
} from 'react-native';
import { LinearGradient } from 'expo-linear-gradient';
import { MaterialCommunityIcons } from '#expo/vector-icons';
import { scale, verticalScale, moderateScale } from 'react-native-size-matters';
export default function HomeScreen() {
return (
<LinearGradient
colors={['#FF0093', '#272933', '#272933']}
style={styles.container}>
<TouchableOpacity>
<View style={{flexDirection: 'row', /*top: scale(150)*/}}>
<View style = {{/*paddingLeft: scale(10)*/}}>
<MaterialCommunityIcons
name="account-outline" color='white' size='50'>
</MaterialCommunityIcons>
</View>
<View style = {{justifyContent: 'center', /*paddingLeft: scale(20)*/}}>
<Text style={styles.accountPlaceholder} >
Click for Account Settings
</Text>
</View>
<View style = {{/*paddingLeft: scale(20)*/ justifyContent: 'center'}}>
<MaterialCommunityIcons
name="chevron-right" color='white' >
</MaterialCommunityIcons>
</View>
</View>
</TouchableOpacity>
{/* End of Click for Accoutn Settings */}
{/* Beginning of Click to Sign Up*/}
<TouchableOpacity>
<View style={{flexDirection: 'row', /*top: scale(150)*//* paddingTop: scale(30)*/}}>
<View style = {{/*{paddingLeft: scale(15)*/}}>
<MaterialCommunityIcons
name="logout" color='white' >
</MaterialCommunityIcons>
</View>
<View style = {{justifyContent: 'center',/* paddingLeft: scale(15)*/}}>
<Text style={styles.accountPlaceholder} >
Click to Sign Out
</Text>
</View>
<View style = {{/*paddingLeft: scale(92*)*/ justifyContent: 'center'}}>
<MaterialCommunityIcons
name="chevron-right" color='white' >
</MaterialCommunityIcons>
</View>
</View>
</TouchableOpacity>
{/* End of Click to Sign up */}
</LinearGradient>
);
}
Use size as an integer, like:
size={50}
whereas you are using size as a string:
size='50'
Note that this is also true for margin styling.
Use
margin:20
and not
margin:"20"
Related
I'm really new to react native, and Im working on a simple app with 4 images and four button, each button should change the opacity on an image, but I'm lost om how to do that....can someonne point me into the right direccion on how to do this.
<View style={styles.card}>
<Image source={require('./assets/1.jpg')} style={styles.cardImgStyle}></Image>
<Text style={styles.cardText}>Area 1</Text>
</View>
<View style={styles.card}>
<Image source={require('./assets/2.jpg')} style={styles.cardImgStyle}></Image>
<Text style={styles.cardText}>Area 2</Text>
</View>
const styles = StyleSheet.create({
cardImgStyle: {
width : "100%",
height : 140,
borderTopLeftRadius : 10,
borderTopRightRadius: 10,
marginBottom : 3,
opacity: .2
},
});
maybe you can useState for this case, in my opinion you can handle the id on object to selected the image, and you can use the condtional rendering when user selected, set the style.selectImage and use the opacity 0.4. you can check my code example on bottom . hope this my explanation can help you.
const data = [
{
id: 1,
image : require('../../yourpath'),
id: 2,
image: require('../../yourpath')
}
]
const = [ selected, setSelected ] = useState(0)
<FlatList
horizontal
pagingEnabled={true}
data={data}
style={{height:130 }}
renderItem={({item})=>{
const content =
selected === item.id
? style.selectImage
: style.unSelectImage;
return(
<View style={style.wrapper}>
<TouchableOpacity style={content} onPress={()=>setSelectedId(item.id)}}>
<View style={{justifyContent: 'center', alignItems: 'center'}}>
<Image source={item.image} style={{height: 65, width: 60}}/>
</View>
<Text style={{color: 'black', textAlign: 'center', marginTop: 10}}>{item.title}</Text>
</TouchableOpacity>
</View>
)
}}/>
In my React Native 0.66 app component, a Text and TextInput needs to be in one line and occupied half of the screen width. Here is the view code used:
<View style={{flex:1, flexDirection:'row', marginVertical: hp("1%")}}>
<View style={{flex:1, flexDirection:"row", width:wp("50%"), textAlign:"left"}}>
<Text style={styles.textTitle}>姓名:</Text>. //<<==Text
<TextInput style={styles.textTitle} //<<==TextInput
placeholder="姓名"
onChangeText={changeName}
defaultValue={name}
multiline={false}
/>
</View>
<View style={{flex:1, flexDirection:"row", width:wp("50%"),textAlign:"left"}}>. //<<==here is row
<Text style={styles.textTitle}>别号:</Text>
<TextInput style={styles.textTitle}
placeholder="别号"
onChangeText={changeAlias}
defaultValue={alias}
multiline={false}
/>
</View>
</View>
const styles = StyleSheet.create({
textTitle: {
height:hp("10%"),
fontSize:14,
},
container: {
paddingTop:0,
//justifyContent: 'center',
},
})
The problem with the view code above is that the TextInput was far below the Text even though both of them are in one row with the same height. What is missing here and how to align Text and TextInput in one line?
<View style={styles.row}>
<Text style={styles.textTitle}>别号:</Text>
<TextInput style={styles.textTitle}
placeholder="别号"
onChangeText={changeAlias}
defaultValue={alias}
multiline={false}
/>
</View>
const style = stylesheet.create({
row: {
flex: 1,
flexDirection: 'row',
width: "wp('50%')",
textAlign: "left",
display: flex,
justifyContent: "space-between",
alignItems: "center"
}
textTitle: {...},
container: {...}
})
I think you missed adding display: flex; to the View Content.
I replaced the style class row.
This will work for you. thanks.
You have to add display:flex to your View component.
You can also use this
<SafeAreaView style={{flex:1}}>
<View style={{flexDirection:"row",flex:1,justifyContent:"center"}}>
<Text style={{flex:1,textAlign:"center",backgroundColor:"blue",color:"white",height:40,paddingTop:10}}>Name</Text>
<TextInput
style={{backgroundColor:"red",flex:1,height:40}}
placeholder={"hello"}
/>
</View>
</SafeAreaView>
I hope it solve your Query.
You can use the following mini-code for reference.
https://codesandbox.io/embed/hungry-meninsky-wv08l?fontsize=14&hidenavigation=1&theme=dark
I am new to React Native and trying to build a simple app that displays four images on the screen with Touchable function however there is margin between pictures and setting margin:0 and padding:0 are not helping at all.
What might be a solution?
render() {
return (
<View>
<SafeAreaView>
{listItems.map(
(item) => (
console.log(item.pic),
(
<View>
<TouchableOpacity onPress={this.onClickPic}>
<ImageBackground
style={styleImage.container}
source={item.pic}
>
<Text>{item.title}</Text>
</ImageBackground>
</TouchableOpacity>
</View>
)
)
)}
</SafeAreaView>
</View>
);
}
}
const styleImage = StyleSheet.create({
container: {
height: "30%",
width: "30%",
padding:0,
margin:0,
},
});
1:
Try this...
Replace ImageBackground with Image
and add one property to it resizeMode='cover', it will pull the image to ends of image area
{listItems.map(
(item) => (
console.log(item.pic),
(
<View>
<TouchableOpacity onPress={this.onClickPic}>
<View>
<Image
resizeMode="cover" // or 'stretch'
style={{ height: 200, width: 200 }}
source={item.pic}
/>
<View style={{ position: "absolute", zIndex: 9 }}>
<Text>{item.title}</Text>
</View>
</View>
</TouchableOpacity>
</View>
)
)
)}
</SafeAreaView>
</View>
);
Style as your requirement
I am coding a navbar in React Native. Think of it as double layered -- the upper layer is a burger menu, a title, and a search icon, the second layer consists of three touchable titles to navigate to the relevant screens.
a mock-up of the navbar I'm trying to create
When I apply inline styles, they work. When I do Stylesheet.create and apply styles down there, they don't. I am new to programming and very confused.
My plan is to code a single navbar that is split into two rows (views): navbarTop and navbarBottom. I would very much appreciate some insight into whether doing so makes sense, and also how to fix my styling issue. Thank you all very much!
import React, { Component } from 'react';
import { View, Text, StyleSheet, Image, TouchableHighlight } from 'react-native';
import { withNavigation } from 'react-navigation';
class Navbar extends Component {
render() {
return (
<View style={styles.navbarTop}>
<View>
<TouchableHighlight
onPress={() => {
this.props.navigation.openDrawer();
}}
>
<Image
style={{marginBottom: 5}}
source={require('./../../../android/app/src/main/res/drawable/menu.png')}
/>
</TouchableHighlight>
</View>
<View>
<Text
style={{
fontWeight: 'bold',
color: 'white',
fontSize: 20,
marginRight: 70
}}
>
Dashboard
</Text>
</View>
<View>
<Image
style={{marginBottom: 5}}
source={require('./../../../android/app/src/main/res/drawable/search.png')}
/>
</View>
<View style={styles.navbarBottom}>
<View>
<Text
style={{
color: 'white',
fontSize: 15,
marginRight: 70
}}
> RECORDINGS </Text>
</View>
<View>
<Text
style={{
color: 'white',
fontSize: 15,
marginRight: 70
}}
> PATIENTS </Text>
</View>
<View>
<Text
style={{
color: 'white',
fontSize: 15,
marginRight: 70
}}
> DEVICES </Text>
</View>
</View>
</View>
);
}
}
export default withNavigation(Navbar);
const styles = StyleSheet.create({
navbarTop: {
backgroundColor: '#14172B',
padding: 10,
flexDirection: 'row',
justifyContent: 'space-between',
alignItems: 'flex-end',
},
// navbarBottom: {
// }
});
In line styles over write the style which are present in the stylesheet.
Let's say there is a style component :
<View style = {[styles.demoView,{marginTop:50}]}/>
export default StyleSheet.create({
demoView: {
marginTop:20,
flexDirection: "row",
padding: "10rem",
justifyContent: "space-between",
alignItems: "center",
},
In the above style the inline style will replace the value of marginTop because it has high priority and the it would least concern even if you remove the marginTop property from the stylesheet as it is been supressed by inline style. Hope it gives you clear vision.
Happy Coding :)
Edit :
import React, { Component } from 'react';
import { View, Text, StyleSheet, Image, TouchableHighlight } from 'react-native';
import { withNavigation } from 'react-navigation';
class Navbar extends Component {
render() {
return (
<View style={styles.navbarTop}>
<TouchableHighlight
onPress={() => { this.props.navigation.openDrawer()}}>
<Image style={{marginBottom: 5}}
source={require('./../../../android/app/src/main/res/drawable/menu.png')}
/>
</TouchableHighlight>
<Text style={{fontWeight: 'bold',color: 'white',fontSize: 20,marginRight: 70}}>
Dashboard
</Text>
<Image
style={{marginBottom: 5}}
source={require('./../../../android/app/src/main/res/drawable/search.png')}
/>
<View style={styles.navbarBottom}>
<Text style={styles.navBarText}> RECORDINGS </Text>
<Text style={styles.navBarText}> PATIENTS </Text>
<Text style={styles.navBarText}> DEVICES </Text>
</View>
</View>
);
}
}
export default withNavigation(Navbar);
const styles = StyleSheet.create({
navbarTop: {
backgroundColor: '#14172B',
padding: 10,
flexDirection: 'row',
justifyContent: 'space-between',
alignItems: 'flex-end',
},
// navbarBottom: {
// }
navBarText:{
color: 'white',
fontSize: 15,
marginRight: 70
}
});
I have a login button and I would like to place a Login text at the center of the button and an image (scaling it properly) on the right edge of the button, far away from the text.
Currently I am using an Icon from the Vector Icons library in the following way:
<TouchableOpacity style={styles.buttonLoginTouchable} onPress={this.loginUser.bind(this)}>
<View style={{ flexDirection: 'row' }}>
<Text style={{ color: '#ffffff', fontWeight: '700', paddingLeft: '46%' }}>Login</Text>
<Icon name="arrow-right" color='#fff' size={15} style={{ paddingLeft: '33%' }} />
</View>
</TouchableOpacity>
Which is probably also not the best way to do it. Now I would like to replace the Icon with an Image, so I wrote instead the following code:
<TouchableOpacity style={styles.buttonLoginTouchable} onPress={this.loginUser.bind(this)}>
<View style={{ flexDirection: 'row' }}>
<Text style={{ color: '#ffffff', fontWeight: '700', flex: 0.9 }}>Login</Text>
<Image source={require('../../common/arrow.png')} resizeMode='contain' style={{ height: 10 }} />
</View>
</TouchableOpacity>
This way the image scale and it is placed somehow on the right but it is not anymore horizontally aligned (and I can't understand why).
Does anyone know the best way to achieve the style I am looking for?
use it like this:
<TouchableOpacity style={{flexDirection:"row",alignItems:'center',justifyContent:'center'}}>
<Text style={{flex:.8}}>Login</Text>
<Image source={require('../../common/arrow.png')} resizeMode='contain' style={{flex:.2 }} />
</TouchableOpacity>
See the below simple example to add image in touchableopacity component in react native. It is very simple you need to wrap image component inside the touchableopacity component.
<TouchableOpacity activeOpacity = { .5 } onPress={ this.callFun }>
<Image source={require('./images/sample_image_button.png')} style = {styles.ImagesStyle} />
</TouchableOpacity>