overlap button with another view

overlap button with another view - javascript

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.

Related

How to put touchable icons on app with react native

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.

different color for every item of flatlist based on condition

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>

React-Native .js Variable not found error

Cannot figure out why I keep getting a ReferenceError cant find variable MarkAsRead for a mobile app I am building in react. Unless I am missing something the variable has been assigned below is the code for your reference. Hopefully, someone can help me get this bug resolved in a timely matter thanks in advance!
import React from 'react';
import { View,
Text,
StyleSheet,
SafeAreaView,
TouchableOpacity,
TextInput,
FlatList
} from 'react-native';
import BookCount from './components/BookCount';
import {Ionicons} from '#expo/vector-icons';
class App extends React.Component {
constructor() {
super()
this.state = {
totalCount: 0,
readingCount: 0,
readCount: 0,
isAddNewBookVisible:false,
textInputData: '',
books: [],
bookData: {
author: '',
publisher: ''
}
};
}
showAddNewBook = () => {
this.setState({isAddNewBookVisible:true});
};
hideAddNewBook = () => {
this.setState({isAddNewBookVisible:false})
};
addBook = book => {
this.setState(
(state, props) => ({
books: [...state.books, book],
totalCount: state.totalCount + 1,
readingCount:state.readingCount + 1,
isAddNewBookVisible: false
}),
() => {
console.log(this.state);
}
);
};
markAsRead = (selectedBook, index) => {
let newList = this.state.books.filter(book => book !==
selectedBook);
this.setState(prevState => ({
books: newList,
readingCount: prevState.readingCount - 1,
readCount: prevState.readCount + 1
}));
};
renderItem = (item, index) => (
<View style={{ height:50, flexDirection: 'row'}}>
<View style={{ flex:1, justifyContent: 'center', paddingLeft: 5
}}>
<Text>{item}</Text>
</View>
<TouchableOpacity onPress={() => markAsRead(item,index)} >
<View
style={{
width: 100,
height: 50,
alignItems: 'center',
justifyContent: 'center',
backgroundColor: '#160b1a'
}}
>
<Text style={{ fontWeight: 'bold', color: 'white'}}>Mark as Read</Text>
</View>
</TouchableOpacity>
</View>
);
render() {
return (
<View style={{flex: 1}}>
<SafeAreaView/>
<View style={{
height: 70,
borderBottomWidth: 0.5,
borderBottomColor: '#5e3c7d',
alignItems: 'center',
justifyContent: 'center'
}}
>
<Text style={{fontSize: 24}}>VekTorfy AI</Text>
</View>
<View style={{ flex: 1}}>
{this.state.isAddNewBookVisible &&
<View style={{height:50, flexDirection: 'row'}}>
<TextInput
onChangeText={(text)=>this.setState({textInputData:text})}
style={{ flex:1, backgroundColor: '#c6c0cb',
paddingLeft: 5}}
placeholder='Enter book name.'
placeholderTextColor='black'
/>
<TouchableOpacity
onPress={() => this.addBook(this.state.textInputData)} >
<View style={{
width: 50,
height: 50,
alignItems: 'center',
justifyContent: 'center',
backgroundColor: '#160b1a'}}>
<Ionicons name ='ios-checkmark' color='white' size={40}/>
</View>
</TouchableOpacity>
<TouchableOpacity onPress={this.hideAddNewBook}>
<View style={{
width: 50,
height: 50,
alignItems: 'center',
justifyContent: 'center',
backgroundColor: '#160b1a'}}>
<Ionicons name ='ios-close' color='red' size={40}/>
</View>
</TouchableOpacity>
</View>
}
<FlatList
data={this.state.books}
renderItem={({item}, index) => this.renderItem(item, index)}
keyExtractor={(item, index)=> index.toString()}
ListEmptyComponent={
<View style={{marginTop: 50, alignItems: 'center'}}>
<Text style={{fontWeight: 'bold'}}>Not Reading anything.</Text>
</View>
}
/>
<TouchableOpacity
onPress={this.showAddNewBook}
style={{position: 'absolute', bottom: 20, right: 20}}>
<View
style={{
width:50,
heght:50,
alignItems: 'center',
justifyContent: 'center',
borderRadius:25,
backgroundColor: '#2d2337'}}>
<Text style={{color: 'white', fontSize: 30}}>+</Text>
</View></TouchableOpacity>
</View>
<View
style={{
height: 70,
flexDirection: 'row',
borderTopWidth: 0.5,
borderTopColor: '#5e3c7d' }}>
<BookCount title='Total' count={this.state.totalCount}/>
<BookCount title='Reading' count={this.state.readingCount}/>
<BookCount title='Read' count={this.state.readCount}/>
</View>
<SafeAreaView/>
</View>
);
}
}
export default App;
const styles = StyleSheet.create({
container: {
flex: 1,
alignItems: 'center',
justifyContent: 'center'
}
});

You forgot to add the keyword this to your function call.
<TouchableOpacity onPress={() => this.markAsRead(item,index)}>

It looks like you have declared markAsRead as a method on your App class, so the correct way to refer to it is this.markAsRead()
<TouchableOpacity onPress={() => this.markAsRead(item, index)}>

How to create fixed overlay <View> React Native

I want to make the grey box position is fixed, so when I scrolldown or scrollup the grey box is stay still on it position.
Is it possible to do such thing in React Native ?
Here's my code:
<View>
<ScrollView>
<View style={styles.continueToPaymentContainer}>
</View>
</ScrollView>
</View>
container: {
flex: 1,
// justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#fff'
},
continueToPaymentContainer:{
width:width,
height: 100,
position:'absolute',
bottom:0,
backgroundColor: 'grey',
}

Try below code. You just have to add your view outside the scroll view.
<View>
<ScrollView>
// Do your stuff
</ScrollView>
<View style={styles.continueToPaymentContainer}>
</View>
</View>
container: {
flex: 1,
// justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#fff'
},
continueToPaymentContainer:{
width:width,
height: 100,
position:'absolute',
bottom:0,
backgroundColor: 'grey',
}

I just found it
All I need to do is just put my grey box on the outside of <ScrollView>
<View>
<ScrollView>
<Another element>
</ScrollView>
<View style={styles.continueToPaymentContainer}>
</View>
</View>
I hope this will helps for future search

Change Button Color onPress (toggle functionality) React Native

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>

Develop Reference

JavaScript is the programming language of the Web.

overlap button with another view - javascript

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.

Related

How to put touchable icons on app with react native

different color for every item of flatlist based on condition

React-Native .js Variable not found error

How to create fixed overlay <View> React Native

Change Button Color onPress (toggle functionality) React Native

Categories

Resources