Styling for Picker React Native - reactjs

Question

I am working with Picker native-base to React Native. I wanna style picker like the picture I post with both Android and iOS. But I don't know how to style like this.

Answer 1

Install an npm library
https://www.npmjs.com/package/react-native-smooth-picker
npm i react-native-smooth-picker
You can also check from the git repository
https://github.com/rdhox/react-native-smooth-picker
Declare constant globally
import SmoothPicker from "react-native-smooth-picker";
const Bubble = props => {
const { children, selected, horizontal } = props;
return (
<View
style={[
horizontal ? styles.itemStyleHorizontal : styles.itemStyleVertical,
selected &&
(horizontal
? styles.itemSelectedStyleHorizontal
: styles.itemSelectedStyleVertical)
]}
>
<Text
style={{
textAlign: "center",
fontSize: selected ? 20 : 17,
color: selected ? "#006E4F" : "#006E4F",
fontWeight: selected ? "bold" : "normal",
}}
>
{children}
</Text>
</View>
);
};
Add inside render()
<SmoothPicker
initialScrollToIndex={selected}
onScrollToIndexFailed={() => {}}
keyExtractor={(_, index) => index.toString()}
showsVerticalScrollIndicator={false}
bounces={true}
offsetSelection={40}
scrollAnimation
data={Array.from({ length: 15 }, (_, i) => 0 + i)}
onSelected={({ item, index }) => this.handleChange(index)}
renderItem={({ item, index }) => (
<Bubble selected={index === selected}>{item}</Bubble>
)}
/>
Check sample project for style, you need to little modified.
const styles = StyleSheet.create({
container: {
paddingTop: 60,
paddingBottom: 30,
flex: 1,
flexDirection: "column",
justifyContent: "space-between",
alignItems: "center",
backgroundColor: "#F5FCFF"
},
wrapperHorizontal: {
width: 300,
height: 50,
justifyContent: "center",
alignItems: "center",
margin: "auto",
color: "black",
marginBottom: 80
},
wrapperVertical: {
width: 100,
height: 300,
justifyContent: "center",
alignItems: "center",
margin: "auto",
color: "black"
},
itemStyleVertical: {
justifyContent: "center",
alignItems: "center",
width: 50,
height: 50,
paddingTop: 0,
borderWidth: 1,
borderColor: "grey",
borderRadius: 0,
backgroundColor: "#D9F5ED"
},
itemSelectedStyleVertical: {
paddingTop: 0,
borderWidth: 2,
borderColor: "#DAA520",
justifyContent: "center",
alignItems: "center",
backgroundColor: "#D9F5ED"
},
itemStyleHorizontal: {
justifyContent: "center",
alignItems: "center",
width: 50,
height: 50,
paddingTop: 0,
borderWidth: 1,
borderColor: "grey",
borderRadius: 0,
backgroundColor: "#D9F5ED"
},
itemSelectedStyleHorizontal: {
paddingTop: 0,
borderWidth: 2,
borderColor: "#DAA520",
justifyContent: "center",
alignItems: "center",
backgroundColor: "#D9F5ED"
}
});