Develop Reference

How to create a carousel like this?

I want to create a carousel like the one shown below. The center item will have a higher elevation to indicate that this is the current item and whenever the user scrolls, the next item will be elevated and so on. The center item will be overlapping the left and the right item. I tried to use react-native-snap-carousel with the stack option, but that only shows the left item and in case of ios, only the right item. I tried tinder, but that is quite same as well. I tried default, but there are gaps in between each item which I do not want. I tried react-native-anchor-carousel. But, this makes the center item transparent for some reason.
<Carousel
style={styles.carousel}
data={review}
renderItem={renderitem}
itemWidth={240}
activeSlideAlignment="center"
sliderWidth={windowWidth - 20}
separatorWidth={-100}
itemContainerStyle={{
alignItem: 'center',
marginTop: 18,
}}
inActiveOpacity={0.1}
ref={carouselRef}
loop={true}
/>
Render Item is below
const renderitem = ({item}) => {
return (
<View
style={[styles.item]}
onPress={() => {
this._carousel.scrollToIndex(index);
}}>
<View style={styles.circle}>
<Image
style={styles.image}
source={{uri: item.serviceImage}}
resizeMode="cover"
/>
</View>
<Text style={styles.serviceNameText}>{item.serviceName}</Text>
<Text style={styles.name}>{item.reviewerName}</Text>
<Text style={styles.content}>{item.content}</Text>
</View>
);
};

How to: Icon/Image constantly appear over scroll-sections like in twitter?

So I would like to have an button or vector-icon simular to twitters one like in this image: twitter button
So the concept is like in this picture: concept
The black rectangles represent the scrollable sections which is basicalle a scrollview. Now I would like to make an icon/picture appear over all these sections constantly like in twitter. In my second picture that would be the blue star. I havent found simmlular concepts yet. How can I implement that in React Native?

You can try something like this:
import React, { PureComponent } from 'react'
import { View, ScrollView } from 'react-native'
export default class Example extends PureComponent {
render() {
return (
<View style={{ flex: 1 }}>
<ScrollView>
{/* Children */}
</ScrollView>
<TouchableOpacity
activeOpacity={0.6}
style={{
position: 'absolute',
right: 20,
bottom: 60
}}
// onPress={this.onAddPress}
>
{/* Provide icon source here */}
<Image source={iconSource} />
</TouchableOpacity>
</View>
)
}
}
If you need this bottom picture to be on every screen, then you can place this TouchableOpacity component to all of those screen but outside of the ScrollView.

you can use Fab button available in native-base and react-native-paper
[native-base] https://docs.nativebase.io/Components.html#fabs-def-headref
[reac-native-paper] https://callstack.github.io/react-native-paper/fab.html
If you want non-touchable custom fab then use can use given code
<View style={{position:'absolute', zIndex:99, bottom:15, right:15}}>
<FontAwesome name="star" color={"blue"} size={25} />
</View>
If you want touchable custom fab then use can use given code
<TouchableOpacity onPress={()=>/*submit code*/} style={{position:'absolute', zIndex:99, bottom:15, right:15}}>
<FontAwesome name="star" color={"blue"} size={25} />
</TouchableOpacity>

React Native FlatList keyboardShouldPersistTaps not persisting

I have a very frustrating situation. Trying to get keyboard to disappear and detect onPress event handler in child row.
Here is what my code looks like:
_renderRow = (prediction) => {
return (
<TouchableOpacity onPress={() => {
Keyboard.dismiss();
this.setState({ location: prediction.description });
}}>
<View style={styles.listItemContainer}>
<Text>{prediction.description}</Text>
</View>
</TouchableOpacity>
)
}
render() {
return (
<View style={styles.wrapper}>
{/* style={[this.state.predictions.length > 0 ? styles.searchContainerSuggest : styles.searchContainer]} */}
<View style={styles.searchContainerSuggest}>
<View style={{paddingLeft: 10, height: 45, display: 'flex', justifyContent: 'center'}}>
<TextInput
placeholder="Enter location"
value={this.state.location}
onChangeText={location => this.onChangeLocation(location)}
style={styles.textInput}
/>
</View>
{this.state.predictions.length && this.state.location !== '' ?
<FlatList
keyboardShouldPersistTaps={'handled'}
refreshing={!this.state.loaded}
initialNumToRender={10}
enableEmptySections={true}
data={this.state.predictions}
keyExtractor={(_, index) => index.toString()}
renderItem={ ({item: prediction}) => this._renderRow(prediction) } />
: null}
</View>
</View>
);
}
I probably need a helping hand or two with regards to how to debug this issue.
Looked up several examples on how to deal with hiding the keyboard and allowing a particular selection to be pressed at the same time.
I thought that keyboardShouldPersistTaps would allow for the child selection to be selected. Upon selection, the onPress event handler will trigger and that will be where I call Keyboard.dismiss() to hide the keyboard. Does not seem to work.

In my case, besides adding keyboardShouldPersistTabs='handled' to the FlatList in question, it was also needed to add keyboardShouldPersistTabs='handled' and nestedScrollEnabled={true} to a parent ScrollView like 2 levels above, wrapping the FlatList I intended to get this behavior with. Check out this issue in react-native repo for more info.

For anyone who is running into the same problem as me. Check whether your FlatList or ScrollView is nested in another FlatList or ScrollView.
If yes, then add
keyboardShouldPersistTaps='handled'
to the element as a props as well.

