My layout with two inputs and a button works well without the keyboard. But as soon as I clicked the input box the keyboard appears and changes the height of the screen. Then things align wrong . I already tried using keyboard avoiding view. But the error is still there.
import {
StyleSheet,
Text,
View,
TextInput,
Button,
KeyboardAvoidingView,
} from 'react-native';
import { Formik} from 'formik';
import React, { Component } from 'react';
class Demo extends Component {
render(){
return (
<KeyboardAvoidingView style={styles.container} behavior= "position , padding , height">
<View style={styles.container}>
<Text style={styles.titleText}>Profile settings</Text>
<View style={styles.card}>
<Formik
initialValues={{
name: '',
mobile: '',
}}
onSubmit={(values) => {
console.log(JSON.stringify(values));
}}>
{(props) => (
<View>
<TextInput
placeholder={'name'}
onChangeText={props.handleChange('name')}
value={props.values.name}
style={styles.cardTextSmall}
/>
<TextInput
placeholder={'email'}
onChangeText={props.handleChange('mobile')}
value={props.values.mobile}
style={styles.cardTextSmall}
/>
<Button
title={'submit'}
/>
</View>
)}
</Formik>
<View style={styles.centerButton}></View>
</View>
</View>
</KeyboardAvoidingView>
);
};
}
const styles = StyleSheet.create({
centerButton: {
top: '1%',
alignContent: 'center',
alignItems: 'center',
},
titleText: {
fontFamily: 'Segoe UI',
fontSize: 30,
position: 'relative',
left: '7%',
top: 72,
},
cardContent: {
paddingHorizontal: '10%',
marginHorizontal: 10,
},
cardTextLarge: {
paddingTop: '15%',
fontSize: 18,
color: '#A6A6A6',
fontFamily: 'Segoe UI',
},
cardTextSmall: {
borderBottomColor: 'black',
borderBottomWidth: 1,
fontFamily: 'Segoe UI',
fontSize: 18,
color: '#404040',
},
cardTextModule: {
paddingLeft: '15%',
paddingTop: '2%',
fontFamily: 'Segoe UI',
fontSize: 18,
width: '100%',
color: '#404040',
},
card: {
borderRadius: 6,
backgroundColor: 'red',
shadowOpacity: 0.3,
shadowOffset: {width: 1, height: 1},
marginHorizontal: 4,
left: '6.5%',
top: '19%',
height: '78%',
width: '85%',
margin: 'auto',
position: 'relative',
zIndex: -1,
},
});
export default Demo;
I'm a beginner here. If you could please give me some explanation. thanks!
This is happening because you have used KeyboardAvoidingView with one of the behavior as padding. So whenever you click on TextInput it adds bottom padding to the view and view moves towards the top.
If you don't want it to happen, use View tag instead of KeyboardAvoidingView.
Related
I need help in designing this button in react-native. Please help me?
I will help you out for this problem. but please know the procedures to ask a question. There should be some initial work and try out before asking a question. As I knew that you are a new contributor and i also did mistakes like this. So I am helping you.
You can achieve this by referring the following code:
import * as React from 'react';
import { Text, View, StyleSheet } from 'react-native';
import Constants from 'expo-constants';
export default class App extends React.Component {
render() {
return (
<View style={styles.container}>
<View style={styles.btnContainer}>
<View style={styles.btnLabelStyle}>
<Text>adfadafd</Text>
</View>
<View style={styles.leftIcon} >
<Text style ={{color : '#0a6df0', fontSize:25, fontWeight:'bold'}}>+</Text>
</View>
<View style={styles.rightIcon}>
<Text style={{ color: 'white' }}>{'>'}</Text>
</View>
</View>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
paddingTop: Constants.statusBarHeight,
backgroundColor: 'grey',
padding: 8,
alignItems: 'center',
},
btnContainer: {
width: '70%',
height: 40,
justifyContent: 'center',
borderRadius: 8,
paddingRight: 20,
backgroundColor: 'white',
borderColor:'green',
borderWidth:1,
},
leftIcon: {
backgroundColor: 'white',
width: 40,
height: 40,
alignItems:'center',
justifyContent:'center',
position: 'absolute',
left: -10,
borderColor:'#0a6df0',
borderWidth:1,
borderRadius: 20,
},
rightIcon: {
backgroundColor: 'green',
alignItems: 'center',
width: 20,
height: 20,
position: 'absolute',
right: -9,
borderRadius: 20,
},
btnLabelStyle:{
marginLeft:40, //lefticon width
marginRight:20, // right icon width
}
});
You can also use this expo snack here
Text is not moving, I tried to use justifyContent, alignItems and textAlign but not working. Working on visual studio and react-native, using my phone to emulator.
you can see the code ^^
I hope that u can help me
import React, { Component } from 'react';
import {
Platform,
StyleSheet,
Text,
View,
TouchableOpacity,
TextInput,
Image,
Picker,
ImageBackground
} from 'react-native';
export default class App extends Component {
render() {
return (
<ImageBackground
source={require('./resim.jpg')}
style={styles.container}>
<View styles={styles.overlayContainer}>
<View styles={styles.top}>
<Text style={styles.header}>FIRST</Text>
</View>
</View>
</ImageBackground>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
width: '100%',
height: '100%',
},
overlayContainer: {
flex: 1,
backgroundColor: 'rgba(47,163,218, .4)',
},
top: {
height: '50%',
alignItems: 'center',
justifyContent: 'center',
backgroundColor: 'white'
},
header: {
color: '#fff',
fontSize: 28
}
});
Please help me guys please.
overlayContainer: { flex: 1,backgroundColor:'rgba(47,163,218, .4)' },
top: { height: '50%', alignItems: 'center',justifyContent: 'center',backgroundColor: 'white' },
header: { color: '#fff', fontSize: 28 }
Try:
Add width size for top style and overlayContainer style
I am trying to render a text input in react-native(android) with and a line below it which am getting from borderBottomWidth property put when am typing there are two lines appearing which is not looking good and couldn't remove it i tried giving underlineColorAndroid='transparent' but didn't work
import * as React from 'react';
import { Text, View, StyleSheet,TextInput } from 'react-native';
import Constants from 'expo-constants';
export default class App extends React.Component {
render() {
return (
<View style={styles.container}>
<TextInput
autoCapitalize='none'
autoCorrect={false}
underlineColorAndroid='rgba(0,0,0,0)'
style={styles.textInput}
/>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
paddingTop: Constants.statusBarHeight,
backgroundColor: '#000',
padding: 8,
},
textInput: {
paddingVertical: 0,
marginHorizontal: 10,
textAlign: 'center',
height: 18,
fontSize: 14,
alignSelf: 'flex-start',
borderStyle: 'solid',
borderWidth:0,
borderBottomWidth: 1,
color: '#1ac9e8',
minWidth: 48,
borderColor: '#1ac9e8',
fontFamily: 'Monaco'
}
});
https://snack.expo.io/rylmazFSH
any workarounds ?
Add autoCorrect={false} should remove underline but in some android devices it will not work as described in this link
Try this it is working
autoCorrect={false}
keyboardType="visible-password"
Snack link : https://snack.expo.io/#mehran.khan/underline-android
underlineColorAndroid="transparent"
Update the style of your textInput. I found the style from snack
textInput: {
paddingVertical: 0,
marginHorizontal: 10,
textAlign: 'center',
height: 18,
fontSize: 14,
alignSelf: 'flex-start',
borderStyle: 'solid',
borderWidth:0,
color: '#1ac9e8',
minWidth: 48,
fontFamily: 'Monaco'
}
<TextInput
underlineColorAndroid="transparent"
autoCorrect={false}
keyboardType="visible-password"
style = {styles.textInput}
/>
I have the following component:
export default class StoreComponent extends Component {
render() {
return (
<View style={styles.container}>
<ScrollView contentContainerStyle={styles.scroll}>
<StoreCarouselComponent />
<StoreDiscountComponent />
<StoreDetailsComponent />
</ScrollView>
</View>
);
}
}
with this style
import { StyleSheet, Dimensions, } from 'react-native';
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#ffffff',
},
scroll: {
flex: 1,
flexDirection: 'row',
justifyContent: 'center'
},
image: {
width: Dimensions.get('window').width,
height: 350,
},
box: {
width: Dimensions.get('window').width - 30,
position: 'absolute',
shadowColor: '#000000',
shadowOpacity: 0.34,
shadowRadius: 5,
shadowOffset: {
width: 0,
height: 10
},
elevation: 10,
borderTopLeftRadius: 10,
borderTopRightRadius: 10,
borderBottomLeftRadius: 10,
borderBottomRightRadius: 10,
borderColor: 'lightgrey',
backgroundColor: '#ffffff',
padding: 10,
marginTop: 410,
},
boxDiscount: {
width: Dimensions.get('window').width - 30,
position: 'absolute',
shadowColor: '#000000',
shadowOpacity: 0.34,
shadowRadius: 5,
shadowOffset: {
width: 0,
height: 10
},
elevation: 10,
borderTopLeftRadius: 10,
borderTopRightRadius: 10,
borderBottomLeftRadius: 10,
borderBottomRightRadius: 10,
borderColor: 'lightgrey',
backgroundColor: '#253241',
padding: 10,
marginTop: 320,
},
title: {
fontSize: 30
},
distance: {
fontSize: 20,
color: '#767676'
},
distanceElement: {
fontSize: 20,
color: '#44D9E6'
},
address: {
fontSize: 20,
color: '#767676'
},
category: {
fontSize: 20,
color: '#767676',
},
categoryElement: {
fontSize: 20,
color: '#44D9E6',
},
hr: {
borderBottomColor: 'lightgrey',
borderBottomWidth: 1,
},
icons: {
flex: 1,
flexDirection: 'row',
justifyContent: 'center',
}
});
export default styles;
my scrollview works on ios but on android don't and I don't understand why
here a an image of the app and as you can see I need to scroll on android:
try to import from
import { ScrollView } from 'react-native-gesture-handler';
instead of from
'react native'
Use flexGrow : 1 inside your styles.scroll instead of flex:1
use flex: 1 inside style={styles.container} and delete it from .scroll
I had a similar issue. The culprit turned out to be contentContainerStyle={{flex: 1}} on my ScrollView. Removing that (It turned out to be unnecessary, anyway.) fixed the problem on Android.
the styles on your scroll contentContainerStyle is uneccessary
try to remove : styles.scroll
and just give padding or margin on component if you to center it
if its row add props horizontal = true on ScrollView.
I too had the similar structure as mentioned in question. I had 3 direct children View inside ScrollView and it wasn't scrolling. I tried all above solutions with flex, flexGrow etc. Nothing worked for me.
What worked for me is wrapping all 3 direct children to another View, so for ScrollView there's only one direct children.
// THIS DOES NOT SCROLL
<ScrollView>
<View>// 1st direct children</View>
<View>// 2nd direct children</View>
<View>// 3rd direct children</View>
</ScrollView>
// THIS WILL SCROLL, As now ScrollView has only one direct children
<ScrollView>
<View>
<View>// 1st children</View>
<View>// 2nd children</View>
<View>// 3rd children</View>
</View>
</ScrollView>
I'm having an issue with React Native. I'm trying to put an image as a header, which needs to resize itself responsively to fit inside of the viewport and be centred horizontally.
Unfortunately, I'm unable to produce any sort of result using styling arguments such as resizeMode: 'contain' and the image disappears when following the advice of people who say to use the styling arguments width: undefined and height: undefined.
I'm a bit new to React Native so it's certainly possible that there's a blindingly obvious issue with how I'm approaching this problem. I'm also new to posting on Stack Overflow so any pointers about how best to describe or show my problem would also be most welcome.
Here is the source code I am using which produces the result where the image is too big for the screen:
export default class ComponentIndex extends React.Component {
render(){
return(
<ImageBackground
source={require('./../../assets/images/background_placeholder.png')}
style={{width: '100%', height: '100%'}}
>
<View style={styles.parentView}>
<View style={styles.elementSpacer}>
<Image
source={require('./../../assets/images/iview_learning_logo.png')}
style={styles.headerImage}
/>
</View>
<View style={styles.elementContainer}>
<Text style={styles.subheadingText}>App for comprehensive tutorials</Text>
</View>
<View style={styles.elementContainer}>
<Button rounded style={styles.startButton}>
<Text style={styles.startButtonText}>LET'S GO</Text>
</Button>
</View>
</View>
</ImageBackground>
);
}
}
const styles = StyleSheet.create({
parentView: {
flex: 1,
flexDirection: 'column',
padding: 30,
justifyContent: 'center',
},
headerImage: {
resizeMode: 'contain',
},
elementSpacer: {
flex: 1,
},
elementContainerHeader: {
height: 60,
},
elementContainer: {
margin: 10,
},
subheadingText: {
fontSize: 18,
textAlign: 'center',
//fontFamily: 'Arial',
},
startButton: {
alignItems: 'center',
justifyContent: 'center',
alignSelf: 'center',
paddingRight: 25,
paddingLeft: 25,
backgroundColor: '#c00000',
},
startButtonText: {
color: 'white',
//fontWeight: 'bold',
fontSize: 20,
//fontFamily: 'Arial',
},
});
Image going off the side of the screen
And here is the Source Code I am using where the image disappears off the screen:
export default class ComponentIndex extends React.Component {
render(){
return(
<ImageBackground
source={require('./../../assets/images/background_placeholder.png')}
style={{width: '100%', height: '100%'}}
>
<View style={styles.parentView}>
<View style={styles.elementSpacer}>
<Image
source={require('./../../assets/images/iview_learning_logo.png')}
style={styles.headerImage}
/>
</View>
<View style={styles.elementContainer}>
<Text style={styles.subheadingText}>App for comprehensive tutorials</Text>
</View>
<View style={styles.elementContainer}>
<Button rounded style={styles.startButton}>
<Text style={styles.startButtonText}>LET'S GO</Text>
</Button>
</View>
</View>
</ImageBackground>
);
}
}
const styles = StyleSheet.create({
parentView: {
flex: 1,
flexDirection: 'column',
padding: 30,
justifyContent: 'center',
},
headerImage: {
resizeMode: 'contain',
height: undefined,
width: undefined,
},
elementSpacer: {
flex: 1,
},
elementContainerHeader: {
height: 60,
},
elementContainer: {
margin: 10,
},
subheadingText: {
fontSize: 18,
textAlign: 'center',
//fontFamily: 'Arial',
},
startButton: {
alignItems: 'center',
justifyContent: 'center',
alignSelf: 'center',
paddingRight: 25,
paddingLeft: 25,
backgroundColor: '#c00000',
},
startButtonText: {
color: 'white',
//fontWeight: 'bold',
fontSize: 20,
//fontFamily: 'Arial',
},
});
Image disappeared entirely
After viewing the related questions, I found a solution which worked for me. Adding the following styling arguments did the trick:
width: null,
resizeMode: 'contain',
height: 220
The Stack Overflow question this solution was taken from