Анимация модального компонента React-native

#react-native

Вопрос:

Есть ли какой-нибудь способ заставить модальное изображение появляться слева направо?

Прямо сейчас у меня есть это, и оно только скользит снизу вверх:

  <Modal animationType={'slide'} visible={showModal}>
    <View
      style={{
        backgroundColor: 'blue',
        width: Dimensions.get('screen').width,
        height: Dimensions.get('screen').height,
      }}>
      <TouchableOpacity onPress={() => setShowModal(false)}>
        <Feather name="menu" size={40} color="red" />
      </TouchableOpacity>
    </View>
  </Modal>
 

Ответ №1:

Вы можете использовать npm i react-native-modal его для получения желаемого результата.

 <Modal
      animationIn="slideInLeft"
      animationOut="slideOutRight"
      animationInTiming={500}
      animationOutTiming={750}
      isVisible={showModal}
      useNativeDriver={true}
      onBackButtonPress={() => {
          setShowModal(!showModal);
      }}>
    <View
      style={{
        backgroundColor: 'blue',
        width: Dimensions.get('screen').width,
        height: Dimensions.get('screen').height,
      }}>
      <TouchableOpacity onPress={() => setShowModal(false)}>
        <Feather name="menu" size={40} color="red" />
      </TouchableOpacity>
    </View>
 </Modal>