add keyboardDismissMode="none" to FlatList

Keyboard causes modal to disappear React-Native

The workflow of what I am trying to do is the following:
User clicks on hamburger icon and gets a dropdown.
User clicks on rename.
A modal appears with a TextInput and two buttons to accept and cancel.
The problem I am facing is between 2/3. As I click on rename, the modal appears momentarily, but then disappears as the keyboard shows up. Even though I cannot see the modal, my keystrokes still register to the TextInput. When I close the keyboard, the modal appears again.
Here is my code:
<Modal
animationType="slide"
transparent={true}
visible={renaming}
onRequestClose={() => {
Alert.alert('Modal has been closed.');
}}>
<KeyboardAvoidingView style={styles.modalMask} behavior="padding">
<View style={styles.modalContainer}>
{unitType === 'file' ?
<Text style={styles.modalHeader}>Rename clip:</Text>
:
<Text style={styles.modalHeader}>Rename folder:</Text>
}
<TextInput
style={styles.modalInput}
onChangeText={(newTitle) => this.setState({title: newTitle})}
defaultValue={'tits'}
autoFocus={true}
selectTextOnFocus={true}
keyboardAppearance={'dark'}
maxLength={30}
/>
<View style={styles.modalOptions}>
<TouchableHighlight
onPress={() => {
this.handleCloseModal();
}}
style={styles.modalOption}
>
<Text>CANCEL</Text>
</TouchableHighlight>
<TouchableHighlight
onPress={() => {
this.handleRename(id, unitType)}
}
style={[styles.modalOption, styles.renameOption]}
>
<Text style={{color: 'white'}}>RENAME</Text>
</TouchableHighlight>
</View>
</View>
</KeyboardAvoidingView>
</Modal>

As far as I can see, the problem could be because KeyboardAvoidingView is pushing the Modal up enough to move it away from viewport.
Try passing a negative value to keyboardVerticalOffset as a prop to KeyboardAvoidingView. This prop controls how far up the Modal gets pushed when keyboard comes up.
Example:
<KeyboardAvoidingView style={styles.modalMask} behavior="padding" keyboardVerticalOffset= {-200}>
<View>
Your view
</View>
</KeyboardAvoidingView>

How to change value of a product based on quantity in react native

I am trying to make the price of product change, when user select different weight.
For example lets say user want to buy mango, default i am showing price of mango /kg, now if user change weight from 1kg to 500gm then the value should change.
I have on showing the product and drop down option to show available weights. But not sure how to change the value of the of price based on weights.
Here is my code to display list of products and weight options
PS: This is a product listing screen where i want to make the change to happen
Productlisting.js
render() {
return (
<View style={styles.productListingContainer}>
<ListView
enableEmptySections={ true }
dataSource={ this.state.dataSource }
renderRow={ this._renderRow } />
</View>
)
}
//Rander products
_renderRow =(rowData)=> {
return (
<ProductThumb { ...rowData } onPress={() => this._pressProduct(rowData.id) } />
)
};
Productcard.js
//Onvalue change
onValueChange(value: string) {
this.setState({
selected: value,
});
}
//This is render content
<TouchableOpacity style={ styles.row } onPress={ this.props.onPress }>
<Image style={ styles.image } source={{ uri: rowData.imageUri }} />
<View style={ styles.textsHolder }>
<Text ellipsizeMode='tail' numberOfLines={2} style={ [styles.name,stylesheet.mb4] }>{ rowData.name } </Text>
<View style={[{flexDirection: 'row'},stylesheet.mb4]}>
<Text style={ styles.prize }>$ { rowData.prize } </Text>
{
(rowData.regularPrize) ? <Text style={ styles.regularPrize }>$ { rowData.regularPrize }</Text>: null
}
</View>
<View style={{flexDirection: 'row',flex:1}}>
<View style={styles.pickerWraper}>
<Picker
mode="dropdown"
style={styles.picker}
selectedValue="200gm"
itemStyle={styles.pickerItem}
onValueChange={this.onValueChange.bind(this)}
>
<Item label="200gm" value="key0" />
<Item label="1kg" value="key1" />
</Picker>
</View>
<Button iconLeft small style={[stylesheet.pr5,stylesheet.ml5,styles.subbutton]}>
<Icon style={{marginRight:4, marginLeft:6,color:colors.white}} active name="cart" />
<Text style={{color:colors.txt_white}}>Subscribe</Text>
</Button>
</View>
</View>
</TouchableOpacity>
Being a beginner to react native, and javascript framework as whole. i am really not sure what to look for to begin with. If anyone can give some pointer that will be very helpful. Thank you

I would solve this by basically following these steps:
In your render() method, you can basically set up your own variable to show the user a dynamic price. For instance, const displayPrice = !this.state.selected ? this.props.item.price : getPriceWithUnit(this.state.selected, this.props.item.price). Here I've checked to see if a unit has been selected (assuming the default is null). If not, then I use the default item price. If there is a saved unit that the user selected, then I use the value generated by the function below:
Set up a function getPriceWithUnit(unit, price) which basically converts the original price into whatever the new display price needs to be depending on the unit, where the unit is whatever you need via the selected state reference.
Instead of using the item price where you display it in the component, use this new variable displayPrice like <Text>{displayPrice}</Text>.
Then, whenever the user changes the value of the selected unit, it will trigger a state update. This will then cause the component to re-render, updating this variable as it does so.