Security News
tea.xyz Spam Plagues npm and RubyGems Package Registries
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
@grean/react-native-carousel-picker
Advanced tools
Carousel-picker is a component that allows you to display your data in a circular select/dropdown way. It's a full typescript responsive component that uses reanimated 2. The work is still in progress but you can use it and improve it if you wan
Readme
Carousel-picker is a component that allows you to display your data in a circular select/dropdown way.
It's a full typescript responsive component that uses reanimated 2.
The work is still in progress but you can use it and improve it if you want! PR are welcome.
Using yarn:
yarn add @grean/react-native-carousel-picker
You can control the picker value with the index
prop.
When you manually change the value, onChanged
callback will be called.
You can pass an array of primitives for your values with the items
prop.
const currentItemIndex = 1
const [index, setIndex] = useState(currentItemIndex);
const items = [1, 2, 3, 4, 5] //or ['one', 'two', 'three'...]
const onChanged = (newIndex: number) => {
setIndex(newIndex)
}
//removed code for brevety
<View style={{
flex: 1,
}}>
<Picker
{...{
items,
index,
onChanged,
marginHorizontalPercentage: 0.05,
spaceBetween: 1 / 1.75,
textStyle: {
paddingVertical: 10,
textShadowColor: 'rgba(0, 0, 0, 0.75)',
textShadowOffset: { width: 3, height: 3 },
textShadowRadius: 10,
},
}}
/>
</View>
interface ViewportProps<T> {
allowFontScaling?: boolean //false: see RN Text prop
containerStyle?: ViewStyle //All view style props
discoverable?: boolean //true: allow horizontal swipe to discover hidden item's part
display?: DisplayType //"TOP_BOTTOM": one of those "TOP_BOTTOM" | "CENTER_ONLY"
fontSize?: number //200: fontsize value
index?: number //current selected index
items?: T[] //array of primitives of any types
marginHorizontalPercentage?: number //0: pourcentage of width container, ie: 0.05
marginVerticalPercentage?: number //0: pourcentage of height container, ie: 0.05
onChanged?: (index: number) => void //Callback called when selected index changed
opacityRangeOut?: number[] //Opacity interpolation thresholds for items. Default value depends on display prop mode but you can still override them, ie: [0, 0.6, 1, 0.6, 0]
scaleRangeOut?: number[] //Scale interpolation thresholds for items. Default value depends on display prop mode but you can still override them, ie: [0, 0.6, 1, 0.6, 0]
spaceBetween?: number //1 / 2.25: space between displayed items
textStyle?: TextStyle //All RN Text style props
}
See Expo example app for testing with hot-reload, you can directly modify the code's component and see how your modifications looks like immediately.
git clone https://github.com/grean/react-native-carousel-picker.git
cd react-native-carousel-picker && yarn
cd example && yarn
yarn ios
If you want to eat well and healthy, i recommand you to check out our mobile app Dietethic.net
MIT
FAQs
Carousel-picker is a component that allows you to display your data in a circular select/dropdown way. It's a full typescript responsive component that uses reanimated 2. The work is still in progress but you can use it and improve it if you wan
The npm package @grean/react-native-carousel-picker receives a total of 6 weekly downloads. As such, @grean/react-native-carousel-picker popularity was classified as not popular.
We found that @grean/react-native-carousel-picker demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
Security News
As cyber threats become more autonomous, AI-powered defenses are crucial for businesses to stay ahead of attackers who can exploit software vulnerabilities at scale.
Security News
UnitedHealth Group disclosed that the ransomware attack on Change Healthcare compromised protected health information for millions in the U.S., with estimated costs to the company expected to reach $1 billion.