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] })
Related
Displaying more than 200+ images in the flatlist and make the user to select or deselect by clicking an image. So, when the user is clicks a image, Need to show the check-circle icon on the image. Similarly, when the user is deselect the selected image, need to remove the icon. I got two arrays images[] and selectedImagesId[]. Whenever the user selects an image, the image id will be pushed into selectedImagesId array. By the way, Iam showing the icon if the rendered image id avaliable in the selectedImagesId. The problem here is, it takes so long to display or remove the icon.
<FlatList
data={props.images}
extraData={selectedImagesId}
initialNumToRender={10}
refreshing={true}
removeClippedSubviews={true}
maxToRenderPerBatch={1}
windowSize={7}
showsVerticalScrollIndicator={false}
numColumns={3}
keyExtractor={(item) => item.id.toString()}
renderItem={(itemData) => <RenderData itemData={itemData} />}
>
const RenderData = ({ itemData }) => (
<View>
<TouchableOpacity
activeOpacity={0.8}
style={{
width: width / 3.5,
height: height / 7,
padding: 2,
}}
onPress={() => {
console.log('pressed');
if (props.selectedImages.includes(itemData.item.uri)) {
const index = props.selectedImages.indexOf(itemData.item.uri);
if (index > -1) {
props.removeImageandId(index, itemData.item.id);
}
} else {
props.selectImageandId(itemData.item.uri, itemData.item.id);
}
}}>
<Image
style={{ width: '100%', height: '100%' }}
source={{
uri: itemData.item.uri,
}}
/>
{selectedImagesId.includes(itemData.item.id) && (
<AntDesign
name='checkcircle'
size={24}
color='white'
style={{ position: 'absolute', bottom: 5, right: 15 }}
/>
)}
</TouchableOpacity>
<Text style={{ backgroundColor: 'red', fontSize: 25 }}>
{render.current++}
</Text>
</View>
);
You can Refer This article
It will guide you on how to render Only particular selected components that change.
not the Whole flatList components.
so, that based Only selected particular component you can remove the icon. not whole flatList Re-render.
I'm trying to delete the top, right and left borders of my textInput (so obviously, I'd like to have just the bottom border :) ) with the package react-native-autocomplete-input
I tried borderTop : 0 / and 'transparent' but it's not working I still have the borders on top and sides.
borderStyle didn't work either
I get this:
https://zupimages.net/viewer.php?id=20/03/ovck.bmp
my code is this:
<ScrollView style={styles.containerScroll}>
<Text style={styles.h1}>{i18n.t("tripsform.title")}</Text>
<Autocomplete
containerStyle={styles.container}
inputContainerStyle={styles.inputContainer}
autoCapitalize="none"
autoCorrect={false}
data={this.findAirports(query_arrival)}
defaultValue={this.findAirports(query_start)}
onChangeText={text => this.setState({ query_start: text })}
placeholder="Enter Start airports"
renderItem={({ airport }) => (
<TouchableOpacity
onPress={() => this.setState({ query_start: airport })}
>
<Text style={styles.h2}>{airport}-</Text>
</TouchableOpacity>
)}
/>
<Autocomplete
containerStyle={styles.container}
inputContainerStyle={styles.inputContainer}
autoCapitalize="none"
autoCorrect={false}
data={this.findAirports(query_arrival)}
defaultValue={this.findAirports(query_arrival)}
onChangeText={text => this.setState({ query_arrival: text })}
placeholder="Enter Arrival airports"
renderItem={({ airport }) => (
<TouchableOpacity
onPress={() => this.setState({ query_arrival: airport })}
>
<Text style={styles.h2}>{airport}-</Text>
</TouchableOpacity>
)}
/>
<Form ref={c => (this._form = c)} type={Trip} options={options} />
<Text>{"\n"}</Text>
<Text>{"\n"}</Text>
<Button
containerStyle={[styles.mybtnContainer]}
style={styles.mybtn}
onPress={this.handleSubmit}
>
{i18n.t("tripsform.item.add").toUpperCase()}
</Button>
<Button
onPress={() => this.props.navigation.navigate("MyTrips")}
containerStyle={[styles.mybtnContainer]}
style={styles.mybtn}
>
Return to my trips
</Button>
<Text>
{"\n"}
{"\n"}
</Text>
</ScrollView>
with this style:
inputContainer: {
minWidth: 300,
width: "90%",
height: 55,
backgroundColor: "transparent",
color: "#6C6363",
fontSize: 18,
fontFamily: "Roboto",
borderBottomWidth: 1,
borderBottomColor: "rgba(108, 99, 99, .7)"
},
If I can get any help that's really nice, thanks for reading and for any help !
You need to use inputContainerStyle property to apply styles to the input.
You can also use containerStyle to style the container around the AutoComplete so you also don't need to wrap the Autocomplete with View tag.
<Autocomplete
inputContainerStyle={styles.inputContainer}
/>
This Should give you the desired output :) :
<Autocomplete
inputContainerStyle={{width:"100%",borderBottomWidth:1}}
inputStyle={{borderWidth:0}}
data={Options}
handleSelectItem={(item,id)=>optionHandler(item.value,id)}
valueExtractor={item => item.value}
/>
It seems that it's impossible with that package.
I could do what I wanted to do with 'native base autocomplete'.
So, it doesn't completely answer the question but it allows you to do the right thing!
You can set the inputContainer style borderWidth to 0:
// other styles
inputContainer: {
borderWidth: 0,
},
I would like to toggle only one switch in the render item I am creating. So far when I toggle, all buttons toggle and I understand it's because I'm passing the same state to the value of all my switches but I don't know how to target just one
I have tried using other native components but none seem to be able to work like an input where I can pass an event and target it
state = {
containers: dataYay,
selectedContainers: [],
checked: false
}
containerSelected(value, item, index) {
console.log(item.Nbr, item.CtrId)
this.setState({ checked: value })
}
renderItem={({ item, index, section }) => {
return (
<Block padding={[10, 15, 20, 15]} color='#EFF8FF' margin={[0, 0, 1, 0]} row center middle key={index}>
<Block styles={styles.ContainerAssign} flex={0.3}>
<Switch
style={{ transform: [{ scaleX: .8 }, { scaleY: .8 }] }}
value={this.state.checked} // i would like to check just one of these
testID={index}
onValueChange={(value) => this.containerSelected(value, item, index)}
/>
</Block>
<Block styles={styles.ContainerInfo} padding={[0, 5, 0, 0]}>
<Text style={styles.ContainerInfoText}>
<Text style={styles.ContainerInfoTitle}> Container ID: </Text> {item.CtrId}
</Text>
... // code would be too long to displa
</Block>
<Button
... // code would be too long to display
</Button>
</Block>
)
}}
What I need help with is to find a way to pass the switch toggle to the current item on click?
Solution
Make your item to state component through React.Component class.
For example,
class Item extend React.Component {
state = {
checked: false,
}
render() {
return() {
<Block padding={[10, 15, 20, 15]} color='#EFF8FF' margin={[0, 0, 1, 0]} row center middle key={index}>
<Block styles={styles.ContainerAssign} flex={0.3}>
<Switch
style={{ transform: [{ scaleX: .8 }, { scaleY: .8 }] }}
value={this.state.checked} // i would like to check just one of these
testID={index}
onValueChange={(value) => this.containerSelected(value, item, index)}
/>
</Block>
<Block styles={styles.ContainerInfo} padding={[0, 5, 0, 0]}>
<Text style={styles.ContainerInfoText}>
<Text style={styles.ContainerInfoTitle}> Container ID: </Text> {item.CtrId}
</Text>
... // code would be too long to displa
</Block>
<Button
... // code would be too long to display
</Button>
</Block>
}
}
}
And use this item in your renderItem of parent.
renderItem = {({item}) => <Item item={item}/>}
Why?
this.state.checked was applied to renderItem's component. Thus, every renderItem component was using the same state called from this.state.checked. That is why it affects to all items. And I resolve this to use independent states in Item component.
I have this code (get from native-base example) that is working fine. But after click on either sides (right or left), the 'swipe' still open. I know that there is a method called closeRow(), but I don't know how to apply in this case.
Left button is for 'split' item into 2 or more, while right button is to delete current item. What I need is to close all opened rows in this list. Why all? Because in the case of 'delete' function, the current item is deleted in the right way, but the next-one get right button opened (since it's the same 'index' of list, even if the item itself is different).
This is my current code:
<Container style={styles.container}>
<Header>
<Left>
<Button transparent onPress={() => this.props.navigation.goBack()}>
<Icon name="arrow-back" />
</Button>
</Left>
<Body>
<Title>{translate("title", { ...i18n_opt, name })}</Title>
</Body>
</Header>
<Content>
<Modal
isVisible={this.state.visibleModal === true}
animationIn={"slideInLeft"}
animationOut={"slideOutRight"}
>
{this._renderModalContent()}
</Modal>
<View style={styles.line}>
<View style={{ flex: 2 }}>
<Text style={[styles.alignCen, styles.headerTitle]}>
{translate("lap", { ...i18n_opt })}
</Text>
</View>
<View style={{ flex: 10 }}>
<Text style={[styles.alignCen, styles.headerTitle]}>
{translate("time", { ...i18n_opt })}
</Text>
</View>
<View style={{ flex: 3 }}>
<Text
style={[
{ paddingRight: 10 },
styles.alignRig,
styles.headerTitle
]}
>
{translate("diff", { ...i18n_opt })}
</Text>
</View>
</View>
<List
enableEmptySections
dataSource={laps2}
ref={c => {
this.component = c;
}}
renderRow={data => <PersonalRankItem dados={data} />}
renderLeftHiddenRow={data => (
<Button
full
onPress={() => {
this.setState({
...this.state,
visibleModal: true,
cur_tx_id: tx_id,
cur_lap: data.lap
});
}}
style={{
backgroundColor: "#CCC",
flex: 1,
alignItems: "center",
justifyContent: "center",
marginBottom: 6
}}
>
<MaterialCommunityIcons
name="arrow-split-vertical"
size={20}
color="#5e69d9"
/>
</Button>
)}
renderRightHiddenRow={(data, secId, rowId, rowMap) => (
<Button
full
danger
onPress={_ => {
//alert("Delete");
//console.log("Data.lap:",data.lap);
dispatchDeleteLap(tx_id, data.lap, true);
}}
style={{
flex: 1,
alignItems: "center",
justifyContent: "center",
marginBottom: 6
}}
>
<Icon active name="trash" size={20} />
</Button>
)}
leftOpenValue={70}
rightOpenValue={-70}
/>
</Content>
</Container>
Goal
You need to close all the rows, each time one of row side button clicked. The next problem is when item deleted, the next row is opened even the content is different.
How?
All you need is first, collect the ref of each rows and then when the button clicked, trigger the closeRow method of all ref's row. And the important part, make your row key persistent and unique to avoid problem like in your case.
Quick Code Sample
class Screen extends Component {
constructor(props) {
super(props);
this._rowRefs = [];
}
// this is used to collect row ref
collectRowRefs = (ref) => {
this._rowRefs.push(ref);
};
// your render row function
renderRow = (data) => (
// make this row key consistent and unique like Id, do not use index counter as key
<PersonalRankItem key={data.id} dados={data} ref={this.collectRowRefs}/>
);
// When your hidden side button is clicked
onButtonClicked = (data) => {
// do the button normal action
// ....
// close each row
this._rowRefs.forEach((ref) => {
ref.closeRow();
});
};
// this is your hidden side button
renderLeftHiddenRow = () => (
<Button onClick={this.onButtonClicked} />
);
render() {
// Your List in here
return (
<List
renderRow={this.renderRow}
renderLeftHiddenRow={this.renderLeftHiddenRow}
/>
)
}
}
I want to add footer to my flatList :
i try this code :
renderFooter = () => {
return (
<View
style={{
paddingVertical: 20,
borderTopWidth: 1,
borderColor: "#CED0CE"
}}
>
<Button> This is footer </Button>
</View>
);
}
<FlatList
data={menuData}
renderItem={({item}) => <DrawerItem navigation={this.props.navigation} screenName={item.screenName} icon={item.icon} name={item.name} key={item.key} />}
ListFooterComponent ={this.renderFooter}
/>
But no footer appears when running.
Any help please
You used the component
ListFooterComponent
in right way. you need to check your render method for footer. I faced the same issue and i follow this example, and it helps me. I hope it will help you.
Simple way/hack. In the menuData array, you just add a flag (i called) to the child object to indicate that it's a last item. For eg:
If you can modify your menuData structure, added lastItem prop true to indicate that it's the last item :
const menuData = [
{name:'menu1', screenName:'screen1', icon:'../assets/icon1.png'},
{name:'menu2', screenName:'screen2', icon:'../assets/icon2.png', lastItem:true}
];
and then
renderFlatItems = ({item}) => {
const itemView = null;
if (!items.lastItem) {
itemView = <DrawerItem navigation={this.props.navigation} screenName={item.screenName} icon={item.icon} name={item.name} key={item.key} />
} else {
itemView = <View style={{padding:100}}><Button> This is footer </Button> </View>
}
return {itemView};
}
then use it in the Flatlist like so
<FlatList
data={menuData}
renderItem={this.renderFlatItems}
/>
If you want a footer that remains at the bottom of the screen "Above" the list, then you can just add a View after the FlatList.
<View>
<FlatList style={{flex: 1}} />
<View
style={{
position: 'absolute',
left: 0,
right: 0,
bottom: 0,
height: 50,
}}
/>
</View>