How to add a text input to alert in react native - react-native

Question

Can someone help with adding a text input to an alert in react native. Is it possible? I searched and found results that deals with multiple line text input which is not the case with me. Thanks in advance

Answer 1

This is possible. I believe this was only available initially for AlertIOS however it seems to have been intergrated to React Native Alert.
Edit: Although its added to Alert it does not seem to work for Android
Use
import { Alert } from 'react-native';
onButtonPress = () => {
Alert.prompt(
"Enter password",
"Enter your password to claim your $1.5B in lottery winnings",
[
{
text: "Cancel",
onPress: () => console.log("Cancel Pressed"),
style: "cancel"
},
{
text: "OK",
onPress: password => console.log("OK Pressed, password: " + password)
}
],
"secure-text"
);
};
}
More details: https://reactnative.dev/docs/alertios

Answer 2

Use react-native-dialog it works across platform and is simple enough.

Answer 3

There is no way you could add a text input to the Alert component according to the documentation, You will need to create a custom component by yourself in order to achieve that, example: use customise modal or use react-native-simple-dialogs

Answer 4

No way
Just use custom modal or third party library to achieve this...

Answer 5

Here is a spoiler using a custom Modal:
import React, { FC } from 'react'
import { View, TextInput, Modal, GestureResponderEvent } from 'react-native';
import { BoldText, IOSButton } from '..';
import { colors } from '../../constants';
import { customModalStyles, defaultStyles } from '../../styles';
interface Props {
modalVisible: boolean;
// onRequestClose,
textOne: string;
buttonOneTitle: string;
onPressOne: (event: GestureResponderEvent) => void;
value: string,
onChangeText: (text: string) => void;,
placeholder: string
}
const InputModal: FC<Props> = ({
modalVisible,
// onRequestClose,
textOne,
buttonOneTitle,
onPressOne,
value,
onChangeText,
placeholder
}) => {
return (
<Modal
animationType="fade"
transparent={true}
visible={modalVisible}
// onRequestClose={onRequestClose}
>
<View style={customModalStyles.centeredView}>
<View style={customModalStyles.modalView}>
<BoldText
style={customModalStyles.textSize}>{textOne}
</BoldText>
<TextInput
secureTextEntry
autoCapitalize="none"
style={[
defaultStyles.inputStyle,
defaultStyles.textInputShadow,
]}
value={value}
onChangeText={onChangeText}
placeholder={placeholder}
placeholderTextColor={colors.placeHolder}
/>
<IOSButton title={buttonOneTitle}
onPress={onPressOne}
/>
</View>
</View>
</Modal>
)
}
export default InputModal;
And the styles:
import { StyleSheet } from 'react-native';
import { colors } from '../constants';
import styleConstants from './styleConstants';
const customModalStyles = StyleSheet.create({
buttonsContainer: {
flexDirection: 'row',
justifyContent: 'space-between',
},
centeredView: {
flex: 1,
justifyContent: 'flex-end',
alignItems: 'center',
marginBottom: 20,
},
modalView: {
justifyContent: 'space-around',
alignItems: 'center',
width: styleConstants.width < 1000 ? 320 : 400,
height: styleConstants.height < 1000 ? 320 : 400,
backgroundColor: colors.primary,
borderRadius: 20,
paddingHorizontal: 15,
paddingTop: 10,
shadowColor: colors.secondary,
shadowOffset: {
width: 0,
height: 4,
},
shadowOpacity: 0.55,
shadowRadius: 8,
elevation: 20,
},
textSize: {
textAlign: 'center',
fontSize: styleConstants.fontSizeSM,
},
});
export default customModalStyles;
Then one may use it like this:
{modalVisible && (
<InputModal
modalVisible={modalVisible}
textOne={`...`}
buttonOneTitle="..."
onPressOne={async () => {
setModalVisible(false);
validatePasswordEtc()
}}
placeholder="..."
value={password}
onChangeText={handleChangePassword}
/>
)}

Answer 6

If you think for a moment you will find that an alert and a modal are both a kind of pop-up components. And that leads you to create your own pop-up component instead of using ready-made if you don't have it.
return (
<Modal
animationType="slide"
transparent={true}
onBackdropPress={() => console.log('Pressed')}
visible={props.modalVisible}
onRequestClose={ResetValues}>
<View
style={{
position: 'absolute',
bottom: 0,
right: 0,
backgroundColor: '#4D4D4D',
width: (windowWidth * 100) / 100,
height: (windowHeight * 100) / 100,
}}>
!!!!!!!!! your elements here like text,input,buttons and etc....!!!!!
</View>
</Modal>
);