1

I'm using the Modal built into React Native (and specifically I'm using the React Native Paper variant). By default this seems to open in the middle of the screen. However if you're doing some text input in the Modal then it would be more useful if it opened either at the top of the screen, or was aware of the keyboard. However I can't find a way to get this to work.

My (simplified) modal code is:

     <Portal>
      <Modal visible={visibleModalNew} onDismiss={closeModalNew} contentContainerStyle={styles.modalContainer} >
        <View>
          <Title>New</Title>
          <View>
            <TextInput
              mode="outlined"
              label="Data"
              style={{alignSelf:'center', width:'95%'}}
              defaultValue={newData}
              onChangeText={newData=> setNewData(newData)}
              onSubmitEditing={() => handleDone()}
            />
            <Button onPress={() => doSomething()}>Do something</Button>
          </View>
        </View>
      </Modal>
    </Portal>
RiddleRiddlerRddler
  • 303
  • 3
  • 17

1 Answers1

1

Ah, figured out a way round. I wrapped the modal in a KeyboardAwareView, removed the visible prop from the modal, and then wrapped it all in a conditional render and put the visible prop there instead. Seems to work as hoped.

RiddleRiddlerRddler
  • 303
  • 3
  • 17