Since the <Modal> in React Native is kinda iffy, I've made my own with a <View> that renders when this.state.display is true. But the text input and button doesn't do anything when clicked / interacted with.
I've tried using a regular <Modal> but prefer my way. As well as changing the actual style of the modal. I've added different onPresses and a few other minor code adjustments that haven't worked.
shouldRender() {
if (this.state.display) {
return (
<View style={styles.modal}>
<TextInput
placeholder="Event Title"
onChangeText={title => this.setState({title})}
value={this.state.title}
style={styles.textInput}
/>
<TextInput />
<Button />
<Button /> //the other buttons and textinput has similar things
</View>
);
} else {
return <View></View>;
}
}
In the render method:
return(
<TouchableOpacity
onPress={this.addReminder}
style={styles.reminderTouch}>
<Text style={styles.reminderBtn}>+</Text>
</TouchableOpacity>
)
And the addReminder method just sets this.state.display to true
I'm looking for the buttons to submit / close the modal and the text input to change the title and text state. Right now, the buttons don't animate on press and the text inputs can't be clicked.
Also, prior to the modal, when the textinputs where just on screen, everything worked fine.
Your description sounds like an issue with zIndex - something is being rendered over top of your modal if the button opacity and input focus are not working.
I would try moving the <View>{this.shouldRender()}</View> to be the final child in the containing <View> in your render method and if that doesn't work then up the zIndex.
You can do something like this inside your render()
render(){
return(
<Modal visible={this.state.display} style={styles.modal}>
<TextInput
placeholder="Event Title"
onChangeText={title => this.setState({title})}
value={this.state.title}
style={styles.textInput}
/>
<TextInput />
<Button />
<Button /> //the other buttons and textinput has similar things
</Modal>
<TouchableOpacity
onPress={this.setState({display: true})}
style={styles.reminderTouch}>
<Text style={styles.reminderBtn}>+</Text>
</TouchableOpacity>
)
}
this modal will only display if this.state.disaply == true
Related
Using KeyboardAvoidingView I have a basic example where I would like the keyboard to push the inputs upwards so it is not overlapping on Android. The inputs do not move when the keyboard is in focus. Any ideas?
The inputs stay in a fixed position, do I need to place everything in a scroll view?
UPDATE: I use nested navigators, could a style on a parent component prevent this working?
<KeyboardAvoidingView behavior="padding" style={{ flex: 1 }}>
<TextInput placeholder="input1" />
<TextInput placeholder="input2" />
<TextInput placeholder="input3" />
<TextInput placeholder="input4" />
<TextInput placeholder="input5" />
<TextInput placeholder="input6" />
<TextInput placeholder="input7" />
<TextInput placeholder="input8" />
<TextInput placeholder="input9" />
<TextInput placeholder="input10" />
<TextInput placeholder="input11" />
<TextInput placeholder="input12" />
</KeyboardAvoidingView>
try to change the behavior to height for android as described on keyboardavoidingview
import { KeyboardAvoidingView, Platform } from 'react-native';
<KeyboardAvoidingView behavior={Platform.OS == "ios" ? "padding" : "height"}
style={{ flex: 1 }} >
I am trying to place two icons one is related to wordDocument and other is related to download icon on and button but one icon is overriding another icon, this is the code:
import { FileWordOutlined, DownloadOutlined } from '#ant-design/icons';
return (
<Fragment>
<Button
type="primary"
style={{ width: '30%' }}
onClick={() => {
authProvider.getIdToken().then(token => {
downloadFile(
`${process.env.REACT_APP_API_URL}/api/Projects/${projectNumber}`,
token.idToken.rawIdToken
);
});
}}
icon={((<FileWordOutlined />), (<DownloadOutlined />))}
size="small"
>
Basis of Design
</Button>
</Fragment>
);
and the button image is looking like this right now
I am looking to place icon <FileWordOutlined /> on the right side of the text Basis of Design and <DownloadOutlined /> is on the left side of the text.
Could anyone please let me know is there any way to achieve this?
The icon props take only one component. So you won't be able to pass two-component there.
There are two ways to get 2 icons.
Remove the icon prop and use the 2 icon Component,for ex,<FileWordOutlined />, <DownloadOutlined /> as children to the Button prop.
<Button type="primary">
<FileWordOutlined />
Basis of Design
<DownloadOutlined />
</Button>
If you want to use the icon prop you use it like this:
<Button
type="primary"
icon={<FileWordOutlined />}
size="small"
>
Basis of Design
<DownloadOutlined />
</Button>
What you are doing isn't working because you are setting icon to the returned value of ((<FileWordOutlined />), (<DownloadOutlined />)), which is <DownloadOutlined />.
You can omit icon and put the icons and the button text inside Button instead:
<Button
type="primary"
size="small"
>
<DownloadOutlined />
Basis of Design
<FileWordOutlined />
</Button>
demo
If you want to get 2 icons then create icon prop like this:
<Button icon={your primary icon}>
{text}
{extra icon}
</Button>
So the Element would look like
<My Button
icon={<icon name/>}
text={text}
extra icon={<extra icon name/>}
/>
I want to make a search bar in react-native like that :
If I click on icon, I focus on textInput, but if I click on other part of screen, unfocus the textInput.
The focus part is working with the ref, but I don't know if it's possible to unfocus the textinput when I click in other part of the screen.
<TextInput
multiline={false}
onChangeText={(text) => onChangeText(text)}
placeholder="search"
style={styles.textInput}
value={value}
ref={research}
></TextInput>
<TouchableOpacity onPress={()=>research.current.focus()}>
<Ionicons name="md-search" size={24} ></Ionicons>
</TouchableOpacity>
You could just dismiss the keyboard
import {Keyboard} from 'react-native'
<TouchableWithoutFeedback onPress={Keyboard.dismiss}>
<View style={{flex: 1}}>
[your code in here]
</View>
</TouchableWithoutFeedback>
I would like to know how can I update scrollview when keyboard is open with React Native ?
I try with "onContentSizeChange" in "ScrollView", it's okay, but when I open the keyboard, the scroll view isn't update (bottom)
When I click on my input to send tape the text (1), the scrollview isn't update when the keyboard is open (2). I would like to update my scrollview (3).
MessageList.js
export default class MessageList extends React.Component {
render() {
return (
<View style={MessageListStyles.container}>
<ScrollView
ref={ref => this.scrollView = ref}
onContentSizeChange={(contentWidth, contentHeight)=>{
this.scrollView.scrollToEnd({animated: true});
}}
contentContainerStyle={{
flexGrow: 1,
justifyContent: 'space-between'
}}>
<Message sender="bot" />
<Message sender="bot" />
<Message sender="bot" />
<Message sender="bot" />
<Message sender="bot" />
<Message sender="bot" />
<Message sender="bot" />
</ScrollView>
</View>
);
}
}
Do you aim to move the scrollview out of the way when the keyboard appears? In that case you use a KeyboardAvoidingView. It adds bottom or top padding depending on your needs.
Alternatively, you could add a listener that is triggered once the keyboard is opened, and put your scrollToEnd code there: keyboardDidShowListener
No matter what I do, KeyboardAvoidingView shrinks my TextInputs as much as it can instead of adding padding to the content above them and pushing them off the screen.
All I want is the normal behavior where my content is padded off the screen and nothing shrinks as is seen in the simplest tutorials using this component. I've tried all the behaviors, and all kinds of permutations of view hierarchies. No matter what I do, it will shrink the inputs.
<KeyboardAvoidingView style={Styles.containerView} behavior={'padding'}>
<View style={Styles.topContainerView}>
<Image style={Styles.subLogo} source={require('../../../assets/images/app-icon.png')} />
<View style={{justifyContent: 'center', marginVertical: 10}}>
<Text style={Styles.subtext}>{subtext}</Text>
</View>
<TextInput
style={Styles.textInput}
onChangeText={(text) => this.setState({firstName: text})}
value={this.state.firstName}
/>
<TextInput
style={Styles.textInput}
onChangeText={(text) => this.setState({lastName: text})}
value={this.state.lastName}
placeholderText={'Last Name'}
/>
<TextInput
style={Styles.textInput}
onChangeText={(text) => this.setState({email: text})}
value={this.state.email}
placeholderText={'Enter Email'}
/>
<TextInput
style={Styles.textInput}
onChangeText={(text) => this.setState({password: text})}
value={this.state.password}
placeholderText={'Enter Password'}
secureTextEntry={true}
/>
<TextInput
style={Styles.textInput}
onChangeText={(text) => this.setState({confirmPassword: text})}
value={this.state.confirmPassword}
placeholderText={'Confirm Password'}
secureTextEntry={true}
/>
</View>
<View style={Styles.bottomContainerView}>
<Button buttonStyle={Styles.continueButton} text={"Continue"} onPress={continueAction} />
<TouchableOpacity style={Styles.cancelContainer} onPress={this.goBack}>
<Text style={Styles.cancelText}>{'Cancel'}</Text>
</TouchableOpacity>
</View>
</KeyboardAvoidingView>
In my code above, the Image element and subtext below it will not budge. No padding will be added to them nor will they shrink. Instead, the TextInputs will all shrink.
I just want them to be pushed off the screen instead of the inputs shrinking.
I have also tried adding a ScrollView within the KeyboardAvoidingView that contains all the elements, and even given a hard-coded height to the inputs.
When working with RN 0.63.1 and Android 9, I encountered the same issue. Upon reading GitHub issues, using KeyboardAvoidingView was discouraged and instead setting this in my AndroidManifest.xml fixed it.
Default:
<activity
...
android:windowSoftInputMode="adjustResize"
>
Change it to:
<activity
...
android:windowSoftInputMode="adjustPan"
>
I found setting this makes the padding work but it is still too close to the keyboard. I used KeyboardAvoidingView to add some padding between keyboard and text input.