Here is my Code snippet:
return (
<View style={{ backgroundColor: "#FFF", flex: 1 }}>
<ScrollView>
<Image
source={require("../images/image.jpg")}
style={{ width: "100%", height: "60%" }}
/>[![enter image description here][1]][1]
<View
style={{
flexDirection: "row",
alignItems: "center",
marginHorizontal: 55,
borderWidth: 2,
marginTop: 40,
paddingHorizontal: 10,
paddingRight: 30,
borderColor: "#00716F",
borderRadius: 23,
paddingVertical: 2,
}}
>
<Icon name="mail" color="#00716F" size={24} />
<TextInput
style={{ height: 40, width: "100%", paddingLeft: 5 }}
placeholder="Email"
value={email}
onChangeText={setEmail}
autoCapitalize="none"
autoCorrect={false}
/>
</View>
<View
style={{
flexDirection: "row",
alignItems: "center",
marginHorizontal: 55,
borderWidth: 2,
marginTop: 15,
paddingHorizontal: 10,
paddingRight: 30,
borderColor: "#00716F",
borderRadius: 23,
paddingVertical: 2,
}}
>
<Icon name="lock" color="#00716F" size={24} />
<TextInput
style={{ height: 40, width: "100%", paddingLeft: 5 }}
placeholder="Password"
secureTextEntry
value={password}
onChangeText={setPassword}
/>
</View>
<TouchableOpacity onPress={() => signin({ email, password })}>
<View
style={{
marginHorizontal: 55,
alignItems: "center",
justifyContent: "center",
marginTop: 30,
backgroundColor: "#00716F",
paddingVertical: 10,
borderRadius: 23,
}}
>
</View>
</TouchableOpacity>
<NavLink routeName="Signin" text="New User ? Signup Here." />
</ScrollView>
</View>
);
I have tried everything I don't know why my scroll view is not working
I have multiple TextInput elements but only a few of them only get rendered on the screen and the rest got trim. please help
here I am attaching the screenshot of the output
I am using react-native expo
is this any package problem
help me
Try set ScrollView property contentContainerStyle as below
<ScrollView
contentContainerStyle={{flex:0}}
>
The issue is solved
There was a very small mistake
I gave an element the margin of -200
So it was not scrolling
After i removed that margin
It was working smoothly
Related
react-native-modal dropdown only displays 9 values than when I select any value and open the dropdown again it shows me remaining values I have tried this solution
stackoverflow.com/q/68266570/10619360 but its not working you can check the images
<ModalDropdown
ref={dropdown}
style={{ width: '100%' }}
showsVerticalScrollIndicator={false}
options={["Lottes", "Stelzer", "Puchtler", "Reichel", "Hühnermobil", "Simplebakery", "Ruckdeschel", "Seidel", "Bloß", "Wunderlich", "Edeka", "Harles"]}
onSelect={(index, val) => (setValue(val), setError(null))}
renderRow={(rowData, rowID) => renderDropDownList(rowData)}
dropdownStyle={{
marginTop: 0.5,
width: '75%',
borderRadius: 10,
borderWidth: 0,
elevation: 3,
overflow: 'hidden',
}}
>
<Pressable
onPress={() => dropdown.current?.show()}
style={{ marginTop: 40 }}>
<View style={{
...globalStyles.input,
justifyContent: 'space-between',
padding: 2
}}>
<TextInput
editable={false}
value={value}
placeholder='Lieferant'
style={{
...FONTS.regular,
height: 40
}} />
<View
style={{
height: "100%",
borderRadius: 10,
width: '14%',
justifyContent: 'center',
alignItems: 'center',
backgroundColor: COLORS.primary,
}}>
<Image
source={icons.dropdown}
resizeMode="contain"
style={{
height: 15,
width: 12,
tintColor: COLORS.secondary,
}}
/>
</View>
</View>
</Pressable>
</ModalDropdown>
const renderDropDownList = (rowData) => {
return <Text style={{
...FONTS.regular,
fontSize: 14,
padding: 10,
}} >{rowData}</Text>
}
I am new in react native and I please need help. When the keyboard appears , the whole view is pushed upwards.I do not want that to happen.I saw other answers but none of them is working for me.I do not want the view to be pushed up when the keyboard appears and want to remain where they are.I am using expo and has given the code below with the images.
import { StatusBar } from 'expo-status-bar';
import React from 'react';
import { Image, StyleSheet, View, TextInput, Text, TouchableOpacity, ScrollView, KeyboardAvoidingView } from 'react-native';
export default function LoginScreen({ navigation }) {
return (
<View style={styles.container}>
<Image style={styles.logo} source={
{
uri: "https://i.ibb.co/4JK4T3P/deale-logo.jpg",
}} />
<StatusBar style="auto" />
<View style={styles.inputContainer} >
<TextInput
style={styles.loginInput}
placeholder='Phone Number or Email'
/>
<TextInput
style={styles.passwordInput}
placeholder='Password'
/>
<TouchableOpacity
style={{
width: 280,
height: 50,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: 'rgb(255, 77, 77)',
elevation: 5,
borderRadius: 10,
top: 35
}}
activeOpacity={0.8}>
<Text
style={{
color: 'white',
fontSize: 15,
fontWeight: 'bold',
}} >
LOG IN
</Text>
</TouchableOpacity>
<Text
onPress={() => console.log('g')}
style={{
position: 'relative',
top: '23%',
fontWeight: 'bold',
}} >
OR LOGIN WITH SOCIAL MEDIA ACCOUNT?
</Text>
<View style={{
flex: 1,
flexDirection: 'row',
bottom: 30,
justifyContent: 'space-evenly',
top: '22%',
width: 300
}} >
<TouchableOpacity activeOpacity={0.5} >
<Image source={
{ uri: 'https://cdn3.iconfinder.com/data/icons/popular-services-brands/512/facebook-512.png' }}
style={{
width: 60,
height: 60,
}} />
</TouchableOpacity>
<TouchableOpacity activeOpacity={0.5} >
<Image source={
{ uri: 'https://lh3.googleusercontent.com/COxitqgJr1sJnIDe8-jiKhxDx1FrYbtRHKJ9z_hELisAlapwE9LUPh6fcXIfb5vwpbMl4xl9H9TRFPc5NOO8Sb3VSgIBrfRYvW6cUA' }}
style={{
width: 60,
height: 60,
}} />
</TouchableOpacity>
</View>
</View >
<View style={styles.loginButtonView} >
<TouchableOpacity
onPress={
() => navigation.navigate('Create')
}
style={{
width: '100%',
height: '100%',
justifyContent: 'center',
alignItems: 'center',
backgroundColor: 'rgb(145, 157, 230)',
top: 10,
elevation: 5,
borderRadius: 5
}}
activeOpacity={0.8}>
<Text
style={{ color: 'white', fontSize: 15, fontWeight: 'bold' }} >
CREATE ACCOUNT
</Text>
</TouchableOpacity>
<TouchableOpacity
style={{
justifyContent: 'center',
alignItems: 'center',
top: '40%'
}}
activeOpacity={0.1}>
<Text
style={{
color: 'black',
fontSize: 16,
top: 5
}} >
FORGOT PASSWORD
</Text>
</TouchableOpacity>
</View>
</View >
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center',
},
logo: {
position: 'absolute',
height: 100,
width: 150,
resizeMode: "contain",
top: '3 %'
},
loginInput: {
position: 'relative',
height: 50,
borderColor: 'black',
backgroundColor: 'rgb(240, 240, 242)',
borderRadius: 10,
width: 280,
color: 'black',
textAlign: 'center',
justifyContent: 'center',
alignItems: 'center',
borderColor: 'white',
},
inputContainer: {
position: 'absolute',
top: '18%',
alignItems: 'center',
},
passwordInput: {
position: 'relative',
height: 50,
borderColor: 'black',
backgroundColor: 'rgb(240, 240, 242)',
borderRadius: 10,
width: 280,
color: 'black',
textAlign: 'center',
justifyContent: 'center',
alignItems: 'center',
borderColor: 'white',
top: 10
},
loginButtonView: {
position: 'absolute',
height: 46,
width: '70%',
top: '80%'
}
});
I figured out the reason myself.It was happening because i had set my positions based on percentage and the popping of keyboard changed the dimensions resulting in the change of position.
Try to use the component KeyboardAvoidingView like this:
<KeyboardAvoidingView behavior={'height'} enabled style={styles.container}>
<Image style={styles.logo} source={
{
uri: "https://i.ibb.co/4JK4T3P/deale-logo.jpg",
}} />
<StatusBar style="auto" />
<View style={styles.inputContainer} >
<TextInput
style={styles.loginInput}
placeholder='Phone Number or Email'
/>
<TextInput
style={styles.passwordInput}
placeholder='Password'
/>
<TouchableOpacity
style={{
width: 280,
height: 50,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: 'rgb(255, 77, 77)',
elevation: 5,
borderRadius: 10,
top: 35
}}
activeOpacity={0.8}>
<Text
style={{
color: 'white',
fontSize: 15,
fontWeight: 'bold',
}} >
LOG IN
</Text>
</TouchableOpacity>
<Text
onPress={() => console.log('g')}
style={{
position: 'relative',
top: '23%',
fontWeight: 'bold',
}} >
OR LOGIN WITH SOCIAL MEDIA ACCOUNT?
</Text>
<View style={{
flex: 1,
flexDirection: 'row',
bottom: 30,
justifyContent: 'space-evenly',
top: '22%',
width: 300
}} >
<TouchableOpacity activeOpacity={0.5} >
<Image source={
{ uri: 'https://cdn3.iconfinder.com/data/icons/popular-services-brands/512/facebook-512.png' }}
style={{
width: 60,
height: 60,
}} />
</TouchableOpacity>
<TouchableOpacity activeOpacity={0.5} >
<Image source={
{ uri: 'https://lh3.googleusercontent.com/COxitqgJr1sJnIDe8-jiKhxDx1FrYbtRHKJ9z_hELisAlapwE9LUPh6fcXIfb5vwpbMl4xl9H9TRFPc5NOO8Sb3VSgIBrfRYvW6cUA' }}
style={{
width: 60,
height: 60,
}} />
</TouchableOpacity>
</View>
</View >
<View style={styles.loginButtonView} >
<TouchableOpacity
onPress={
() => navigation.navigate('Create')
}
style={{
width: '100%',
height: '100%',
justifyContent: 'center',
alignItems: 'center',
backgroundColor: 'rgb(145, 157, 230)',
top: 10,
elevation: 5,
borderRadius: 5
}}
activeOpacity={0.8}>
<Text
style={{ color: 'white', fontSize: 15, fontWeight: 'bold' }} >
CREATE ACCOUNT
</Text>
</TouchableOpacity>
<TouchableOpacity
style={{
justifyContent: 'center',
alignItems: 'center',
top: '40%'
}}
activeOpacity={0.1}>
<Text
style={{
color: 'black',
fontSize: 16,
top: 5
}} >
FORGOT PASSWORD
</Text>
</TouchableOpacity>
</View>
</KeyboardAvoidingView >
Try to use different values in the position prop.
If you want less job, you can use the react-native-keyboard-aware-scroll-view. It's a very good lib to work with Keyboard in different layouts.
I am trying to set the background image to whole screen area including the notch. This is the default on iPhone but I am not able to achieve it on Android Phone. The Android phone I am using is Samsung Galaxy A-01 and the iPhone is iPhone XS. Attached are the screenshots.
Android Screenshot (Not fine)
iPhone Screenshot (I want to achieve this on Android as well)
UPDATE 1:
Following is the code:
render() {
const { roomId, nickName } = this.state;
return (
<>
<StatusBar barStyle='light-content' translucent />
<ImageBackground
source={require('../../../assets/images/backgroundImage.png')}
style={{ flex: 1, justifyContent: 'center', height: '100%' }}
resizeMode='cover'>
<KeyboardAvoidingView
style={{ flexGrow: 1 }}
enabled
behavior={Platform.OS === 'ios' ? 'padding' : 'height'}>
<View
style={{
flex: 1,
justifyContent: 'flex-end',
alignItems: 'center',
paddingHorizontal: 16,
paddingVertical: 1,
flexDirection: 'column',
height: '100%',
}}>
<Image
source={require('../../../assets/images/logo.png')}
style={{ marginBottom: 50 }}
resizeMode='contain'
/>
<SafeAreaView
style={{
height: '50%',
justifyContent: 'flex-end',
width: '100%',
}}>
<View
style={{
width: '100%',
justifyContent: 'flex-end',
marginBottom: 10,
}}>
<TextInput
ref={this.classIdRef}
style={{
width: '100%',
backgroundColor: '#fff',
height: 50,
borderRadius: 4,
marginBottom: 15,
paddingHorizontal: 15,
}}
placeholderTextColor='rgb(218, 218, 218)'
placeholder='Class ID'
value={roomId}
onChangeText={(text) => this.setRoomId({ roomId: text })}
/>
<TextInput
ref={this.nicknameRef}
style={{
width: '100%',
backgroundColor: '#fff',
height: 50,
borderRadius: 4,
marginBottom: 20,
paddingHorizontal: 15,
}}
placeholder='Nickname'
placeholderTextColor='rgb(218, 218, 218)'
value={nickName}
onChangeText={(text) =>
this.setNickName({ nickName: text })
}
/>
<TouchableOpacity
onPress={this.navigateToClassroomHandler}
style={{
backgroundColor: 'rgb(251, 158, 85)',
width: '100%',
height: 50,
justifyContent: 'center',
alignItems: 'center',
borderRadius: 4,
}}
disabled={roomId === '' || nickName === ''}>
<Text
style={{
fontSize: 18,
color: '#fff',
fontWeight: 'bold',
}}>
Attend Class
</Text>
</TouchableOpacity>
</View>
</SafeAreaView>
</View>
</KeyboardAvoidingView>
</ImageBackground>
</>
);
}
I have created an OTP screen using react-native-otp-input as follows:
when I enter the code the continue button turns pink as code state is set to the value like follows
but when I try emptying the code inputs the continue button is still pink as the code state is not refreshed
My code for the otp input view and continue button is as follows:
<View style={{alignItems: 'center'}}>
<OTPInputView
style={{width: '90%', height: 40}}
pinCount={5}
codeInputFieldStyle={{
width: 30,
height: 45,
borderWidth: 0,
borderBottomWidth: 1,
borderBottomColor: '#808080',
}}
codeInputHighlightStyle={{
borderBottomColor: '#000',
color: '#000',
borderBottomWidth: 1,
borderWidth: 0,
}}
codeInputFieldStyle={{
color: '#000',
borderBottomColor: '#000',
borderBottomWidth: 1,
borderWidth: 0,
}}
onCodeFilled={(code) => {
setCode(code);
}}
/>
</View>
</KeyboardAvoidingView>
<View style={{alignItems: 'center', justifyContent: 'center'}}>
{code == '' ? (
<TouchableOpacity
style={{
backgroundColor: '#C0C0C0',
width: 250,
height: 50,
alignItems: 'center',
justifyContent: 'center',
borderRadius: 20,
marginTop: '10%',
}}
disabled={true}>
<Text style={{color: 'white', fontSize: 18}}>Continue</Text>
</TouchableOpacity>
) : otpresponseLoading == true ? (
<ActivityIndicator
size="large"
color="#FE017E"
style={{marginTop: '10%'}}
/>
) : (
<TouchableOpacity
style={{
backgroundColor: '#FF1493',
width: 250,
height: 50,
alignItems: 'center',
justifyContent: 'center',
borderRadius: 20,
marginTop: '10%',
}}
onPress={() => onContinueHandlePress()}>
<Text style={{color: 'white', fontSize: 18}}>Continue</Text>
</TouchableOpacity>
)}
</View>
Could anyone please let me know how do I handle the backpress in this dependency? and refresh the state of code when user deletes code?
Any lead would be great, do let me know if anything else is required for better understanding
thank you in advance.
let's try :
<KeyboardAvoidingView>
<View style={{ alignItems: 'center' }}>
<OTPInputView
style={{ width: '90%', height: 40 }}
pinCount={5}
codeInputFieldStyle={{
width: 30,
height: 45,
borderWidth: 0,
borderBottomWidth: 1,
borderBottomColor: '#808080',
}}
codeInputHighlightStyle={{
borderBottomColor: '#000',
color: '#000',
borderBottomWidth: 1,
borderWidth: 0,
}}
codeInputFieldStyle={{
color: '#000',
borderBottomColor: '#000',
borderBottomWidth: 1,
borderWidth: 0,
}}
onCodeChanged={(code) => {
setCode(code);
}}
/>
</View>
</KeyboardAvoidingView>
<View style={{ alignItems: 'center', justifyContent: 'center' }}>
{code.length !== 5 ? (
<TouchableOpacity
style={{
backgroundColor: '#C0C0C0',
width: 250,
height: 50,
alignItems: 'center',
justifyContent: 'center',
borderRadius: 20,
marginTop: '10%',
}}
disabled={true}>
<Text style={{ color: 'white', fontSize: 18 }}>Continue</Text>
</TouchableOpacity>
) : otpresponseLoading == true ? (
<ActivityIndicator
size="large"
color="#FE017E"
style={{ marginTop: '10%' }}
/>
) : (
<TouchableOpacity
style={{
backgroundColor: '#FF1493',
width: 250,
height: 50,
alignItems: 'center',
justifyContent: 'center',
borderRadius: 20,
marginTop: '10%',
}}
onPress={() => onContinueHandlePress()}>
<Text style={{ color: 'white', fontSize: 18 }}>Continue</Text>
</TouchableOpacity>
)}
</View>
render() {
return (
<View style={{ flex: 1}}>
{/*for header*/}
<View style = {{flexDirection:'row',justifyContent:'space-between',alignItems: 'center',width:'100%',height:'10%',backgroundColor: '#BE6507',padding:10}}>
<TouchableWithoutFeedback onPress={() =>this.props.navigation.goBack()}>
<Image style={{width: 25, height: 25}} source={require('../assets/back.png')} />
</TouchableWithoutFeedback>
<View/>
<View/>
{/*main content*/}
<ScrollView style={{padding:20,paddingTop:25 }}>
<View style={{alignItems:'center',marginBottom:20, width:Dimensions.get('window').width * 90 / 100}}>
<Image style={{height:"30%",width:"90%",marginBottom:10}} source={require("../assets/logo.png")}/>
<Text style={{fontSize: 21, color: "black",margin:6,marginBottom:25}}>ADD CARD DETAILS</Text>
<TextInput
value={this.state.nameoncard}
onChangeText={(nameoncard) => this.setState({ nameoncard:nameoncard })}
placeholder={'Name On Card'}
placeholderTextColor={'black'}
style={styles.input}
/>
<TextInput
value={this.state.card_num}
onChangeText={(card_num) => this.setState({ card_num:card_num})}
placeholder={'Card Number'}
placeholderTextColor={'black'}
style={styles.input}
/>
<TouchableOpacity style={{width:'90%',margin:10,backgroundColor:'black',padding:10,borderRadius:5,borderWidth:1,marginTop:20,marginBottom:20,height:45}}>
<Text style={{fontSize: 19,fontWeight: 'bold', color: "white", textAlign:'center'}}>Proceed to Pay</Text>
</TouchableOpacity>
</View>
</ScrollView>
);
In above code firstly i made a header for navigation.I want content below header to be scrollview.But above code does not seems to work and after half side of screen in vertical direction i does not see any views? What i am doing wrong here? How can i make scrollview to work correctly in above code?
You can try scrollEnabled with this.
First of all in your return of render() method you can have just one child. So, wrap the View and the ScrollView in a single View. You've also typos in the first section, look at how you're closing those Views: <View/> instead of </View>.
The correct code should be:
return (
<View style={{ flex: 1 }}>
{/*for header*/}
<View
style={{
flexDirection: 'row',
justifyContent: 'space-between',
alignItems: 'center',
width: '100%',
height: '10%',
backgroundColor: '#BE6507',
padding: 10,
}}>
<TouchableWithoutFeedback
onPress={() => this.props.navigation.goBack()}>
<Image
style={{ width: 25, height: 25 }}
source={require('../assets/back.png')}
/>
</TouchableWithoutFeedback>
</View>
{/*main content*/}
<ScrollView style={{ padding: 20, paddingTop: 25 }}>
<View
style={{
alignItems: 'center',
marginBottom: 20,
width: (Dimensions.get('window').width * 90) / 100,
}}>
<Image
style={{ height: '30%', width: '90%', marginBottom: 10 }}
source={require('../assets/logo.png')}
/>
<Text
style={{
fontSize: 21,
color: 'black',
margin: 6,
marginBottom: 25,
}}>
ADD CARD DETAILS
</Text>
<TextInput
value={this.state.nameoncard}
onChangeText={nameoncard =>
this.setState({ nameoncard: nameoncard })
}
placeholder={'Name On Card'}
placeholderTextColor={'black'}
style={styles.input}
/>
<TextInput
value={this.state.card_num}
onChangeText={card_num => this.setState({ card_num: card_num })}
placeholder={'Card Number'}
placeholderTextColor={'black'}
style={styles.input}
/>
<TouchableOpacity
style={{
width: '90%',
margin: 10,
backgroundColor: 'black',
padding: 10,
borderRadius: 5,
borderWidth: 1,
marginTop: 20,
marginBottom: 20,
height: 45,
}}>
<Text
style={{
fontSize: 19,
fontWeight: 'bold',
color: 'white',
textAlign: 'center',
}}>
Proceed to Pay
</Text>
</TouchableOpacity>
</View>
</ScrollView>
</View>
);