How to change the selected item style? - react-native

I use MaterialDropdown from "react-native-material-dropdown", it's working fine but I'd like to change the style of the selected item to make it more visible.
I used selectedItemColor to make it black but I'd like to make it bold and underlined... I don't know how "selectedItemStyle" doesn't work:
<MaterialDropdown
data={data_dropdown}
// pickerStyle={styles.dropdownPickerStyle}
affixTextStyle={{ fontFamily: "FunctionLH" }}
itemTextStyle={{ fontFamily: "FunctionLH" }}
selectedItemStyle={{fontWeight: 'bold', textDecorationLine: 'underline'}}
selectedItemColor='rgb(0, 0, 0)'
containerStyle={[styles.dropdownContainerStyle, {opacity: 0}]}
itemCount={10}
dropdownPosition={-4.5}
dropdownOffset={{top: 32, left: 5 }}
underlineColor='transparent'
labelExtractor={({ label }) => label}
valueExtractor={({ value }) => value}
//propsExtractor={({ props }, index) => props}
propsExtractor={({value, index}) => { return (value === '*' ? {style:
{borderBottomColor: '#D1D1D1', borderBottomWidth: 1, paddingTop: 5}} :
{style: {}}) }}
onChangeText={(value) => this.choiceAction(value)}
useNativeDriver={true}
/>

By looking at the source-code, selectedItemStyle isn't supported as a prop in react-native-material-dropdown. You have to make a pull request.

Related

react-native-google-places-autocomplete results are white

Unable to see the list items in the result list. Spent a full day figuring out what it might be, still unable to resolve it.
When search results appear, I cannot see the text. listview style doesn't color the text.
<GooglePlacesAutocomplete
returnKeyType={'default'}
fetchDetails={true}
minLength={2}
placeholder="Search"
textInputProps={{
placeholderTextColor: '#32a852',
returnKeyType: 'search',
}}
onPress={(data, details = null) => {
// 'details' is provided when fetchDetails = true
console.log(data, details);
}}
query={{
key: GOOGLE_API_KEY,
language: 'en',
}}
styles={{
textInput: {
height: 38,
color: '#5d5d5d',
fontSize: 16,
},
predefinedPlacesDescription: {
color: '#1faadb',
},
listView: {color: 'black', zIndex: 100000}, // doesnt work, text is still white?
}}
/>
</View>
In styles, add description for changing the color or any other style attribute.
styles = {{
...
description : {color : 'black'}
}}

How to select the first item in array by default?

i have a Picker and i have 3 items in an array where i receve tham. I need to put the first item from the array in the picker by default. This is mine picker who receves all items and when i press the dropdown it shows all my drivers but it needs by default to show the first item from the array.
<View style={{width: '50%', paddingRight: 5}}>
<RNPickerSelect
style={{
inputAndroid: styles.dropdownAndroid,
inputIOS: styles.dropdownIOS,
placeholder: styles.dropdownPlaceholder,
iconContainer: styles.dropwownIcon
}}
disabled={this.state.vendorDriverSelectDisabled}
placeholder={{ label: this.props.mainProps.language.selectDriver }}
onValueChange={(value) => this.setState({...this.state, selectedVendorDriver: value})}
value={this.state.selectedVendorDriver}
items={this.state.vendorDrivers}
useNativeAndroidPickerStyle={false}
Icon={() => {
return <EvilIcons name="chevron-down" size={37} color="#333" />
}}
/>
</View>
When you set data for vendorDrivers state, use the code like this?
this.setState({ vendorDrivers: someData })
So, just set selectedVendorDriver state to the first element of the someData
And the code will become
this.setState({ vendorDrivers: someData, selectedVendorDriver: someData[0] })

Remove space between keyboard and composer in React-Native-Gifted-Chat

