Custom dialog box with text input React Native

Question

I have just started with react native, and wanted to develop a custom dialog box with - a text input , basically like a prompt but it should work with both android and ios . The one currently available in react native documentation just works for ios . Any way to achieve this implementation ?

Create a modal npmjs.com/package/react-native-modal .. and put anything you want init.. — Hend El-Sahli
– Hend El-Sahli, Commented Nov 19, 2020 at 12:39

Guruparan Giritharan · Accepted Answer · 2020-11-19 12:51:45Z

2

You can use several libraries for this, but if you want to do this using out of the box components you can use the Modal from React Native and customize it.

You can create something like this

const ModalInput = ({ onTextChange, onSubmit, visible, value, toggle }) => {
  return (
    <Modal visible={visible} transparent={true} style={{justifyContent:'center'}}>
      <View
        style={{
          height: 100,
          padding: 20,
          width: '80%',
          alignSelf: 'center',
          justifyContent: 'center',
          backgroundColor: 'white',
        }}>
        <TextInput
          value={value}
          onChangeText={onTextChange}
          placeholder={'Enter text'}
        />
        <View style={{ flexDirection: 'row', alignSelf: 'center' }}>
          <Button title="close" onPress={toggle} />
          <Button title="ok" onPress={onSubmit} />
        </View>
      </View>
    </Modal>
  );
};

And use it anywhere you need.

you need two states for text and visibility

const [visible, setVisible] = useState(false);
  const [text, onTextChange] = useState('');

And usage would be like below

  <ModalInput
    visible={visible}
    value={text}
    onTextChange={onTextChange}
    toggle={() => setVisible(!visible)}
    onSubmit={() => setVisible(!visible)}
  />

I have done a very basic styling, you can style it based on your requirement and even pass the text on press of the ok button, you have full control as it will be your control and style it anyway you like.

If you want to have an overlay background check this answer https://stackoverflow.com/a/62039814/1435722

If you want to test it out, you can use the snack (Switch to Andriod or IOS) https://snack.expo.io/@guruparan/custommodal

answered Nov 19, 2020 at 12:51

Guruparan Giritharan

16.4k4 gold badges30 silver badges53 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Ansh Over a year ago

Thanks , could you also recommend some libraries which provide this functionality ?

Ansh Over a year ago

Also , how can i blur the background when the dialog box is displayed ?

Guruparan Giritharan Over a year ago

This is a good library npmjs.com/package/react-native-dialog. And for background you can use the same way as the answer I have provided. To have a wrapper view

Collectives™ on Stack Overflow

Custom dialog box with text input React Native

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related