this is my code
<View>
<TextField
ref={this.layananMenu}
editable={false}
label={
'Produk investasi apa saja yang pernah kamu miliki?'
}
value={this.state.product?.menuName}
renderRightAccessory={() =>
this.state.loadingUsaha ? ( //ganti
<ActivityIndicator animating={true} />
) : (
<Icon name={'keyboard-arrow-down'} size={24} />
)
}
/>
</View>
and the result is :
my code result
my expectation is :
my expectation from UI design
Add multiline prop in TextField in this way:
<TextField
ref={this.layananMenu}
editable={false}
label={'Produk investasi apa saja yang pernah kamu miliki?'}
multiline={true}
/>
Welcome to SOFlow.It can be done using multiline={true} or giving padding in the text field,<TextField style={...} Hope it would work.
<TextField
ref={this.layananMenu}
editable={false}
label={'Produk investasi apa saja yang pernah kamu miliki?'}
multiline = {true}
/>
Related
I'm making a login form in React Native. I can login and register already but when I try to enter values in the TextInput fields in my register form, the keyboard disappears after I enter one value, so I have to re-click every time on the input field to re-open the keyboard. This does not happen on Android, just with iPhone.
The weird thing is that this behavior does not happen on the login screen even though it is built exactly the same. Does anyone have any idea why this is happening?
Register.js
return (
<View>
<TextInput
style={styles.input}
value={username}
onChangeText={(text) => setUsername(text)}
placeholder="username"
returnKeyType="next"
/>
<TextInput
style={styles.input}
value={fullname}
onChangeText={(text) => setFullname(text)}
placeholder="full name"
/>
<TextInput
style={styles.input}
value={password}
onChangeText={(text) => setPassword(text)}
placeholder="password"
/>
<PasswordStrengthMeterBar password={password} />
<Button title="Register" onPress={handleSubmit} />
</View>
);
Login.js
return (
<View style={styles.container}>
{this.state.showComponent ? (
<View>
<Text>
<Register setShowComponent={this.setShowComponent} />
</Text>
<Pressable onPress={this.handlePress}>
<Text>Login</Text>
</Pressable>
</View>
) : (
<View>
<TextInput
style={styles.input}
value={this.state.users_username}
onChangeText={this.handleusers_usernameChange}
placeholder="username"
/>
<TextInput
style={styles.input}
value={this.state.users_password}
onChangeText={this.handleusers_passwordChange}
placeholder="password"
secureTextEntry
/>
<Button title="Login" onPress={this.handleLoginPress} />
<Pressable onPress={this.handlePress}>
<Text>Register</Text>
</Pressable>
<Text>{this.state.response}</Text>
</View>
)}
</View>
);
I already updated my phone, but that has not solved anything.
i need some styling help cause i cant change it :) i know it sounds ridiculous but here we are
so this is my code and screenshot of it. please tell me which style is change this purple border under tab name
<Tab value={tabIndex} onChange={setTabIndex} >
<Tab.Item
title="PORTFÖY"
/>
<Tab.Item
title="GAYRİMENKUL"
/>
</Tab>
<TabView value={tabIndex} onChange={setTabIndex}>
<TabView.Item style={{width: '100%'}}>
{isLoadingPortfoy ? (
<ActivityIndicator size="large" color="#0f0" />
) : (
portfoy()
)}
</TabView.Item>
<TabView.Item style={{width: '100%'}}>
{isLoadingMulk ? (
<ActivityIndicator size="large" color="#0f0" />
) : (
mulk()
)}
</TabView.Item>
</TabView>
if you using Material ui <Tabs TabIndicatorProps={{style: {background:'ANY_COLOR'}}}> or <Tabs inkBarStyle={{background: 'blue'}}> this will work for you
my container doesn't want to display full width.. even though I have written the code as below, is there something wrong?
all my style code was here, I gave the background color to show there is a space at the end, and how to remove this until the color become fullscreen
this the code from name.txs
render() {
return (
<Container style = {styles.container}>
<VStack alignItems="center" alignContent="center">
<View style = {styles.view}>
<Text style={{fontSize:12, textAlign:'center'}}>
Please Input your Name
</Text>
<TextInput
style={styles.input}
placeholder='Enter Your Name Here'
onChangeText={ (name) => this.props.authStore.setName(name)}
/>
</View>
<View style = {styles.view}>
<Text style={{fontSize:12, textAlign:'center'}}>
Month of Your Born
</Text>
<TextInput
style={styles.input}
placeholder='January, February, etc.'
onChangeText={ (month) => this.props.authStore.setMonth(month)}
/>
</View>
<View style = {styles.view}>
<Text style={{fontSize:12, textAlign:'center'}}>
Day of Your Born
</Text>
<TextInput
keyboardType="numeric"
placeholder='1-31'
onChangeText={ (day) => this.props.authStore.setDay(day)}
/>
</View>
<View style = {styles.view}>
<Button
title="Submit"
onPress={() => this.props.navigation.push('Zodiac')}/>
</View>
</VStack>
</Container>
);
}
Replace <Container> with <Center flex={1}> from NativeBase
I have a view below flatlist. I want the view to be always at bottom of screen and it is wrapped inside KeyboardAvoidingView. Check video for more details
https://drive.google.com/file/d/1eeMfpH3AV7AqLNqAhlhQX5JmOQSRLbtp/view?usp=sharing
As soon as I comment my FlatList code then the bottom view does not flicker.
Below is my code
<View>
<FlatList ..../>
<KeyboardAvoidingView
behavior={Platform.OS == "ios" ? "padding" : "height"}
>
<SafeAreaView style={styles.bottomViewStyle}>
<TouchableOpacity>
<Image source={CAMERA_CHAT_ICON} />
</TouchableOpacity>
<View style={styles.textAreaViewStyle}>
<TextInput
placeholder="Start Typing..."
placeholderTextColor="#9b9b9b"
style={styles.textInputStyle}
/>
</View>
<TouchableOpacity>
<Image source={CHAT_SEND_ICON} />
</TouchableOpacity>
</SafeAreaView>
</KeyboardAvoidingView>
</View>
All components including the FlatList component should be wrapped inside the KeyboardAvoidingView. Also, SafeAreaViews should be placed at the root of the screen because it provides padding for SafeAreas.
<KeyboardAvoidingView behavior={Platform.OS == "ios" ? "padding" : "height"}>
<SafeAreaView>
<FlatList ... />
<View>
<TextInput ... />
</View>
</SafeAreaView>
</KeyboardAvoidingView>
See https://reactnative.dev/docs/keyboardavoidingview and https://reactnative.dev/docs/safeareaview for more examples.
How can i solve this issue .
keyboard overlapping like this below
Code Here
<View style={styles.container}>
<View style={styles.Subcontainer}>
<ScrollView contentContainerStyle={styles.scrolViewFlex} ref='scrollView' automaticallyAdjustContentInsets={true} showsHorizontalScrollIndicator={true} showsVerticalScrollIndicator={true}>
<View style={styles.logoView}>
<Image source={require('#images/Icon_K.png')} style={styles.imageStyles} />
</View>
<View style={styles.textInputView}>
<ActivityIndicator
animating = {this.state.animating}
color = '#494949'
size = "large"
style = {styles.activityIndicator}
/>
<View style={styles.namesContainer}>
{/*<View style={styles.exploreContainerDirection}> */}
<View style={styles.pincodeContainer}>
<TextInput
underlineColorAndroid="transparent"
autoCapitalize="words"
style={[styles.firstnameTextInput,{borderColor:this.state.backgroundColor,color: this.state.color}]}
placeholder=" First Name"
placeholderTextColor="#494949"
returnKeyType='next'
onChangeText={this.handleChange.bind(this,'FirstName')}
value={this.state.updateAccountValues.FirstName}
onFocus={this.inputFocused.bind(this,'FirstName')}
onSubmitEditing={(event)=>{
this.refs.SecondInput.focus();
}}/>
</View>
<View style={styles.spaceview}/>
<View style={styles.mobileNoContainer}>
<TextInput
underlineColorAndroid="transparent"
autoCapitalize="words"
ref="SecondInput"
style={[styles.lastnametextInput,{borderColor:this.state.backgroundColor,color: this.state.color}]}
placeholder=" Last Name"
placeholderTextColor="#494949"
returnKeyType='next'
onChangeText={this.handleChange.bind(this,'LastName')}
onFocus={this.inputFocused.bind(this,'LastName')}
value={this.state.updateAccountValues.LastName}
onSubmitEditing={(event)=>{
this.refs.ThirdInput.focus();
}}/>
</View>
{/* </View>*/}
</View>
</ScrollView>
</View>
</View>
So this is my Screen short when i enter in textinput keyboard appers some times like this below screen
So, Please check it once and find Our my Issue
I followed this: Set
android:windowSoftInputMode="adjustPan" in MainfestFile.xml file
React-native: How to control what keyboard pushes up