I'm using the react-native-gifted-chat package for my React Native application.
Somehow there is a space between the composer and the keyboard, although I did not customise the GiftedChat.
Marked orange in the attached screenshot:
I already tried to customise the composer or any other component, with not effect.
i'm also facing same problem after some time i find this solution and it's work for me.
<GiftedChat
isAnimated
messages={this.state.messages}
scrollToBottom={true}
renderUsernameOnMessage={true}
onSend={messages => this.onSend(messages)}
inverted={false}
isLoadingEarlier={true}
messagesContainerStyle={{ color: 'gray' }}
bottomOffset={0} // add this line and space is remove
renderBubble={props => {
return (
<Bubble
{...props}
textStyle={{
right: {
color: 'white',
},
left: {
color: '#24204F',
},
}}
wrapperStyle={{
left: {
backgroundColor: 'white',
},
right: {
backgroundColor: "#ff3b00", // red
},
}}
/>
);
}}
renderInputToolbar={props => {
return (<InputToolbar {...props} containerStyle={{ backgroundColor: '#e2e2e2' }} />);
}}
user={{
_id: 1
}}
/>
hope this willl work for you
bottomOffset={0} // add this line and space is remove
install react-native-iphone-x-helper
and add these lines according to your code.
import { getBottomSpace } from 'react-native-iphone-x-helper';
<GiftedChat
bottomOffset={getBottomSpace()}
...
/>
As found on the docs itself, simply get the insets:
const insets = useSafeAreaInsets();
<GiftedChat
bottomOffset={insets.bottom}
...
/>
This will fix your issue dynamically.

react native wheel picker (IOS) is not stay on selected value?

this works absolutely fine on android but not on IOS (not displaying value which user select from wheel picker). Check this Link.
https://drive.google.com/file/d/1y_ULGQuvPlzZj2V2zr1RAynrZKpme4Uc/view?usp=sharing
<Picker
style={{ width: 100, height: 80 }}
selectedValue={this.state.selectedHour}
itemStyle={{ color: "black", fontSize: 20 }}
onValueChange={index => this.onPickerHourSelect(index)}
>
{this.state.hourList.map((value, i) => (
<PickerItem label={value} value={i} key={"money" + value} />
))}
onPickerHourSelect(index) {
var hour = this.state.hourList[index];
this.setState({
selectedHour: hour,
}) }
Please suggest me another component or package of picker(Like Spinner Or Wheel Picker)
I've had the same problem! I solved it using selectedValue instead of selectedItem and passing the pickerItem's value.
This is my code:
<Picker style={{flex: 1, width: 150, height: 180}}
itemStyle={{color: 'black', fontSize: 26}}
selectedValue={this.state.minutes[this.state.indexSelected]}
onValueChange={(index) => {this.setState({indexSelected: index})}}>
{this.state.minutes.map((value, i) => (<PickerItem label={value} value={i} key={i}/>))}
</Picker>

React Native TabNavigator change TabStyle to follow according to the text

I am using expo v27.0, react native 0.55 and I as you can see in the picture that the tab have somewhat a fixed width like a default width from the tab navigation, and the text wrap into three lines, I want the text to be in 1 line and nowrap, and i have tried styling (flexWrap:
'nowrap', flex: 1) in TabStyle, LabelStyle in TabBarOptions, but still can't get the tab to have the width according to the text inside the tab.
I populate the text for the tabs dynamically from json using fetch, therefore all tabs will have different width according to the text. How to I make the tab to follow the width of the text ?
All answers are greatly welcomed.
Thank you in advance.
Solved, turns out just need to set the width to auto as follows:
tabBarOptions: {
tabStyle: {
width: 'auto'
}
}
You can use render label in render header and in that you can return your Text component and Text is having numberOfLines props that will be 1 and it will add ... at end of the text after one line.
Check example snippet:
_renderLabel = props => {
let preparedProps = {
style: {
fontFamily: fonts.Regular,
marginVertical: 8
},
fontType: props.focused ? "Medium" : "Light"
};
return (
<Text
{...preparedProps}
numberOfLines={1}
ref={ref => {
ref && this.props.addAppTourTarget(ref, props.route.key);
}}
>
{props.route.type === "free" && this.state.is_premium_member
? this.labels.premium
: props.route.title}
</Text>
);
};
_renderHeader = props => (
<TabBar
{...props}
bounces={true}
style={{
backgroundColor: colors.cardBlue
}}
indicatorStyle={{
backgroundColor: colors.radicalRed,
height: 1,
borderRightWidth: initialLayout.width * 0.1,
borderLeftWidth: initialLayout.width * 0.1,
borderColor: colors.cardBlue
}}
tabStyle={{
padding: 0,
borderTopColor: "transparent",
borderWidth: 0
}}
renderLabel={this._renderLabel}
/>
);
_handleIndexChange = index => this.setState({ index });
_renderScene = ({ route, focused }) => {
switch (route.key) {
case "a":
return <One {...this.props} route={route} focused={focused} />;
case "b":
return (
<Two {...this.props} isSeries={true} focused={focused} />
);
case "c":
return <Three {...this.props} route={route} focused={focused} />;
default:
return null;
}
};