Как сделать Bottom Action Sheet в React Native?

Question

[dim5on]

Как сделать такой bottom sheet?

Может есть какие нибудь туториалы? Главное, чтобы было несколько стадий открытия как на скриншотах. Интересует реализация на js (React Native + Animated API), писать на java или swift не хватает опыта.

Подобное окно реализовано в приложении Yandex Taxi.

Answer 1

[polarlord]

Есть такие варианты (от простых к сложным):
1. Воспользуйтесь поиском в гугле. Есть масса готовых решений, вы не первый кому нужно такое средство. Как пример, вот что удалось найти за минуту поиска:
раз
два
три
2. Писать самому, используя Modal. Это родной компонент React Native. Для аннимации выезжания вверх ставите проп animationType={slide}. Всё остальное - делаете как обычный компонент.
3. Писать самому используя LayoutAnimation или Animated. Создаёте ваш виджет, делаете ему postion: absolute и анимируете ему свойство top (для Animated) или просто меняете top и задаёте аннимацию (для LayoutAnimation).

Comments

[dim5on]

Спасибо ! Из пакетов мне подошёл вот этот:
https://www.npmjs.com/package/rn-bottom-drawer

C Animated был знаком, а вот с LayoutAnimation нет. Почитав доки, на мой взгляд мне больше подходит PanResponder