Revolver View
A revolving picker view.
Inspired by the work of Oleg Frolov — Search icon interaction II.
Installation
$ npm install react-native-revolver-view
$ yarn add react-native-revolver-view
Additional dependencies:
$ npm install react-native-reanimated react-native-gesture-handler @react-native-community/masked-view react-native-svg
$ yarn add react-native-reanimated react-native-gesture-handler @react-native-community/masked-view react-native-svg
RN < 0.60 users need to perform linking.
iOS step only:
$ npx pod-install ios
Finalize the installation of react-native-gesture-handler
by adding the following to the top of index.js
(must be at the top):
import 'react-native-gesture-handler'
Usage
import RevolverView SearchIcon from "react-native-revolver-view" const items = "All" "Videos" "Images" "News" const App = const activeIndex setActiveIndex = const handleNewIndex = return <View => <RevolverView = = = = = /> <View = /> <Button ="Set to index 2" = /> </View>
For more advanced usage, check out this example.
Props
Item in Gif | Prop | Gif |
---|---|---|
White container | containerStyle | |
wow | rotatingComponent | |
'what is going on' | items | |
'Flexible' button | children |
License
MIT