I'm using React Native with NativeBase as follows:
https://snack.expo.io/#deltanovember/tab-swipe
I'm trying to implement the Advanced Deck Swiper here:
http://docs.nativebase.io/Components.html#deckswiper-adv-headref
My code is almost identical as the example, but my forward icon is aligned on the left of the button:
whereas based on the example, it should be aligned to the right of the button:
How do I make the alignment match the example (ie icon on the right of the button?)
this issue is because you did not set style for your <Body /> tag
This should work correctly
and try work with styles when see this in where ever in your project
this is your right button:
<Button
iconRight
onPress={() => this._deckSwiper._root.swipeRight()}>
<View style={{ flexDirection: 'row-reverse' }} >
<Icon name="ios-arrow-forward" />
<Text>Swipe Right</Text>
</View>
</Button>
Maybe just switching the icon and text will fix this but it's better to be regular :)
(Good luck this is my second answer to you my friend in day :DDDD )
You're placing icon and text in uncorrect order. I just switched them and it works:
<Text>Swipe Right</Text>
<Icon name="ios-arrow-forward" />
Related
Using NativeBase v3 library, There is leftIcon props, but it place icon near of title in center I need icon very left of the button, here is my component;
<Button
width="full"
primary
onPress={() => {}}
leftIcon={<Icon name="check" size={12} color="white" />}
>
<Text style={{color: 'white'}}> Checkout </Text>
</Button>
need to put icon as seem in pic below;
And, do you know whats name of the icon at right? :)
I think you're missing the as prop on your passed icon. And i think the placement can be changed if you add a style prop to the icon
try:
leftIcon={<Icon as={Ionicons} name="check" size={12} color="white" style={{alignSelf: 'flex-start'}} />}
And i think the icons on the right of your image is just three chevron-right with decreasing opacity
I have a bunch of text inputs:
<View style={styles.container}>
<View style={styles.textBoxContainer}>
<TextBoxMA
style={styles.textBox}
placeholder={Labels.USERNAME_PLACEHOLDER}
value={userName}
onChangeText={this.handleTextChange("userName")}
/>
</View>
<View style={styles.textBoxContainer}>
<TextBoxMA
style={styles.textBox}
placeholder={Labels.EMAIL_PLACEHOLDER}
value={email}
onChangeText={this.handleTextChange("email")}
/>
</View>
//here I need to put a Picker, or select element in html terms
</View>
Now, if I put a Picker like this:
<View
style={styles.textBoxContainer}>
<Picker
selectedValue={documentType}
onValueChange={this.handleDocumentTypeChange}
>
<Picker.Item label="ID" value="1" />
<Picker.Item label="Passport" value="212" />
</Picker>
</View>
I get a nice, clean picker in Android. But in iOS I get a picker whose items overlap with the rest of the text boxes and it takes a lot of space. So it destroys all the layout.
I understand that native components corresponding to a dropdown list in the two platforms are different. But how do you handle this?
I've taken a look at AirBnB's app which's been written in React native. In iOS, the view containing the picker slides from the bottom when a corresponding field is clicked (like the Gender field. It looks like a text input but it's not. It just causes the picker to show). And in Android, it's just a modal view with items in the radio button form. They've probably done lots of extra work to achieve that.
Do I need to show picker depending on the platform or is there a built in way to achieve this?
You can use community solutions like
react-native-picker-select
Or
react-native-picker-modal-view
Or
react-native-picker
Or you can build your own solution and do what ever you want you can style and position and even animate your component as you like.
I am working on a react native project. Where I need to implement drop-down with an input field. When I type anything in the input field it should filter the dropdown content.
I can't use react-native-dropdown on anything because it placed a mask on the whole screen and I am not able to type anything when the dropdown is open.
So I tried to implement my own drop-down.
<View style = {{position:'absolute', zIndex:5, backgroundColor:'red'}}>
<View style = {[Styles.dropdownView, {display:this.props.display}]}>
<ScrollView style={{ top:0, bottom:0}}>
{ listData.map((val, i) => <Text key = {i} > {val} </Text> )}
</ScrollView>
</View>
</View>
Every thing is working fine but I am not able to scroll it vertically. Though it's working fine with horizontal scroll.
Please help me to fix this or suggest some other way.
I'm having some problems with zIndex and position whilst styling a drop down list (react-native-menu). I want to make the drop down list appear on top of all other components on this scene when it's clicked. I'm trying to use zIndex and position but maybe not doing it correctly?
In my code (below), I'm rendering a hierarchy where Card > CardSection > various subcomponents of each. The drop down list consists of the components MenuContext (config) and TopNavigation (main drop down list).
return (
<Card>
<CardSection style={{zIndex: 2}}>
<View style={thumbnailContainerStyle}>
<Image style={thumbnailStyle}
source={{ uri: "" }}
/>
</View>
<View style={headerContentStyle}>
<Text style={headerTextStyle}>Tam</Text>
<Text>tam#tam</Text>
</View>
<MenuContext style={{ flex:1, zIndex:6, position:'absolute', flexDirection: 'column', alignItems: 'flex-end' }} >
<TopNavigation/> //this is
</MenuContext>
</CardSection>
<CardSection style={{zIndex: 1}}>
<Text style={{zIndex: 2}}>{props.post.body}</Text>
</CardSection>
</Card>
)
So the drop down is a child of the first CardSection. I've got it to appear over it's own parent CardSection but I can't get it to appear on top of the second CardSection that renders after. So I can't get it to show on top of it's parent's sibling.
I'm reluctant to use some plugin or workaround.
Any ideas? Thanks!!
So what was making it so hard to render the popup menu above things on the z-axis was the sibling of it's parent. So what helped me get the results I needed was looking more macro and moving <ContextMenu/> higher in the component hierarchy, out of this component altogether and into it's parent.
I should have inferred this since the docs for the original package I used had ContextMenu in the entry point to the app and comments such as:
// You need to place a MenuContext somewhere in your application,usually at the root.
// Menus will open within the context, and only one menu can open at a time per context.
My mistake was getting lost in the micro world of zIndex and position and assuming that what looked like a styling problem should be solved with a styling solution. I forgot about the bigger picture.
In this following example, my add-to-favorites button is not right aligned and is black instead of white. I don't see any styles defined anywhere and I can't seem to get to the safari inspector using exponent.
Incorrect
Correct white star that's right aligned
Looking at the sample code
https://github.com/shoutem/ui/blob/develop/examples/components/Tiles.js
- it looks like it should style it to white and right aligned but it doesn't do so in my case. Do I need to wrap it in an enclosing style? How do i debug this?
render() {
return (
<View style={styles.container}>
<Image
styleName="large-banner"
source={{ uri: 'https://shoutem.github.io/img/ui-toolkit/examples/image-3.png' }}
>
<Tile>
<View styleName="actions">
<Button styleName="tight clear"><Icon name="add-to-favorites" /></Button>
</View>
<Title>HOW TO MAINTAIN YOUR MENTAL HEALTH IN 2016</Title>
<Caption>6557 Americo Hills Apt. 118</Caption>
</Tile>
</Image>
....
It was because I was importing View from react-native. Once I started to import View from #shoutem/ui it carried over the correct styles.