CODEWITHSUNDEEP
javascriptreactjsreact-nativeexpo
Ansh
Ansh

Reputation: 173

Custom dialog box with text input React Native

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 ?

Upvotes: 2

Views: 4933

Answers (1)

Guruparan Giritharan
Guruparan Giritharan

Reputation: 16334

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

Upvotes: 2

Related Questions