Hello i'm new on react native. I am using react native elements slider in my project but want to select range with two marker. It is working with one marker.
Here is my code :
<View style={{backgroundColor: "#fff"}}>
<Slider
style={{ width: '90%',marginLeft:20,marginRight:20 }}
minimumValue={0}
maximumValue={100}
step={1}
value={this.state.cost}
onValueChange={cost => console.log(cost)}
/>
<Text style={{marginLeft:20,marginRight:20}}>{this.state.cost}</Text>
</View>
React Native Elements slider doesn't support multiple marker. However you can use this library if you need multiple markers
Related
I'm working on an app for react native. I'm using gifted chat for the chat feature and everything works great except for the new upload images feature I just implemented.
Under gifted chat, I have a custom view for the renderBubble method and it renders the images contained in the message. I also have the onLongPress method setup under GiftedChat to show the actionSheet.
The problem is, when I longpress the touchableOpacity view (which contains the image), it doesn't actually trigger the onLongPress method of GiftedChat, I would have to longpress slightly outside of the image (on the actual chat bubble) to trigger the onLongPress method, I tried passing the onLongPress functions to the touchableOpacity but it's missing the context returned by GiftedChat's onLongPress method so I can't do context.actionSheet().showActionSheetWithOptions inside of my own longPress method. Is there anyway around this without using react-native-actionsheet?
Here's my code for the rendering the image inside of my renderBubble method:
<View style={styles.imageContainer}>
{imageList.map((imageData, index) => (
<TouchableOpacity
key={index}
style={{ padding: 2 }}
onPress={() => this.setState({selectedImages: imageList, selectedImageIndex: 0, isImageViewVisible: true})}
//onLongPress={(context) => this.onLongPress(context, props.currentMessage)} <-Not working
>
<Image style={{ width: 100, height: 100 }} source={{ uri: imageData.source.uri }} />
</TouchableOpacity>
))}
</View>
Here's the code for GiftedChat:
<GiftedChat
{styles etc...}
renderBubble={this.renderBubble.bind(this)}
onLongPress={this.onLongPress}
>
Code I'm trying to run inside of my longPress function:
onLongPress(context, message) {
...
context.actionSheet().showActionSheetWithOptions({ <-context.actionSheet is not a function
when I longPress the image
option1,
option2,
...
}...
I have recently been learning react native and I am using expo. I want to make a responsive grid of clickable items. Similar to how an iphones main screen has a bunch of apps on it in a grid. My attemps so far have gotten me this:
For what you see in the image I am using a flat list with a fixed number of columns (hence one of the columns being cut off). The items in the list do not respond to clicks.
How should I go about making this into a responsive grid that adjusts to different phones screen sizes, have it scrollable (which it currently is) and have each item in the list respond to being pressed?
I appreciate anything pointing me in the right direction
you can do it in two ways.
1. by using ant rn design use "GRID COMPONENT"
<Grid
data={data}
columnNum={3}
isCarousel
onPress={(_el, index) => alert(index)}
/>
**Sample** : [Vist][1]
for more [visit here][1] .
By Using "FlatList"
<FlatList
data={[{},{}]} //array of objects
renderItem={({item}) => (
<TouchableOpacity
style={style.GridViewBlockStyle}
onPress={this._handleClick.bind(this, item.link, item.text)}
>
<View
style={{
height: 100,
justifyContent: 'center',
alignItems: 'center',
}}
>
{item.icon}
<Text style={style.GridViewInsideTextItemStyle}> {item.text}
</Text>
)}
</View>
</TouchableOpacity>
)}
numColumns={3}
keyExtractor={item => item.id.toString()}
style={{}}
/>
Sample Visit.
I'm trying to display a dropdown menu in a React Native android app. I used React Native Picker for the purpose, and it seems very limited in styling and positioning the dropdown menu. I cannot get the menu to pop up below the carret (the down arrow button) position.
I tried setting the margin with hope to push the menu down, to no avail.
<Picker
// selectedValue={stateValue}
style={{
height: 36,
width: 261,
}}
onValueChange={itemValue => {
console.log('item value ', itemValue);
}}
>
<Picker.Item key={-1} label={'Search By...'} value="first" />
{this.searchCategory.map((item, index) => (
<Picker.Item key={index} label={item} value={item} />
))}
</Picker>
</View>
The menu always covers the Picker component. I want it to appear below the Picker.
Actual behavior:
Expected behavior:
After some research, this is an Android limitation and it seems there's little we can do with React Native Picker. Some custom packages may give us more control such as https://www.npmjs.com/package/react-native-picker-select, or https://github.com/sohobloo/react-native-modal-dropdown.
I tried to use getItemLayout but didn't success. And I can't find any other related parameters in the react native documentation.
Use renderItemto customize your item rows
renderItem={({item}) => <View style={{ height: 80 }}> // ... </View>}
for example.
I've used deckSwiper of native-base in react native project. I want the users to be able to zoom the image in it as well. I didn't find anything to do that. How can I zoom the image of deck swiper in native base?
Code:
<DeckSwiper
ref={(c) => this._deckSwiper = c}
dataSource={cards}
renderEmpty={() =>
<View style={{alignSelf: "center"}}>
<Text>Over</Text>
</View>}
renderItem={item =>
<Card style={{elevation: 3}}>
<CardItem cardBody>
<Image style={{height: 300, flex: 1}} source={item.image}/>
</CardItem>
</Card>
}
/>
No, DeckSwiper doesn't provide zoom functionality. However you can use 3rd party library for that feature instead of using <Image>
Here are few 3rd party libraries which i have used in my applications.
1) react-native-image-zoom
2) react-native-image-viewer
But still, before using any of this library, you should check your requirement and check which one is best suited for you.
Its not about Deck Swiper supporting Image zoom feature
If React Native Image provides zoom feature by default, then NativeBase will obviously support this