vdor / react-native-horizontal-picker Goto Github PK
View Code? Open in Web Editor NEWComponent for displaying horizontally scrolled picker for React Native
Component for displaying horizontally scrolled picker for React Native
HI, Vseslav Dorofeev
i`m experiencing problem with default index.
I will attach screenshots to be more clear and i will provide simple example of what i should do and what is the actual behavior.
const Items = Array.from(Array(10).keys());
const rednerItem = (item, index) => (
<View style={[styles.item], { width: 80, borderWidth: 1, borderColor: 'red' }}>
<Text style={{textAlign: 'center'}}>
{ item }
);
This is how it looks on mount of the component:
This is what i espect to be on mount of the component:
Thanks in advance!
Hey!
Got a question about your very useful component ๐
So, I see that at certain point horizontal picker makes 2 stops and throws 2 onChange event. For instance when you scroll either slow enough, or scroll far enough. Like onChange scrollview stops in the some place (between the items), then correctly centers on a particular item and throws onChange again.
Do you happen to know how to avoid that first onChange? so that I only get a single event when the scrollview complately stopped and correctly centered?
Thanks in advance!
Hi,
Is it possible to use the scrollTo function or something else to change the value dynamically?
I want to change the selected value/position after the component is already loaded.
This is the only working horizontal picker that I've tried. The default value for editing forms is necessary. Please add the following lines to 'index.tsx':
componentDidMount() { const x = this.props.defaultValue * this.props.itemWidth; setTimeout(() => { this.refScrollView.current.scrollTo({ x, y: 0, animated: false }); }, 1) }
Also,
defaultValue: number,
to
export interface HorizontalPickerProps extends ScrollViewProps { data: any[], renderItem: (item: any, index: number) => ReactNode, itemWidth: number, defaultValue: number, snapTimeout?: number onChange?: (position: number) => void };
Thanks to vdor for this simple and useful picker
<HorizontalPicker
onScroll={(e)=> {}}
/>
onScroll can block private onScroll in HorizontalPicker
onScroll={this.onScroll}
{...props}
to
{...props}
onScroll={this.onScroll}
other properties also have the problem
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.