I'm new to app developing, tried to make my app look like this :
But I made one style sheet for each icons, it doesn't look efficient at all. is there any better way to put the touchable icons on the positions I want?
here is my code:
import { StatusBar } from 'expo-status-bar';
import React from 'react';
import { StyleSheet, Text, View,SafeAreaView, Image, Button,TouchableOpacity} from 'react-native';
export default function App() {
return (
<SafeAreaView style={styles.container}>
{/*blue part on top*/}
<SafeAreaView style={styles.toppading}/>
<Text style={styles.title}>I.A</Text>
<TouchableOpacity style={styles.student_image}>
< Image style={styles.student_image} source={require('./assets/student.png')}/>
</TouchableOpacity>
<TouchableOpacity style={styles.friends_image}>
< Image style={styles.friends_image} source={require('./assets/friends.png')}/>
</TouchableOpacity>
<TouchableOpacity style={styles.message_image}>
< Image style={styles.message_image} source={require('./assets/chat.png')}/>
</TouchableOpacity>
<TouchableOpacity style={styles.setting_image}>
< Image style={styles.setting_image} source={require('./assets/settings.png')}/>
</TouchableOpacity>
{/*blue part on bottom*/}
<SafeAreaView style={styles.downpading}/>
<TouchableOpacity style={styles.map_image}>
< Image style={styles.map_image} source={require('./assets/map.png')}/>
</TouchableOpacity>
<TouchableOpacity style={styles.event_image}>
< Image style={styles.event_image} source={require('./assets/event.png')}/>
</TouchableOpacity>
<TouchableOpacity style={styles.home_image}>
< Image style={styles.home_image} source={require('./assets/home.png')}/>
</TouchableOpacity>
<TouchableOpacity style={styles.help_image}>
< Image style={styles.help_image} source={require('./assets/help.png')}/>
</TouchableOpacity>
<TouchableOpacity style={styles.question_image}>
< Image style={styles.question_image} source={require('./assets/question.png')}/>
</TouchableOpacity>
</SafeAreaView>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: 'white',
},
toppading: {
height: 80,
width: 400,
backgroundColor: '#8CAFC0',
position: 'absolute',
},
downpading: {
height: 80,
width: 400,
backgroundColor: '#8CAFC0',
position: 'absolute',
bottom:0
},
title:{
fontSize:24,
fontWeight:'bold',
textAlign:'center',
top:30
},
student_image:{
position:'absolute',
width:40,
height:40,
top:13,
left:"3%"
},
friends_image:{
position:'absolute',
width:40,
height:40,
top:13,
left:'55%'
},
message_image:{
position:'absolute',
width:40,
height:40,
top:13,
left:'65%'
},
setting_image:{
position:'absolute',
width:40,
height:40,
top:13,
left:'75%'
},
map_image:{
position:'absolute',
width:40,
height:40,
bottom:10
},
event_image:{
position:'absolute',
width:40,
height:40,
bottom:10,
left:'20%'
},
home_image:{
position:'absolute',
width:40,
height:40,
bottom:10,
left:'40%'
},
help_image:{
position:'absolute',
width:40,
height:40,
bottom:10,
left:'60%'
},
question_image:{
position:'absolute',
width:40,
height:40,
bottom:10,
left:'80%'
},
});
Also by doing this way, the touchable spot is not right on the icon, somehow is off.
I think the best way to dispose your icons following this layout is by using flexbox, as following:
import React from "react";
import { StyleSheet, View } from "react-native";
function App() {
return (
<View style={styles.container}>
<View style={styles.header}>
<View style={styles.headerIconView}>
<View style={styles.icon} />
</View>
<View style={styles.headerRowView}>
<View style={styles.icon} />
<View style={styles.icon} />
<View style={styles.icon} />
<View style={styles.icon} />
</View>
</View>
<View style={styles.footer}>
<View style={styles.icon} />
<View style={styles.icon} />
<View style={styles.icon} />
<View style={styles.icon} />
<View style={styles.icon} />
</View>
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: "space-between"
},
header: {
height: 80,
width: "100%",
backgroundColor: "#8CAFC0",
flexDirection: "row",
justifyContent: "space-around",
alignItems: "center",
paddingHorizontal: 10
// position: 'absolute',
},
headerIconView: {
flex: 1
},
headerRowView: {
flexDirection: "row",
flex: 2,
justifyContent: "space-around"
},
footer: {
height: 80,
width: "100%",
backgroundColor: "#8CAFC0",
flexDirection: "row",
justifyContent: "space-around",
alignItems: "center",
paddingHorizontal: 10
// position: 'absolute',
// bottom:0
},
icon: {
width: 40,
height: 40,
backgroundColor: "gray"
}
});
export default App;
Noticed how you won't even need fixed position when using flexbox?
Here's the result:
If you need some help with flexbox, here is the SandBox for the code, and also, you might want to read some material from RN Flexbox Docs.
I want color of every item based on condition like:-
I will have my condition like :- let check = item.project_status.
and check can be completed, in-progress and incomplete.
and red for incomplete, yellow for in-progress and green for completed.
Here is my flatlist code:-
<FlatList
style={{height:constants.DesignHeight - 100}}
data={props.DATA}
renderItem={({ item }) =>
<TouchableOpacity onPress={props.onPress} style={styles.flatlistContainer}>
<View style={{ flexDirection: 'row', justifyContent: 'space-between' }}>
<Text style={styles.text}>{item.project_name} </Text>
<Text style={styles.text2}>Start: {moment(item.start_date).format("DD/MM/YYYY")}</Text>
</View>
<View style={{ flexDirection: 'row', justifyContent: 'space-between' }}>
<Text style={styles.text}>Assigned to: {item.project_manager.name} </Text>
<Text style={styles.text2}>End: {moment(item.end_date).format("DD/MM/YYYY")}</Text>
</View>
<View>
</View>
</TouchableOpacity>
}
KeyExtractor={(item) => item.id}
// ItemSeparatorComponent={() => renderSeparator()}
/>
const styles = StyleSheet.create({
flatlistContainer: {
width: '100%',
},
text: {
fontSize: constants.vw(20),
lineHeight: constants.vw(30),
},
text2: {
fontSize: constants.vw(16),
lineHeight: constants.vw(30),
}
})
How can I achieve this?
Thanks!!!
i think you can make a style for each project status
and you can use it
const styles = StyleSheet.create({
...
incomplete: {
color: 'red'
},
inprogress: {
color: 'yellow'
},
completed: {
color: 'green'
}
}})
and you can use it on style tag
like this
<View style={{ flexDirection: 'row', justifyContent: 'space-between' }}>
<Text style={[styles.text, styles[item.project_status]}>{item.project_name} </Text>
<Text style={[styles.text2, styles[item.project_status]}>Start: {moment(item.start_date).format("DD/MM/YYYY")}</Text>
</View>
I have a screen where I input some values in the input field and get search results displayed accordingly (within the <View style={styles.dropdown}>). I want that the list should overlap my ActionButton. Just like it overlaps my other input field.
I have already added zIndex and it works for the second input field but not for the button.
return (
<SafeAreaView style={styles.safeAreaViewContainer}>
<View style={styles.container}>
<View style={styles.searchFieldContainer}>
<AddressSearchInput
addressType="favouritePoint"
iconName="search"
textChangeHandler={textChangeHandler}/>
</View>
<View style={styles.dropdown}>
<LocationsFound
addressesFound={locations.addressesFoundList}/>
</View>
<View style={styles.fieldDescription}>
<Text>Standortname:</Text>
</View>
<View style={styles.searchFieldContainer}>
<Item style={styles.searchField}>
<Input style={styles.searchText}/>
</Item>
</View>
<View style={styles.buttonContainer}>
<ActionButton buttonText="Platz Speichern"/>
</View>
</View>
</SafeAreaView>
);
};
export const styles = StyleSheet.create({
searchFieldContainer: {
alignItems: 'center',
height: moderateScale(120),
},
buttonContainer: {
flexDirection: 'row',
justifyContent: 'center',
zIndex: 1,
},
fieldDescription: {
alignItems: 'center',
},
dropdown: {
position: 'absolute',
top: moderateScale(215),
zIndex: moderateScale(10),
backgroundColor: '#fff',
},
container: {
height: '100%',
backgroundColor: 'white',
width: '100%',
flex:1,
},
});
You have to add styles to your <View style={styles.container}>. Like:
container: {
display:"flex",
flex-direction:"column",
//etc
}
Because now your Views are all separate from each other.
I am using react native swiper. and this error was shown I don't know why. How can it be solved? In the past, there was not a problem like this. It's first time happening. What is wrong?
Here is the image of a full error:
<Swiper loop={false}
index={0}
style={styles.wrapper}
activeDotColor={'#EEE'}>
<View style={styles.slide1}>
<Text style={styles.text}>Choose category you like</Text>
</View>
<View style={styles.slide2}>
<Text style={styles.text}>Bookmark articles that you</Text>
<Text style={styles.text}>like</Text>
</View>
<View style={styles.slide3}>
<Text style={styles.text}>Get notifications about your</Text>
<Text style={styles.text}>chosen topic</Text>
<Button style={styles.text} onPress={() => this.props.navigation.navigate("Home")}>
<Text style={styles.text}>Main Screen</Text>
</Button>
</View>
</Swiper>
)
} else {
return <View></View>
}
}
}
const styles = {
wrapper: {
justifyContent: 'center',
alignItems: 'center'
},
slide1: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#9DD6EB'
},
slide2: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#97CAE5'
},
slide3: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#92BBD9'
},
text: {
alignSelf: 'center',
color: '#FFF',
fontSize: 26,
fontWeight: 'bold'
},
}
export default WelcomeScreen
Please help to solve this annoying trouble.
Add style like this
<Swiper loop={false}
index={0}
contentContainerStyle={styles.wrapper}
activeDotColor={'#EEE'}>
Use contentContainerStyle props instead of style props.
contentContainerStyle={styles.wrapper}
hope all is well.
I seem to be having difficulty with a basic button functionality. All I need is the state of the class to change and the button style to change every-time the button is pressed. Unlike TouchableHighlight, I need to color change to stay until the button is pressed again (to go back to the original color).
I have tried to use SwitchIOS but it doesn't seem to be easily styled into a circular button, and therefore doesn't really work out. I am a novice so still learning and would greatly appreciate your help. Here is what I have so far:
'use strict';
var React = require('react-native');
var Dimensions = require('Dimensions');
var window = Dimensions.get('window');
var Icon = require('react-native-vector-icons/FontAwesome');
var {
AppRegistry,
StyleSheet,
Text,
View,
NavigatorIOS,
Image,
TouchableHighlight,
TextInput,
} = React;
class LS1 extends React.Component{
constructor(props){
super(props);
this.state = {
paleo: false,
vegan: false,
vegetarian: false,
nutfree: false,
dairyfree: false,
healthy: false,
glutenfree: false,
}
}
SkipLogin() {
var num = window.height/8.335;
console.log(num);
}
render() {
return (
<View style={styles.container}>
<Image source={require('image!LS1')} style={styles.bgImage}>
<Text style={styles.icontext}>Help us get to know your dietary lifestyle.</Text>
<View style={styles.container}>
<View style={{flex: 1, alignItems: 'center', flexDirection: 'row',justifyContent: 'center',marginTop:-20}}>
<TouchableHighlight underlayColor='rgba(73,182,77,1,0.9)' style={styles.bubblechoice}>
<Image style={styles.bubblechoice} source={require('image!vegan')}>
<View style={styles.overlay}>
<Text style={styles.choicetext}>Vegan</Text>
</View>
</Image>
</TouchableHighlight>
<TouchableHighlight underlayColor='rgba(73,182,77,1,0.6)' style={styles.bubblechoice} >
<Image style={styles.bubblechoice} source={require('image!paleo')}>
<View style={styles.overlay}>
<Text style={styles.choicetext}>Paleo</Text>
</View>
</Image>
</TouchableHighlight>
<TouchableHighlight underlayColor='rgba(73,182,77,1,0.6)' style={styles.bubblechoice} >
<Image style={styles.bubblechoice} source={require('image!nutfree')}>
<View style={styles.overlay}>
<Text style={styles.choicetext}>Nut-Free</Text>
</View>
</Image>
</TouchableHighlight>
<TouchableHighlight underlayColor='rgba(73,182,77,1,0.6)' style={styles.bubblechoice} >
<Image style={styles.bubblechoice} source={require('image!glutenfree')}>
<View style={styles.overlay}>
<Text style={styles.choicetext}>Gluten-Free</Text>
</View>
</Image>
</TouchableHighlight>
</View>
<View style={{flex: 1, alignItems: 'center', flexDirection: 'row',justifyContent: 'center',marginTop:-50}}>
<TouchableHighlight underlayColor='rgba(73,182,77,1,0.6)' style={styles.bubblechoice} >
<Image style={styles.bubblechoice} source={require('image!dairyfree')}>
<View style={styles.overlay}>
<Text style={styles.choicetext}>Dairy-Free</Text>
</View>
</Image>
</TouchableHighlight>
<TouchableHighlight underlayColor='rgba(73,182,77,1,0.6)' style={styles.bubblechoice} >
<Image style={styles.bubblechoice} source={require('image!vegetarian')}>
<View style={styles.overlay}>
<Text style={styles.choicetext}>Vegetarian</Text>
</View>
</Image>
</TouchableHighlight>
<TouchableHighlight underlayColor='rgba(73,182,77,1,1)' style={styles.bubblechoice} >
<Image style={styles.bubblechoice} source={require('image!healthy')}>
<View style={styles.overlay}>
<Text style={styles.choicetext}>Healthy</Text>
</View>
</Image>
</TouchableHighlight>
</View>
</View>
<Image source={require('image!nextbtn')} style={{resizeMode: 'contain', width:200, height:50, alignSelf: 'center', marginBottom: 50}}/>
<TouchableHighlight onPress={this.SkipLogin.bind(this)} underlayColor='transparent'>
<View style={{backgroundColor: 'transparent', alignItems: 'center', marginBottom: 8}}>
<Text>skip this step</Text>
</View>
</TouchableHighlight>
</Image>
</View>
);
}
};
var styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: 'transparent'
},
bgImage: {
flex: 1,
width: window.width,
resizeMode: 'cover',
},
icontext: {
color: '#5d5d5d',
fontWeight: '400',
fontSize: 20,
backgroundColor: 'transparent',
paddingLeft: 10,
alignItems: 'center',
marginTop: window.height/2.2,
textAlign: 'center',
margin: 10,
},
bubblechoice_click: {
height: window.height/8.335,
borderRadius: (window.height/8.3350)/2,
marginRight: 2,
width: window.height/8.335,
},
bubblechoice: {
height: window.height/8.335,
borderRadius: (window.height/8.3350)/2,
marginRight: 2,
width: window.height/8.335,
},
row: {
flex: 1,
alignItems: 'center',
flexDirection: 'row',
justifyContent: 'center',
marginTop: -30,
},
choicetext: {
alignItems: 'center',
alignSelf: 'center',
color: 'white',
marginTop: 35,
fontWeight: '600',
marginLeft: -18,
fontSize: 14,
flex: 1,
textAlign: 'center'
},
overlay: {
backgroundColor:'rgba(80,94,104,0.7)',
height: 100,
width: 100,
alignItems:'center'
},
});
module.exports = LS1;
And here is a visual of what that produces:
Here's what the button should look like after being selected:
I think you should take a step back and do some basic React tutorials before digging too much into React Native - this is a fairly straightforward problem to solve :) Here's a solution for you:
'use strict';
var React = require('react-native');
var Dimensions = require('Dimensions');
var window = Dimensions.get('window');
var {
AppRegistry,
StyleSheet,
Text,
View,
NavigatorIOS,
Image,
TouchableHighlight,
TextInput,
} = React;
class ToggleButton extends React.Component {
render() {
return (
<TouchableHighlight underlayColor='rgba(73,182,77,1,0.9)' style={styles.bubblechoice} onPress={this.props.onPress}>
<Image style={styles.bubblechoice} source={{uri: 'https://facebook.github.io/react/img/logo_og.png'}}>
<View style={[styles.overlay, this.props.selected ? {backgroundColor: 'rgba(80,94,104,0)'} : {}]}>
<Text style={styles.choicetext}>{this.props.label}</Text>
</View>
</Image>
</TouchableHighlight>
);
}
}
class LS1 extends React.Component{
constructor(props){
super(props);
this.state = {
paleo: false,
vegan: false,
vegetarian: false,
}
}
updateChoice(type) {
let newState = {...this.state};
newState[type] = !newState[type];
this.setState(newState);
}
SkipLogin() {
var num = window.height/8.335;
console.log(num);
}
render() {
return (
<View style={styles.container}>
<View style={styles.bgImage}>
<Text style={styles.icontext}>Help us get to know your dietary lifestyle.</Text>
<View style={styles.container}>
<View style={{flex: 1, alignItems: 'center', flexDirection: 'row',justifyContent: 'center',marginTop:-20}}>
<ToggleButton label='Vegan' onPress={() => { this.updateChoice('vegan') }} selected={this.state.vegan} />
<ToggleButton label='Paleo' onPress={() => { this.updateChoice('paleo') }} selected={this.state.paleo} />
<ToggleButton label='Vegetarian' onPress={() => { this.updateChoice('vegetarian') }} selected={this.state.vegetarian} />
</View>
</View>
<TouchableHighlight onPress={this.SkipLogin.bind(this)} underlayColor='transparent'>
<View style={{backgroundColor: 'transparent', alignItems: 'center', marginBottom: 8}}>
<Text>skip this step</Text>
</View>
</TouchableHighlight>
</View>
</View>
);
}
};
var styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: 'transparent'
},
bgImage: {
flex: 1,
width: window.width,
resizeMode: 'cover',
},
icontext: {
color: '#5d5d5d',
fontWeight: '400',
fontSize: 20,
backgroundColor: 'transparent',
paddingLeft: 10,
alignItems: 'center',
marginTop: window.height/2.2,
textAlign: 'center',
margin: 10,
},
bubblechoice_click: {
height: window.height/8.335,
borderRadius: (window.height/8.3350)/2,
marginRight: 2,
width: window.height/8.335,
},
bubblechoice: {
height: window.height/8.335,
borderRadius: (window.height/8.3350)/2,
marginRight: 2,
width: window.height/8.335,
},
row: {
flex: 1,
alignItems: 'center',
flexDirection: 'row',
justifyContent: 'center',
marginTop: -30,
},
choicetext: {
alignItems: 'center',
alignSelf: 'center',
color: 'white',
marginTop: 35,
fontWeight: '600',
marginLeft: -18,
fontSize: 14,
flex: 1,
textAlign: 'center'
},
overlay: {
backgroundColor:'rgba(80,94,104,0.7)',
height: 100,
width: 100,
alignItems:'center'
},
});
module.exports = LS1;
AppRegistry.registerComponent('main', () => LS1);
You can try it out by downloading Exponent to your phone from http://exponentjs.com/ (app store or beta, whichever you prefer) then loading up exp://exp.host/#brentvatne/button-color-exp
Simplest way with TouchableOpacity and active styles:
<TouchableOpacity
style={ this.state.active? styles.btnActive : styles.btn}
onPress={() => this.setState({active: !this.state.active})}>
</TouchableOpacity>