React Native Dropdown Picker is the most popular library to implement a dropdown in React Native. But in the library, I could not find a way to customize the dropdown arrow and the ticks in the dropdown list. They are by default in black color and cannot be customized with my knowledge.
Basic implementation:
import DropDownPicker from 'react-native-dropdown-picker';
function App() {
const [open, setOpen] = useState(false);
const [value, setValue] = useState(null);
const [items, setItems] = useState([
{ label: 'ice-cream', value: '1' },
{ label: 'strawberry', value: '2' },
{ label: 'grapes', value: '3' },
{ label: 'fruit salad', value: '4' },
{ label: 'jello', value: '5' },
{ label: 'apple', value: '6' },
]);
return (
<DropDownPicker
open={open}
value={value}
items={items}
setOpen={setOpen}
setValue={setValue}
setItems={setItems}
/>
);
}
Sample Output:[Click here to see the output]2
There is a prop in the called arrowIconStyle. But for that also, I could not find a way to give a color as a style.
Ex: arrowIconStyle={{color: 'white'}}
Unfortunately this does not work and gives an error:
Type '{ color: string; }' is not assignable to type
'StyleProp'.ts(2322)
Can someone please help me regarding this?
Thank you.
try to change the arrow icon and implement your own styles for the icon
like the following:
https://snack.expo.dev/#hewr/57a779
//to change the dropdown box style
dropDownContainerStyle={{
backgroundColor: "#dfdfdf"
}}
// to style the selected item style
selectedItemContainerStyle={{
backgroundColor: "grey"
}}
for more details visit their website
and check the Dropdown and List and Items sections
Related
I use react-select for a multi selection dropdown. By default, react-select displays labels inside an input. I would like to replace this input with a simple button (without any labels or anything fancy...just a simple button). The button would popup the dropdown.
I can't find how to modify the input.
Here is my default select:
import React, { Component } from 'react'
import Select from 'react-select'
const options = [
{ value: 'chocolate', label: 'Chocolate' },
{ value: 'strawberry', label: 'Strawberry' },
{ value: 'vanilla', label: 'Vanilla' }
]
const MyComponent = () => (
<Select options={options} isMulti />
)
So I've been looking for a dropdown picker to be toggled on "on Press" since yesterday yet I found nothing, all I want is to put an icon in a "touchable Opacity", and when pressed the dropdown picker shows.
I've been advised to use "react-native-picker-select" library, I imported it and added the usage advised by the library like this
const Dropdown = () => {
return (
<RNPickerSelect
onValueChange={(value) => console.log(value)}
items={[
{ label: 'Football', value: 'football' },
{ label: 'Baseball', value: 'baseball' },
{ label: 'Hockey', value: 'hockey' },
]}
/>
); };
then I called it from the "on Press" but its showing nothing, so what am I missing?
I think you are trying to call whole element on pressing the button, but there is no need to do that because react-native-picker-select by default supports on press focus which you want. While native 'Picker' from 'react-native' does not support that.
So, you can add this directly like a View or TouchableOpacity.
For example:
const App = () => {
return (
<View />
<RNPickerSelect />
...
);
}
Hi I'm new to react native. I'm using react-native-material-dropdown.I want to change the text content based on the drop down value. By default my text content is empty and dropdown value also empty. When onChangeText function is triggers the text content should change based on selected drop down value.
Please post some of your code to get more accurate answers.
Meanwhile, please checkout the example code below with Dropdown example. Take a notice that dropdown's value is set to selectedCity value={this.state.selectedCity} and it is the same value manipulated when onChangeText triggers this.setState
import React from 'react';
import { View, Text } from 'react-native';
import { Dropdown } from 'react-native-material-dropdown';
export default class DropDownEx extends React.Component {
constructor(props) {
super(props);
this.state = {
cityData: [{
value: 'City1',
id: '123',
otherData: 'descr1'
}, {
value: 'City2',
id: '234',
otherData: 'descr2'
}, {
value: 'City3',
id: '345',
otherData: 'descr3'
}],
selectedCity: ""
};
}
render() {
return (
<Dropdown
label='City'
data={this.state.cityData}
value={this.state.selectedCity}
containerStyle={{borderColor: "gray", borderWidth: 0.5, borderRadius: 5, height: 50}}
inputContainerStyle={{ borderBottomColor: 'transparent', paddingTop: 10, paddingLeft: 10 }}
onChangeText={(city) => this.setState({selectedCity: city})}
/>
)}
}
I am using Gifted Chat https://github.com/FaridSafi/react-native-gifted-chat/ but I need some labels to be in another language, namely the LoadEarlier label found here: https://github.com/FaridSafi/react-native-gifted-chat/blob/master/src/LoadEarlier.tsx
defined here:
static defaultProps = {
onLoadEarlier: () => {},
isLoadingEarlier: false,
label: 'Load earlier messages',
containerStyle: {},
wrapperStyle: {},
textStyle: {},
activityIndicatorStyle: {},
activityIndicatorColor: 'white',
activityIndicatorSize: 'small',
}
static propTypes = {
onLoadEarlier: PropTypes.func,
isLoadingEarlier: PropTypes.bool,
label: PropTypes.string,
containerStyle: ViewPropTypes.style,
wrapperStyle: ViewPropTypes.style,
textStyle: PropTypes.any,
activityIndicatorStyle: ViewPropTypes.style,
activityIndicatorColor: PropTypes.string,
activityIndicatorSize: PropTypes.string,
}
I am using the chat like intended by importing the react-native-gifted-chat component and then just using <GiftedChat /> as part of the props it has:
loadEarlier={true}
isLoadingEarlier={false}
I want to know if there's some way I can reach that label to modify the "Load earlier messages" to another language. I can't figure it out.
Looks like you should use the renderLoadEarlier prop to render a <LoadEarlier> button with a custom label.
import it-
import { LoadEarlier } from 'react-native-gifted-chat';
then in render -
render() {
const myLoadEarlier = (props) => <LoadEarlier {...props} label="Custom Load Earlier Label" />;
return(
<View>
...
<GiftedChat
...
renderLoadEarlier={myLoadEarlier}
/>
</View>
);
}
Hope this helps
Clicking on the navbar button the drawer is not opening.
Here is code i have used for button press
if (event.type === 'NavBarButtonPress') {
if (event.id === 'sideDrawerToggle') {
this.props.navigator.toggleDrawer({
side: 'left',
animated: true,
});
}
}
Here is the drawer set up
Navigation.startTabBasedApp({
tabs: [
{
label: 'Find Place',
screen: 'places.FindPlace',
title: 'Find Place',
icon: source[0],
navigatorButtons: {
leftButtons: [
{
icon : source[2],
title : 'Menu',
id: 'sideDrawerToggle'
}
]
}
},
{
label: 'Share Place',
screen: 'places.SharePlace',
title: 'Share Place',
icon: source[1],
navigatorButtons: {
leftButtons: [
{
icon: source[2],
title: 'Menu',
id: 'sideDrawerToggle'
}
]
}
}
],
drawer: {
left: {
screen: 'places.SideDrawer'
}
}
});
And this is what my drawer looks like
import React, {Component} from 'react';
import {View, Text, Dimensions} from 'react-native';
class SideDrawer extends Component {
render() {
return(
<View style={[
styles.container,
{width: Dimensions.get('window').width * 0.8}
]}>
<Text>Drawer</Text>
</View>
);
}
}
const styles = {
container: {
backgroundColor : 'white',
paddingTop: 22,
flex: 1
}
};
export default SideDrawer;
By searching a lot i found that giving a fixed width to drawer solves the problem. But its not solving in my case. I don't know what is wrong with the code, It was working fine.
You can simply use
this.props.navigation.openDrawer();
in your screen .
please check official doc and example from the following link
https://reactnavigation.org/docs/en/drawer-based-navigation.html
https://reactnavigation.org/blog/#drawer-routes-have-been-replaced-with-actions
You can specify a built-in button in your navigatorButtons with id: 'sideMenu' and it will do the magic for you. ie.
...
navigatorButtons: {
leftButtons: [
{
id: "sideMenu"
}
]
},
...
I don't think that is the right way of setting up the drawer navigation. Check out the oficial documentation here: https://reactnavigation.org/docs/navigators/drawer. It shows that each component that the drawer will navigate to is a scene that you define and set up in the Main Component of the app.
I also recommend using the Drawer from NativeBase.io https://docs.nativebase.io/Components.html#Drawer. Which gives you a better look and feel on both iOS and Android, it looks more native to both.
Are you using an iPhone? It seems there's a bug to this in the wix one which affects them but not Android.
Deep links might work https://wix.github.io/react-native-navigation/#/deep-links