Hi I'm new in react native. I would like to ask how to fixed the position of these three colors, because every time i tried to click the search text input and the keyboard goes up those three colors will also goes up. I tried position: 'fixed' but it didnt work.
Screenshot
Here is also the code:
render(){
return(
<View style={{flex: 1}}>
<View style={{flex: 3, backgroundColor: '#E1F1FE'}}>
<View style={styles.form}>
<TextInput
style={styles.input}
placeholder = "Search"
returnKeyType="go"
underlineColorAndroid={'rgba(0,0,0,0)'}
/>
<Icon name="search" size={20} color="#900" style={styles.label} />
</View>
</View>
<View style={{flex: 1, backgroundColor: '#77D3F8'}}>
</View>
<View style={{flex: 1, backgroundColor: '#AEEAF2'}}>
</View>
<View style={{flex: 1, backgroundColor: '#39CFDE'}}>
</View>
</View>
);
}
and the styles
import {StyleSheet} from 'react-native';
module.exports = StyleSheet.create({
navBar: {
backgroundColor: '#EAEAEC',
},
title: {
color: '#rgba(0, 0, 0, 0.65)',
},
buttonText: {
color: '#rgba(0, 0, 0, 0.45)',
},
style3:{
fontSize: 35,
color: '#fff',
padding: 10,
alignContent:'center',
justifyContent: 'center',
},
style2: {
flexDirection: 'row',
alignContent: 'center',
alignItems: 'center',
flex:1
},
buttonstyle: {
flex: 1
},
form:{
flexDirection: 'row',
borderBottomWidth:1,
borderColor: '#00BBD1',
marginTop:80,
marginRight: 40,
marginLeft: 40,
alignContent: 'center',
alignItems: 'center',
},
input: {
height: 40,
borderWidth: 0,
flex: 1
},
label:{
alignContent:'center',
justifyContent: 'center',
marginRight: 10,
color: '#00BBD1'
},
});
Thank you in advance :)
It will not going to be stick to position when keyboard activated. You may need to use keyboardavoidingview or another package like react-native-keyboard-aware-scroll-view So design may not disturb when keyboard activated.
Related
Hi I'm building an app for IOS and Android with react Native, and I'm a newbie this is my first app, and I think I'm not too bad, but I have a UI that is only a supermarket list, but I have the head ready but I need place the below the image , I made a new View but it comes out in the middle of the screen. Can you explain to me why it is not shown where to go, thanks.
Can you explain to me why? Thanks I share codes
enter image description here
import { Button, Image, StyleSheet, Text, View } from 'react-native';
import { StatusBar } from 'expo-status-bar';
export default function App() {
return (
<View style={styles.container}expoex>
<View style={styles.header}>
<View style={styles.imageContainer}>
<Image style= {styles.logo} source={require('./assets/logo.png')} />
</View>
<View style={styles.menu}>
<Image source={require('./assets/menu3.png')} />
<Image source={require('./assets/menu2.png')} />
<Image source={require('./assets/menu5.png')} />
<Image source={require('./assets/menu1.png')} />
<Image source={require('./assets/menu4.png')} />
</View>
</View>
<View style={styles.textNomList}>
<Text style={styles.textNom}>Lista de Supermercado</Text>
</View>
<StatusBar style="auto" />
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#6E04BF',
color: '#fff',
alignItems: 'center',
},
header: {
marginTop:62,
flex:1,
flexDirection:'row',
justifyContent:'center',
alignItems:'flex-start',
height: 145,
marginVertical: 10,
},
imageContainer: {
alignItems: 'center',
justifyContent: 'center',
marginLeft:5,
height: 145,
},
logo: {
width: 100,
height: 140,
},
menu: {
flex:1,
flexDirection:'row',
justifyContent:'space-between',
marginHorizontal: 20,
marginTop:15,
height:145,
},
textNomList: {
flex:1,
alignItems:'flex-start',
justifyContent:'flex-start',
},
textNom: {
color: '#fff',
fontSize: 16,
fontWeight: 'bold',
marginLeft: 20,
},
});
the result of this code is
enter image description here
I only can see some styling issues, check out below, edit it as required
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#6E04BF',
color: '#fff',
alignItems: 'center',
},
header: {
marginTop: 62,
// flex: 1,
flexDirection: 'row',
// justifyContent: 'center',
// alignItems: 'flex-start',
// height: 145,
// marginVertical: 10,
},
imageContainer: {
// alignItems: 'center',
// justifyContent: 'center',
marginLeft: 5,
height: 145,
},
logo: {
width: 100,
height: 140,
backgroundColor:'fff'
},
menu: {
// flex: 1,
flexDirection: 'row',
justifyContent: 'space-between',
marginHorizontal: 20,
marginTop: 15,
height: 145,
},
textNomList: {
flex: 1,
alignItems: 'flex-start',
justifyContent: 'flex-start',
},
textNom: {
color: '#fff',
fontSize: 16,
fontWeight: 'bold',
marginLeft: 20,
},
});
You should put your text in the same View that is wrapping your image and then style it appropriately.
<View style={styles.imageContainer}>
<Image style= {styles.logo} source={require('./assets/logo.png')} />
<Text style={styles.textNom}>Lista de Supermercado</Text>
</View>
I am not good at styling but it looks like your app should look decent with how the styles are at the current moment.
With react native and flexbox, I do not understand why the text is outside the container (orange bakcground) ?
<View style={styles.main_container}>
<View style={styles.infos_container}>
<View style={styles.info_item}>
<Text style={styles.info_name}>
Âge
</Text>
<Text style={styles.info_value}>
18
</Text>
</View>
<View style={styles.info_item}>
<Text style={styles.info_name}>
Médias publics
</Text>
<Text style={styles.info_value}>
2
</Text>
</View>
</View>
</View>
const styles = StyleSheet.create({
infos_container: {
backgroundColor: 'orange',
flex: 1,
flexDirection: 'row',
flexWrap: 'wrap',
padding: 5,
},
info_item: {
margin: 5,
alignItems: 'center',
},
info_name: {
color: '#6c757d',
fontSize: 11,
},
info_value: {
color: '#343a40',
},
})
I just want my blocks styles.info_item to be horizontal and orange background
remove flex: 1 from infos_container settings flex: 0 in the main_container shouldn't have an effect on the styling of infos_container
infos_container: {
backgroundColor: 'orange',
flexDirection: 'row',
flexWrap: 'wrap',
padding: 5,
},
You didn't import main_container in your style. Maybe you have flex: 0 inside it
Change your style to this:
main_container: {
flex: 1,
},
infos_container: {
backgroundColor: 'orange',
alignSelf: 'stretch',
flexDirection: 'row',
flexWrap: 'wrap',
padding: 5,
},
info_item: {
margin: 5,
alignItems: 'center',
},
info_name: {
color: '#6c757d',
fontSize: 11,
},
info_value: {
color: '#343a40',
},
I can't get my app to fill the whole screen. Whatever i do, there is always a white bar on the bottom of the page. It's so strange because it works on some devices but not others. i'm going crazy over this!
Ive tried const { height, width } = Dimensions.get('window'); and setting the app height with that, and it actually worked once, but now i can't get it to work again. ive tried rewrapping everything in different ways, with different views and scrollviews.
ps.: i removed all functions and useless code so it's not too much code, but
here is my code
import React, { Component } from 'react';
import {
View,
Switch,
Text,
TextInput,
TouchableOpacity,
ImageBackground,
Image,
Linking,
StatusBar,
Dimensions,
} from 'react-native';
import { ScaledSheet } from 'react-native-size-matters';
import { KeyboardAwareScrollView } from 'react-native-keyboard-aware-scroll-view';
export default class App extends Component {
constructor() {
super();
};
}
render() {
return (
<View style={styles.container}>
<KeyboardAwareScrollView
keyboardShouldPersistTaps={'always'}
style={styles.teste}
showsVerticalScrollIndicator={false}>
<StatusBar backgroundColor="#50a9f3" />
<ImageBackground source={require('./background.png')} style={styles.imagemBackground}>
<View style={styles.campos}>
<Image
style={{ width: 110, height: 110, alignSelf: 'center' }}
source={require('./logo.png')}
/>
<View style={styles.item}>
<Text style={styles.texto}>M²s do ambiente</Text>
<TextInput
style={styles.inputText}
keyboardType={'phone-pad'}
underlineColorAndroid={'white'}
onChangeText={mQuadrado => this.setState({ mQuadrado })}
/>
</View>
<View style={styles.item}>
<Text style={styles.texto}>Nº de pessoas</Text>
<TextInput
style={styles.inputText}
keyboardType={'phone-pad'}
underlineColorAndroid={'white'}
onChangeText={pessoas => this.setState({ pessoas })}
/>
</View>
<View style={styles.item}>
<Text style={styles.texto}>Nº de eletrodomésticos</Text>
<TextInput
style={styles.inputText}
keyboardType={'phone-pad'}
underlineColorAndroid={'white'}
onChangeText={eqps => this.setState({ eqps })}
/>
</View>
<View style={styles.item}>
<Text style={styles.texto}>Nº de janelas </Text>
<TextInput
style={styles.inputText}
keyboardType={'phone-pad'}
underlineColorAndroid={'white'}
onChangeText={jnls => this.setState({ jnls })}
/>
</View>
<View style={styles.switch}>
<Text style={styles.texto}>Recebe luz solar </Text>
<Switch
style={{ transform: [{ scaleX: 0.9 }, { scaleY: 0.9 }] }}
thumbColor="#ffffff"
trackColor={{ true: '#c0c0c0' }}
value={this.state.switch}
onValueChange={value => this.setState({ switch: value })}
/>
</View>
<View style={styles.input}>
<TouchableOpacity style={styles.opacity} onPress={this.calcular}>
<Text style={styles.textoCalcular}>CALCULAR</Text>
</TouchableOpacity>
</View>
<View style={styles.resultadoBox}>
<Text style={styles.textoResultado}>Você precisará de</Text>
<Text style={styles.resultado}>{btu == '0' ? null : btu + '.000 BTUS'}</Text>
</View>
</View>
<View style={styles.banner}>
<TouchableOpacity
style={styles.bannerContainer}
onPress={() => Linking.openURL('https://matum.com.br/produtos-sisum/')}>
<Text style={styles.bannerTexto}>Gerencie suas manutenções preventivas e corretivas</Text>
<Text style={styles.bannerTexto}>Relatório PMOC simples</Text>
<Text style={styles.bannerTextoX}>Saiba mais</Text>
</TouchableOpacity>
</View>
</ImageBackground>
</KeyboardAwareScrollView>
</View>
);
}
}
const { height, width } = Dimensions.get('window');
const heightCerto = height - StatusBar.currentHeight;
const styles = ScaledSheet.create({
container: {
flex: 1,
},
teste: {
flex: 1,
},
imagemBackground: {
flex: 1,
},
campos: {
flex: 95,
justifyContent: 'flex-start',
alignItems: 'stretch',
padding: '20#s',
paddingTop: '12#s',
},
item: {
flex: 1,
},
switch: {
paddingTop: '15#s',
flexDirection: 'row',
justifyContent: 'flex-start',
flex: 1,
},
textoCalcular: {
fontSize: '15#s',
color: '#ffffff',
textShadowColor: 'black',
textShadowRadius: 2,
},
input: {
padding: '20#s',
alignItems: 'center',
flex: 1,
},
opacity: {
backgroundColor: '#50a9f3',
borderWidth: '1.5#s',
borderRadius: '10#s',
borderColor: '#000000',
width: '190#s',
height: '39#s',
justifyContent: 'center',
alignItems: 'center',
},
resultadoBox: {
flex: 2,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: 'rgba(100,100,100,0.5)',
margin: 0,
borderColor: 'rgba(100,100,100,0.5)',
borderRadius: '10#s',
},
resultado: {
fontSize: '28#s',
color: 'white',
textShadowColor: 'black',
textShadowRadius: 5,
},
banner: {
flex: 10,
backgroundColor: 'rgba(140,140,140,0.5)',
margin: 0,
borderColor: '#50a9f3',
borderWidth: '1.5#s',
borderRadius: '10#s',
alignSelf: 'stretch',
},
bannerContainer: {
alignItems: 'center',
},
bannerTexto: {
color: '#ffffff',
fontSize: '12#s',
},
bannerTextoX: {
color: '#50a9f3',
fontSize: '10#s',
textShadowColor: 'black',
textShadowRadius: 4,
},
inputText: {
fontSize: '12#s',
color: 'white',
textShadowColor: 'black',
textShadowRadius: 5,
height: '38#s',
},
texto: {
fontSize: '13#s',
color: '#ffffff',
textShadowColor: 'black',
textShadowRadius: 5,
},
textoResultado: {
fontSize: '16#s',
color: 'white',
textShadowColor: 'black',
textShadowRadius: 5,
},
});
I think you're talking about the image background but not totally sure. I was able to get it to stretch to the full height by adding the following height declaration:
imagemBackground: {
flex: 1,
height: height,
},
link to example: https://snack.expo.io/r1Y-zpwMH
You are using flex:1 many times in style that is the problem.
please give flex:1 in container style and remove all flex:1 in other styles instead of flex:1 you can use width and height in percentage.
like style={{width:'100%',height:'40%'}}.
Thank you!
Image here.
App
Code
I just want Advice component close to Weather component.
How can I get it ?
App.js
<View style={styles.columnLayout}>
<Weather currentCity="Phuket"/>
<Advice />
</View>
const styles = StyleSheet.create({
columnLayout : {
flex : 1,
flexDirection: 'column',
}
})
Weather and Advice component are not using flex.
WeatherData.js (export to Weather.js)
<View style={styles.viewStyle}>
<View style={styles.dataStyle}>
<Text style={styles.textStyle}>Temperature</Text>
<Text style={styles.textStyle}>{this.props.temp} °C</Text>
</View>
<View style={styles.dataStyle}>
<Image style={{ width: 80, height: 80 }} source={{ uri: `http://openweathermap.org/img/w/${this.props.icon}.png` }}></Image>
<Text style={styles.textStyle}>{this.props.description}</Text>
</View>
<View style={styles.dataStyle}>
<Text style={styles.textStyle}>Humidity</Text>
<Text style={styles.textStyle}>{this.props.humidity} %</Text>
</View>
</View>
const styles = StyleSheet.create({
dataStyle: {
backgroundColor: '#00b377',
flex: 1,
alignItems: "center",
justifyContent: "center"
},
viewStyle: {
height: 150,
flexDirection: "row",
justifyContent: "center"
},
textStyle: {
color: 'white',
textShadowColor: 'rgba(0, 0, 0, 0.75)',
textShadowOffset: {width: -1, height: 1},
textShadowRadius: 10
}
})
another one Component using the same style.
I already add code.
In react-native documents flex : 1 and flexDirection : column all View are adjacent
but mine is not.
I have tried using both KeyboardAvoidingView and ScrollView to prevent my content from being squished (pushed up) when the keyboard is present. I have tried using padding, height, and position for my behavior but nothing is working. Can someone please tell me how I can force my content to ignore the keyboard and not get pushed up??
return (
<View style={{height: '100%', backgroundColor: '#D6D6D6', position: 'relative'}}>
<View style={styles.wrapper}>
<View style={{height:'100%', borderRadius: 7}}>
<View style={styles.container}>
<ScrollView style={{borderRadius: 7}}
horizontal
showsHorizontalScrollIndicator={false}
scrollEventThrottle={10}
pagingEnabled
onScroll={
Animated.event(
[{nativeEvent: {contentOffset: {x: this.animVal}}}]
)
}
>
{imageArray}
</ScrollView>
<View style={styles.listViewContainer}>
<TouchableOpacity style={styles.listView} onPress={() => Actions.pop()}>
<View style={{flex: 1, flexBasis: 22}}>{listIcon}</View>
<View style={{flex: 2, flexBasis: 57}}><Text style={{color: '#fff'}}>List View</Text></View>
</TouchableOpacity>
</View>
<View style={styles.circleContainer}>
{circleArray}
</View>
</View>
<View style={styles.productsSection}>
<Text style={styles.title}>{prodDesc}</Text>
<Text style={styles.desc}>{prodBrand}</Text>
<Text style={styles.desc}>Item: {prodId || ''}</Text>
<Text style={[styles.desc, {marginBottom: 15}]}>Category: {prodCat}</Text>
<Table borderStyle={{borderWidth: 0}}>
<Rows data={rows}/>
</Table>
</View>
<View style={styles.bodyFooter}>
<QuantityCounter style={{width: '100%', display: 'block', marginRight: 20}} data={{productId: prodId}} />
</View>
</View>
</View>
<View style={styles.footer}>
<View style={styles.cartContainer}>
{cartIcon}
<Text style={{color: '#3A3A3A', fontSize: 14}}>18 items</Text>
</View>
<TouchableOpacity style={styles.viewCartButtonContainer} onPress={() => this.cartRedirect() }>
<Text style={{color: '#fff', fontSize: 15, marginTop: '5%'}}>View Cart</Text>
</TouchableOpacity>
</View>
<Header/>
</View >
);
here are my main styles for this:
var styles = StyleSheet.create({
wrapper: {
backgroundColor: '#E6E6E6',
marginVertical: 15,
marginHorizontal: 10,
borderRadius: 7,
elevation: 3,
maxHeight: '80%',
flexShrink: 1,
zIndex: 0,
marginTop: 75
},
container: {
flex: 1.7,
justifyContent: 'space-between',
alignItems: 'center',
height: '50%',
borderRadius: 7
},
footer: {
justifyContent:'space-between',
alignItems: 'center',
height: '10%',
backgroundColor: '#E6E6E6',
paddingVertical: 15,
paddingHorizontal: 17,
flexDirection: 'row',
borderStyle: 'solid',
borderTopColor: '#8E8E93',
borderTopWidth: 1
},
cartContainer: {
flexDirection: 'row',
width: '35%'
},
viewCartButtonContainer: {
backgroundColor: '#356FAF',
height: '90%',
width: '45%',
padding: 20,
alignItems: 'center',
justifyContent: 'center',
borderRadius: 3
},
bodyFooter: {
backgroundColor: '#F6F6F6',
justifyContent: 'center',
flex: 0.45,
borderTopColor: '#D6D6D6',
borderTopWidth: 1,
borderStyle: 'solid',
borderBottomRightRadius: 7,
borderBottomLeftRadius: 7
},
circleContainer: {
position: 'absolute',
zIndex: 2,
bottom: 10,
left: 10,
flexDirection: 'row',
},
listViewContainer: {
position: 'absolute',
zIndex: 10,
top: 0,
right: 0,
justifyContent: 'center'
},
listView: {
display: 'flex',
flexDirection: 'row',
alignItems: 'center',
justifyContent: 'center',
borderTopRightRadius: 3,
backgroundColor: '#000',
paddingVertical: 5,
paddingHorizontal: 10
},
What it looks like without the keyboard:
What it looks like with the keyboard:
Handling View behavior when toggling a keyboard can be a tricky thing in React Native. There are multiple possible solutions to questions like this, but in this case the solution was this:
Instead of using style={{height:'100%'}} on your components that get pushed up, try using Dimensions:
import {Dimensions} from 'react-native';
const { height } = Dimensions.get('window');
and specify style={{ height }} in the right components.
Another thing that might be worth a try if someone else stumbles on this question:
React Native for Android has some default settings defined in the Android manifest. If you are not using Expo (or CRNA), you can change the behavior of the keyboard in AndroidManifest.xml by changing the windowSoftInputMode rule.
Try changing android:windowSoftInputMode="adjustResize" to android:windowSoftInputMode="adjustPan" or to android:windowSoftInputMode="adjustNothing". You can try to play around with some other options (See here) if this doesn't give you the desired effect.
You should use try behavior as "none" for android and if you don't want to getting small, you can set android:windowSoftInputMode="adjustPan" in manifest file.
and if still face any error checkout react-native-keyboard-aware-scrollview
here on npm.
I went through a similar problem and solved it by changing
android:windowSoftInputMode="adjustPan”
In android manifest.
Also clean and rebuild. This might work
remove the position absolute it will works just fine trust me
for some cases if you want keep defualt manifest
you can move your elements inside a Scrollview it may help.
issue solved for me in this way